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
970
宣言的UIに親しもう! Reactハンズオン
イベントで使ったスライドです!
EngineerCafe
August 13, 2023
Tweet
Share
More Decks by EngineerCafe
See All by EngineerCafe
台湾視察報告レポート_2024
engineercafe
0
74
インド・バンガロール視察報告会
engineercafe
0
90
イベントレポート_Hacktivation 続:生成AI時代におけるブロックチェーンの可能性
engineercafe
0
62
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
58
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
99
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
120
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
250
Unityの環境構築
engineercafe
0
74
git勉強会(ブランチを操作しよう)
engineercafe
0
300
Other Decks in Technology
See All in Technology
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
330
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
230
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
630
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
640
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
110
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
250
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
190
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
210
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
210
TypeScript 上達の道
ysknsid25
23
5.1k
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
160
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
130
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
It's Worth the Effort
3n
185
28k
Navigating Team Friction
lara
188
15k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Speed Design
sergeychernyshev
32
1k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to Ace a Technical Interview
jacobian
278
23k
The Invisible Side of Design
smashingmag
301
51k
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を活用して 開発を進めていきましょう!