読みやすいコードの書き方のススメ

Reactで組んでる中で、読みやすいコードを書くにはこうしたらいいよというものを紹介します。

よかったらツイッターフォローしてください🙏
https://twitter.com/hmktsu

Transcript

1. 2019/01/31 Θͨͳ΂Ώ͏ ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ
2. ▸ ࣗݾ঺հ ▸ ಡΈ΍͍͢ίʔυͱ͸ʁ ▸ ಡΈ΍͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ ▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ࢖͏ ▸ importͷ੔ཧ ▸ ͦͷଞ ▸ ίϯϙʔωϯτΛฦ͢ϝιουΛJSX಺ʹॻ͔ͳ͍ ▸ ίʔυهड़ྔΛݮΒ͢ ▸ Ξηοτ͸ҰՕॴͰ·ͱΊΔ ▸ ·ͱΊ ֓ཁ
3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛
4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ
5. ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ΍͍͢ίʔυͱ͸ʁ
6. ▸ ଞͷਓͱҰॹʹ࡞ۀΛ͢Δͱ͖ʹྲྀΕ͕ཧղ͠΍͍͢ ▸ ٱ͠ͿΓʹ͞ΘΔͧʙͱ͍͏ͱ͖ʹ໎Θͳ͍ ಡΈ΍͍͢ίʔυͱ͸ʁ(1) ࠓճ࿩͢ͷ͸΋͏গ͠؆୯ʹͰ͖Δ಺༰ ม਺໊ʁ ؔ਺໊ʁ σΟϨΫτϦߏ଄ʁ ϑΝΠϧ໊ʁ σβΠϯγεςϜʁ ES201Xʁ ίϯϙʔωϯτͷཻ౓ʁ ίϝϯτͷॻ͖ํʁ
7. ಡΈ΍͍͢ίʔυͱ͸ʁ(2) ΠϯσϯτͷҐஔ͕ͣΕ͍ͯΔ map͞ΕͯΔ഑ྻ͔ΒԿ͕Ͱ͖Δ͔૝૾ͮ͠Β͍ ࡾ߲ԋࢉࢠͷೖΕࢠΛಡΈղ͘ͷʹ͕͔͔࣌ؒΔ ϥΠϑαΠΫϧϝιουͳͲ͕Θ͔ΓͮΒ͍
8. ಡΈ΍͍͢ίʔυͱ͸ʁ(3) ͜ͷίϯϙʔωϯτʹ͸propsͱͯ͠Կ͕౉ͤΔͷ͔ʁ ૬ରύεͩͱͲ͜ʹ͋Δ͔Θ͔ΓͮΒ͍ ύεมߋͨ͠ͱ͖ʹมߋͷख͕͔͔ؒΔ importͷॱ൪͕نଇతͰ͸ͳ͍ ίϯϙʔωϯτʹ໊લ͕͍͍ͭͯͳ͍ͷͰ ΤϥʔτϨʔεͷࡍʹࠔΔ
9. ▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ࢖͏ ▸ importͷ੔ཧ ▸ ͦͷଞ ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ΍͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ
10. ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ eslint-config-airbnbͷಋೖ
11. ESLINT-CONFIG-AIRBNBͷಋೖ(1) ▸ ߦؒ/Πϯσϯτ/ϥΠϑαΠΫϧϝιουͷॱ൪/ࡾ߲ԋࢉࢠͳͲͳͲ…ΛνΣοΫ ▸ ௨ৗͷeslintΑΓ΋ΨνΨν ▸ ΄΅΄΅ͷن໿ʹ͍ͭͯ͸eslint-config-airbnbͰղܾՄೳ ▸ ୭΋͕ࣅͨΑ͏ͳॻ͖ํʹͳΔ ▸ ࣗ෼͕൒೥લʹॻ͍ͨ΋ͷ΋ࣅͨΑ͏ͳॻ͖ํʹͳΔ eslint୯ମͰ͸؇͘ͳΓ͕͕ͪͩ airbnbΛ࢖͏͜ͱͰറΔ͜ͱ͕Ͱ͖Δ
12. ESLINT-CONFIG-AIRBNBͷಋೖ(2) https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLintͱ͍͏ExtensionΛೖΕͯ VSCodeͱ૊Έ߹ΘͤΔͱ อଘ࣌ʹࣗಈ੔ܗ
13. ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ defaultPropsΛ࢖͏
14. DEFAULTPROPSΛ࢖͏(1) ▸ ෳࡶͳίϯϙʔωϯτʹͳΔͱprops͕൑அͮ͠Β͍ ▸ ଞͷਓ͕࡞ͬͨίϯϙʔωϯτͩͱ໋໊نଇ͕ࣗ෼ͱएׯҧ͏৔߹΋͋Δ ▸ ίϯϙʔωϯτ಺Λಡ·ͣʹύοͱݟͯ൑அͰ͖ΔΑ͏ʹ͍ͨ͠
15. DEFAULTPROPSΛ࢖͏(2) VSCodeͰίϯϙʔωϯτʹϚ΢εΦʔόʔ͢Δͱ defaultProps͕൑அͰ͖Δͷ͕ಛʹศར
16. ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ importͷ੔ཧ
17. IMPORTͷ੔ཧ(1) ▸ importͷॱ൪͕ϑΝΠϧຖʹద౰ͩͱਖ਼௚Θ͔ΓͮΒ͍ؾ͕͢Δ ▸ Atomic ComponentͳͲΛಋೖ͍ͯ͠Δࡍʹ௚ײతʹ൑அͮ͠Β͍ ▸ ͦ΋ͦ΋૬ରύεͰimport͕ॻ͔Ε͍ͯΔͱϑΝΠϧύεมߋ࣌ʹେม ▸ ͳͲͳͲ
18. IMPORTͷ੔ཧ(2) package.jsonͷnameʹ໊લΛ͚ͭΔͱ ͔ͦ͜Βͷઈରύεͱͯ͠ࢦఆͰ͖Δ ্͔Βॱ൪ʹ˓˓ͱ͢Δ͜ͱͰ ͳΜͱͳ͘໾ׂͱ͔͕੔ཧ͞ΕͯΈ΍͍͢
19. ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ͦͷଞ
20. ͦͷଞ ʙ ίϯϙʔωϯτΛฦ͢ϝιουΛJSX಺ʹॻ͔ͳ͍ ࠶ར༻ੑ͕͋ͬͨ৔߹ʹ ؆୯ʹίϯϙʔωϯτͱͯ͠෼཭Ͱ͖Δ
21. ͦͷଞ ʙ ίʔυهड़ྔΛݮΒ͢
22. ͦͷଞ ʙ ը૾ͳͲͷΞηοτΛҰݩ؅ཧ ը૾ΛҰݩ؅ཧ ΩϟογϡԽ΋؆୯ʹͰ͖Δ
23. ·ͱΊ ▸ ಡΈ΍͍͢ίʔυͱ͸ʁ ▸ ෳ਺ਓͰ։ൃ͍ͯͯ͠΋ཧղͰ͖Δ ▸ ޙ͔Βݟฦͯ͠΋ཧղͰ͖Δ ▸ ಡΈ΍͘͢͢ΔͨΊͷϙΠϯτ ▸ eslint-config-airbnbΛಋೖͯ͠ϧʔϧͷ౷Ұ ▸ defaultPropsΛ࢖͏͜ͱͰԿ͕౉ͤΔ͔؆୯ʹ൑ผ ▸ import͢Δͱ͖ʹAtoms/Molecules/…ͳͲͰॱ൪Λ·ͱΊΔ ▸ JSX಺Ͱ{this.renderHoge()}ͷΑ͏ͳίϯϙʔωϯτΛฦ͢ϝιουΛ ॻ͔ͳ͍ ▸ .bind()ͳͲΛͤͣΞϩʔؔ਺Λ࢖͏ͳͲͯ͠ίʔυهड़ྔΛݮΒ͢ ▸ ը૾ͳͲΞηοτ͸౎౓require()͠ͳ͍Ͱ·ͱΊΔ
24. ͓ΘΓ