この本は簡単な Todo リストを題材に、React を使わずに実装するとどういう点が苦しくなるかを経験した上で React に入門する本です。 React の使い方についての入門書はたくさんありますが、なぜ React にあのような機能があるかについてはあまり述べられていない気がして、そこを補う必要性を感じたので書きました。公式チュートリアルで挫折した人にとっての特効薬を目指しています。React の必要性を理解すれば、React の文法の理解が捗るはずです。
React の入門に苦労している人の共通点
私はこれまで職場での講習や、TechTrain というオンラインメンタリングサービスを通じて延べ 100 人以上の React 初学者に、合宿やマンツーマン形式で React を教えたことがあります。そのような活動を通じて React 初学者のつまずく箇所というのがなんとなく見えてきました。
React の良いところとして JSX が HTML と非常に似ていることから、理解できなくても慣れてしまえば、「React は f(data) = UI だ」という考え方を体が覚え、アプリケーションを作っていくことができます。ただ、どうしても最初は、「どうして state を定義しないといけないのか」といった疑問を抱えたまま使い続けなければいけません。きっと疑問を持ったままでも開発し続けていればだんだん使い方がわかってくるのでしょうが、抱えた疑問を解消できず React の学習に挫折してしまっているケースをよく見ます。特に state 周りでつまずくと慣れるという段階にも進むことができません。
多くの方は公式チュートリアルに目を通していますが、他言語や他 FW の経験がない人は挫折する傾向があります。特に JS 経験者であっても、Web ページを作っていた経験があるが、Web アプリケーションを作るのが初めてという方はつまづいています。反対にモバイル開発やバックエンド開発の経験があり、MVC などの設計を知っているとそれらのアーキテクチャの辛い点や経験から、React が何を解決したかを理解することでスムーズに学習を進められています。state を中心に置くことで、Controller 内の手続きを消したり、View に依存しないコードを書けることに気づくわけです。そこで、つまずいた人に対しては MVC とは何かといった寄り道を挟むことで理解を促してみたところ、state 周りでつまずくことが減り、効果を実感しました。
React を使うモチベーションから理解しよう
そこで本書では React がなぜ state を中心にするような書き方をしているのかを、state がないとどうなるかを経験しながら学ぶ方針で書きました。そのためこれから皆さんには React がない状態で開発するとどんな苦しみがあるかを MVC のような古典的な設計を通して経験してもらいます。
本書で作る題材はただの Todo リストで、それもかなり機能を削いだものです。使い古された題材で難易度は低くチュートリアルもたくさん出回っています。しかし React を使わずに作るとなれば、意外と大変な思いをしたり、違和感を抱えるでしょう。ましてや一度 React に入門したことがある人ほど強くそう感じるでしょう。そのため本書は 一度 React に挫折した人にとっては特に効き目があります 。この本を読めば、React を使わずに作ると何が辛くて、React を使うと何がうれしくなるかを理解し、React が提供している API の使い方や思想を理解できるでしょう。
対象読者
- 公式のチュートリアルやその他チュートリアルを読んでも理解が難しかった方
- なんとなくで React の使い方を覚えている方
Todo リストを作れるようになる以上のレベルは扱わないです。もし自分が対象読者かどうか分からなければ無料公開部分とサンプルコードを先に読むことをオススメします。
本書を実行するために必要な環境
~5 章
- Google Chrome 最新版
- エディタ
6 章
- Node.js
React のビルドのために使いますが、もし環境構築が難しければオンラインエディタを利用してください。
注意事項
本書の効果を得るためには苦しむことが必要です。是非とも本書を元にサンプルコードを再実装しながら苦しんでください。
サンプルコード
サンプルコードはこちらから DL できます。
表紙画像