React×ReduxにおけるTypeScript入門

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

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

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

Transcript

1. React×Reduxにおける TypeScript入門 01.21 サポーターズCoLab勉強会 Takeshima Nahoko
2. ஛ౡ
   ࡊึࢠ
   !UBLFQP 2 ೣͱ฻Β͍ͨ͠ܥ
   ޻େଔ8FCΤϯδχΞ
   ϥϯαʔζ೥໨
   ࣗ࡞ΩʔϘʔυʹڵຯ௡ʑ
   +BWB4DSJQU
   
   1)1
   
   3VCZ
   
   (P
   3FBDUྺ͸೥ܦͪ·ͨ͠ はじめに #profile
3. Lancers #会社概要 3
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ΛΠϯετʔϧ
    
    OQN
    JOTUBMM
    H
    UZQFTDSJQU
    ίʔυΛίϯύΠϧ
    
    UTD
    ϑΝΠϧ໊UT 18 Typescriptをはじめる #インストール & コンパイル
19. IFMMPXPSMEUTΛ࡞੒ 19 Typescriptをはじめる #HelloWorldする
20. IFMMPXPSMEUTΛίϯύΠϧ͢Δ
    
    UTD
    IFMMPXPSMEUT
    20 Typescriptをはじめる #HelloWorldする
21. )FMMPXPSMEKTΛIUNMͰಡΈࠐΉ
    21 Typescriptをはじめる #HelloWorldする
22. σΟϨΫτϦ࡞੒
    
    NLEJS
    SFBDUIFMMPXPSME
    
    DE
    SFBDUIFMMPXPSME
    QBDLBHFKTPOͷ࡞੒
    
    OQN
    JOJU 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
    
    OQN
    JOTUBMM
    TBWFEFW
    XFCQBDL
    SFBDU
    
    SFDUEPN
    
    
    OQN
    JOTUBMM
    TBWF
    SFBDU
    SFBDUEPN
    !UZQFT SFBDU
    !UZQFTSFBDUEPN 27 Typescriptをはじめる #自分でイチからはじめる
28. 5ZQF4DSJQU·ΘΓͰඞཁͳϞϊ
    
    OQN
    JOTUBMM
    TBWFEFW
    UZQFTDSJQU
    BXFTPNF UZQFTDSJQUMPBEFS
    TPVSDFNBQMPBEFS
    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Λ։͘
    
    OQN
    SVO
    CVJME
    36 Typescriptをはじめる #自分でイチからはじめる
37. ֎෦ϥΠϒϥϦΛೖΕΔͱ͖ʹ͸
    ҰॹʹܕఆٛϑΝΠϧ΋Πϯετʔϧ͢Δඞཁ͕ ͋Δ
    5ZQF4DSJQUҎ߱ͩͱ
    OQN͔ΒΠϯετʔϧ͢Δ͜ͱ͕Ͱ͖Δ
    OQN
    JOTUBMM
    ŠTBWF
    !UZQFT\ܕఆٛϑΝΠϧ໊^ 37 TypeScriptをはじめる #ライブラリをインストールする
38. 5ZQF4FBSDIΛ࢖͑͹ܕఆٛϑΝΠϧݕࡧ͕Ͱ͖Δ
    IUUQNJDSPTPGUHJUIVCJP5ZQF4FBSDI
    38 TypeScriptをはじめる #ライブラリをインストールする
39. 
    OQN
    JOTUBMM
    H
    DSFBUFSFBDUBQQ
    
    DSFBUFSFBDUBQQ
    \
    ΞϓϦ໊
    ^
    ŠTDSJQUT WFSTJPOSFBDUTDSJQUTUT
    
    DE
    ΞϓϦ໊
    
    OQN
    TUBSU 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
    
    
    
    
    MFU
    JT-PBEJOH
    CPPMFBO
    
    GBMTF
    /VNCFS
    
    
    
    
    MFU
    BHF
    OVNCFS
    
    
    "SSBZ
    
    
    
    
    MFU
    MJTU
    OVNCFS<>
    
    <
    
    > 44 Typescriptの型について #変数宣言
45. ໊લ෇͖ͷఆ਺܈Λఆٛ͢Δ͜ͱ͕Ͱ͖Δ
    "DUJPO5ZQFΛఆٛ͢Δͱ͖ʹ࢖͏
    FOVN
    %JSFDUJPO
    \
    
    
    
    
    6Q
    
    
    
    
    %PXO
    
    
    
    
    -FGU
    
    
    
    
    3JHIU
    ^ 45 Typescriptの型について #Enum
46. ͲΜͳ஋Ͱ΋୅ೖՄೳ
    5ZQF4DSJQUͷܕγεςϜΛແࢹ͢Δ͜ͱʹͳΔ
    5ZQF4DSJQUͷྑ͞Λͳͯ͘͠͠·͏ͷͰ
    ͳΔ΂͘ආ͚Δ͜ͱ͕ཧ૝ 46 Typescriptの型について #Any
47. จࣈྻɾ਺஋ɾਅِ஋ͷϦςϥϧ͕͋Δ
    ྫ
    DPOTU
    B
    IPHF
    
    bIPHF`
    bIPHF`͔͠ڐ༰͞Εͳ͍ܕʹ 47 Typescriptの型について #リテラル型
48. +BWB4DSJQUʹ͸ଘࡏ͠ͳ͍ɺ
    5ZQF4DSJQUͷಠࣗͷߏจ
    ΦϒδΣΫτܕʹ໊લΛ͚ͭΔ͜ͱ͕Ͱ͖Δ
    JOUFSGBDF
    1FSTPO
    \
    
    
    OBNF
    TUSJOH
    
    
    BHF
    OVNCFS
    ^ 48 Typescriptの型について #interface
49. ఆٛͨ͠ΠϯλϑΣʔεΛ࢖͏
    DPOTU
    IPHF
    1FSTPO
    
    \
    OBNF
    bUBSP`
    BHF
    
    ^ 49 Typescriptの型について #interface
50. ܕ஫ऍΛ͠ͳͯ͘΋
    ࣮͸ΦϒδΣΫτܕΛਪ࿦ͯ͘͠ΕΔ
    ܕʹҰக͠ͳ͍ΦϒδΣΫτΛ
    ม਺ʹ୅ೖͨ͠Γ͠Α͏ͱ͢ΔͱܕΤϥʔʹͳΔ 50 Typescriptの型について #interface
51. Ҿ਺ͷܕͱ໭Γ஋ͷܕΛఆٛ͢Δ
    GVODUJPO
    BEE Y
    OVNCFS
    Z
    OVNCFS 
    OVNCFS
    \
    
    
    
    
    SFUVSO
    Y
    
    Z
    ^ 51 Typescriptの型について #関数
52. ΠϯλϑΣʔεͳͲͷܕఆٛΛม਺ԽͰ͖Δ
    ֎෦ϥΠϒϥϦͷܕఆٛͱ͔ͰΑ͘ݟΔ
    GVODUJPO
    JEFOUJUZ5 BSH
    5 
    5
    \
    
    
    
    
    SFUVSO
    BSH
    ^
    MFU
    PVUQVU
    
    JEFOUJUZTUSJOH 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
79. 5ZQF4DSJQU
    %PDVNFOUBUJPO
    IUUQTXXXUZQFTDSJQUMBOHPSHEPDT IPNFIUNM
    5ZQF4DSJQUͰ3FBDUΛॻ͘
    IUUQTNBFDIBCJOBSDIJWFT
    79 さいごに #参考文献