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

Transcript

1. 1.

   2019/01/31 Θͨͳ΂Ώ͏ ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ

2. 2.

   ▸ ࣗݾ঺հ ▸ ಡΈ΍͍͢ίʔυͱ͸ʁ ▸ ಡΈ΍͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ ▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ࢖͏

   ▸ importͷ੔ཧ ▸ ͦͷଞ ▸ ίϯϙʔωϯτΛฦ͢ϝιουΛJSX಺ʹॻ͔ͳ͍ ▸ ίʔυهड़ྔΛݮΒ͢ ▸ Ξηοτ͸ҰՕॴͰ·ͱΊΔ ▸ ·ͱΊ ֓ཁ
3. 3.

   ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

   ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛
4. 4.

   ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸

   ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ
5. 5.

   ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ΍͍͢ίʔυͱ͸ʁ

6. 6.

   ▸ ଞͷਓͱҰॹʹ࡞ۀΛ͢Δͱ͖ʹྲྀΕ͕ཧղ͠΍͍͢ ▸ ٱ͠ͿΓʹ͞ΘΔͧʙͱ͍͏ͱ͖ʹ໎Θͳ͍ ಡΈ΍͍͢ίʔυͱ͸ʁ(1) ࠓճ࿩͢ͷ͸΋͏গ͠؆୯ʹͰ͖Δ಺༰ ม਺໊ʁ ؔ਺໊ʁ σΟϨΫτϦߏ଄ʁ ϑΝΠϧ໊ʁ

   σβΠϯγεςϜʁ ES201Xʁ ίϯϙʔωϯτͷཻ౓ʁ ίϝϯτͷॻ͖ํʁ
7. 7.

   ಡΈ΍͍͢ίʔυͱ͸ʁ(2) ΠϯσϯτͷҐஔ͕ͣΕ͍ͯΔ map͞ΕͯΔ഑ྻ͔ΒԿ͕Ͱ͖Δ͔૝૾ͮ͠Β͍ ࡾ߲ԋࢉࢠͷೖΕࢠΛಡΈղ͘ͷʹ͕͔͔࣌ؒΔ ϥΠϑαΠΫϧϝιουͳͲ͕Θ͔ΓͮΒ͍

8. 8.

   ಡΈ΍͍͢ίʔυͱ͸ʁ(3) ͜ͷίϯϙʔωϯτʹ͸propsͱͯ͠Կ͕౉ͤΔͷ͔ʁ ૬ରύεͩͱͲ͜ʹ͋Δ͔Θ͔ΓͮΒ͍ ύεมߋͨ͠ͱ͖ʹมߋͷख͕͔͔ؒΔ importͷॱ൪͕نଇతͰ͸ͳ͍ ίϯϙʔωϯτʹ໊લ͕͍͍ͭͯͳ͍ͷͰ ΤϥʔτϨʔεͷࡍʹࠔΔ

9. 9.

   ▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ࢖͏ ▸ importͷ੔ཧ ▸ ͦͷଞ ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ΍͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ

10. 10.

    ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ eslint-config-airbnbͷಋೖ

11. 11.

    ESLINT-CONFIG-AIRBNBͷಋೖ(1) ▸ ߦؒ/Πϯσϯτ/ϥΠϑαΠΫϧϝιουͷॱ൪/ࡾ߲ԋࢉࢠͳͲͳͲ…ΛνΣοΫ ▸ ௨ৗͷeslintΑΓ΋ΨνΨν ▸ ΄΅΄΅ͷن໿ʹ͍ͭͯ͸eslint-config-airbnbͰղܾՄೳ ▸ ୭΋͕ࣅͨΑ͏ͳॻ͖ํʹͳΔ ▸

    ࣗ෼͕൒೥લʹॻ͍ͨ΋ͷ΋ࣅͨΑ͏ͳॻ͖ํʹͳΔ eslint୯ମͰ͸؇͘ͳΓ͕͕ͪͩ airbnbΛ࢖͏͜ͱͰറΔ͜ͱ͕Ͱ͖Δ
12. 12.

    ESLINT-CONFIG-AIRBNBͷಋೖ(2) https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLintͱ͍͏ExtensionΛೖΕͯ VSCodeͱ૊Έ߹ΘͤΔͱ อଘ࣌ʹࣗಈ੔ܗ

13. 13.

    ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ defaultPropsΛ࢖͏

14. 14.

    DEFAULTPROPSΛ࢖͏(1) ▸ ෳࡶͳίϯϙʔωϯτʹͳΔͱprops͕൑அͮ͠Β͍ ▸ ଞͷਓ͕࡞ͬͨίϯϙʔωϯτͩͱ໋໊نଇ͕ࣗ෼ͱएׯҧ͏৔߹΋͋Δ ▸ ίϯϙʔωϯτ಺Λಡ·ͣʹύοͱݟͯ൑அͰ͖ΔΑ͏ʹ͍ͨ͠

15. 15.

    DEFAULTPROPSΛ࢖͏(2) VSCodeͰίϯϙʔωϯτʹϚ΢εΦʔόʔ͢Δͱ defaultProps͕൑அͰ͖Δͷ͕ಛʹศར

16. 16.

    ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ importͷ੔ཧ

17. 17.

    IMPORTͷ੔ཧ(1) ▸ importͷॱ൪͕ϑΝΠϧຖʹద౰ͩͱਖ਼௚Θ͔ΓͮΒ͍ؾ͕͢Δ ▸ Atomic ComponentͳͲΛಋೖ͍ͯ͠Δࡍʹ௚ײతʹ൑அͮ͠Β͍ ▸ ͦ΋ͦ΋૬ରύεͰimport͕ॻ͔Ε͍ͯΔͱϑΝΠϧύεมߋ࣌ʹେม ▸ ͳͲͳͲ

18. 18.

    IMPORTͷ੔ཧ(2) package.jsonͷnameʹ໊લΛ͚ͭΔͱ ͔ͦ͜Βͷઈରύεͱͯ͠ࢦఆͰ͖Δ ্͔Βॱ൪ʹ˓˓ͱ͢Δ͜ͱͰ ͳΜͱͳ͘໾ׂͱ͔͕੔ཧ͞ΕͯΈ΍͍͢

19. 19.

    ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ͦͷଞ

20. 20.

    ͦͷଞ ʙ ίϯϙʔωϯτΛฦ͢ϝιουΛJSX಺ʹॻ͔ͳ͍ ࠶ར༻ੑ͕͋ͬͨ৔߹ʹ ؆୯ʹίϯϙʔωϯτͱͯ͠෼཭Ͱ͖Δ

21. 21.

    ͦͷଞ ʙ ίʔυهड़ྔΛݮΒ͢

22. 22.

    ͦͷଞ ʙ ը૾ͳͲͷΞηοτΛҰݩ؅ཧ ը૾ΛҰݩ؅ཧ ΩϟογϡԽ΋؆୯ʹͰ͖Δ

23. 23.

    ·ͱΊ ▸ ಡΈ΍͍͢ίʔυͱ͸ʁ ▸ ෳ਺ਓͰ։ൃ͍ͯͯ͠΋ཧղͰ͖Δ ▸ ޙ͔Βݟฦͯ͠΋ཧղͰ͖Δ ▸ ಡΈ΍͘͢͢ΔͨΊͷϙΠϯτ ▸

    eslint-config-airbnbΛಋೖͯ͠ϧʔϧͷ౷Ұ ▸ defaultPropsΛ࢖͏͜ͱͰԿ͕౉ͤΔ͔؆୯ʹ൑ผ ▸ import͢Δͱ͖ʹAtoms/Molecules/…ͳͲͰॱ൪Λ·ͱΊΔ ▸ JSX಺Ͱ{this.renderHoge()}ͷΑ͏ͳίϯϙʔωϯτΛฦ͢ϝιουΛ ॻ͔ͳ͍ ▸ .bind()ͳͲΛͤͣΞϩʔؔ਺Λ࢖͏ͳͲͯ͠ίʔυهड़ྔΛݮΒ͢ ▸ ը૾ͳͲΞηοτ͸౎౓require()͠ͳ͍Ͱ·ͱΊΔ
24. 24.

    ͓ΘΓ