作りながら学ぶReactアプリケーション

下記勉強会で使用する資料です。
https://careerselect-studygroup.connpass.com/event/151698/

Transcript

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