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
FastlyとfalcoでNode.jsレスな Webサーバー構築 : IPTV版 ABEMAアプリインフラ刷新 / Building web server using Fastly and falco without Node.js for IPTV ABEMA app
nodaguti
0
230
Datadogマニアック機能活用術
biwashi
7
1.3k
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
640
メール本文をどうやっつけるか
hanacchi
0
120
Hyperledger Fabricの成長、成熟を振り返る / Looking back history of Hyperledger Fabric
gakumura
0
180
Chunk computing
matyo91
0
260
LLMに日本語テキストを学習させる意義
ksaito
13
3.3k
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
9.3k
プロデザ! BY リクルートvol.22_様々なプロダクト経験の中で活きたPdMのスキル
recruitengineers
PRO
3
170
いまからでも遅くない! コンテナでWebアプリケーションを 動かしてみよう(1)Gitハンズオン
nomu
0
280
歴史と背景から改めて振り返るVPC
shotashiratori
2
210
チームが自己組織化してから敢えて専任スクラムマスターを置いてみたらめちゃめちゃワークした話 / How bringing in a Scrum Master to an already self-organized team totally worked out
hc0208
2
1.5k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
308
41k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Large-scale JavaScript Application Architecture
addyosmani
508
110k
Bash Introduction
62gerente
608
210k
Happy Clients
brianwarren
96
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
Ruby is Unlike a Banana
tanoku
96
10k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
24
2k
Code Review Best Practice
trishagee
62
16k
How to train your dragon (web standard)
notwaldorf
85
5.6k
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()͠ͳ͍Ͱ·ͱΊΔ
͓ΘΓ