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

254ef4587f3c010fc0c52517ff5514c2?s=47 Yu Watanabe
January 31, 2019

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

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

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

254ef4587f3c010fc0c52517ff5514c2?s=128

Yu Watanabe

January 31, 2019
Tweet

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. ͓ΘΓ