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.6k
初心者のための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
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
Honoの来た道とこれから
yusukebe
19
3k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
880
Identifying User Idenity
moro
6
7.9k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
qmuntal/stateless のススメ
sgash708
0
120
CSC305 Lecture 13
javiergs
PRO
0
130
Golang と Erlang
taiyow
8
1.9k
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Happy Clients
brianwarren
97
6.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
4 Signs Your Business is Dying
shpigford
180
21k
Designing for humans not robots
tammielis
249
25k
Being A Developer After 40
akosma
86
590k
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