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
Let's React!! "チョットワカル"の第一歩
Search
yosi
August 08, 2022
Programming
1
160
Let's React!! "チョットワカル"の第一歩
yosi
August 08, 2022
Tweet
Share
More Decks by yosi
See All by yosi
自社開発のエンジニアの私が 大事にしてること(n=1)
yoshisan
1
38
なるほどGit講座 (追跡ブランチが理解できます!)
yoshisan
0
160
「自分の時間を生きる」キャリア論
yoshisan
1
91
小学生でもわかる SlackAPI×GAS
yoshisan
0
99
達人プログラマーになろう!
yoshisan
0
110
認証認可
yoshisan
1
120
オブジェクト指向が"チョットワカル"スライド
yoshisan
0
100
Linuxについて"ほんのチョットワカル"スライド
yoshisan
1
95
ようこそ!!ココカラ勉強会へ!
yoshisan
0
100
Other Decks in Programming
See All in Programming
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
430
ファーストペンギンBot @Qiita Hackathon 2024 予選
dyson_web
0
220
(Deep|Web) Link support with expo-router
mrtry
0
170
Vue :: Better Testing 2024
up1
1
390
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
6
1.4k
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
1
130
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
1
460
GitHub Copilot Workspace で我々のアプリ開発がどう変わるのか?
shuyakinjo
0
890
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
200
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
200
CSC509 Lecture 01
javiergs
PRO
1
210
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
280
Featured
See All Featured
Designing for humans not robots
tammielis
249
25k
VelocityConf: Rendering Performance Case Studies
addyosmani
324
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
38
2.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
570
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Writing Fast Ruby
sferik
626
60k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
220
Transcript
Let's React!! "チョットワカル"の第一歩 yohsi presents K O K O K
A R A M E E T U P 2022
よし 元小学校教諭 2年 銭湯,サウナ,漫画 React,Java 運動したい
modern JS Framework/library
「Google Trends」
「The State of JS 2021」
よし!Reactやるぞー!!
数日後
え,ちょ,むずかしない,,,?
「Vue は Easy、 React は Simple」
Reactの難しさ V O L U N T E E R
R E S U M E 2022 11 1 .記法の重なり 2 .Reactの仕組み
Reactを構成するためのスキル ・変数への型付け ・分割代入 ・スプレッド構文 ・関数( アロー関数) ・三項演算子 ・Props ・State( 状態)
・React hooks ・再レンダリング ・let,const ・コンポーネント分割 ・関数への型付け ・props への型付け ・useState での型付け ・非同期処理(async/await) ・JSX
JS,React,TS どれの記法に属するか分 けていく! 分割代入(JS) とprops 関数の省略記法 etc,,,!! 気をつけたい記法
↓何してるかわかりますか? 二つの記法を知ってたら理解できます!!
分割代入 {} [] →オブジェクトや配列の要素を使いやすくする方法 オブジェクトの抽出 オブジェクトの抽出(分割代入)
Props →親から子コンポーネントに送る引数のようなもの(属性値) コンポーネントの渡し方 ①タグ内に任意の名称をつけ=で値を入れて渡す ②タグで囲みchildrenとして渡す 親のファイル props props.children 子のコンポーネント
props props.children 実行結果
Propsを分割代入してみる! 親のファイル props props.children 子コンポ(分割代入なし) props props.children 子コンポ(分割代入あり) props props.children
Propsを()の引数内で分割代入してみる! 親のファイル props props.children 子コンポ(分割代入) props props.children 子コンポ(引数内で分割代入) 引数内で分割代入! props
props.children
読める、読めるぞ! React 順番を押さえていけば徐々に読めてきます! ※イメージ図
関数
関数 なんかたくさん あったような,,, ややこしいかった記憶
関数 関数学習中 初学者 ※イメージ
JSの関数表記 従来の関数表記 ①関数宣言 ②関数式 ES06からの関数表記 ③アロー関数 主に3種類に分かれる 関数表記の流れを おさえれば理解しやすいです!
①関数宣言 (function(){}) ・関数宣言 ・呼び出し ・呼び出し,戻り値を変数に代入 関数名 引数 処理内容 ①関数名 ②引数
③処理内容 この3つから構成される。
None
②関数式 ・関数式 ・関数宣言,呼び出し →変数に代入している
式 式(Expression)と (Expression)と文 文(Statement) (Statement) 文(Statement) 式(Expression) "値を変数に代入できる" "値を変数に代入できない" ex.リテラル,変数,関数の呼び出し,,,
ex. if文,for文,,, (ブロック文) 関数式 関数宣言 ※ブロック文はセミコロンは不要
②関数式(関数名の省略) ・関数式 ・関数式(関数名の省略) こういった"関数名のない関数"を 無名関数(匿名関数)と言います。
③アロー関数 ・関数式(無名関数) function のかわりにアロー記号 => ・アロー関数
②引数()なし+return {}なし ※上の条件+処理が1行 ③アロー関数(省略形) ①引数()なし ※引数が一つの時 ③{}に()を重ねる ※戻り値がオブジェクト
③アロー関数 ④アロー関数(無名関数) ⑤アロー関数(無名関数+省略形)
①関数宣言 (文) function ②関数式 (式 無名関数) function ③アロー関数 (式 省略形が複数ある) =>
関数 まとめ next step!! ・コールバック関数 ・即時関数 ・スコープとクロージャ ・再帰関数 ・高階関数とカリー化 ...etc!
React の仕組みにふれる 宣言的と命令的 React のレンダリングについて V O L U N
T E E R R E S U M E 2022 13
Reactとは? 「UI構築のための JavaScript ライブラリ」 →DOM操作ライブラリ どんな特徴があるの?? ①コンポーネントによる宣言的なUI構築 ②UIとデータの同期
①コンポーネントによる宣言的なUI構築 命令的UI 宣言的UI 従来の方式で、 JSやjQueryなどの直接DOM 指定して描画する方法 ・動作の手順を指定する ・「何をするかを記述」 (How) UIとコードの乖離が大きい
従来のDOM操作をライブラリ 側が担い、構築したいUIに即 して描画できる ・状態を定義する ・「どういう状態になってる かを記述」(What) UIとコードが近い
App.jsx コンポーネントとは? UIを構築するための部品 Child1.jsx Child2.jsx Child3.jsx Child4.jsx Child5.jsx ・上から下へと木構造になっており 親と子の関係がある。
・親から子へpropsを渡せる ・コンポーネント内にstateをもて る。 ①propsが変更されたら or ②stateが更新されたら そのコンポーネント配下は再レンダ リングされる。
②UIとデータの同期 Reactが管理するデータが主に2つ 属性のprops 状態のstate ・親から子へ渡される属性値。 ・propsが更新されると、 管理するコンポーネントが 再描画(再レンダリング)する ・子コンポーネントが内部で 持つ状態。
・状態が更新されると,管理 するコンポーネントが再描画 (再レンダリング)する
Reactの描画について コンポーネントというUIの一部分を組み合わせて作ってい きます。 コンポーネントは引数に相当するpropsも受け取れ、 コンポーネント内部に「状態」をもち、状態の更新により出 力する描画が変わる。 ユーザがアプリを使い、状態が更新される。 それをReactが作用し結果としてUIが再レンダリングする
状態 状態 DOM <form> <input type="checkbox"> ・・・ </form> UI=f(state) ユーザ操作による変化
f(レンダリング) f(レンダリング) DOM <form> <input type="checkbox" checked> ・・・ </form> Reactによる 再レンダリング
State Props コンポーネント ここの振る舞いを捉えるのが肝! Reactにおいて
Reactを攻略していくには? 意図したUIを実現していくた めのコーディングしていく力 Reactの特性とふるまいを理 解してコンポーネント間を上 手く設計していく力 蟻の目 鷹の目
参考資料(雑誌) React初心者最適本 JS関数全部雑誌 Reactの深い理解雑誌
JavaScript Primer サバイバルTypeScript けーちゃんのプログラム開発ノート 宣言的UI →JSの辞書的に →現場に即した指南所
→JSのわかりにくい所の解説がわりに →宣言的UIと命令的UIの比較 参考資料(サイト)
拙い説明でしたが ご清聴ありがとうございました!!