Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
宣言的UIに親しもう! Reactハンズオン
Search
EngineerCafe
August 13, 2023
Technology
1
980
宣言的UIに親しもう! Reactハンズオン
イベントで使ったスライドです!
EngineerCafe
August 13, 2023
Tweet
Share
More Decks by EngineerCafe
See All by EngineerCafe
台湾視察報告レポート_2024
engineercafe
1
83
インド・バンガロール視察報告会
engineercafe
0
92
イベントレポート_Hacktivation 続:生成AI時代におけるブロックチェーンの可能性
engineercafe
0
72
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
66
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
110
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
130
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
250
Unityの環境構築
engineercafe
0
75
git勉強会(ブランチを操作しよう)
engineercafe
0
310
Other Decks in Technology
See All in Technology
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
広島発!スタートアップ開発の裏側
tsankyo
0
190
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
610
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
210
ECS モニタリング手法大整理
yendoooo
1
110
AIと描く、未来のBacklog 〜プロジェクト管理の次の10年を想像し、創造するセッション〜
hrm_o25
0
120
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
Backboneとしてのtimm2025
yu4u
3
1.3k
あなたの知らない OneDrive
murachiakira
0
230
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
280
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
780
Fireside Chat
paigeccino
39
3.6k
Code Reviewing Like a Champion
maltzj
525
40k
Speed Design
sergeychernyshev
32
1.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Producing Creativity
orderedlist
PRO
347
40k
Become a Pro
speakerdeck
PRO
29
5.5k
Into the Great Unknown - MozCon
thekraken
40
2k
Six Lessons from altMBA
skipperchong
28
4k
How GitHub (no longer) Works
holman
315
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
宣言的UIに親しもう! Reactハンズオン 8/13 14:00~16:00 @Engineer Cafe
自己紹介 金池撤 (キムジチョル) 九大共創学部2年生 8年前韓国から日本へ エンジニアカフェでスタッフしています 普段はWeb開発しています
施設紹介 エンジニアカフェ 福岡市が運営 エンジニア関連の方を支援 随時イベント開催 普段はコワーキングスペースで ご利用いただけます
React とは? フロントエンド開発を 超楽にしてくれるライブラリ
React の特徴 宣言型UI コンポーネント 指向 Single Page Application 1 2
3
コンポーネントとは? 再利用可能な部品
コンポーネントとは? 自分で作るHTMLタグ
具体例(コンポーネントなし) 参考:https://react.dev/learn/your-first-component
具体例(コンポーネントあり)
props とは? properties(属性) 参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/img
props とは?
コンポーネント指向のメリット コードの再利用 コードの構造化 1 2
SPA とは? Signle Page Application
MPA vs SPA MPA SPA
Multi Page Application 参考:https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
MPA の問題 ローディングに時間がかかる (UXが悪い)
Single Page Application 参考:https://zenn.dev/rinda_1994/articles/e6d8e3150b312d
宣言型UI 宣言型UI 命令型UI 「何をするか」を指定 React やVue など 具体的に「どのようにするか」を指定 jQuery
コード例 ①.input に値を入力する ②-1. 入力した値が下部の「」という値が 入力されました。の「」部分に表示される ②-2. 入力した値を文字数カウントする 参考:https://zenn.dev/arei/articles/f59e263aa3edf2#%E7%B5%8C%E7%B7%AF
命令型UI コード例
宣言型UI コード例
State とは?
State とは?
宣言型UI 宣言型UI 命令型UI 可読性が高い コードが複雑になりやすく バグの原因となる
React の特徴 宣言型UI コンポーネント 指向 Single Page Application 1 2
3
5分休憩!
ハンズオンの説明 React公式チュート リアルに沿って 進めていきます! r e a c t t
u t o r i a l t i c t a c t o e
何を作るのか 三目並べを作ります 完成品を体験 してみましょう!
開発環境
開発環境
App.js コンポーネントを作成します
コンポーネントの作り方 他のファイルでもコンポーネントの 接続を可能にする export default Squareという名の コンポーネントを作る function Square() return
中身 コンポーネントをJSXで作成 JSXでJavaScriptとHTMLを一緒に書ける
style.css チュートリアルで 使用される cssファイル
package.json reactのバージョンが書いてある
index.js App.jsで作ったコンポーネントと Webブラウザをつなげる
public/index.html コンポーネントは最終的に このファイルでhtmlになる
ボードを作ろう 3*3の板を 作りたい
ボードを作ろう Buttonを9つ並べればいい??
ボードを作ろう
なぜエラーが? Square <button> <button> 親要素が二つあるので、エラー コンポーネントは ただ1つのJSX要素を 返さないといけない
解決策 <>...</>を親要素に置くことで 複数のJSX要素を使うことができる
書き方の比較 Square <button> <button> Square <button> <button> <> 親要素が二つあるので、エラー 親要素が一つなので、問題ない
ボードを作る
コンポーネント名を変える もはやコンポーネントの役割はSquare(四角) ではなくBoardなので、コンポーネント名を変える
Square コンポーネントをつくる 変更が生じた場合9回同じ作業を しないといけないので、 新しくSquareコンポーネントを作る
全てのSqaure が1で表示されている 各Squareごとの番号を 表示させたい
props とは?(振り返り) properties(属性)
props とは?(振り返り)
props を通してデータを渡す
インタラクティブなコンポーネントを作る
クリックを判定したい
State とは?(振り返り)
クリックを判定したい useStateをインポートする 変数名と初期値を入れる
props を消す
クリックを判定したい Squareコンポーネントがクリック されると(onClick)handleClick 関数が実行される setValue('x');からvalue=xとなる
5分休憩!
O とX を相互に表示させたい xがクリックされると 次はoがクリックされる ように作りたい
state を引き上げる Board Square Square Square 子コンポーネント同士 直接stateを渡すことはできない 親コンポーネントにstateを渡し、 最終的に渡したい子コンポーネントに渡す
state でO とX の値をもつ配列をつくる クリックされると、'O’か'X'がnullと置き換わる
props でvalue を渡す 配列のインデックスを 使って番号を指定する
クリックしても何も起こらない onClickを使ってクリック されると値が表示される ようにしたい
クリックされると実行される関数を定義する slice()でsquaresを コピペする
nextSquares が必要な理由 nextSqauresなしの場合 squaresとsetSquaresの引数(squares)の値に違いがなく、 再レンダリングされない(setSquaresが動かない) nextSqauresありの場合 squaresとsetSquaresの引数(nextSquares)の値に違いがあり、 再レンダリングされる(setSquaresが動く)
props にonSquareClick 関数を追加する
handleClick 関数をonSquareClick に渡す
X しか表示されない XとOが交互に 入れ替わるように 作りたい
state で順番を管理する
同じところが複数回クリックできる 一回クリックされたところは 次回クリックされると 反応しないようにしたい
複数回クリックを防ぐ すでに値が入っている場合は return;で関数を終了させる
勝者を決める 勝利となるパータンを全て 配列に入れる 勝利となる条件を満たして いるのか判別する
勝負が決まるとクリックされても反応しない クリックされたところにすでに値が入っている(squares[i]) または(||)、勝負が決まった(calculateWinner(squares)) 場合は反応しない
順番や勝負を表示するUI をつくる
ハンズオン終了! 今日のハンズオンはここまでです! お疲れ様でした!
振り返り フロントエンド開発を 超楽にしてくれるライブラリ
振り返り 宣言型UI コンポーネント 指向 Single Page Application 1 2 3
終了です! これからReactを活用して 開発を進めていきましょう!