基礎から学ぶ React入門

配信動画はこちら
https://www.youtube.com/watch?v=cmyXjhk6IU4

もし良かったらムーザルちゃんねるのチャンネル登録お願いします！
https://www.youtube.com/channel/UCLPHXwLp90A5R69Eltxo-sg

Twitter でもプログラミングネタをつぶやいているのでフォローお待ちしております。
ムー
https://twitter.com/mu_vpoe
zaru
https://twitter.com/zaru

Transcript

1. YouTube Live (2020.07.09 Thur. 21:00~) CTO と VPoE が初学者向けに講義する オンライン勉強会です。 随時質問なども受け付けていますので、 お気軽にどうぞ。 ハッシュタグ #mu_zaru
2. 今日話す事とゴール 話す事 - React が解決する事と解決方法 - React 簡単なコンポーネントの作り方 ゴール - React が何に役立つのか理解している - 見た後に React を書ける気がする・書きたくなる状態 話さない事 - Vue や Angular との違い - Redux や Recoil などのステート管理ライブラリ
3. 作るサンプル いいねボタン
4. 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe エンジニアリングMgr。 チームづくり、採用。 Twitter 担当。 数学が好き。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いします！
5. React が解決するもの
6. インタラクティブな UI と ロジックの複雑性から 生じる苦痛を取り除く
7. どうやって解決するのか
8. コンポーネント指向 と 宣言型 UI
9. コンポーネント指向
10. ボタンコンポーネント コンポーネント指向とは 機能単位でまとめる HTML <button> JavaScript クリックした処理 別々のファイ ルに書かれ距 離が遠い 普通の作り方 UI とロジックを分離させるスタイル HTML <button> JavaScript クリックした処理 コンポーネント UI とロジックを集めるスタイル 同じファイル に書かれて距 離が近い
11. コンポーネント指向とは 機能単位でまとめる HTML <button> JavaScript クリックした処理 別々のファイ ルに書かれ距 離が遠い 普通の作り方 UI とロジックを分離させるスタイル HTML ファイルは UI の構造のみにし、 操作のロジックは JavaScript ファイル に分離する。構造の依存度を下げるよう にしている。 悪くない方法だが UI とロジック・デー タ構造は、実際には密に結合されている ことが多いため、結局は依存してしまう ことが多い。
12. ボタンコンポーネント コンポーネント指向とは 機能単位でまとめる HTML <button> JavaScript クリックした処理 コンポーネント UI とロジックを集めるスタイル 同じファイル に書かれて距 離が近い UI とロジック・データ構造を一つのコン ポーネントという単位でまとめることで 高凝集にし保守しやすくする。 またコンポーネント同士は疎結合にする ことで再利用性を高める。
13. 高凝集 機能 A 1つの機能を実現させるための コード群の距離が近い事。 集まっているコードは、その機能 を実現させるために協調して動 く。 疎結合 機能 A それぞれの機能が独立し合い、依 存度が低い状態。 結合度が低いと、他の機能を気に することがなく修正が加えやす い。 機能 B 設計 Tips
14. 宣言型 UI
15. 宣言型 UI は状態を書くと 自動で構築される JavaScript 命令型 UI 命令を積み立てていって組み立てる HTML <button> React 宣言型 UI 状態を宣言して自動で構築する HTML <button> 背景 赤くして 太字 にして 文字を 白にして 背景: 赤 文字色: 白 フォント: 太字 宣言を元に HTML を作るよ
16. 命令型 UI のコード例 もし、まだいいねしていない 状態だったら、like クラスを 取り除いて、liked クラスを 追加する処理 命令型の場合は、今どういう UI になっているかを 気にしながら UI 構築コードを書いていく必要がある。
17. 宣言型 UI のコード例 現在のクラスを気にせず、指 定したいクラスを定義し、後 は React にお任せする 宣言型の場合は、今や過去の状態は気にしなくても あるべき姿を定義すれば自動で構築してくれる。
18. React を使ってみる
19. とりあえずこの3行を HTML に突っ込めば、すぐに React が使える！ 実際に React をガッツリ使っていくにはビルドシステムを導入した方が良 かったりするけど、それはまた別の機会に。今回は React が使えるようにな るところまで。 React を使ってみる
20. 要件 ボタンをクリックすると、色が反 転する。再度クリックすると元に 戻る。 いいねボタンを作ってみる
21. その1. 関数コンポーネント コンポーネントと言っても実は普通の JavaScript の関数で作れる。 また React.Component を継承したクラスでもコンポーネントが作れる。 どちらが良いかというと現時点では関数ベースで作っていく方が推奨されている。 が、クラスが非推奨というわけではないので、最初は好みで試してみてください。 コンポーネントの作り方は2種類ある その2. クラスコンポーネント
22. HTML <div id="app"></div> React ボタンコンポーネント コンポーネントを DOM に変換をして HTML に埋め込む 出力は ReactDOM.render にお任せ ReactDOM.render
23. コンポーネントを作って表示する いいねと文字を表示するだけのコンポーネントを作る。
24. コンポーネントを作って表示する この関数がコンポーネント 関数名は大文字で始める必要がある
25. コンポーネントを作って表示する ここで React がコンポーネ ントを DOM に変換して、 HTML に挿入する コンポーネント名は関数名と同じ。呼び出す ときは HTML タグと同じように <Name /> や <Name></Name> のカッコで囲む
26. JSX を使ってみる HTML <button> タグを使ってボタンを表示する
27. JSX を使ってみる これが JSX HTML のタグのように見える けど実態は少し違う。
28. HTML と JSX の違い HTML JSX JSX でも HTML のタグを使うことができる 属性もそのまま使える
29. HTML と JSX の違い HTML JSX CSS などで使う class は JSX では className と言う属性名になる
30. HTML と JSX の違い HTML JSX JSX では { } で囲むことで JavaScript のコードを実行できる
31. HTML と JSX の違い HTML JSX 独自のコンポーネント（タグ）を作 ることができる。大文字で始まるも のは独自コンポーネント。
32. HTML と JSX の違い HTML JSX HTML と同じようにコンポーネント を入れ子にすることができる
33. JSX は JavaScript を拡張した構文。 React.createElement() という関数に変換されて実行される。 JSX は JavaScript の拡張構文
34. クリックイベントを設定してみる onClick イベントに関数を設定する
35. UI のイベントは HTML と同じ感じ HTML と同じようにクリック時の挙動 を JavaScript で書くことができる
36. イベントは関数オブジェクトを渡す onClick={ () => alert() } JS で書くよ宣言 処理したい本体 無名アロー関数 処理したい本体の関数を囲って 関数オブジェクトを onClick に渡す onClick={ alert() } 直接、実行したい関数をここで書く と、クリック時ではなく表示時に実行 されてしまう ✖ onClick={ function() { alert() }} function hoge() { alert() } onClick={ hoge } こう言う書き方でも OK
37. まだいいねしてない いいね済み ボタンをクリックしたら、ボタンタグに like / liked クラスを付け替えるようにする。 見た目は CSS で切り替え
38. いいね済みかどうかの状態を持つ 「いいね前」と「いいね済み」のトグルにする
39. コンポーネント コンポーネントは内部で状態を保持することができる。これを React では state と呼ぶ。state を更新することで UI の表現や挙動を変えられる。 このことをデータバインディングや単方向データフローなどと表現したりする。 React では基本、この state を良い感じに管理・設計するのがポイント。 状態（=state）が変わると UI も変わる いいね済み 名前 お気に入り 最終アクセス日 HTML いいね済みの state を更新すると UI 表 示が変わる 変換 反映
40. いいね済みかどうかの状態を持つ useState() を使うことで state 管理ができる [状態の変数, 状態を変更する関数] = useState(状態の初期値)
41. いいね済みかどうかの状態を持つ liked : state の変数 setLiked : state を変更する関数 (*) 名前は何でも良い false: state 変数の初期値
42. いいね済みかどうかの状態を持つ state の変更は、state 変数を直接修正しても変更は 反映されない。反映させるには変更関数を使う必要が ある。 NG : liked = true OK : setLiked(true)
43. いいね済みかどうかの状態を持つ ボタンをクリックしたら、setLiked() を使って状態を変更 する。 ! を使って true -> false ・ false -> true という ように Bool を反転させている
44. いいね済みかどうかの状態を持つ 今の状態によって className が変わる。 「いいね済み」だったら、liked クラス、そう じゃないなら like クラスを付ける条件式 指定のクラスでボタンタグを描画してねと宣言す る
45. コンポーネントの値を外から与える ボタンのテキストを変更する
46. コンポーネントの値を外から与える コンポーネントに属性値を使って自 由に値を与えることができる
47. コンポーネントの値を外から与える コンポーネント関数の引数に props と言う名前で受け取れる props.属性名 で値にアクセスできる
48. 2つのコンポーネントを協調させる
49. 要件 ボタンをクリックし、いいねをし たら合計のいいね数が増える。再 度クリックして、いいねを外すと 合計のいいね数が減る。 いいねボタンを改造する
50. まずは完成のコード
51. LikeButtonComponent 一つの大きなコンポーネントを作ることもできるが、細かく役割ごとに分けて 作った方が保守性が高まる。コンポーネントが複数の役割をもっていないか検 討しながら書くと良い。 React では一番上に1つのコンポーネントしか持てないので、分割した際には親 子ツリーのように、まとめる親コンポーネントを作る。 コンポーネントは役割ごとに作る LikeButton LikeSummaryText いいねするだけのボタン いいね数を表示するだけ 2つをまとめる親
52. 2つのコンポーネントをまとめる親コンポーネント
53. LikeButtonComponent コンポーネントの中に別のコンポーネントを埋め込み親子関係にすることがで きる。コンポーネント同士のデータ連携は props（プロパティの略）で行う。 props には数値などのデータ以外にも関数を渡すこともできる。 コンポーネント間のやり取りは props LikeButton LikeSummaryText いいね数 props いいね数 このコンポーネント自身はいいね数は持って いないが、親コンポーネントから props 経由 でもらって使うことができる。
54. コンポーネントの属性に指定した値 を、子コンポーネント関数の引数で 受け取ることができる
55. ありがとうございました！ 次回は… Linux コマンドやターミナルについてやります。 質問感想など呟いていただけると嬉しいです！ ハッシュタグ #mu_zaru