Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

44e1d764e11da2c4235c255904e60a7f?s=47 takepo
December 11, 2019

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

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

44e1d764e11da2c4235c255904e60a7f?s=128

takepo

December 11, 2019
Tweet

More Decks by takepo

Other Decks in Programming

Transcript

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

  2. ஛ౡࡊึࢠ!UBLFQP 2 ೣͱ฻Β͍ͨ͠ܥ ޻େଔ8FCΤϯδχΞ ࣗ࡞ΩʔϘʔυʹڵຯ௡ʑ 5ZQF4DSJQU+BWB4DSJQU 1)13VCZ 3FBDUྺ͸೥͘Β͍ はじめに #profile

  3. Lancers #会社概要 3

  4. 4

  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ͷΈʹಛԽ͍ͯ͠Δ ϥΠϒϥϦ͕๛෋ -FBSO0ODF 8SJUF"OZXIFSF  $PNQPOFOUΛͭ͘Δ͚ͩ  σʔλͷྲྀΕ͕୯Ұํ޲

    13 React? #概要
  14. 14 React? #利用している企業

  15. 7VF ֶशίετ͕௿͍ εϞʔϧελʔτͰ͖Δ -BMBWFM͕αϙʔτ͍ͯͯ͠૬ੑ͹͙ͭΜ "OHVMBS 5ZQF4DSJQU ϑϧελοΫ ϥΠϒϥϦΛ௥Ճ͠ͳͯ͘΋جຊඋΘ͍ͬͯΔ 15 React?

    #ほかとの違い
  16. DSFBUFSFBDUBQQͱ͍͏ͻͳܗΛ࢖͓͏ʂ OQYDSFBUFSFBDUBQQΞϓϦ໊ DEΞϓϦ໊ OQNTUBSU 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΁஋Λ౉͢ ࢠ$PNQPOFOUUFYUlUFYUl ࢠ$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. 3FBDUWͰొ৔ͨ͠IPPL TUBUFͳͲͷػೳΛΫϥε࢖Θͣʹॻ͚ΔΑ͏ʹ ࠓճ͸࢖Θͳ͍ͷͰ ؾʹͳΔਓ͸ެࣜυΩϡϝϯτ IUUQTKBSFBDUKTPSHEPDTIPPLTJOUSPIUNM 51 Componentのライフサイクル #さいきんのはなし

  52. つくってみよう 52

  53. 53 つくってみよう #なにをつくるか

  54.  DSFBUFSFBDUBQQͰ)FMMP8PSME  ඞཁͳϥΠϒϥϦͷಋೖ  TSDσΟϨΫτϦͷ੔ཧ  50%0Ϧετ࡞੒  50%0߲໨ͷ௥ՃϑΥʔϜ࡞੒

     ελΠϧௐ੔  ௥Ճػೳ։ൃ ՝୊ 54 つくってみよう #ステップ
  55. IUUQTHJUIVCDPNUBLFQPSFBDUUPEPBQQTBNQMF εςοϓ͝ͱʹDPNNJUΛ࡞੒͍ͯ͠ΔͷͰ ඞཁͳίϛοτʹνΣοΫΞ΢τͯ͠ΈͯͶ HJUDMPOFHJU!HJUIVCDPNUBLFQPSFBDUUPEPBQQ TBNQMFHJU DESFBDUUPEPBQQTBNQMF HJUMPH HJUDIFDLPVUDPNNJUϋογϡ 55 つくってみよう

    #サンプルコード
  56. 56 つくってみよう #サンプルコード

  57. /PEFWͷΠϯετʔϧ OPEFCSFX࢖ͬͯ؅ཧ͢Δ IUUQTRJJUBDPNTJONFUBMJUFNT FGCD (JU)VCΞΧ΢ϯτ࡞੒ IUUQTHJUIVCDPN 57 つくってみよう #事前準備

  58. HelloWorld 58

  59. OQYDSFBUFSFBDUBQQSFBDUUPEPBQQ DESFBDUUPEPBQQ ZBSOTUBSU 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 ZBSOBEE!NBUFSJBMVJDPSF ZBSOBEE!NBUFSJBMVJJDPOT QVCMJDJOEFYIUNMʹԼهΛ௥Ճ

  79. 79 つくってみよう #commit&push

  80. 80 つくってみよう #commit&push

  81. srcディレクトリの整理 81

  82. 82 srcディレクトリの整理 #ディレクトリ内の削除 TSD഑ԼͷϑΝΠϧΛ·ͬ͞Βʹ͢Δ SNGTSD  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͸ෑډߴͦ͏ʹࢥ͑Δ͚Ͳݪཧ͸؆୯ -FBSO0ODF 8SJUF"OZXIFSF $PNQPOFOUͷ૊Έ߹ΘͤͳͷͰɺ QSPQTͱTUBUFΛ͓͑͞Ε͹࡞ΕΔʂ ·ͣ͸ެࣜνϡʔτϦΞϧ͔Βɻ 134

  135. さいごに #参考文献 3FBDUKTͱ͸ IUUQRJJUBDPNLPCBJUFNTEDBGBCCG 3FEVYೖ໳ʲμΠδΣετ൛ʳ෼Ͱཧղ͢Δ3FEVYͷجૅ IUUQRJJUBDPNLJJUBJUFNTBGCDGC 135