React×ReduxにおけるTypeScript入門

by takepo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Lancers #会社概要 3

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5 Lancers #メッセージ機能

Slide 6

Slide 6 text

Lancers #プロジェクト管理

Slide 7

Slide 7 text

7 Lancers #pook

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

5ZQFTDSJQU 5ZQF4DSJQUΛ͸͡ΊΔ 5ZQF4DSJQUͷܕʹ͍ͭͯ ҰॹʹೖΕΔͱྑ͍ϥΠϒϥϦ 3FBDUͷ$PNQPOFOUΛॻ͘ 3FEVYͷϑϩʔΛॻ͘ 5ZQF4DSJQUΛಋೖͯ͠Έͯ 9 はじめに #目次

Slide 10

Slide 10 text

TypeScript? 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

TypeScript をはじめる 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

これだけで OK✨ 41

Slide 42

Slide 42 text

TypeScript の型について 42

Slide 43

Slide 43 text

#PPMFBO /VNCFS 4USJOH "SSBZ 5VQMF 43 Typescriptの型について #基本の型 &OVN "OZ 7PJE /FWFS 0CKFDU

Slide 44

Slide 44 text

#PPMFBO MFUJT-PBEJOHCPPMFBOGBMTF /VNCFS MFUBHFOVNCFS "SSBZ MFUMJTUOVNCFS<>< > 44 Typescriptの型について #変数宣言

Slide 45

Slide 45 text

໊લ෇͖ͷఆ਺܈Λఆٛ͢Δ͜ͱ͕Ͱ͖Δ "DUJPO5ZQFΛఆٛ͢Δͱ͖ʹ࢖͏ FOVN%JSFDUJPO\ 6Q %PXO -FGU 3JHIU ^ 45 Typescriptの型について #Enum

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Ҿ਺ͷܕͱ໭Γ஋ͷܕΛఆٛ͢Δ GVODUJPOBEE YOVNCFS ZOVNCFS OVNCFS\ SFUVSOYZ ^ 51 Typescriptの型について #関数

Slide 52

Slide 52 text

ΠϯλϑΣʔεͳͲͷܕఆٛΛม਺ԽͰ͖Δ ֎෦ϥΠϒϥϦͷܕఆٛͱ͔ͰΑ͘ݟΔ GVODUJPOJEFOUJUZ5 BSH5 5\ SFUVSOBSH ^ MFUPVUQVUJEFOUJUZTUSJOH NZ4USJOH 52 Typescriptの型について #ジェネリック

Slide 53

Slide 53 text

一緒に入れるとよいライブラリ 53

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ίʔυϑΥʔϚολ ίʔυΛҰ؏ͨ͠ελΠϧʹ४ڌ͢ΔΑ͏ʹͰ͖Δ 5ZQF4DSJQUʹݶΒͣ+4 +49 $44 +40/ͳͲ ϑϩϯτͰ࢖ΘΕ͍ͯΔݴޠ΍࢓༷ʹରԠ͍ͯ͠Δ IUUQTHJUIVCDPNQSFUUJFSQSFUUJFS πʔϧʹ͓·͔ͤͰ͖Δͱ͜Ζ͸ ͓·͔͍͖ͤͯ͠·͠ΐ͏ʂ 56 一緒に入れるとよいライブラリ #Prettier

Slide 57

Slide 57 text

Reactの Componentを書く 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Reduxのフローを書く 64

Slide 65

Slide 65 text

65 Reduxのフローを書く #ActionType

Slide 66

Slide 66 text

66 Reduxのフローを書く #ActionCreater

Slide 67

Slide 67 text

67 Reduxのフローを書く #reducer

Slide 68

Slide 68 text

68 Reduxのフローを書く #reducer

Slide 69

Slide 69 text

69 Reduxのフローを書く #Container

Slide 70

Slide 70 text

70 Reduxのフローを書く #Container

Slide 71

Slide 71 text

TypeScriptを導入してみて 71

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

さいごに 75

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Slide 78

Slide 78 text

Slide 79

Slide 79 text

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