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.6k
読みやすいコードの書き方のススメ
Reactで組んでる中で、読みやすいコードを書くにはこうしたらいいよというものを紹介します。
よかったらツイッターフォローしてください🙏
https://twitter.com/hmktsu
Yu Watanabe
January 31, 2019
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
npm packageとリリースとモノレポ
watanabeyu
0
29
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
690
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
560
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.1k
react-native-unimodulesのススメ
watanabeyu
1
6.2k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
990
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
OCI コスト管理
ocise
1
120
Dive Deep in Cloud Run: Automatic Base Image update
aoto
PRO
0
900
New Relicで実践する外形監視
aeonpeople
1
120
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
190
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
220
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
150
Azure SQL Database Hyperscale HA レプリカの監視
sansantech
PRO
0
190
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
150
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
2.1k
LLMに日本語テキストを学習させる意義
ksaito
13
3.5k
AWS版GitHub?Amazon CodeCatalystの全体像をまとめてみた
oshanqq
1
3.2k
Cloud Service Mesh への期待が止まらない!!
phaya72
1
100
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
241
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
28
2.2k
Building Applications with DynamoDB
mza
89
5.9k
Making Projects Easy
brettharned
113
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Pencils Down: Stop Designing & Start Developing
hursman
118
11k
Bash Introduction
62gerente
608
210k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Designing for Performance
lara
604
68k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
46
48k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
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()͠ͳ͍Ͱ·ͱΊΔ
͓ΘΓ