Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
読みやすいコードの書き方のススメ
Yu Watanabe
January 31, 2019
Technology
7
3.9k
読みやすいコードの書き方のススメ
Reactで組んでる中で、読みやすいコードを書くにはこうしたらいいよというものを紹介します。
よかったらツイッターフォローしてください🙏
https://twitter.com/hmktsu
Yu Watanabe
January 31, 2019
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
watanabeyu
0
14
watanabeyu
0
0
watanabeyu
1
170
watanabeyu
4
670
watanabeyu
1
4.3k
watanabeyu
0
550
watanabeyu
0
220
watanabeyu
0
320
watanabeyu
2
140
Other Decks in Technology
See All in Technology
imdigitallab
0
490
yoku0825
PRO
3
160
ryomasumura
0
110
kanaugust
PRO
0
160
shirayanagiryuji
1
280
masakazu
0
180
eller86
1
230
harshbothra
0
140
viva_tweet_x
1
430
tricknotes
0
120
pohjus
0
3.3k
yshr1200
0
170
Featured
See All Featured
maggiecrowley
10
500
samlambert
237
10k
searls
204
36k
cassininazir
347
20k
geoffreycrofte
21
930
malarkey
392
61k
brettharned
93
3k
michaelherold
225
8.5k
rocio
155
11k
samanthasiow
56
6.4k
reverentgeek
27
2k
3n
163
22k
Transcript
2019/01/31 ΘͨͳΏ͏ ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ
▸ ࣗݾհ ▸ ಡΈ͍͢ίʔυͱʁ ▸ ಡΈ͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ ▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ͏
▸ importͷཧ ▸ ͦͷଞ ▸ ίϯϙʔωϯτΛฦ͢ϝιουΛJSXʹॻ͔ͳ͍ ▸ ίʔυهड़ྔΛݮΒ͢ ▸ ΞηοτҰՕॴͰ·ͱΊΔ ▸ ·ͱΊ ֓ཁ
ࣗݾհ(1) ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ201812݄ʹग़൛
ࣗݾհ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞࣗҰਓ)Ͱฏۉྸ30ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸
ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ͍͢30ඵఔͷۂͰགྷͬͯಈըΛΞοϓ
ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ͍͢ίʔυͱʁ
▸ ଞͷਓͱҰॹʹ࡞ۀΛ͢Δͱ͖ʹྲྀΕ͕ཧղ͍͢͠ ▸ ٱ͠ͿΓʹ͞ΘΔͧʙͱ͍͏ͱ͖ʹ໎Θͳ͍ ಡΈ͍͢ίʔυͱʁ(1) ࠓճ͢ͷ͏গ͠؆୯ʹͰ͖Δ༰ ม໊ʁ ໊ؔʁ σΟϨΫτϦߏʁ ϑΝΠϧ໊ʁ
σβΠϯγεςϜʁ ES201Xʁ ίϯϙʔωϯτͷཻʁ ίϝϯτͷॻ͖ํʁ
ಡΈ͍͢ίʔυͱʁ(2) ΠϯσϯτͷҐஔ͕ͣΕ͍ͯΔ map͞ΕͯΔྻ͔ΒԿ͕Ͱ͖Δ͔૾ͮ͠Β͍ ࡾ߲ԋࢉࢠͷೖΕࢠΛಡΈղ͘ͷʹ͕͔͔࣌ؒΔ ϥΠϑαΠΫϧϝιουͳͲ͕Θ͔ΓͮΒ͍
ಡΈ͍͢ίʔυͱʁ(3) ͜ͷίϯϙʔωϯτʹpropsͱͯ͠Կ͕ͤΔͷ͔ʁ ૬ରύεͩͱͲ͜ʹ͋Δ͔Θ͔ΓͮΒ͍ ύεมߋͨ͠ͱ͖ʹมߋͷख͕͔͔ؒΔ importͷॱ൪͕نଇతͰͳ͍ ίϯϙʔωϯτʹ໊લ͕͍͍ͭͯͳ͍ͷͰ ΤϥʔτϨʔεͷࡍʹࠔΔ
▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ͏ ▸ importͷཧ ▸ ͦͷଞ ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ
ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ eslint-config-airbnbͷಋೖ
ESLINT-CONFIG-AIRBNBͷಋೖ(1) ▸ ߦؒ/Πϯσϯτ/ϥΠϑαΠΫϧϝιουͷॱ൪/ࡾ߲ԋࢉࢠͳͲͳͲ…ΛνΣοΫ ▸ ௨ৗͷeslintΑΓΨνΨν ▸ ΄΅΄΅ͷنʹ͍ͭͯeslint-config-airbnbͰղܾՄೳ ▸ ୭͕ࣅͨΑ͏ͳॻ͖ํʹͳΔ ▸
͕ࣗલʹॻ͍ͨͷࣅͨΑ͏ͳॻ͖ํʹͳΔ eslint୯ମͰ؇͘ͳΓ͕͕ͪͩ airbnbΛ͏͜ͱͰറΔ͜ͱ͕Ͱ͖Δ
ESLINT-CONFIG-AIRBNBͷಋೖ(2) https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLintͱ͍͏ExtensionΛೖΕͯ VSCodeͱΈ߹ΘͤΔͱ อଘ࣌ʹࣗಈܗ
ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ defaultPropsΛ͏
DEFAULTPROPSΛ͏(1) ▸ ෳࡶͳίϯϙʔωϯτʹͳΔͱprops͕அͮ͠Β͍ ▸ ଞͷਓ͕࡞ͬͨίϯϙʔωϯτͩͱ໋໊نଇ͕ࣗͱएׯҧ͏߹͋Δ ▸ ίϯϙʔωϯτΛಡ·ͣʹύοͱݟͯஅͰ͖ΔΑ͏ʹ͍ͨ͠
DEFAULTPROPSΛ͏(2) VSCodeͰίϯϙʔωϯτʹϚεΦʔόʔ͢Δͱ defaultProps͕அͰ͖Δͷ͕ಛʹศར
ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ importͷཧ
IMPORTͷཧ(1) ▸ importͷॱ൪͕ϑΝΠϧຖʹదͩͱਖ਼Θ͔ΓͮΒ͍ؾ͕͢Δ ▸ Atomic ComponentͳͲΛಋೖ͍ͯ͠Δࡍʹײతʹஅͮ͠Β͍ ▸ ͦͦ૬ରύεͰimport͕ॻ͔Ε͍ͯΔͱϑΝΠϧύεมߋ࣌ʹେม ▸ ͳͲͳͲ
IMPORTͷཧ(2) package.jsonͷnameʹ໊લΛ͚ͭΔͱ ͔ͦ͜Βͷઈରύεͱͯ͠ࢦఆͰ͖Δ ্͔Βॱ൪ʹ˓˓ͱ͢Δ͜ͱͰ ͳΜͱͳׂ͘ͱ͔͕ཧ͞ΕͯΈ͍͢
ಡΈ͍͢ίʔυͷॻ͖ํͷεεϝ ͦͷଞ
ͦͷଞ ʙ ίϯϙʔωϯτΛฦ͢ϝιουΛJSXʹॻ͔ͳ͍ ࠶ར༻ੑ͕͋ͬͨ߹ʹ ؆୯ʹίϯϙʔωϯτͱͯ͠Ͱ͖Δ
ͦͷଞ ʙ ίʔυهड़ྔΛݮΒ͢
ͦͷଞ ʙ ը૾ͳͲͷΞηοτΛҰݩཧ ը૾ΛҰݩཧ ΩϟογϡԽ؆୯ʹͰ͖Δ
·ͱΊ ▸ ಡΈ͍͢ίʔυͱʁ ▸ ෳਓͰ։ൃ͍ͯͯ͠ཧղͰ͖Δ ▸ ޙ͔Βݟฦͯ͠ཧղͰ͖Δ ▸ ಡΈ͘͢͢ΔͨΊͷϙΠϯτ ▸
eslint-config-airbnbΛಋೖͯ͠ϧʔϧͷ౷Ұ ▸ defaultPropsΛ͏͜ͱͰԿ͕ͤΔ͔؆୯ʹผ ▸ import͢Δͱ͖ʹAtoms/Molecules/…ͳͲͰॱ൪Λ·ͱΊΔ ▸ JSXͰ{this.renderHoge()}ͷΑ͏ͳίϯϙʔωϯτΛฦ͢ϝιουΛ ॻ͔ͳ͍ ▸ .bind()ͳͲΛͤͣΞϩʔؔΛ͏ͳͲͯ͠ίʔυهड़ྔΛݮΒ͢ ▸ ը૾ͳͲΞηοτrequire()͠ͳ͍Ͱ·ͱΊΔ
͓ΘΓ