宣言的UIに親しもう！ Reactハンズオン

イベントで使ったスライドです！

Transcript

1. 宣言的UIに親しもう！ Reactハンズオン 8/13 14:00~16:00 @Engineer Cafe
2. 自己紹介 金池撤 （キムジチョル） 九大共創学部2年生 8年前韓国から日本へ エンジニアカフェでスタッフしています 普段はWeb開発しています
3. 施設紹介 エンジニアカフェ 福岡市が運営 エンジニア関連の方を支援 随時イベント開催 普段はコワーキングスペースで ご利用いただけます
4. React とは？ フロントエンド開発を 超楽にしてくれるライブラリ
5. React の特徴 宣言型UI コンポーネント 指向 Single Page Application 1 2 3
6. コンポーネントとは？ 再利用可能な部品
7. コンポーネントとは？ 自分で作るHTMLタグ
8. 具体例（コンポーネントなし） 参考：https://react.dev/learn/your-first-component
9. 具体例（コンポーネントあり）
10. props とは？ properties（属性） 参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img
11. props とは？
12. コンポーネント指向のメリット コードの再利用 コードの構造化 1 2
13. SPA とは？ Signle Page Application
14. MPA vs SPA MPA SPA
15. Multi Page Application 参考：https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
16. MPA の問題 ローディングに時間がかかる （UXが悪い）
17. Single Page Application 参考：https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
18. 宣言型UI 宣言型UI 命令型UI 「何をするか」を指定 React やVue など 具体的に「どのようにするか」を指定 jQuery
19. コード例 ①.input に値を入力する ②-1. 入力した値が下部の「」という値が 入力されました。の「」部分に表示される ②-2. 入力した値を文字数カウントする 参考：https://zenn.dev/arei/articles/f59e263aa3edf2#%E7%B5%8C%E7%B7%AF
20. 命令型UI コード例
21. 宣言型UI コード例
22. State とは？
23. State とは？
24. 宣言型UI 宣言型UI 命令型UI 可読性が高い コードが複雑になりやすく バグの原因となる
25. React の特徴 宣言型UI コンポーネント 指向 Single Page Application 1 2 3
26. ５分休憩！
27. ハンズオンの説明 React公式チュート リアルに沿って 進めていきます！ r e a c t t u t o r i a l t i c t a c t o e
28. 何を作るのか 三目並べを作ります 完成品を体験 してみましょう！
29. 開発環境
30. 開発環境
31. App.js コンポーネントを作成します
32. コンポーネントの作り方 他のファイルでもコンポーネントの 接続を可能にする export default Squareという名の コンポーネントを作る function Square() return 中身 コンポーネントをJSXで作成 JSXでJavaScriptとHTMLを一緒に書ける
33. style.css チュートリアルで 使用される cssファイル
34. package.json reactのバージョンが書いてある
35. index.js App.jsで作ったコンポーネントと Webブラウザをつなげる
36. public/index.html コンポーネントは最終的に このファイルでhtmlになる
37. ボードを作ろう 3*3の板を 作りたい
38. ボードを作ろう Buttonを９つ並べればいい？？
39. ボードを作ろう
40. なぜエラーが？ Square <button> <button> 親要素が二つあるので、エラー コンポーネントは ただ１つのJSX要素を 返さないといけない
41. 解決策 <>...</>を親要素に置くことで 複数のJSX要素を使うことができる
42. 書き方の比較 Square <button> <button> Square <button> <button> <> 親要素が二つあるので、エラー 親要素が一つなので、問題ない
43. ボードを作る
44. コンポーネント名を変える もはやコンポーネントの役割はSquare（四角） ではなくBoardなので、コンポーネント名を変える
45. Square コンポーネントをつくる 変更が生じた場合９回同じ作業を しないといけないので、 新しくSquareコンポーネントを作る
46. 全てのSqaure が１で表示されている 各Squareごとの番号を 表示させたい
47. props とは？（振り返り） properties（属性）
48. props とは？（振り返り）
49. props を通してデータを渡す
50. インタラクティブなコンポーネントを作る
51. クリックを判定したい
52. State とは？（振り返り）
53. クリックを判定したい useStateをインポートする 変数名と初期値を入れる
54. props を消す
55. クリックを判定したい Squareコンポーネントがクリック されると（onClick）handleClick 関数が実行される setValue('x');からvalue=xとなる
56. ５分休憩！
57. O とX を相互に表示させたい xがクリックされると 次はoがクリックされる ように作りたい
58. state を引き上げる Board Square Square Square 子コンポーネント同士 直接stateを渡すことはできない 親コンポーネントにstateを渡し、 最終的に渡したい子コンポーネントに渡す
59. state でO とX の値をもつ配列をつくる クリックされると、'O’か'X'がnullと置き換わる
60. props でvalue を渡す 配列のインデックスを 使って番号を指定する
61. クリックしても何も起こらない onClickを使ってクリック されると値が表示される ようにしたい
62. クリックされると実行される関数を定義する slice()でsquaresを コピペする
63. nextSquares が必要な理由 nextSqauresなしの場合 squaresとsetSquaresの引数（squares）の値に違いがなく、 再レンダリングされない（setSquaresが動かない） nextSqauresありの場合 squaresとsetSquaresの引数（nextSquares）の値に違いがあり、 再レンダリングされる（setSquaresが動く）
64. props にonSquareClick 関数を追加する
65. handleClick 関数をonSquareClick に渡す
66. X しか表示されない XとOが交互に 入れ替わるように 作りたい
67. state で順番を管理する
68. 同じところが複数回クリックできる 一回クリックされたところは 次回クリックされると 反応しないようにしたい
69. 複数回クリックを防ぐ すでに値が入っている場合は return;で関数を終了させる
70. 勝者を決める 勝利となるパータンを全て 配列に入れる 勝利となる条件を満たして いるのか判別する
71. 勝負が決まるとクリックされても反応しない クリックされたところにすでに値が入っている（squares[i]） または（||）、勝負が決まった（calculateWinner(squares)) 場合は反応しない
72. 順番や勝負を表示するUI をつくる
73. ハンズオン終了！ 今日のハンズオンはここまでです！ お疲れ様でした！
74. 振り返り フロントエンド開発を 超楽にしてくれるライブラリ
75. 振り返り 宣言型UI コンポーネント 指向 Single Page Application 1 2 3
76. 終了です！ これからReactを活用して 開発を進めていきましょう！