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
990
宣言的UIに親しもう! Reactハンズオン
イベントで使ったスライドです!
EngineerCafe
August 13, 2023
Tweet
Share
More Decks by EngineerCafe
See All by EngineerCafe
Hacktivation2025_イントロダクション_ブロックチェーンことはじめ
engineercafe
0
35
エンジニアカフェ台湾ツアー2025
engineercafe
0
4
台湾視察報告レポート_2024
engineercafe
1
90
インド・バンガロール視察報告会
engineercafe
0
95
イベントレポート_Hacktivation 続:生成AI時代におけるブロックチェーンの可能性
engineercafe
0
85
Docker はじめの一歩 #1 Dockerコンテナを動かしてみよう
engineercafe
0
70
git勉強会 (基本的なコマンドを覚えよう)
engineercafe
0
120
エンジニアのための論文ゆる輪読会 #1【 #ゆるりん 】
engineercafe
0
140
git勉強会(トラブルシューティングについて考えよう)
engineercafe
0
260
Other Decks in Technology
See All in Technology
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
roppongirb_20250911
igaiga
1
240
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
190
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
S3アクセス制御の設計ポイント
tommy0124
3
200
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
110
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
240
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
230
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
480
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Agile that works and the tools we love
rasmusluckow
330
21k
Writing Fast Ruby
sferik
628
62k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Done Done
chrislema
185
16k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
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を活用して 開発を進めていきましょう!