Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
読みやすいコードの書き方のススメ
Search
Yu Watanabe
January 31, 2019
Technology
7
4.7k
読みやすいコードの書き方のススメ
Reactで組んでる中で、読みやすいコードを書くにはこうしたらいいよというものを紹介します。
よかったらツイッターフォローしてください🙏
https://twitter.com/hmktsu
Yu Watanabe
January 31, 2019
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
300
npm packageとリリースとモノレポ
watanabeyu
0
63
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
900
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
33
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
640
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
350
Lambda Web Adapterについて自分なりに理解してみた
smt7174
4
120
Witchcraft for Memory
pocke
1
440
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
190
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
440
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
220
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
360
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
320
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
140
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Featured
See All Featured
Designing for Performance
lara
609
69k
It's Worth the Effort
3n
185
28k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Rails Girls Zürich Keynote
gr2m
94
14k
Side Projects
sachag
455
42k
Agile that works and the tools we love
rasmusluckow
329
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
30
1.1k
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()͠ͳ͍Ͱ·ͱΊΔ
͓ΘΓ