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
作りながら学ぶReactアプリケーション
Search
takepo
December 11, 2019
Programming
1
12k
作りながら学ぶReactアプリケーション
下記勉強会で使用する資料です。
https://careerselect-studygroup.connpass.com/event/151698/
takepo
December 11, 2019
Tweet
Share
More Decks by takepo
See All by takepo
React×ReduxにおけるTypeScript入門
takepo
10
4.7k
初心者のためのReact入門
takepo
3
4.3k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.7k
React入門 2018
takepo
4
2.7k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
120
Other Decks in Programming
See All in Programming
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
350
初めてDefinitelyTypedにPRを出した話
syumai
0
430
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.1k
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
DevTools extensions で 独自の DevTool を開発する | FlutterKaigi 2024
kokiyoshida
0
140
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
260
Amazon Qを使ってIaCを触ろう!
maruto
0
420
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
Better Code Design in PHP
afilina
PRO
0
130
Featured
See All Featured
RailsConf 2023
tenderlove
29
910
Into the Great Unknown - MozCon
thekraken
32
1.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
730
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Cult of Friendly URLs
andyhume
78
6k
What's new in Ruby 2.0
geeforr
343
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Transcript
作りながら学ぶ Reactアプリケーション Takeshima Nahoko
ౡࡊึࢠ!UBLFQP 2 ೣͱΒ͍ͨ͠ܥ େଔ8FCΤϯδχΞ ࣗ࡞ΩʔϘʔυʹڵຯʑ 5ZQF4DSJQU+BWB4DSJQU 1)13VCZ 3FBDUྺ͘Β͍ はじめに #profile
Lancers #会社概要 3
4
5 Lancers #メッセージ機能
6 Lancers #プロジェクト管理
7 Lancers #pook
8 Lancers #Enterprise
3FBDUº3FEVYº5ZQF4DSJQU "1*αʔόʔ1)1 'JHNBͰσβΠϯͷڞ༗ "1*#MVFQSJOUΛ͔ͭͬͯ"1*༷ॻΛ࡞ 9 はじめに #いま
؆୯ͳΞϓϦέʔγϣϯΛ࡞ͬͯ 3FBDUͷجຊͱपลͷϥΠϒϥϦΛΔ (JUΛͬͨ։ൃϑϩʔΛମݧʂ 3FBDUΛͬͨϑϩϯΤϯυ։ൃͷ͡ΊͷҰา 10 はじめに #今回の目的
3FBDUͱ &4ʹ͍ͭͯ $PNQPOFOUʹ͍ͭͯ ؆୯ͳΞϓϦΛͭͬͯ͘ΈΑ͏ ࠓޙͷεςοϓΞοϓ
·ͱΊ 11 はじめに #目次
React? 12
'BDFCPPLͷΦʔϓϯιʔε +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ ϥΠϒϥϦ͕๛ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUΛͭ͘Δ͚ͩ σʔλͷྲྀΕ͕୯Ұํ
13 React? #概要
14 React? #利用している企業
7VF ֶशίετ͕͍ εϞʔϧελʔτͰ͖Δ -BMBWFM͕αϙʔτ͍ͯͯ͠૬ੑ͙ͭΜ "OHVMBS 5ZQF4DSJQU ϑϧελοΫ ϥΠϒϥϦΛՃ͠ͳͯ͘جຊඋΘ͍ͬͯΔ 15 React?
#ほかとの違い
DSFBUFSFBDUBQQͱ͍͏ͻͳܗΛ͓͏ʂ OQYDSFBUFSFBDUBQQΞϓϦ໊ DEΞϓϦ໊ OQNTUBSU 16 React? #はじめかた
17 React? #はじめかた
これだけで OK✨ 18
ES6 19
20 React? #ES6 &$."4DSJQU +BWB4DSJQUͷݴޠ༷ શͯͷϒϥβͰରԠͯ͠ΔΘ͚Ͱͳ͍ #BCFMͰτϥϯεύΠϧ͢Δඞཁ͕͋Δ
21 ES6 #letやconstで変数宣言 ࠶એݴ࠶ೖෆՄೳͳએݴ͕Ͱ͖ΔͷͰ ೋॏఆٛɾ༧ظͤ͵࠶ೖΛ͛Δ
22 ES6 #letやconstで変数宣言
23 ES6 #class構文が使える
24 ES6 #importとexport Ϟδϡʔϧ͔ΒมؔɺΦϒδΣΫτΛΤΫ εϙʔτͰ͖Δ ଞͰ͏߹FYQPSUΛͨ͠ͷΛJNQPSU͢Δ ଞͷϥΠϒϥϦΛಡΈࠐΉͱ͖JNQPSUΛ͏
25 ES6 #importとexport JNQPSUͱFYQPSUͷྫΔ
26 ES6 #アロー関数 ΛͬͯؔϦςϥϧΛهड़͢Δ͜ͱ͕Ͱ͖Δ GVODUJPOΛ͍͍ͪͪॻ͔ͳͯ͘Α͍ ΞϩʔؔΛએݴͨ࣌͠ͰUIJTΛଋറ͢Δ
27 ES6 #アロー関数
他にも色々便利な ものがあるけど いったんOK 28
component 29
࠶ར༻Մೳͳύʔπ ࣗͰࣗͷঢ়ଶΛཧ͢Δ جຊతʹ$PNQPOFOUΛ࡞ͬͯΈ߹Θͤͯ ΞϓϦέʔγϣϯΛ࡞͍ͬͯ͘ +49ͳͲΛͬͯهड़͢Δ Ϋϥείϯϙʔωϯτͱؔίϯϙʔωϯτ͕͋Δ 30 React? #Component
͜Ε'BDFCPPL +BWB4DSJQUͷߏจதʹ 9.-෩ͷͷΛͦͷ··ॻ͚Δ )5.-ͱࣅ͍ͯΔͷͰ׳ΕΕ σβΠφʔͰΘ͔Γ͍͢ʂ 31 React? #JSX
32 React? #クラスComponentサンプル
33 React? #関数Componentサンプル
34 React? #JSXはHTMLっぽい
QSPQT $PNQPOFOUੜ࣌ʹ͔Β͞ΕΔΦϒδΣΫτ $PNQPOFOU͕ը໘͔Βഉআ͞ΕΔ·Ͱෆมͷ *NNVUBCMFͰ͋Γ֎෦ͱͷΠϯλʔϑΣʔεͷׂ TUBUF ಈతʹΛมԽͤ͞ΒΕΔΦϒδΣΫτ $PNQPOFOUͰอ࣋ 35 Component #propsとstate
36 propsとstate #propsのサンプル
$PNQPOFOU͔Βࢠ$PNQPOFOUΛ͢ ࢠ$PNQPOFOUUFYUlUFYUl ࢠ$PNQPOFOUͰΛड͚ͱͬͯදࣔ EJW\UIJTQSPQTUFYU^EJW 37 propsを使ったサンプル #propsのつかいかた
38 propsのサンプル #ListItemComponent
39 propsのサンプル #AppComponent
40 propsとstate #propsのサンプル
41 propsのサンプル #AppComponent
42 propsのサンプル #AppComponentの改良
43 propsとstate #stateを使ったサンプル
࣮ࡍʹΧϯτͤ͞ΔΛTUBUFͰ࣋ͨͤΔ TUBUFಈతʹΛมԽͤ͞ΒΕΔͷͰ ϘλϯΛԡͨ࣌͠ʹDPNQPOFOUͰ TUBUFͷΛมԽͤ͞Δ 44 stateを使ったサンプル #つくりの説明
TUBUFͷॳظԽΛ͢Δ DPOTUSVDUPSͰ UIJTTUBUF\DPVOU^ TUBUFͷDPVOUΛදࣔ EJW\UIJTTUBUFDPVOU^EJW TUBUFͷΛॻ͖͑Δ UIJTTFU4UBUF \DPVOU^
45 stateを使ったサンプル #stateのつかいかた
stateを使ったサンプル #AppComponent
47 propsとstate #stateを使ったサンプル
$PNQPOFOUʹϥΠϑαΠΫϧϝιου͕͋Δ %0.͕ϚϯτΞϯϚϯτ͞ΕΔͱ͖ɺ QSPQT͕มԽ͢Δͱ͖ͳͲͷλΠϛϯάͰݺΕΔ ϝιου "1*Λݺͼ͍ͨ༻్ʹ߹Θͤͯ͑Δ 48 Component #Componentのライフサイクル
IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF
WͰԼه͕ඇਪɺࠓޙআ༧ఆ⚠ UNSAFE_ʹϦωʔϜ͞Ε͍ͯΔ DPNQPOFOU8JMM.PVOU DPNQPOFOU8JMM6QEBUF DPNQPOFOU8JMM3FDFJWF1SPQT ɹHFU%FSJWFE4UBUF'SPN1SPQTΛ͏ 50 Componentのライフサイクル #さいきんのはなし
3FBDUWͰొͨ͠IPPL TUBUFͳͲͷػೳΛΫϥεΘͣʹॻ͚ΔΑ͏ʹ ࠓճΘͳ͍ͷͰ ؾʹͳΔਓެࣜυΩϡϝϯτ IUUQTKBSFBDUKTPSHEPDTIPPLTJOUSPIUNM 51 Componentのライフサイクル #さいきんのはなし
つくってみよう 52
53 つくってみよう #なにをつくるか
DSFBUFSFBDUBQQͰ)FMMP8PSME ඞཁͳϥΠϒϥϦͷಋೖ TSDσΟϨΫτϦͷཧ 50%0Ϧετ࡞ 50%0߲ͷՃϑΥʔϜ࡞
ελΠϧௐ Ճػೳ։ൃ ՝ 54 つくってみよう #ステップ
IUUQTHJUIVCDPNUBLFQPSFBDUUPEPBQQTBNQMF εςοϓ͝ͱʹDPNNJUΛ࡞͍ͯ͠ΔͷͰ ඞཁͳίϛοτʹνΣοΫΞτͯ͠ΈͯͶ HJUDMPOFHJU!HJUIVCDPNUBLFQPSFBDUUPEPBQQ TBNQMFHJU DESFBDUUPEPBQQTBNQMF HJUMPH HJUDIFDLPVUDPNNJUϋογϡ 55 つくってみよう
#サンプルコード
56 つくってみよう #サンプルコード
/PEFWͷΠϯετʔϧ OPEFCSFXͬͯཧ͢Δ IUUQTRJJUBDPNTJONFUBMJUFNT FGCD (JU)VCΞΧϯτ࡞ IUUQTHJUIVCDPN 57 つくってみよう #事前準備
HelloWorld 58
OQYDSFBUFSFBDUBQQSFBDUUPEPBQQ DESFBDUUPEPBQQ ZBSOTUBSU 59 つくってみよう #HelloWorld
60 つくってみよう #HelloWorld
ʜඞཁͳϥΠϒϥϦ͕ೖ͍ͬͯΔ ʜ)5.-ͱ͔ը૾ͱ͔ ʜKT DTTͳͲͷ3FBDUͷίʔυ ʜύοέʔδεΫϦϓτͷઃఆ ʜύοέʔδͷґଘؔͷઃఆ 61 つくってみよう #ディレクトリ構成
ύοέʔδཧπʔϧ ϑϩϯτͰར༻͢ΔϥΠϒϥϦΛ QBDLBHFKTPOͱ͍͏ϑΝΠϧͰཧ 3VCZͰ͍͏CVOEMFS ߴʂ 62 つくってみよう #yarn
QBDLBHFKTPO 63 つくってみよう #スクリプト
64 つくってみよう #GitHubのリポジトリ作成
65 つくってみよう #GitHubのリポジトリ作成
66 つくってみよう #GitHubのリポジトリ作成
67 つくってみよう #GitHubのリポジトリ作成
68 つくってみよう #HelloWorld
69 つくってみよう #HelloWorld
70 つくってみよう #リポジトリにコミット )FMMP8PSMEͰ͖ͨͷͰίϛοτͯ͠ϓογϡʂ
71 つくってみよう #リポジトリにコミット
72 つくってみよう #コミットメッセージ
73 つくってみよう #コミットメッセージ ϝοηʔδͷઌ಄ʹϓϨϑΟοΫεΛ͚ͭΔ ϩάΛΈͨΓɺϨϏϡʔͯ͠Β͏ࡍʹԿʹର͢ Δมߋ͔ΛѲ͘͢͢͠Δ ϓϨϑΟοΫεΛҙࣝ͢Δ͜ͱͰ ͖Ε͍ʹίϛοτׂͰ͖ΔΑ͏ʹ
74 つくってみよう #コミットメッセージ "OHVMBSͷ։ൃΨΠυͷྫ IUUQTHJUIVCDPNBOHVMBSBOHVMBSKTCMPC NBTUFS%&7&-01&34NEUZQF
必要な ライブラリの導入 75
76 つくってみよう #Material-ui ϚςϦΞϧσβΠϯʹͦͬͯ࡞ΒΕͨ $PNQPOFOUϥΠϒϥϦ
77 つくってみよう #Material-ui IUUQTNBUFSJBMVJDPNDPNQPOFOUTMJTUT IUUQTNBUFSJBMVJDPNDPNQPOFOUTCVUUPOT IUUQTNBUFSJBMVJDPNDPNQPOFOUTUFYU pFMET
78 つくってみよう #Material-uiの導入 IUUQTNBUFSJBMVJDPNKBHFUUJOHTUBSUFE JOTUBMMBUJPO ZBSOBEE!NBUFSJBMVJDPSF ZBSOBEE!NBUFSJBMVJJDPOT QVCMJDJOEFYIUNMʹԼهΛՃ
79 つくってみよう #commit&push
80 つくってみよう #commit&push
srcディレクトリの整理 81
82 srcディレクトリの整理 #ディレクトリ内の削除 TSDԼͷϑΝΠϧΛ·ͬ͞Βʹ͢Δ SNGTSD XJOͷํEFMίϚϯυΛ (6*Ͱফͯ͠0,
83 srcディレクトリの整理 #TODOアプリの基本形をつくる TSDԼʹ"QQKTΛ࡞Δ
84 srcディレクトリの整理 #TODOアプリの基本形をつくる TSDԼʹJOEFYKT࡞Δ
85 srcディレクトリの整理 #ReactDOM.render() 3FBDUͷཁૉ)5.-ʹ͋Δ%0.ʹϨϯμϦϯά
86 srcディレクトリの整理 #TODOアプリの基本形をつくる
87 つくってみよう #commit&push
88 つくってみよう #commit&push
TODOリスト作成 89
90 TODOリスト作成 #TodoListComponentを作る
91 TODOリスト作成 #TodoListComponentを読み込む
92 TODOリスト作成 #TodoListComponentの表示確認
93 TODOリスト作成 #Material-uiをつかう IUUQTNBUFSJBMVJDPNKBDPNQPOFOUTMJTUT
94 TODOリスト作成 #Material-uiをつかう
95 TODOリスト作成 #Material-uiをつかう
96 TODOリスト作成 #AppComponentからデータを渡す
97 TODOリスト作成 #AppComponentからデータをもらう
98 TODOリスト作成 #AppComponentからデータをもらう
99 TODOリスト作成 #commit&push
100 TODOリスト作成 #commit&push
TODO項目の 追加フォーム作成 101
102 TODO項目の追加フォーム作成 #Listデータをstateで管理する
103 TODO項目の追加フォーム作成 #Listデータをstateで管理する
104 TODO項目の追加フォーム作成 #FormComponentをつくる
105 TODO項目の追加フォーム作成 #FormComponentを読み込む
106 TODO項目の追加フォーム作成 #FormComponentを表示
107 TODO項目の追加フォーム作成 #入力値をstateで保持する
108 TODO項目の追加フォーム作成 #入力値をstateで保持する
109 TODO項目の追加フォーム作成 #入力値のstateを更新
110 TODO項目の追加フォーム作成 #入力値のstateを更新
111 TODO項目の追加フォーム作成 #入力値のstateを更新
112 TODO項目の追加フォーム作成 #追加処理の作成
113 TODO項目の追加フォーム作成 #追加処理の作成
114 TODO項目の追加フォーム作成 #追加処理の作成
115 TODO項目の追加フォーム作成 #追加処理の作成
116 TODO項目の追加フォーム作成 #commit&push
117 TODO項目の追加フォーム作成 #commit&push
スタイル調整 118
119 スタイル調整 #app.cssを準備
120 スタイル調整 #app.cssをimport
121 スタイル調整 #classNameでスタイルあて
122 スタイル調整 #classNameでスタイルあて
123 スタイル調整 #表示確認
124 スタイル調整 #commit&push
125 スタイル調整 #commit&push
課題 126
つくってみよう #今後の課題 ϦετͷΛදࣔ͢Δ Ϧετͷදࣔ༻ͷ$PNQPOFOUΛͭ͘Δ ϦετͷΛTUBUF͔Βࢉग़ ࢉग़ͨ͠ϦετͷΛ$PNQPOFOUʹͯ͠දࣔ 127
つくってみよう #今後の課題 Ϧετͷද͔ࣔ͠Ͱ͖͍ͯͳ͍ͷͰɺ ߲ʹνΣοΫΛೖΕΒΕΔΑ͏ʹ͢Δ ঢ়ଶཧͷͨΊʹTUBUFͷมߋΛ͢Δ νΣοΫϘοΫεͷදࣔ νΣοΫͨ͠ͱ͖ͷڍಈ࡞ 128
つくってみよう #今後の課題 Ϧετ͔Β߲͔Βআ͕Ͱ͖ΔΑ͏ʹ͢Δ আϘλϯΛ߲͝ͱʹઃஔ আͨ͠ͱ͖ͷॲཧՃ 129
今後のステップアップ 130
今後のステップアップ #React DSFBUFSFBDUBQQΛFKFDUͯ͠ΈΔ $PNQPOFOUઃܭ ϥΠϒϥϦબఆ ܕ͚ 5ZQF4DSJQU qPX MJOUFS
&4-JOU 54-JOU DTT TUZMFEDPNQPOFOU FNPUJPO $44.PEVMFT ςετ +FTU 131
今後のステップアップ #エンジニアとして大事にしていること Ϣʔβʔͷ͜ͱΛͪΌΜͱҙࣝͯͭ͘͠Δ͜ͱ എܠతΛཧղ্ͨ͠Ͱͭ͘Δ͜ͱ ҙࢥͷ͋Δɾݟ͑ΔίʔυΛॻ͘͜ͱ ઌΛݟਾ͑ͨ࡞ΓΛҙࣝ͢Δ͜ͱ ٕज़ͷΩϟονΞοϓΛଵΒͳ͍͜ͱ 132
まとめ 133
さいごに #まとめ 3FBDUෑډߴͦ͏ʹࢥ͑Δ͚Ͳݪཧ؆୯ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUͷΈ߹ΘͤͳͷͰɺ QSPQTͱTUBUFΛ͓͑͞Ε࡞ΕΔʂ ·ͣެࣜνϡʔτϦΞϧ͔Βɻ 134
さいごに #参考文献 3FBDUKTͱ IUUQRJJUBDPNLPCBJUFNTEDBGBCCG 3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅ IUUQRJJUBDPNLJJUBJUFNTBGCDGC 135