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.4k
初心者に向けたサンプル付きReact入門と勉強法について
takepo
0
5.8k
React入門 2018
takepo
4
2.7k
リモートワーク+リモートでの新技術のキャッチアップ
takepo
0
120
Other Decks in Programming
See All in Programming
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
時計仕掛けのCompose
mkeeda
1
280
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Open source software: how to live long and go far
gaelvaroquaux
0
620
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Formの複雑さに立ち向かう
bmthd
1
720
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
RailsConf 2023
tenderlove
29
1k
Gamification - CAS2011
davidbonilla
80
5.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How STYLIGHT went responsive
nonsquared
98
5.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Typedesign – Prime Four
hannesfritz
40
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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