あらまし
2021/10～11でWEBアプリを作る機会があり、そこで初めて、Reactを実際に使ってみました。
その際に色々調べて、「この情報は最初から知っておきたかったな」というポイントがあったため、記事にまとめました。
同じような状況の人に役立てば嬉しいです。
作ったもの
すみませんが、自分一人の案件ではないためお見せできないです。
ざっくり言うと、食べログのようなサイトを作りました。
技術スタック
Reactは選択肢が多いようです。これはメリットなのだと思いますが、初見だと道に迷ってしまいました。
最終的には、Easyであることを優先して以下の様に決めました。
React
Create React Appを使いました。
Next.js も候補ではありますが、初学者であればCreate React Appをお勧めします。
初学者向けの情報はCreate React Appを使ったものが大半であるためです。
React Router
ルーティング機能はReactとは分離されており、別途インポートする必要があります。
使ったのはReact Routerです。
現在のv6がリリースされていることに注意してください。
React Hook Form
入力フォームの実装にはReact Hook Formを使うと楽でした。
ReactではStateで状態を管理する必要があり、これが中々の苦です。
React Hook Formで済ませるのが楽です。
使わない | Redux
簡易なWEBアプリを作るなら、Reduxは一旦スルーして問題ないです。
React Hooksで十分でした。
TypeScript
TypeScroptを全く知らない場合、残念ながら、ある程度の困難が待ち受けています。
しかし、それでも「最初からTypeScroptを使うべし」です。
その方が保守性が格段に上がり、継続的な開発がEasyになるからです。
Material-UI (MUI)
MUIはコンポーネントライブラリです。
文字通りコンポーネント（UI部品）をまとめたライブラリで、ボタンや文字入力などの便利コンポーネントが一通り用意されています。
styled-componentsなどのスタイリングライブラリとは似て非なるものです。
もし、開発体制にデザイナーがいないのであれば、MUIは特におすすめです。
サイトの見た目を一定のクオリティにでき、使い方はVery Easyです。
v5 から使い方が少し変わってます。使う場合は公式のサンプルを参考にしてください。
Firebase
バックエンドの処理はFirebaseに任せました。
Firebaseは認証やDBなどを（ある程度無料で）提供してくれているGoogleのプラットフォームです。
以下の機能があります。（★は今回使ったもの）
- Authentication : 認証（ログイン、ログアウト、ユーザの管理）の機能★
- Cloud Firestore : NoSQL DB。公式がこちらを推している★
- Realtime Database : NoSQL DB。いつ使うべきなのかは謎
- Strage : 画像ファイルなどを保管する機能★
- Functions : 独自の機能はこれで自作する★
- Machine Learning : 機械学習の機能が使えるようですが未経験なため謎
認証やDBはWEBアプリを作る上でほぼ必須です。しかし、自分で作るとかなり大変です。
（Firebaseも大変だよ！と思うかもしれませんが、自分で作るともっと辛いのです。）
個人または少人数の開発であればFirebaseをお勧めします。
現在、FirebaseWeb SDK はv9 がリリースされていることに注意してください。
React Firebase Hooks
React Firebase Hooksを使うと、Firestoreからのデータ取得がすっきりと書けます。
ただ、更新系の処理は無いんですよね。（あるのかな……？）
ReactのStateについて十分理解していれば、必要ないかもしれません。
技術スタックは以上です。
勉強方法
大きく分けて、二つのハードルがあります。Reactと、Firebaseの二つです。
Reactの勉強
最初はこの本で基礎を固めると良いです。（アフィリエイトはやってないです）
公式チュートリアルを読んでも良いのですが、この本はトピックが明確なので理解しやすかったです。
「React難しそうだな」と感じている人にお勧めです。
基礎さえ分かってしまえば、あとは何とかなります。
WEB記事あさるもよし、他の本読むもよし、目的に応じて自由に動けるはずです。
Firebaseの勉強
公式の入門ガイドがお勧めです。
躊躇するかもしれませんが、取りあえず始めてみることをお勧めします。
私自身、まだまだ勉強中ですので「こんなものがお勧めだよ！」という情報があればぜひ教えてください。
以上です。