Chapter 01無料公開

イントロダクション

Kei Touge
Kei Touge
2021.11.22に更新

免責事項

必ず最初にお読みください。

この書籍は、以下の記事が望外の好評を博したため、大幅な増補・加筆修正を加えて再編したものです。

https://zenn.dev/sprout2000/articles/60cc8f1aa08b4b

第 17 章以降を有料とさせていただいていますが、あくまでもサポートを募る意味しかありません。

有料部分を購入しなくとも React アプリケーション作成の入門書としては完結しています。
ご購入いただく際にはこの点をご承知おきください。

はじめに

本書では、React 16.8 で導入された Hooks の機能を使って Todo プログレッシブ・ウェブアプリ(以下、PWA)を作成します。

https://ja.reactjs.org/docs/hooks-intro.html

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

https://sprout2000.github.io/todo/


デスクトップ版ブラウザでの表示


iOS へ PWA としてインストールした後

また、現在のフロントエンド開発環境でデファクト・スタンダードとなりつつある TypeScript を利用することによって型安全な実装の実現も目指します。

https://typescript-jp.gitbook.io/deep-dive/getting-started/why-typescript

本書が対象とする読者

この本では、以下のような人を読者として想定しています。

  • ある程度 JavaScript を習得している人
  • React 公式チュートリアルを終えたものの、次のステップを探しているような人
  • Node.js をインストール済みである人
  • Git Bash もしくは何らかの UNIX シェルの操作をある程度習得している人

https://jsprimer.net/

https://ja.reactjs.org/tutorial/tutorial.html

https://nodejs.org/ja/

https://git-scm.com/

また、本書ではコードエディタとして Visual Studio Code (以下、VSCode)を利用します。VSCode に備わる機能の利用を前提とした記述もありますので、インストールしておくことをおすすめします。

https://code.visualstudio.com/

目標とする Todo アプリ

  • タスク (Todo) を既済・未済・削除済みなどの状態によってフィルタリングできる
  • 登録済みタスクを編集できる
  • 削除済みアイテムを「ごみ箱」フィルタから完全に削除できる
  • ブラウザのストレージ (IndexedDB) にタスクの状態を保存し、ページの再読み込み後にもその状態を再現できる
  • PWA として端末にインストールすることも可能

他のおすすめのドキュメント

https://ja.reactjs.org/tutorial/tutorial.html

https://ja.reactjs.org/docs/hooks-intro.html

https://typescript-jp.gitbook.io/deep-dive/

https://zenn.dev/sprout2000/articles/36346c26f98e6e