Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
作りながら学ぶReactアプリケーション
takepo
December 11, 2019
Programming
1
11k
作りながら学ぶ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.2k
初心者のためのReact入門
takepo
3
4.2k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.3k
React入門 2018
takepo
4
2.5k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
79
Other Decks in Programming
See All in Programming
Lookerとdbtの共存
ttccddtoki
0
650
FutureCon 2022 FlutterアプリのPerformance測定
harukafujita
0
140
RustのWebフレームワーク周りの概観
hayao
0
180
Isar勉強会
hoddy3190
0
520
Pythonで鉄道指向プログラミング
usabarashi
0
130
それ全部エラーメッセージに書いてあるよ!〜独学でPHPプログラミングが上達するたった一つの方法〜
77web
1
160
Atomic Design とテストの○○な話
takfjp
2
820
話題の AlloyDB は本当に凄いデータベースなのでプレビューを使い倒した #devio2022
maroon1st
0
13k
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
490
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
150
SAM × Dockerでサーバーレス開発が超捗った話
yu_yukk_y
1
400
「困りごと」から始める個人開発
ikumatadokoro
4
260
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Code Reviewing Like a Champion
maltzj
506
37k
Product Roadmaps are Hard
iamctodd
35
6.9k
Support Driven Design
roundedbygravity
87
8.6k
Six Lessons from altMBA
skipperchong
14
1.4k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.8k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Atom: Resistance is Futile
akmur
255
20k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
How STYLIGHT went responsive
nonsquared
85
4k
How to name files
jennybc
40
63k
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