Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
作りながら学ぶ Reactアプリケーション Takeshima Nahoko
Slide 2
Slide 2 text
ౡࡊึࢠ!UBLFQP 2 ೣͱΒ͍ͨ͠ܥ େଔ8FCΤϯδχΞ ࣗ࡞ΩʔϘʔυʹڵຯʑ 5ZQF4DSJQU+BWB4DSJQU 1)13VCZ 3FBDUྺ͘Β͍ はじめに #profile
Slide 3
Slide 3 text
Lancers #会社概要 3
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
5 Lancers #メッセージ機能
Slide 6
Slide 6 text
6 Lancers #プロジェクト管理
Slide 7
Slide 7 text
7 Lancers #pook
Slide 8
Slide 8 text
8 Lancers #Enterprise
Slide 9
Slide 9 text
3FBDUº3FEVYº5ZQF4DSJQU "1*αʔόʔ1)1 'JHNBͰσβΠϯͷڞ༗ "1*#MVFQSJOUΛ͔ͭͬͯ"1*༷ॻΛ࡞ 9 はじめに #いま
Slide 10
Slide 10 text
؆୯ͳΞϓϦέʔγϣϯΛ࡞ͬͯ 3FBDUͷجຊͱपลͷϥΠϒϥϦΛΔ (JUΛͬͨ։ൃϑϩʔΛମݧʂ 3FBDUΛͬͨϑϩϯΤϯυ։ൃͷ͡ΊͷҰา 10 はじめに #今回の目的
Slide 11
Slide 11 text
3FBDUͱ &4ʹ͍ͭͯ $PNQPOFOUʹ͍ͭͯ ؆୯ͳΞϓϦΛͭͬͯ͘ΈΑ͏ ࠓޙͷεςοϓΞοϓ ·ͱΊ 11 はじめに #目次
Slide 12
Slide 12 text
React? 12
Slide 13
Slide 13 text
'BDFCPPLͷΦʔϓϯιʔε +BWB4DSJQUͰ6*Λ࡞ΔͨΊ͚ͩͷϥΠϒϥϦ .7$Ͱ͍͏7JFXͷΈʹಛԽ͍ͯ͠Δ ϥΠϒϥϦ͕๛ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUΛͭ͘Δ͚ͩ σʔλͷྲྀΕ͕୯Ұํ 13 React? #概要
Slide 14
Slide 14 text
14 React? #利用している企業
Slide 15
Slide 15 text
7VF ֶशίετ͕͍ εϞʔϧελʔτͰ͖Δ -BMBWFM͕αϙʔτ͍ͯͯ͠૬ੑ͙ͭΜ "OHVMBS 5ZQF4DSJQU ϑϧελοΫ ϥΠϒϥϦΛՃ͠ͳͯ͘جຊඋΘ͍ͬͯΔ 15 React? #ほかとの違い
Slide 16
Slide 16 text
DSFBUFSFBDUBQQͱ͍͏ͻͳܗΛ͓͏ʂ OQYDSFBUFSFBDUBQQΞϓϦ໊ DEΞϓϦ໊ OQNTUBSU 16 React? #はじめかた
Slide 17
Slide 17 text
17 React? #はじめかた
Slide 18
Slide 18 text
これだけで OK✨ 18
Slide 19
Slide 19 text
ES6 19
Slide 20
Slide 20 text
20 React? #ES6 &$."4DSJQU +BWB4DSJQUͷݴޠ༷ શͯͷϒϥβͰରԠͯ͠ΔΘ͚Ͱͳ͍ #BCFMͰτϥϯεύΠϧ͢Δඞཁ͕͋Δ
Slide 21
Slide 21 text
21 ES6 #letやconstで変数宣言 ࠶એݴ࠶ೖෆՄೳͳએݴ͕Ͱ͖ΔͷͰ ೋॏఆٛɾ༧ظͤ͵࠶ೖΛ͛Δ
Slide 22
Slide 22 text
22 ES6 #letやconstで変数宣言
Slide 23
Slide 23 text
23 ES6 #class構文が使える
Slide 24
Slide 24 text
24 ES6 #importとexport Ϟδϡʔϧ͔ΒมؔɺΦϒδΣΫτΛΤΫ εϙʔτͰ͖Δ ଞͰ͏߹FYQPSUΛͨ͠ͷΛJNQPSU͢Δ ଞͷϥΠϒϥϦΛಡΈࠐΉͱ͖JNQPSUΛ͏
Slide 25
Slide 25 text
25 ES6 #importとexport JNQPSUͱFYQPSUͷྫΔ
Slide 26
Slide 26 text
26 ES6 #アロー関数 ΛͬͯؔϦςϥϧΛهड़͢Δ͜ͱ͕Ͱ͖Δ GVODUJPOΛ͍͍ͪͪॻ͔ͳͯ͘Α͍ ΞϩʔؔΛએݴͨ࣌͠ͰUIJTΛଋറ͢Δ
Slide 27
Slide 27 text
27 ES6 #アロー関数
Slide 28
Slide 28 text
他にも色々便利な ものがあるけど いったんOK 28
Slide 29
Slide 29 text
component 29
Slide 30
Slide 30 text
࠶ར༻Մೳͳύʔπ ࣗͰࣗͷঢ়ଶΛཧ͢Δ جຊతʹ$PNQPOFOUΛ࡞ͬͯΈ߹Θͤͯ ΞϓϦέʔγϣϯΛ࡞͍ͬͯ͘ +49ͳͲΛͬͯهड़͢Δ Ϋϥείϯϙʔωϯτͱؔίϯϙʔωϯτ͕͋Δ 30 React? #Component
Slide 31
Slide 31 text
͜Ε'BDFCPPL +BWB4DSJQUͷߏจதʹ 9.-෩ͷͷΛͦͷ··ॻ͚Δ )5.-ͱࣅ͍ͯΔͷͰ׳ΕΕ σβΠφʔͰΘ͔Γ͍͢ʂ 31 React? #JSX
Slide 32
Slide 32 text
32 React? #クラスComponentサンプル
Slide 33
Slide 33 text
33 React? #関数Componentサンプル
Slide 34
Slide 34 text
34 React? #JSXはHTMLっぽい
Slide 35
Slide 35 text
QSPQT $PNQPOFOUੜ࣌ʹ͔Β͞ΕΔΦϒδΣΫτ $PNQPOFOU͕ը໘͔Βഉআ͞ΕΔ·Ͱෆมͷ *NNVUBCMFͰ͋Γ֎෦ͱͷΠϯλʔϑΣʔεͷׂ TUBUF ಈతʹΛมԽͤ͞ΒΕΔΦϒδΣΫτ $PNQPOFOUͰอ࣋ 35 Component #propsとstate
Slide 36
Slide 36 text
36 propsとstate #propsのサンプル
Slide 37
Slide 37 text
$PNQPOFOU͔Βࢠ$PNQPOFOUΛ͢ ࢠ$PNQPOFOUUFYUlUFYUl ࢠ$PNQPOFOUͰΛड͚ͱͬͯදࣔ EJW\UIJTQSPQTUFYU^EJW 37 propsを使ったサンプル #propsのつかいかた
Slide 38
Slide 38 text
38 propsのサンプル #ListItemComponent
Slide 39
Slide 39 text
39 propsのサンプル #AppComponent
Slide 40
Slide 40 text
40 propsとstate #propsのサンプル
Slide 41
Slide 41 text
41 propsのサンプル #AppComponent
Slide 42
Slide 42 text
42 propsのサンプル #AppComponentの改良
Slide 43
Slide 43 text
43 propsとstate #stateを使ったサンプル
Slide 44
Slide 44 text
࣮ࡍʹΧϯτͤ͞ΔΛTUBUFͰ࣋ͨͤΔ TUBUFಈతʹΛมԽͤ͞ΒΕΔͷͰ ϘλϯΛԡͨ࣌͠ʹDPNQPOFOUͰ TUBUFͷΛมԽͤ͞Δ 44 stateを使ったサンプル #つくりの説明
Slide 45
Slide 45 text
TUBUFͷॳظԽΛ͢Δ DPOTUSVDUPSͰ UIJTTUBUF\DPVOU^ TUBUFͷDPVOUΛදࣔ EJW\UIJTTUBUFDPVOU^EJW TUBUFͷΛॻ͖͑Δ UIJTTFU4UBUF \DPVOU^ 45 stateを使ったサンプル #stateのつかいかた
Slide 46
Slide 46 text
stateを使ったサンプル #AppComponent
Slide 47
Slide 47 text
47 propsとstate #stateを使ったサンプル
Slide 48
Slide 48 text
$PNQPOFOUʹϥΠϑαΠΫϧϝιου͕͋Δ %0.͕ϚϯτΞϯϚϯτ͞ΕΔͱ͖ɺ QSPQT͕มԽ͢Δͱ͖ͳͲͷλΠϛϯάͰݺΕΔ ϝιου "1*Λݺͼ͍ͨ༻్ʹ߹Θͤͯ͑Δ 48 Component #Componentのライフサイクル
Slide 49
Slide 49 text
IUUQTRJJUBDPNLBXBDIJJUFNTCGDGFBF
Slide 50
Slide 50 text
WͰԼه͕ඇਪɺࠓޙআ༧ఆ⚠ UNSAFE_ʹϦωʔϜ͞Ε͍ͯΔ DPNQPOFOU8JMM.PVOU DPNQPOFOU8JMM6QEBUF DPNQPOFOU8JMM3FDFJWF1SPQT ɹHFU%FSJWFE4UBUF'SPN1SPQTΛ͏ 50 Componentのライフサイクル #さいきんのはなし
Slide 51
Slide 51 text
3FBDUWͰొͨ͠IPPL TUBUFͳͲͷػೳΛΫϥεΘͣʹॻ͚ΔΑ͏ʹ ࠓճΘͳ͍ͷͰ ؾʹͳΔਓެࣜυΩϡϝϯτ IUUQTKBSFBDUKTPSHEPDTIPPLTJOUSPIUNM 51 Componentのライフサイクル #さいきんのはなし
Slide 52
Slide 52 text
つくってみよう 52
Slide 53
Slide 53 text
53 つくってみよう #なにをつくるか
Slide 54
Slide 54 text
DSFBUFSFBDUBQQͰ)FMMP8PSME ඞཁͳϥΠϒϥϦͷಋೖ TSDσΟϨΫτϦͷཧ 50%0Ϧετ࡞ 50%0߲ͷՃϑΥʔϜ࡞ ελΠϧௐ Ճػೳ։ൃ ՝ 54 つくってみよう #ステップ
Slide 55
Slide 55 text
IUUQTHJUIVCDPNUBLFQPSFBDUUPEPBQQTBNQMF εςοϓ͝ͱʹDPNNJUΛ࡞͍ͯ͠ΔͷͰ ඞཁͳίϛοτʹνΣοΫΞτͯ͠ΈͯͶ HJUDMPOFHJU!HJUIVCDPNUBLFQPSFBDUUPEPBQQ TBNQMFHJU DESFBDUUPEPBQQTBNQMF HJUMPH HJUDIFDLPVUDPNNJUϋογϡ 55 つくってみよう #サンプルコード
Slide 56
Slide 56 text
56 つくってみよう #サンプルコード
Slide 57
Slide 57 text
/PEFWͷΠϯετʔϧ OPEFCSFXͬͯཧ͢Δ IUUQTRJJUBDPNTJONFUBMJUFNT FGCD (JU)VCΞΧϯτ࡞ IUUQTHJUIVCDPN 57 つくってみよう #事前準備
Slide 58
Slide 58 text
HelloWorld 58
Slide 59
Slide 59 text
OQYDSFBUFSFBDUBQQSFBDUUPEPBQQ DESFBDUUPEPBQQ ZBSOTUBSU 59 つくってみよう #HelloWorld
Slide 60
Slide 60 text
60 つくってみよう #HelloWorld
Slide 61
Slide 61 text
ʜඞཁͳϥΠϒϥϦ͕ೖ͍ͬͯΔ ʜ)5.-ͱ͔ը૾ͱ͔ ʜKT DTTͳͲͷ3FBDUͷίʔυ ʜύοέʔδεΫϦϓτͷઃఆ ʜύοέʔδͷґଘؔͷઃఆ 61 つくってみよう #ディレクトリ構成
Slide 62
Slide 62 text
ύοέʔδཧπʔϧ ϑϩϯτͰར༻͢ΔϥΠϒϥϦΛ QBDLBHFKTPOͱ͍͏ϑΝΠϧͰཧ 3VCZͰ͍͏CVOEMFS ߴʂ 62 つくってみよう #yarn
Slide 63
Slide 63 text
QBDLBHFKTPO 63 つくってみよう #スクリプト
Slide 64
Slide 64 text
64 つくってみよう #GitHubのリポジトリ作成
Slide 65
Slide 65 text
65 つくってみよう #GitHubのリポジトリ作成
Slide 66
Slide 66 text
66 つくってみよう #GitHubのリポジトリ作成
Slide 67
Slide 67 text
67 つくってみよう #GitHubのリポジトリ作成
Slide 68
Slide 68 text
68 つくってみよう #HelloWorld
Slide 69
Slide 69 text
69 つくってみよう #HelloWorld
Slide 70
Slide 70 text
70 つくってみよう #リポジトリにコミット )FMMP8PSMEͰ͖ͨͷͰίϛοτͯ͠ϓογϡʂ
Slide 71
Slide 71 text
71 つくってみよう #リポジトリにコミット
Slide 72
Slide 72 text
72 つくってみよう #コミットメッセージ
Slide 73
Slide 73 text
73 つくってみよう #コミットメッセージ ϝοηʔδͷઌ಄ʹϓϨϑΟοΫεΛ͚ͭΔ ϩάΛΈͨΓɺϨϏϡʔͯ͠Β͏ࡍʹԿʹର͢ Δมߋ͔ΛѲ͘͢͢͠Δ ϓϨϑΟοΫεΛҙࣝ͢Δ͜ͱͰ ͖Ε͍ʹίϛοτׂͰ͖ΔΑ͏ʹ
Slide 74
Slide 74 text
74 つくってみよう #コミットメッセージ "OHVMBSͷ։ൃΨΠυͷྫ IUUQTHJUIVCDPNBOHVMBSBOHVMBSKTCMPC NBTUFS%&7&-01&34NEUZQF
Slide 75
Slide 75 text
必要な ライブラリの導入 75
Slide 76
Slide 76 text
76 つくってみよう #Material-ui ϚςϦΞϧσβΠϯʹͦͬͯ࡞ΒΕͨ $PNQPOFOUϥΠϒϥϦ
Slide 77
Slide 77 text
77 つくってみよう #Material-ui IUUQTNBUFSJBMVJDPNDPNQPOFOUTMJTUT IUUQTNBUFSJBMVJDPNDPNQPOFOUTCVUUPOT IUUQTNBUFSJBMVJDPNDPNQPOFOUTUFYU pFMET
Slide 78
Slide 78 text
78 つくってみよう #Material-uiの導入 IUUQTNBUFSJBMVJDPNKBHFUUJOHTUBSUFE JOTUBMMBUJPO ZBSOBEE!NBUFSJBMVJDPSF ZBSOBEE!NBUFSJBMVJJDPOT QVCMJDJOEFYIUNMʹԼهΛՃ
Slide 79
Slide 79 text
79 つくってみよう #commit&push
Slide 80
Slide 80 text
80 つくってみよう #commit&push
Slide 81
Slide 81 text
srcディレクトリの整理 81
Slide 82
Slide 82 text
82 srcディレクトリの整理 #ディレクトリ内の削除 TSDԼͷϑΝΠϧΛ·ͬ͞Βʹ͢Δ SNGTSD XJOͷํEFMίϚϯυΛ (6*Ͱফͯ͠0,
Slide 83
Slide 83 text
83 srcディレクトリの整理 #TODOアプリの基本形をつくる TSDԼʹ"QQKTΛ࡞Δ
Slide 84
Slide 84 text
84 srcディレクトリの整理 #TODOアプリの基本形をつくる TSDԼʹJOEFYKT࡞Δ
Slide 85
Slide 85 text
85 srcディレクトリの整理 #ReactDOM.render() 3FBDUͷཁૉ)5.-ʹ͋Δ%0.ʹϨϯμϦϯά
Slide 86
Slide 86 text
86 srcディレクトリの整理 #TODOアプリの基本形をつくる
Slide 87
Slide 87 text
87 つくってみよう #commit&push
Slide 88
Slide 88 text
88 つくってみよう #commit&push
Slide 89
Slide 89 text
TODOリスト作成 89
Slide 90
Slide 90 text
90 TODOリスト作成 #TodoListComponentを作る
Slide 91
Slide 91 text
91 TODOリスト作成 #TodoListComponentを読み込む
Slide 92
Slide 92 text
92 TODOリスト作成 #TodoListComponentの表示確認
Slide 93
Slide 93 text
93 TODOリスト作成 #Material-uiをつかう IUUQTNBUFSJBMVJDPNKBDPNQPOFOUTMJTUT
Slide 94
Slide 94 text
94 TODOリスト作成 #Material-uiをつかう
Slide 95
Slide 95 text
95 TODOリスト作成 #Material-uiをつかう
Slide 96
Slide 96 text
96 TODOリスト作成 #AppComponentからデータを渡す
Slide 97
Slide 97 text
97 TODOリスト作成 #AppComponentからデータをもらう
Slide 98
Slide 98 text
98 TODOリスト作成 #AppComponentからデータをもらう
Slide 99
Slide 99 text
99 TODOリスト作成 #commit&push
Slide 100
Slide 100 text
100 TODOリスト作成 #commit&push
Slide 101
Slide 101 text
TODO項目の 追加フォーム作成 101
Slide 102
Slide 102 text
102 TODO項目の追加フォーム作成 #Listデータをstateで管理する
Slide 103
Slide 103 text
103 TODO項目の追加フォーム作成 #Listデータをstateで管理する
Slide 104
Slide 104 text
104 TODO項目の追加フォーム作成 #FormComponentをつくる
Slide 105
Slide 105 text
105 TODO項目の追加フォーム作成 #FormComponentを読み込む
Slide 106
Slide 106 text
106 TODO項目の追加フォーム作成 #FormComponentを表示
Slide 107
Slide 107 text
107 TODO項目の追加フォーム作成 #入力値をstateで保持する
Slide 108
Slide 108 text
108 TODO項目の追加フォーム作成 #入力値をstateで保持する
Slide 109
Slide 109 text
109 TODO項目の追加フォーム作成 #入力値のstateを更新
Slide 110
Slide 110 text
110 TODO項目の追加フォーム作成 #入力値のstateを更新
Slide 111
Slide 111 text
111 TODO項目の追加フォーム作成 #入力値のstateを更新
Slide 112
Slide 112 text
112 TODO項目の追加フォーム作成 #追加処理の作成
Slide 113
Slide 113 text
113 TODO項目の追加フォーム作成 #追加処理の作成
Slide 114
Slide 114 text
114 TODO項目の追加フォーム作成 #追加処理の作成
Slide 115
Slide 115 text
115 TODO項目の追加フォーム作成 #追加処理の作成
Slide 116
Slide 116 text
116 TODO項目の追加フォーム作成 #commit&push
Slide 117
Slide 117 text
117 TODO項目の追加フォーム作成 #commit&push
Slide 118
Slide 118 text
スタイル調整 118
Slide 119
Slide 119 text
119 スタイル調整 #app.cssを準備
Slide 120
Slide 120 text
120 スタイル調整 #app.cssをimport
Slide 121
Slide 121 text
121 スタイル調整 #classNameでスタイルあて
Slide 122
Slide 122 text
122 スタイル調整 #classNameでスタイルあて
Slide 123
Slide 123 text
123 スタイル調整 #表示確認
Slide 124
Slide 124 text
124 スタイル調整 #commit&push
Slide 125
Slide 125 text
125 スタイル調整 #commit&push
Slide 126
Slide 126 text
課題 126
Slide 127
Slide 127 text
つくってみよう #今後の課題 ϦετͷΛදࣔ͢Δ Ϧετͷදࣔ༻ͷ$PNQPOFOUΛͭ͘Δ ϦετͷΛTUBUF͔Βࢉग़ ࢉग़ͨ͠ϦετͷΛ$PNQPOFOUʹͯ͠දࣔ 127
Slide 128
Slide 128 text
つくってみよう #今後の課題 Ϧετͷද͔ࣔ͠Ͱ͖͍ͯͳ͍ͷͰɺ ߲ʹνΣοΫΛೖΕΒΕΔΑ͏ʹ͢Δ ঢ়ଶཧͷͨΊʹTUBUFͷมߋΛ͢Δ νΣοΫϘοΫεͷදࣔ νΣοΫͨ͠ͱ͖ͷڍಈ࡞ 128
Slide 129
Slide 129 text
つくってみよう #今後の課題 Ϧετ͔Β߲͔Βআ͕Ͱ͖ΔΑ͏ʹ͢Δ আϘλϯΛ߲͝ͱʹઃஔ আͨ͠ͱ͖ͷॲཧՃ 129
Slide 130
Slide 130 text
今後のステップアップ 130
Slide 131
Slide 131 text
今後のステップアップ #React DSFBUFSFBDUBQQΛFKFDUͯ͠ΈΔ $PNQPOFOUઃܭ ϥΠϒϥϦબఆ ܕ͚ 5ZQF4DSJQU qPX MJOUFS &4-JOU 54-JOU DTT TUZMFEDPNQPOFOU FNPUJPO $44.PEVMFT ςετ +FTU 131
Slide 132
Slide 132 text
今後のステップアップ #エンジニアとして大事にしていること Ϣʔβʔͷ͜ͱΛͪΌΜͱҙࣝͯͭ͘͠Δ͜ͱ എܠతΛཧղ্ͨ͠Ͱͭ͘Δ͜ͱ ҙࢥͷ͋Δɾݟ͑ΔίʔυΛॻ͘͜ͱ ઌΛݟਾ͑ͨ࡞ΓΛҙࣝ͢Δ͜ͱ ٕज़ͷΩϟονΞοϓΛଵΒͳ͍͜ͱ 132
Slide 133
Slide 133 text
まとめ 133
Slide 134
Slide 134 text
さいごに #まとめ 3FBDUෑډߴͦ͏ʹࢥ͑Δ͚Ͳݪཧ؆୯ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUͷΈ߹ΘͤͳͷͰɺ QSPQTͱTUBUFΛ͓͑͞Ε࡞ΕΔʂ ·ͣެࣜνϡʔτϦΞϧ͔Βɻ 134
Slide 135
Slide 135 text
さいごに #参考文献 3FBDUKTͱ IUUQRJJUBDPNLPCBJUFNTEDBGBCCG 3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅ IUUQRJJUBDPNLJJUBJUFNTBGCDGC 135