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

by EngineerCafe

Slide 1

Slide 1 text

宣言的UIに親しもう！ Reactハンズオン 8/13 14:00~16:00 @Engineer Cafe

Slide 2

Slide 2 text

自己紹介金池撤（キムジチョル）九大共創学部2年生 8年前韓国から日本へエンジニアカフェでスタッフしています普段はWeb開発しています

Slide 3

Slide 3 text

施設紹介エンジニアカフェ福岡市が運営エンジニア関連の方を支援随時イベント開催普段はコワーキングスペースでご利用いただけます

Slide 4

Slide 4 text

React とは？フロントエンド開発を超楽にしてくれるライブラリ

Slide 5

Slide 5 text

React の特徴宣言型UI コンポーネント指向 Single Page Application 1 2 3

Slide 6

Slide 6 text

コンポーネントとは？再利用可能な部品

Slide 7

Slide 7 text

コンポーネントとは？自分で作るHTMLタグ

Slide 8

Slide 8 text

具体例（コンポーネントなし）参考：https://react.dev/learn/your-first-component

Slide 9

Slide 9 text

具体例（コンポーネントあり）

Slide 10

Slide 10 text

props とは？ properties（属性）参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/img

Slide 11

Slide 11 text

props とは？

Slide 12

Slide 12 text

コンポーネント指向のメリットコードの再利用コードの構造化 1 2

Slide 13

Slide 13 text

SPA とは？ Signle Page Application

Slide 14

Slide 14 text

MPA vs SPA MPA SPA

Slide 15

Slide 15 text

Multi Page Application 参考：https://zenn.dev/rinda_1994/articles/e6d8e3150b312d

Slide 16

Slide 16 text

MPA の問題ローディングに時間がかかる（UXが悪い）

Slide 17

Slide 17 text

Single Page Application 参考：https://zenn.dev/rinda_1994/articles/e6d8e3150b312d

Slide 18

Slide 18 text

宣言型UI 宣言型UI 命令型UI 「何をするか」を指定 React やVue など具体的に「どのようにするか」を指定 jQuery

Slide 19

Slide 19 text

コード例 ①.input に値を入力する ②-1. 入力した値が下部の「」という値が入力されました。の「」部分に表示される ②-2. 入力した値を文字数カウントする参考：https://zenn.dev/arei/articles/f59e263aa3edf2#%E7%B5%8C%E7%B7%AF

Slide 20

Slide 20 text

命令型UI コード例

Slide 21

Slide 21 text

宣言型UI コード例

Slide 22

Slide 22 text

State とは？

Slide 23

Slide 23 text

State とは？

Slide 24

Slide 24 text

宣言型UI 宣言型UI 命令型UI 可読性が高いコードが複雑になりやすくバグの原因となる

Slide 25

Slide 25 text

React の特徴宣言型UI コンポーネント指向 Single Page Application 1 2 3

Slide 26

Slide 26 text

５分休憩！

Slide 27

Slide 27 text

ハンズオンの説明 React公式チュートリアルに沿って進めていきます！ r e a c t t u t o r i a l t i c t a c t o e

Slide 28

Slide 28 text

何を作るのか三目並べを作ります完成品を体験してみましょう！

Slide 29

Slide 29 text

開発環境

Slide 30

Slide 30 text

開発環境

Slide 31

Slide 31 text

App.js コンポーネントを作成します

Slide 32

Slide 32 text

コンポーネントの作り方他のファイルでもコンポーネントの接続を可能にする export default Squareという名のコンポーネントを作る function Square() return 中身コンポーネントをJSXで作成 JSXでJavaScriptとHTMLを一緒に書ける

Slide 33

Slide 33 text

style.css チュートリアルで使用される cssファイル

Slide 34

Slide 34 text

package.json reactのバージョンが書いてある

Slide 35

Slide 35 text

index.js App.jsで作ったコンポーネントと Webブラウザをつなげる

Slide 36

Slide 36 text

public/index.html コンポーネントは最終的にこのファイルでhtmlになる

Slide 37

Slide 37 text

ボードを作ろう 3*3の板を作りたい

Slide 38

Slide 38 text

ボードを作ろう Buttonを９つ並べればいい？？

Slide 39

Slide 39 text

ボードを作ろう

Slide 40

Slide 40 text

なぜエラーが？ Square 親要素が二つあるので、エラーコンポーネントはただ１つのJSX要素を返さないといけない

Slide 41

Slide 41 text

解決策 <>...>を親要素に置くことで複数のJSX要素を使うことができる

Slide 42

Slide 42 text

書き方の比較 Square Square <> 親要素が二つあるので、エラー親要素が一つなので、問題ない

Slide 43

Slide 43 text

ボードを作る

Slide 44

Slide 44 text

コンポーネント名を変えるもはやコンポーネントの役割はSquare（四角）ではなくBoardなので、コンポーネント名を変える

Slide 45

Slide 45 text

Square コンポーネントをつくる変更が生じた場合９回同じ作業をしないといけないので、新しくSquareコンポーネントを作る

Slide 46

Slide 46 text

全てのSqaure が１で表示されている各Squareごとの番号を表示させたい

Slide 47

Slide 47 text

props とは？（振り返り） properties（属性）

Slide 48

Slide 48 text

props とは？（振り返り）

Slide 49

Slide 49 text

props を通してデータを渡す

Slide 50

Slide 50 text

インタラクティブなコンポーネントを作る

Slide 51

Slide 51 text

クリックを判定したい

Slide 52

Slide 52 text

State とは？（振り返り）

Slide 53

Slide 53 text

クリックを判定したい useStateをインポートする変数名と初期値を入れる

Slide 54

Slide 54 text

props を消す

Slide 55

Slide 55 text

クリックを判定したい Squareコンポーネントがクリックされると（onClick）handleClick 関数が実行される setValue('x');からvalue=xとなる

Slide 56

Slide 56 text

５分休憩！

Slide 57

Slide 57 text

O とX を相互に表示させたい xがクリックされると次はoがクリックされるように作りたい

Slide 58

Slide 58 text

state を引き上げる Board Square Square Square 子コンポーネント同士直接stateを渡すことはできない親コンポーネントにstateを渡し、最終的に渡したい子コンポーネントに渡す

Slide 59

Slide 59 text

state でO とX の値をもつ配列をつくるクリックされると、'O’か'X'がnullと置き換わる

Slide 60

Slide 60 text

props でvalue を渡す配列のインデックスを使って番号を指定する

Slide 61

Slide 61 text

クリックしても何も起こらない onClickを使ってクリックされると値が表示されるようにしたい

Slide 62

Slide 62 text

クリックされると実行される関数を定義する slice()でsquaresをコピペする

Slide 63

Slide 63 text

nextSquares が必要な理由 nextSqauresなしの場合 squaresとsetSquaresの引数（squares）の値に違いがなく、再レンダリングされない（setSquaresが動かない） nextSqauresありの場合 squaresとsetSquaresの引数（nextSquares）の値に違いがあり、再レンダリングされる（setSquaresが動く）

Slide 64

Slide 64 text

props にonSquareClick 関数を追加する

Slide 65

Slide 65 text

handleClick 関数をonSquareClick に渡す

Slide 66

Slide 66 text

X しか表示されない XとOが交互に入れ替わるように作りたい

Slide 67

Slide 67 text

state で順番を管理する

Slide 68

Slide 68 text

同じところが複数回クリックできる一回クリックされたところは次回クリックされると反応しないようにしたい

Slide 69

Slide 69 text

複数回クリックを防ぐすでに値が入っている場合は return;で関数を終了させる

Slide 70

Slide 70 text

勝者を決める勝利となるパータンを全て配列に入れる勝利となる条件を満たしているのか判別する

Slide 71

Slide 71 text

勝負が決まるとクリックされても反応しないクリックされたところにすでに値が入っている（squares[i]）または（||）、勝負が決まった（calculateWinner(squares)) 場合は反応しない

Slide 72

Slide 72 text

順番や勝負を表示するUI をつくる

Slide 73

Slide 73 text

ハンズオン終了！今日のハンズオンはここまでです！お疲れ様でした！

Slide 74

Slide 74 text

振り返りフロントエンド開発を超楽にしてくれるライブラリ

Slide 75

Slide 75 text

振り返り宣言型UI コンポーネント指向 Single Page Application 1 2 3

Slide 76

Slide 76 text

終了です！これからReactを活用して開発を進めていきましょう！