AppBrewフロントエンド学院~Reactを書いてみよう~
概要
最低限、Reactをかけるようになる
- Componentを作ってみる
- Componentって
- 実際に書く
- 動きをつける
- hooksについて
- useState
- useEffect
- hooksのルール
- 実際にstateを作ってみる
- Todoアプリを作る
- 完成形
- 一覧で表示できるようにする
- keyについて
- Form部分を作る
- 発展(時間が余れば)
- web apiを呼んでみよう
- axios、useSWRを使ったapi通信
必要なもの
GitHubアカウント
前もって見ていると嬉しいもの
本題
そもそもReactってなんやねん?
- Facebookが2013年ごろから公開しているUI構築のためのJavaScriptライブラリ
- フレームワークではない
- そのため、他のフレームワーク(Angular、Vue)と違って画面の描画に特化している
- 今までのjsとかjQueryと違ってメモリ上でUIの状態等を保存し(fiber)、DOMと同期している(仮想DOM)
- とはいえ最近のトレンドは脱仮想DOMだったりする
- Svelte、SolidJSとか
- 最近はパフォーマンス向上のためにサーバー側でのレンダリング等かなり際どいこともやり始めてる(Next.js)
Componentを作ってみる
ここからはcodesandboxのコードを使っていきます
Componentとは?
雑にいうとパーツ。UIを構築する1要素
- ボタン
- フォーム
- ヘッダー
ReactではこのComponentを定義し、組み合わせて画面を作っていく
実際に書く
- なんかHTMLみたいなのが混ざっているけどこんなふうにかく(JSX)
- 基本的にComponentは関数として定義する
- 引数(後述。propsという)を受け取ってUI(HTML)を返す
- 古い記事やライブラリだと、class componentと言われるスタイルで書かれていることも…
- これは今回無視でいいです。(AndroidのプロジェクトみたらKotlinじゃなくてJavaでした、に近い)
- propsがこのcomponentの引数のようなもの
- 「UIは何かしらの状態(props)の写像（
なんすか、しゃぞーって）」という思想の表れでもある(大事)
- HTML内で変数等を参照する場合はと書く(そうしないと文字として認識されます)
- propsのなかにobjectの形でparamが突っ込まれる
動きをつける
Reactでは画面にインタラクション(クリックしたら値が変わるとか生JSとかjQueryで辛かったあれ)が簡単にできます
ただ、これでは動きません。
可変な状態を作るにはuseStateというhooksを使う必要があります。
hooksについて
↑詳細な説明は上に載っているが、
State(状態)を持ったロジックを再利用可能な関数にすることができる
が大きなモチベーションだったりする
これによって
- どこでもよく使うような処理(modalのon/off)を共通化
- APIの呼び出し(ローディング、エラーハンドリング、表示)をhooksで隠蔽してUIに提供
- クエリパラメータの値やその変更等を関数化してReactから利用しやすい形で提供
- …
など様々できる
実際にstateを作ってみる
という形でstate(状態を定義できる)
さっきのアプリはこのようになる
useEffect
データの取得だったりDOM操作などのレンダリング中に行えない動作をreactでは副作用というがこれらを実現可能にするのがuseEffect
こうしてあげることでレンダリングごとに実行される。(が、ここらへん、最新のReactだとややこしい話があります)
ただ、再レンダリングされるたびに呼び出される必要がなかったりする
- 値が変更された時だけ評価してほしい
- apiのparamが変わったとか
- マウント(雑にいうとコンポーネントが表示される直前)にだけ実行したい
ということの方が多いので、そういう場合は第二引数に配列を用意
クリーンアップが有用になるのは以下のようなケースとか
クリーンアップしなくて良いときは値を返さない。
hooksのルール
こんないろんなことができそうなhooksですが、色々とルールがあります
- React componentの中でしか使えない
- そのため、カスタムhook含めて、componentからしか呼べません
- トップレベルで使う
- なので、条件分岐とかより前に書く必要があります
Todoアプリを作る
今回はこのようなアプリを実装してみます
コンポーネントとしてはこのように作ると綺麗にできます
Todoコンポーネント自体が親コンポーネントとなっていて、タスクの一覧を保持し、追加などの管理も行なっています。
それでは、インタラクションが絡まないTodoListから作っていきましょう
一覧で表示できるようにする
Todoがタスクリストを保持しているので、子要素であるTodoListコンポーネント側では、親の持つタスクリストを受け取るようにして表示します。
これで親からデータが渡ってきたので表示部分を実装します。
jsにはmap関数(rubyと同じ)があるので、それを使ってあげます。内ではHTMLテンプレート内でもjsのコードが書けます
ただ、このように書くと、表示はされますが、開発者ツールでこのようなエラーが出るかと思います。
そうです、mapなどで同じ要素を動的に生成した際にはkey attributeを仕込む必要があります。Reactはこれをもとに要素の更新や追加、削除を行います。
ここで大事なのは
keyが一意であること
です。これを間違えると、正しく表示されないなどの不具合が出てきます。
特にこのようなシンプルな例では起こり得ないですが、APIなど、要素が複雑かつ多くなる場合、表示がおかしくなる可能性があります。
Form部分を作る
見た目としてはinputとボタンを用意します。
Reactのstateの値はreadonlyなので、このままだと値の変更がされません。
そのため、inputタグの変更に合わせてvalueの値が変わるように実装します
これで、値を自由に書き換えられるようになりました。
実際に動くように仕上げる
最後に、具体的にタスクの追加等のロジックを作りましょう。