More than 1 year has passed since last update.

React初学者がWEBアプリを作るための情報まとめ

Posted at 2021-12-07

あらまし

2021/10～11でWEBアプリを作る機会があり、そこで初めて、Reactを実際に使ってみました。
その際に色々調べて、「この情報は最初から知っておきたかったな」というポイントがあったため、記事にまとめました。
同じような状況の人に役立てば嬉しいです。

すみませんが、自分一人の案件ではないためお見せできないです。
ざっくり言うと、食べログのようなサイトを作りました。

Reactは選択肢が多いようです。これはメリットなのだと思いますが、初見だと道に迷ってしまいました。
最終的には、Easyであることを優先して以下の様に決めました。

Create React Appを使いました。
Next.js も候補ではありますが、初学者であればCreate React Appをお勧めします。
初学者向けの情報はCreate React Appを使ったものが大半であるためです。

ルーティング機能はReactとは分離されており、別途インポートする必要があります。
使ったのはReact Routerです。
現在のv6がリリースされていることに注意してください。

入力フォームの実装にはReact Hook Formを使うと楽でした。
ReactではStateで状態を管理する必要があり、これが中々の苦です。
React Hook Formで済ませるのが楽です。

簡易なWEBアプリを作るなら、Reduxは一旦スルーして問題ないです。
React Hooksで十分でした。

TypeScroptを全く知らない場合、残念ながら、ある程度の困難が待ち受けています。
しかし、それでも「最初からTypeScroptを使うべし」です。
その方が保守性が格段に上がり、継続的な開発がEasyになるからです。

MUIはコンポーネントライブラリです。
文字通りコンポーネント（UI部品）をまとめたライブラリで、ボタンや文字入力などの便利コンポーネントが一通り用意されています。
styled-componentsなどのスタイリングライブラリとは似て非なるものです。

もし、開発体制にデザイナーがいないのであれば、MUIは特におすすめです。
サイトの見た目を一定のクオリティにでき、使い方はVery Easyです。

v5 から使い方が少し変わってます。使う場合は公式のサンプルを参考にしてください。

バックエンドの処理はFirebaseに任せました。
Firebaseは認証やDBなどを（ある程度無料で）提供してくれているGoogleのプラットフォームです。
以下の機能があります。（★は今回使ったもの）

認証やDBはWEBアプリを作る上でほぼ必須です。しかし、自分で作るとかなり大変です。
（Firebaseも大変だよ！と思うかもしれませんが、自分で作るともっと辛いのです。）
個人または少人数の開発であればFirebaseをお勧めします。

現在、FirebaseWeb SDK はv9 がリリースされていることに注意してください。

React Firebase Hooksを使うと、Firestoreからのデータ取得がすっきりと書けます。
ただ、更新系の処理は無いんですよね。（あるのかな……？）
ReactのStateについて十分理解していれば、必要ないかもしれません。

技術スタックは以上です。

大きく分けて、二つのハードルがあります。Reactと、Firebaseの二つです。

最初はこの本で基礎を固めると良いです。（アフィリエイトはやってないです）

公式チュートリアルを読んでも良いのですが、この本はトピックが明確なので理解しやすかったです。
「React難しそうだな」と感じている人にお勧めです。

基礎さえ分かってしまえば、あとは何とかなります。
WEB記事あさるもよし、他の本読むもよし、目的に応じて自由に動けるはずです。

公式の入門ガイドがお勧めです。
躊躇するかもしれませんが、取りあえず始めてみることをお勧めします。

私自身、まだまだ勉強中ですので「こんなものがお勧めだよ！」という情報があればぜひ教えてください。
以上です。