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

React×ReduxにおけるTypeScript入門

 React×ReduxにおけるTypeScript入門

昨日01/21に【サポーターズ】React×ReduxにおけるTypeScript入門(https://supporterzcolab.com/event/679/) というイベントで登壇させていただきました。その登壇の際の発表スライドをあげさせていただきます。

内容はTypeScriptの基本的な部分とReactやReduxの経験者向けのTypeScriptでの書き方の説明をサンプルコード付きでさせていただきました。

TypescriptとはTypeScriptをはじめる方法
TypeScriptの型について
一緒に入れると良いライブラリ
ReactのComponentを書く
Reduxのフローを書く
TypeScriptを導入してみて

44e1d764e11da2c4235c255904e60a7f?s=128

Takeshima Nahoko

January 21, 2019
Tweet

More Decks by Takeshima Nahoko

Other Decks in Programming

Transcript

  1. React×Reduxにおける TypeScript入門 01.21 サポーターズCoLab勉強会 Takeshima Nahoko

  2. ஛ౡࡊึࢠ!UBLFQP 2 ೣͱ฻Β͍ͨ͠ܥ ޻େଔ8FCΤϯδχΞ ϥϯαʔζ೥໨ ࣗ࡞ΩʔϘʔυʹڵຯ௡ʑ +BWB4DSJQU1)13VCZ(P 3FBDUྺ͸೥ܦͪ·ͨ͠ はじめに #profile

  3. Lancers #会社概要 3

  4. 4

  5. 5 Lancers #メッセージ機能

  6.   Lancers #プロジェクト管理

  7. 7 Lancers #pook

  8. ৽نࣄۀઈࢍ։ൃத 3FBDUº3FEVYº5ZQF4DSJQU "1*αʔόʔ͸(Pݴޠ ;FQMJOͰσβΠϯͷڞ༗ "1*࢓༷ॻΛNPDLαʔόʔԽ 8 はじめに #いま

  9.  5ZQFTDSJQU   5ZQF4DSJQUΛ͸͡ΊΔ  5ZQF4DSJQUͷܕʹ͍ͭͯ  ҰॹʹೖΕΔͱྑ͍ϥΠϒϥϦ 

    3FBDUͷ$PNQPOFOUΛॻ͘  3FEVYͷϑϩʔΛॻ͘  5ZQF4DSJQUΛಋೖͯ͠Έͯ 9 はじめに #目次
  10. TypeScript? 10

  11. ϚΠΫϩιϑτ͕࡞ͬͨݴޠ Φʔϓϯιʔε $ͷઃܭΛ͍ͯͨ͠Ξϯμʔεɾϔϧεόʔά ͞Μ΋։ൃʹؔΘ͍ͬͯΔ େن໛ΞϓϦέʔγϣϯ։ൃͷͨΊʹઃܭ͞Εͯ ͍Δ 11 TypeScript? #概要

  12. KBWB4DSJQUʹରͯ͠ ੩తܕ෇͚ ΫϥεϕʔεͷΦϒδΣΫτࢦ޲ ͕Ͱ͖Δ &4ʹ੩తܕ෇͚͕Ͱ͖ΔΠϝʔδ 5ZQF4DSJQUͰॻ͍ͨίʔυΛ +BWB4DSJQUʹίϯύΠϧ͕ඞཁ͕͋Δ 12 TypeScript? #特徴

  13. 3FBDU/BUJWF΋UTʹରԠͨ͠Γͱ࠷ۙਓؾ "OHVMBSͷඪ४ରԠͰ΋͋Δ (PPHMFͷࣾ಺ඪ४ݴޠʹ΋ͳͬͨ 13 TypeScript? #最近だと

  14. ΋ͱ΋ͱ3FBDUʹ͸1SPQ5ZQFTͱ͍͏ QSPQTͷܕνΣοΫػೳ͕ଘࡏ͍ͯͨ͠ ͔͠͠WͷϦϦʔεͰผύοέʔδԽ͞Εͨ QSPQUZQFTΛผͰΠϯετʔϧ͢Δඞཁ͕͋Δ 'MPX΍5ZQF4DSJQUͰܕνΣοΫΛਪ঑͢ΔΑ͏ʹ 14 TypeScript? #React.PropTypes?

  15. ੩తܕνΣοΫΛͯ͘͠Εͯɺ ࣮ߦલʹܕΤϥʔΛݕग़Ͱ͖Δ ίϯύΠϥͰ͸ͳ͘λΠϓνΣοΧʔ ൺֱత؆୯ʹಋೖ͕Ͱ͖Δ ϑΝΠϧͷઌ಄ʹʮ!qPXʯΛ͚ͭΔ͚ͩ qPX͸΋ͱ΋ͱQPPLͰ࢖͍ͬͯͨ 15 TypeScript? #flow

  16. TypeScript をはじめる 16

  17. 5ZQF4DSJQU͚ͩΛࢼ͢ͳΒ 5ZQF4DSJQUΛΠϯετʔϧͯ͠ίϯύΠϧ 3FBDUͰ࢖͏ͳΒ ࣗ෼ͰΠν͔Β؀ڥߏங DSFBUFSFBDUBQQͰ؆୯؀ڥߏங 17 TypeScriptをはじめる #はじめる方法

  18. UZQFTDSJQUΛΠϯετʔϧ OQNJOTUBMMHUZQFTDSJQU ίʔυΛίϯύΠϧ UTDϑΝΠϧ໊UT 18 Typescriptをはじめる #インストール & コンパイル

  19. IFMMPXPSMEUTΛ࡞੒ 19 Typescriptをはじめる #HelloWorldする

  20. IFMMPXPSMEUTΛίϯύΠϧ͢Δ UTDIFMMPXPSMEUT 20 Typescriptをはじめる #HelloWorldする

  21. )FMMPXPSMEKTΛIUNMͰಡΈࠐΉ 21 Typescriptをはじめる #HelloWorldする

  22. σΟϨΫτϦ࡞੒ NLEJSSFBDUIFMMPXPSME DESFBDUIFMMPXPSME QBDLBHFKTPOͷ࡞੒ OQNJOJU 22 Typescriptをはじめる #自分でイチからはじめる

  23. σΟϨΫτϦˍϑΝΠϧ४උ 23 Typescriptをはじめる #自分でイチからはじめる

  24. EJTUCVOEMFKT ίϯύΠϧͯ͠ग़ྗ͞ΕΔϑΝΠϧ ͱΓ͋͑ͣϑΝΠϧ࡞੒͚ͩ TSDJOEFYUTY 3FBDUΛ5ZQF4DSJQUͰॻͨ͘ΊͷϑΝΠϧ KTYΛ5ZQF4DSJQUͰ͔ͨ͘Ί֦ுࢠ͸UTY ͱΓ͋͑ͣϑΝΠϧ࡞੒͚ͩ 24 Typescriptをはじめる #自分でイチからはじめる

  25. JOEFYIUNM CVOEMFKTΛಡΈࠐΜͰ3FBDUίϯϙʔωϯτΛग़ ྗ͢ΔΞϓϦέʔγϣϯͷຊମʹͳΔϑΝΠϧ 25 Typescriptをはじめる #自分でイチからはじめる

  26. 26 Typescriptをはじめる #自分でイチからはじめる

  27. ඞཁͳϥΠϒϥϦΛΠϯετʔϧ͢Δ 8FCQBDL OQNJOTUBMMTBWFEFWXFCQBDL SFBDUSFDUEPN OQNJOTUBMMTBWFSFBDUSFBDUEPN!UZQFT SFBDU!UZQFTSFBDUEPN 27 Typescriptをはじめる #自分でイチからはじめる

  28. 5ZQF4DSJQU·ΘΓͰඞཁͳϞϊ OQNJOTUBMMTBWFEFWUZQFTDSJQUBXFTPNF UZQFTDSJQUMPBEFSTPVSDFNBQMPBEFS 28 Typescriptをはじめる #自分でイチからはじめる

  29. UZQFTDSJQU 5ZQF4DSJQUຊମ BXFTPNFUZQFTDSJQUMPBEFS ઃఆϑΝΠϧΛݩʹ τϥϯεύΠϧ͢ΔͨΊͷύοέʔδ TPVSDFNBQMPBEFS ιʔεϚοϓੜ੒ύοέʔδ 29 Typescriptをはじめる #自分でイチからはじめる

  30. τϥϯεύΠϧ͢ΔͨΊͷ ઃఆϑΝΠϧͷUTDPOpHKTPOͷ࡞੒ ৭ʑϓϩύςΟ͕͋ΔͷͰ ৄ͘͠͸ެࣜΛ֬ೝʂ IUUQTXXXUZQFTDSJQUMBOHPSHEPDT IBOECPPLUTDPOpHKTPOIUNM 8FCQBDLͷઃఆϑΝΠϧXFCQBDLDPOpHKT΋࡞੒ 30 Typescriptをはじめる #自分でイチからはじめる

  31. 31 Typescriptをはじめる #自分でイチからはじめる

  32. 32 Typescriptをはじめる #自分でイチからはじめる

  33. "QQUTY 33 Typescriptをはじめる #自分でイチからはじめる

  34. JOEFYUTY 34 Typescriptをはじめる #自分でイチからはじめる

  35. QBDLBHFKTPOʹCVJME༻ͷεΫϦϓτΛ௥Ճ͢Δ 35 Typescriptをはじめる #自分でイチからはじめる

  36. ϏϧυεΫϦϓτ࣮ߦͯ͠JOEFYIUNMΛ։͘ OQNSVOCVJME 36 Typescriptをはじめる #自分でイチからはじめる

  37. ֎෦ϥΠϒϥϦΛೖΕΔͱ͖ʹ͸ ҰॹʹܕఆٛϑΝΠϧ΋Πϯετʔϧ͢Δඞཁ͕ ͋Δ 5ZQF4DSJQUҎ߱ͩͱ OQN͔ΒΠϯετʔϧ͢Δ͜ͱ͕Ͱ͖Δ OQNJOTUBMMŠTBWF!UZQFT\ܕఆٛϑΝΠϧ໊^ 37 TypeScriptをはじめる #ライブラリをインストールする

  38. 5ZQF4FBSDIΛ࢖͑͹ܕఆٛϑΝΠϧݕࡧ͕Ͱ͖Δ IUUQNJDSPTPGUHJUIVCJP5ZQF4FBSDI 38 TypeScriptをはじめる #ライブラリをインストールする

  39. OQNJOTUBMMHDSFBUFSFBDUBQQ DSFBUFSFBDUBQQ\ΞϓϦ໊^ŠTDSJQUT WFSTJPOSFBDUTDSJQUTUT DEΞϓϦ໊ OQNTUBSU 39 Typescriptをはじめる #create-react-appではじめる

  40. Typescriptをはじめる #create-react-appではじめる

  41. これだけで OK✨ 41

  42. TypeScript の型について 42

  43. #PPMFBO /VNCFS 4USJOH "SSBZ 5VQMF 43 Typescriptの型について #基本の型 &OVN "OZ

    7PJE /FWFS 0CKFDU
  44. #PPMFBO MFUJT-PBEJOHCPPMFBOGBMTF /VNCFS MFUBHFOVNCFS "SSBZ MFUMJTUOVNCFS<><  > 44 Typescriptの型について

    #変数宣言
  45. ໊લ෇͖ͷఆ਺܈Λఆٛ͢Δ͜ͱ͕Ͱ͖Δ "DUJPO5ZQFΛఆٛ͢Δͱ͖ʹ࢖͏ FOVN%JSFDUJPO\ 6Q  %PXO  -FGU  3JHIU

     ^ 45 Typescriptの型について #Enum
  46. ͲΜͳ஋Ͱ΋୅ೖՄೳ 5ZQF4DSJQUͷܕγεςϜΛແࢹ͢Δ͜ͱʹͳΔ 5ZQF4DSJQUͷྑ͞Λͳͯ͘͠͠·͏ͷͰ ͳΔ΂͘ආ͚Δ͜ͱ͕ཧ૝ 46 Typescriptの型について #Any

  47. จࣈྻɾ਺஋ɾਅِ஋ͷϦςϥϧ͕͋Δ ྫ DPOTUBIPHFbIPHF` bIPHF`͔͠ڐ༰͞Εͳ͍ܕʹ 47 Typescriptの型について #リテラル型

  48. +BWB4DSJQUʹ͸ଘࡏ͠ͳ͍ɺ 5ZQF4DSJQUͷಠࣗͷߏจ ΦϒδΣΫτܕʹ໊લΛ͚ͭΔ͜ͱ͕Ͱ͖Δ JOUFSGBDF1FSTPO\ OBNFTUSJOH BHFOVNCFS ^ 48 Typescriptの型について #interface

  49. ఆٛͨ͠ΠϯλϑΣʔεΛ࢖͏ DPOTUIPHF1FSTPO\ OBNFbUBSP`  BHF  ^ 49 Typescriptの型について #interface

  50. ܕ஫ऍΛ͠ͳͯ͘΋ ࣮͸ΦϒδΣΫτܕΛਪ࿦ͯ͘͠ΕΔ ܕʹҰக͠ͳ͍ΦϒδΣΫτΛ ม਺ʹ୅ೖͨ͠Γ͠Α͏ͱ͢ΔͱܕΤϥʔʹͳΔ 50 Typescriptの型について #interface

  51. Ҿ਺ͷܕͱ໭Γ஋ͷܕΛఆٛ͢Δ GVODUJPOBEE YOVNCFS ZOVNCFS OVNCFS\ SFUVSOY Z ^ 51 Typescriptの型について

    #関数
  52. ΠϯλϑΣʔεͳͲͷܕఆٛΛม਺ԽͰ͖Δ ֎෦ϥΠϒϥϦͷܕఆٛͱ͔ͰΑ͘ݟΔ GVODUJPOJEFOUJUZ5 BSH5 5\ SFUVSOBSH ^ MFUPVUQVUJEFOUJUZTUSJOH NZ4USJOH 

    52 Typescriptの型について #ジェネリック
  53. 一緒に入れると よいライブラリ 53

  54. 5ZQF4DSJQUͷ੩తίʔυղੳπʔϧ &4-JOUͰ΋͓ͳ͡ΈͷBJSCOCͷϧʔϧ͕͋ΔͷͰ ·͕ͣ͜ΕΛೖΕΔ͜ͱΛ͓͢͢Ί͠·͢ IUUQTXXXOQNKTDPNQBDLBHFUTMJOUDPOpH BJSCOC ϓϥεͰඞཁʹԠͯ͡ϧʔϧ௥Ճ͢Ε͹0, 54 一緒に入れるとよいライブラリ #TSLint

  55. 54-JOUͱ&4-JOUͷ྆ํαϙʔτ͚ͯͨ͠Ͳɺ 54-JOUʹ͍Ζ͍Ζ໰୊Ͱ͖ͯͨͷͰ &4-JOUΛαϙʔτ͍ͯ͘͠Αʂ ͱɺ࠷ۙ5ZQF4DSJQUͷެࣜͷΞφ΢ϯε͕͋ͬͨ UZQFTDSJQUFTMJOU͕࢝ಈͨ͠ͷͰࠓޙཁνΣοΫʂ IUUQTHJUIVCDPN.JDSPTPGU5ZQF4DSJQU JTTVFT 55 一緒に入れるとよいライブラリ #ただ。。。

  56. ίʔυϑΥʔϚολ ίʔυΛҰ؏ͨ͠ελΠϧʹ४ڌ͢ΔΑ͏ʹͰ͖Δ 5ZQF4DSJQUʹݶΒͣ+4 +49 $44 +40/ͳͲ ϑϩϯτͰ࢖ΘΕ͍ͯΔݴޠ΍࢓༷ʹରԠ͍ͯ͠Δ IUUQTHJUIVCDPNQSFUUJFSQSFUUJFS πʔϧʹ͓·͔ͤͰ͖Δͱ͜Ζ͸ ͓·͔͍͖ͤͯ͠·͠ΐ͏ʂ

    56 一緒に入れるとよいライブラリ #Prettier
  57. Reactの Componentを書く 57

  58. 58 ReactのComponentを書く # Componentの基本形

  59. 59 ReactのComponentを書く # Componentでprops&state

  60. 60 ReactのComponentを書く # Componentでprops&state

  61. 61 ReactのComponentを書く # SFCの基本形

  62. 62 ReactのComponentを書く # SFCでPropsを使う

  63. $PNQPOFOU͝ͱʹσΟϨΫτϦΛ੾ͬͯ 1SPQTͷܕఆٛϑΝΠϧΛผͰ࡞ͬͯ JOEFYUTYͰಡΈऔΔܗΛ ͱ͍ͬͯΔ 63 ReactのComponentを書く #Componentのディレクトリ構成

  64. Reduxの フローを書く 64

  65. 65 Reduxのフローを書く #ActionType

  66. 66 Reduxのフローを書く #ActionCreater

  67. 67 Reduxのフローを書く #reducer

  68. 68 Reduxのフローを書く #reducer

  69. 69 Reduxのフローを書く #Container

  70. 70 Reduxのフローを書く #Container

  71. TypeScriptを 導入してみて 71

  72. #BCFMͰॻ͘ͷͱಉ͡ײ͡Ͱॻ͚Δ ίʔυͷՄಡੑΞοϓʂ ίϯύΠϧ࣌ͷΤϥʔݕग़ͰૣظൃݟͰ͖Δʂ ܕਪ࿦΋ͯ͘͠ΕΔͷͰݡ͍ ίʔυิ׬ΊͬͪΌศར 72 TypeScriptを導入してみて #導入してみて

  73. 'MPXΛ৮ͬͨ͜ͱ͕͋ͬͨ͜ͱʹΑΓ ܕΛ͚ͭΔোน͸͋·Γߴ͘ͳ͔ͬͨ ৽نϓϩδΣΫτͩͬͨͷͰ ·ͬ͞Βͷঢ়ଶ͔Βಋೖ͕࢝ΊΒΕͨ ్தͰख఻͍͍ͬͯͨͩͨ͜ͱ͕͚͋ͬͨͲ ൺֱతૉ௚ʹϓϩδΣΫτࢀՃ͍͚ͯͨͩͨ͠ 73 TypeScriptを導入してみて #導入してみて

  74. ܕͱ͔ܕͷ෇͚ํͱ͔͍Ζ͍Ζݴ͖͚ͬͯͨͲ ৽نࣄۀͷ͸͡Ίͩͱશ෦ΩϨΠʹॻ͘͜ͱ͸೉ ͍͠ దٓ"OZ΍0CKFDUɺ'VODUJPOΛ࢖ͬͯͪΐͬͱΏ Δ;Θܕఆٛʹͨ͠Γ΋ɻɻɻ νʔϜͰͲ͜·Ͱ΍͍͔ܾͬͯ͘ΊΔ͜ͱ΋େࣄ 74 TypeScriptを導入してみて #導入してみて

  75. さいごに 75

  76. さいごに #今回の資料 ϦϙδτϦʹαϯϓϧίʔυࡌͤͯ·͢ IUUQTHJUIVCDPNUBLFQPSFBDUSFEVY UZQFTDSJQUTBNQMF εϥΠυࢿྉ͸ޙͰΞοϓ༧ఆʂ 76

  77. 77

  78. 78

  79. 5ZQF4DSJQU%PDVNFOUBUJPO IUUQTXXXUZQFTDSJQUMBOHPSHEPDT IPNFIUNM 5ZQF4DSJQUͰ3FBDUΛॻ͘ IUUQTNBFDIBCJOBSDIJWFT 79 さいごに #参考文献