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
190
npm packageとリリースとモノレポ
watanabeyu
0
53
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
820
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
28
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
610
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.4k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
110
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
220
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
230
OPENLOGI Company Profile
hr01
0
60k
偏光画像処理ライブラリを作った話
elerac
1
170
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
160
クラウド食堂とは?
hiyanger
0
110
Active Directory攻防
cryptopeg
PRO
8
5.5k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
580
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Bash Introduction
62gerente
611
210k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Site-Speed That Sticks
csswizardry
4
410
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Embracing the Ebb and Flow
colly
84
4.6k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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()͠ͳ͍Ͱ·ͱΊΔ
͓ΘΓ