教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
本教材は UI フレームワークの1つである React
と静的型付け言語の TypeScript
を使い、ブラウザだけで動くマークダウンエディタを制作します。
ライブラリを最小限に使い、設定ファイルなども0から作成することで、モダンなフロントエンド開発の基本を学んでいきます。
教材を進めて行く上で質問項目がございましたら、「質問」の箇所からご質問ください。
cd
ls
などの操作ができるレベル)主に以下のような方を対象に執筆しています。
React
を使ったフロントエンド開発にチャレンジしたい方create-react-app
などで開発をしたことがあるが、どうやって動いているのかを理解したい方よって以下のような方には向かない内容になっています。
本教材は、モダンなフロントエンド開発の基本を一通り学んで理解することで、より発展的な開発をしてくための基礎を作ることを目的としております。
CSS
を使いますが、詳細な解説はしません。このようなブラウザで動作するマークダウンエディタを作成します。
左側へテキストを入力すると、右側にリアルタイムでプレビュー表示できるエディタを作ります。
詳しくは「0-4 エディタの設計」で解説します。
本教材を進める上での環境を整えたり、設計を解説していきます。
React
+ TypeScript
+ webpack
を使った開発環境を作ります。
React
で JSX
を使ってプレビュー付きのマークダウンエディタ画面を作ります。
IndexedDB
を使って、入力したテキストを保存する機能を作ります。
3章で保存したテキストを復元できる画面と機能を作ります。
WebWorker
を使って、大量のテキストを入力してもサクサク動くように変換機能を作ります。
いわゆる PWA
の一部の機能を使い、ネイティブアプリのような体験ができるサイトを試します。