カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-1

ブラウザだけで使えるマークダウンエディタを作る

本教材は UI フレームワークの1つである React と静的型付け言語の TypeScript を使い、ブラウザだけで動くマークダウンエディタを制作します。
ライブラリを最小限に使い、設定ファイルなども0から作成することで、モダンなフロントエンド開発の基本を学んでいきます。

教材を進めて行く上で質問項目がございましたら、「質問」の箇所からご質問ください。

学習内容

受講における必要条件

  • HTML, CSS の基礎知識
  • JavaScript の基礎知識
  • ターミナルの基本操作(cd ls などの操作ができるレベル)

この教材の対象者

主に以下のような方を対象に執筆しています。

  • React を使ったフロントエンド開発にチャレンジしたい方
  • ブラウザの機能を使った開発を試してみたい方
  • フロントエンド開発を基礎から学びたい方
  • create-react-app などで開発をしたことがあるが、どうやって動いているのかを理解したい方
  • 実際にコードを書いて、どう動いているのかをキチンと理解して学習したい方
  • Mac をお使いの方(Mac 以外の環境での学習は、質問対応などのサポート対象外とさせていただきます)

よって以下のような方には向かない内容になっています。

  • 豊富なライブラリをどんどん使って効率のよい開発を学習したい方
  • 基本的なことを理解しており、たくさんコードを書いて練習したい方

学ばないこと

本教材は、モダンなフロントエンド開発の基本を一通り学んで理解することで、より発展的な開発をしてくための基礎を作ることを目的としております。

  • 大規模なアプリケーション開発のノウハウや、扱うライブラリの詳細なオプションやチューニングなどは対象としていません。
  • Google Chrome のみで動作確認をし、ブラウザごとの差異については解説しません。
  • スタイリングのために CSS を使いますが、詳細な解説はしません。

本教材の対応バージョン

  • macOS Catalina
  • Google Chrome: 81系(執筆時点。基本的に最新版を使ってください)
  • Node: 14系
    • ※2021-05-08追記: 12から14系に教材をアップデートしました
  • React: 17系
    • ※2021-05-08追記: 16から17系に教材をアップデートしました
  • Webpack: 5系
    • ※2021-05-08追記: 4から5系に教材をアップデートしました
  • TypeScript: 4系
    • ※2021-05-08追記: 3.8から4系に教材をアップデートしました

作成するアプリケーションのイメージをつかもう

このようなブラウザで動作するマークダウンエディタを作成します。
左側へテキストを入力すると、右側にリアルタイムでプレビュー表示できるエディタを作ります。

app image

詳しくは「0-4 エディタの設計」で解説します。

目次

0章 はじめに

本教材を進める上での環境を整えたり、設計を解説していきます。

1章 プロジェクトを作る

React + TypeScript + webpack を使った開発環境を作ります。

2章 エディタ画面を作る

ReactJSX を使ってプレビュー付きのマークダウンエディタ画面を作ります。

3章 テキストを保存する

IndexedDB を使って、入力したテキストを保存する機能を作ります。

4章 保存したテキストを閲覧する

3章で保存したテキストを復元できる画面と機能を作ります。

5章 マークダウンのプレビューをバックグランドスレッドで実行する

WebWorker を使って、大量のテキストを入力してもサクサク動くように変換機能を作ります。

6章 ネイティブアプリのように使えるようにする

いわゆる PWA の一部の機能を使い、ネイティブアプリのような体験ができるサイトを試します。

更新履歴

  • 2021-05-08: ライブラリバージョンを最新化しました
現在のパート (0)
全パート (35)
みんなで助け合おう!
現在のパートのディスカッション 全0件