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
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
qmuntal/stateless のススメ
sgash708
0
120
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Synchronizationを支える技術
s_shimotori
1
150
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
Piniaの現状と今後
waka292
5
1.5k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Become a Pro
speakerdeck
PRO
24
5k
GraphQLとの向き合い方2022年版
quramy
43
13k
Automating Front-end Workflow
addyosmani
1365
200k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
A designer walks into a library…
pauljervisheath
202
24k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
How STYLIGHT went responsive
nonsquared
95
5.2k
Docker and Python
trallard
40
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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