React+Redux 次の一歩 / the next step from react and redux

React+Redux 次の一歩 8FCΤϯδχΞษڧձ :PJDIJSP4IJNJ[V!CVEPVHVNJ

自己紹介 ‣ ਗ਼ਫཅҰ࿠!CVEPVHVNJ ‣ ‣ #BDLFOE%FTLUPQ"QQFOHJOFFS ‣ (P3VCZPO3BJMT/&5 ‣
ϒϩάIUUQCVEPVHVNJHJUIVCJP ‣ ίϛϡχςΟ׆ಈHPMBOHUPLZPӡӦ

今日のゴール ‣ 3FBDU3FEVYͱ߹Θͤͯ࢖͑ΔπʔϧΛ஌Δ ‣ 7VF"OHVMBSͰ΋࢖͑Δʢ͸ͣʣ ‣ ͳͥͦͷπʔϧΛ࢖͏ͷ͔஌Δ

注意 ‣ 3FBDUɾ3FEVYຊମʹ͍ͭͯ͸ׂѪ͠·͢ ‣ 'MPXΛ࢖ͬͨͷͰ5ZQF4DSJQUʹ͍ͭͯ͸৮Ε·ͤΜɻ ‣ +4ॳ৺ऀͳͷͰ͝ࢦఠΑΖ͓͘͠Ͷ͕͍͠·͢

アジェンダ ‣ ͖Ε͍ͳίʔυΛॻͨ͘Ίͷπʔϧ ‣ ςετ͢ΔͨΊͷπʔϧ ‣ σϓϩΠ͢ΔͨΊͷπʔϧ

最初に ‣ Ұϲ݄͘Β͍લ͔Β3FBDU࢝Ίͨ QBDLBHFKTPOΑ͘Θ͔ΒΜ ‣ DSFBUFSFBDUBQQ ‣ 3FBDU 3FEVY
3FEVY5IVOL ඇಉظॲཧ ͘Β͍·Ͱ͸݁ߏ͋Δ ‣ 6EFNZͰຊ͘Β͍΍ͬͯΈͨ ‣ ͜Ε͚ͩͰ͸ۀ຿Ͱ࢖͏ͱ͖ͱͷ͕ܹ͍ࠩ͠ ‣ +4Ͱ΋ΫϦʔϯͳίʔυΛॻ͖͍ͨʢॻ͘࿅श͕͍ͨ͠ʣ

きれいなコードを書きたい

独習の問題 ‣ ͖Ε͍ͳίʔυಡΈ΍͍͢ɾҰҙͳίʔυ ‣ ϨϏϡʔΞ͕͍ͳ͍ ‣ ʢͱ͘ʹະܦݧݴޠͷ৔߹ʣ͖Ε͍ͳͷ͔Ԛ͍ͷ͔Θ͔Βͳ͍

Flow(TypeScript)+ESLint+Prettier ͜Ε͚ͩͰ͍ͩͿϦʔμϒϧͳίʔυ͕ॻ͚Δɻ ಠֶͷͱ͖ʹʮࢦఠʯ͕΋Β͑Δͷ͸େࣄ

Flow ‣ IUUQTqPXPSH ‣ +BWB4DSJQUʹܕΛಋೖͰ͖Δ ‣ ֤छΤσΟλͰϦΞϧλΠϜʹΤϥʔͳͲΛ൓өՄೳ ‣ qPXUZQFEͰ༗໊ϥΠϒϥϦͷఆٛࡁΈͷܕΛར༻Մ ‣
طଘίʔυʹஈ֊తʹಋೖ͕Մೳ ‣ ʢ5ZQF4DSJQU΋ஈ֊ಋೖ͕ՄೳʹͳͷͰࠓ͸5ZQF4DSJQUͷ΄͏͕Α͍ʁʣ

ESLint

ESLint ‣ IUUQTFTMJOUPSH ‣ ੩తղੳίʔυϑΥʔϚολ ‣ ΤσΟλͰϦΞϧλΠϜνΣοΫ͠ͳ͕ΒίʔσΟϯάͰ͖Δ ‣ ϓϦηοτ͓͚͋ͯͯ͹Α͍ ‣
IUUQTXXXOQNKTDPNQBDLBHFFTMJOUDPOpHHPPHMF ‣ IUUQTXXXOQNKTDPNQBDLBHFFTMJOUDPOpHBJSCOC

Prettier

Prettier ‣ IUUQTHJUIVCDPNQSFUUJFSQSFUUJFS ‣ ίʔυϑΥʔϚολ ‣ &4-JOUΑΓڧྗͳ੔ܗ͕Ͱ͖Δ ‣ ΤσΟλͷΦʔτηʔϒͱ߹ΘͤΕ͹͖Ε͍ͳίʔυ͕ॻ͚Δ

テストを書きたい

品質を担保したい ‣ ಈ࡞Λ͔֬Ίͳ͕Β࡞Δ ‣ ϢχοτςετΛॻ͍ͯখ͘͞࡞Δ ‣ ษڧத͸ϏοΫόϯతʹ࡞ͬͯಈ͔ͳ͍ͱ͓ख্͛ʹͳΔ ‣ ۀ຿Ͱ࢖͏ͱ͖͸ςετίʔυΛॻ͘ೳྗ΋ඞਢ ‣
ςετ͕ແ͍ίʔυ͸ϨΨγʔίʔυ

Jest ‣ IUUQTKFTUKTJP ‣ ϢχοτςετϑϨʔϜϫʔΫɻDSFBUFSFBDUBQQʹ΋ඪ४Ͱؚ·Ε͍ͯΔ ‣ &O[ZNF͔ͭ͏ͱςετதͷ%0.૸ࠪ΋ϥΫ ‣ %4-͕STQFDʹࣅ͍ͯΔ ‣
σʔλۦಈςετ ςʔϒϧۦಈςετ ͕Մೳ ‣ ϗοτϦϩʔυ͢ΔͷͰςετۦಈ։ൃʹ΋޲͍͍ͯΔ ‣ εφοϓγϣοτͰϦάϨογϣϯςετ΋Ͱ͖Δ

単体テスト &Y1SPQΛ༩͑ͯࢦఆͨ͠DMBTTͷϑΟʔϧυ͕มΘΔ͔

スナップショットテスト ֎؍ %0. ͷϦάϨογϣϯςετ

ホットリロード ࣮ߦͤͨ͞··ίʔσΟϯά͢Ε͹ ͦͷ··ϗοͱϦϩʔυͯࣗ͠ಈςετͯ͘͠ΕΔ

Storybook

Storybook ‣ IUUQTTUPSZCPPLKTPSH ‣ ίϯϙʔωϯτͷΧλϩά ‣ Χλϩά্ͰQSPQTΛมԽͤͯ͞ಈ࡞֬ೝ ‣ σόΠε͝ͱͷ6*Λ֬ೝ ‣
(JU)VC1BHFTͳͲͰ഑৴ɾڞ༗Մೳ ‣ +FTUͱ࿈ܞͨ͠εφοϓγϣοτςετ

コンポーネントカタログ ύʔπ͝ͱʹ࣮ࡍʹಈ͔ͤΔ 1SPQTΛಈతʹ༩͑Δ͜ͱ΋Ͱ͖Δ

デプロイしてみたい

できた！！けど… ‣ Ұ௨Γಈ͘΋ͷΛ࡞ͬͨʂ ‣ MPDBMIPTUͷ··͸ͪΐͬͱ൵͍͠ ‣ αʔό༻ҙͯ͠σϓϩΠύΠϓϥΠϯ࡞Δ·Ͱͷݩؾ͸ͳ͍

Netlify

Netlify ‣ IUUQTXXXOFUMJGZDPN ‣ (JUϦϙδτϦΛొ࿥͢Δ͚ͩͰ੩తαΠτΛϗεςΟϯά͕Ͱ͖Δ ‣ QBDLBHFKTPOͳͲΛݟ͍͍ͯײ͡ͷϏϧυ΋ͯ͘͠ΕΔ ‣ "84-BNCEBϕʔεͷόοΫΤϯυॲཧ΋ར༻Մೳ ‣
ਖ਼௚ͳΜͰແྉͳͷ͔Θ͔Βͳ͍

選択 ϦϙδτϦΛࢦఆ͢Δ

設定 Ϗϧυ͢ΔϒϥϯνɺϏϧυίϚϯυΛࢦఆ͢Δ ʢมͳ͜ͱͯ͠ͳ͚Ε͹ͦͷ··ͰΑ͍ʣ

公開 ϒϥϯνߋ৽࣌ʹࣗಈ࠶σϓϩΠͰ͖Δ 4MBDLɾϝʔϧ௨஌ͳͲ΋

今日のゴール ‣ 3FBDU3FEVYͱ߹Θͤͯ࢖͑ΔπʔϧΛ஌Δ ‣ 7VF"OHVMBSͰ΋࢖͑Δʢ͸ͣʣ ‣ ͳͥͦͷπʔϧΛ࢖͏ͷ͔஌Δ

まとめ ‣ ಠֶͰ΋ΫϦʔϯͳίʔυΛॻ͘ ‣ 'MPX 5ZQF4DSJQU &4-JOU 1SFUUJFS ‣
ಠֶͰ΋ςετΛॻ͘श׳Λ͚ͭΔ ‣ +FTU FO[ZNF 4UPSZCPPL ‣ ͔ͤͬ͘࡞ͬͨ΋ͷ͸ެ։ͯ͠ΈΔ ‣ /FUMJGZ

まとめ ‣ खݩͰಈ͔ͯ͠Έ͍ͨํ ‣ IUUQTHJUIVCDPNCVEPVHVNJXFNSFBDUTBNQMF ‣ ࣗ෼ͷϦϙδτϦͰࢼͯ͠Έ͍ͨํ ‣ ্هϦϙδτϦͷ3&"%.&ʹಋೖखॱ΁ͷϦϯΫ͕͋Γ·͢

React+Redux 次の一歩 / the next step from react and redux

React+Redux 次の一歩 / the next step from react and redux

More Decks by Yoichiro Shimizu

Other Decks in Technology

Featured

Transcript