Tweet
Tweet

Slide 1

Slide 1 text

2019/01/31 Θͨͳ΂Ώ͏ ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ ಡΈ΍͍͢ίʔυͱ͸ʁ ▸ ಡΈ΍͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ ▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ࢖͏ ▸ importͷ੔ཧ ▸ ͦͷଞ ▸ ίϯϙʔωϯτΛฦ͢ϝιουΛJSX಺ʹॻ͔ͳ͍ ▸ ίʔυهड़ྔΛݮΒ͢ ▸ Ξηοτ͸ҰՕॴͰ·ͱΊΔ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ࣮ફExpo͍ͬͯ͏ຊΛڞஶͰ2018೥12݄ʹग़൛

Slide 4

Slide 4 text

ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ

Slide 5

Slide 5 text

ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ΍͍͢ίʔυͱ͸ʁ

Slide 6

Slide 6 text

▸ ଞͷਓͱҰॹʹ࡞ۀΛ͢Δͱ͖ʹྲྀΕ͕ཧղ͠΍͍͢ ▸ ٱ͠ͿΓʹ͞ΘΔͧʙͱ͍͏ͱ͖ʹ໎Θͳ͍ ಡΈ΍͍͢ίʔυͱ͸ʁ(1) ࠓճ࿩͢ͷ͸΋͏গ͠؆୯ʹͰ͖Δ಺༰ ม਺໊ʁ ؔ਺໊ʁ σΟϨΫτϦߏ଄ʁ ϑΝΠϧ໊ʁ σβΠϯγεςϜʁ ES201Xʁ ίϯϙʔωϯτͷཻ౓ʁ ίϝϯτͷॻ͖ํʁ

Slide 7

Slide 7 text

ಡΈ΍͍͢ίʔυͱ͸ʁ(2) ΠϯσϯτͷҐஔ͕ͣΕ͍ͯΔ map͞ΕͯΔ഑ྻ͔ΒԿ͕Ͱ͖Δ͔૝૾ͮ͠Β͍ ࡾ߲ԋࢉࢠͷೖΕࢠΛಡΈղ͘ͷʹ͕͔͔࣌ؒΔ ϥΠϑαΠΫϧϝιουͳͲ͕Θ͔ΓͮΒ͍

Slide 8

Slide 8 text

ಡΈ΍͍͢ίʔυͱ͸ʁ(3) ͜ͷίϯϙʔωϯτʹ͸propsͱͯ͠Կ͕౉ͤΔͷ͔ʁ ૬ରύεͩͱͲ͜ʹ͋Δ͔Θ͔ΓͮΒ͍ ύεมߋͨ͠ͱ͖ʹมߋͷख͕͔͔ؒΔ importͷॱ൪͕نଇతͰ͸ͳ͍ ίϯϙʔωϯτʹ໊લ͕͍͍ͭͯͳ͍ͷͰ ΤϥʔτϨʔεͷࡍʹࠔΔ

Slide 9

Slide 9 text

▸ eslint-config-airbnbͷಋೖ ▸ defaultPropsΛ࢖͏ ▸ importͷ੔ཧ ▸ ͦͷଞ ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ಡΈ΍͍͢ίʔυʹ͢ΔͨΊͷϙΠϯτ

Slide 10

Slide 10 text

ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ eslint-config-airbnbͷಋೖ

Slide 11

Slide 11 text

ESLINT-CONFIG-AIRBNBͷಋೖ(1) ▸ ߦؒ/Πϯσϯτ/ϥΠϑαΠΫϧϝιουͷॱ൪/ࡾ߲ԋࢉࢠͳͲͳͲ…ΛνΣοΫ ▸ ௨ৗͷeslintΑΓ΋ΨνΨν ▸ ΄΅΄΅ͷن໿ʹ͍ͭͯ͸eslint-config-airbnbͰղܾՄೳ ▸ ୭΋͕ࣅͨΑ͏ͳॻ͖ํʹͳΔ ▸ ࣗ෼͕൒೥લʹॻ͍ͨ΋ͷ΋ࣅͨΑ͏ͳॻ͖ํʹͳΔ eslint୯ମͰ͸؇͘ͳΓ͕͕ͪͩ airbnbΛ࢖͏͜ͱͰറΔ͜ͱ͕Ͱ͖Δ

Slide 12

Slide 12 text

ESLINT-CONFIG-AIRBNBͷಋೖ(2) https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLintͱ͍͏ExtensionΛೖΕͯ VSCodeͱ૊Έ߹ΘͤΔͱ อଘ࣌ʹࣗಈ੔ܗ

Slide 13

Slide 13 text

ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ defaultPropsΛ࢖͏

Slide 14

Slide 14 text

DEFAULTPROPSΛ࢖͏(1) ▸ ෳࡶͳίϯϙʔωϯτʹͳΔͱprops͕൑அͮ͠Β͍ ▸ ଞͷਓ͕࡞ͬͨίϯϙʔωϯτͩͱ໋໊نଇ͕ࣗ෼ͱएׯҧ͏৔߹΋͋Δ ▸ ίϯϙʔωϯτ಺Λಡ·ͣʹύοͱݟͯ൑அͰ͖ΔΑ͏ʹ͍ͨ͠

Slide 15

Slide 15 text

DEFAULTPROPSΛ࢖͏(2) VSCodeͰίϯϙʔωϯτʹϚ΢εΦʔόʔ͢Δͱ defaultProps͕൑அͰ͖Δͷ͕ಛʹศར

Slide 16

Slide 16 text

ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ importͷ੔ཧ

Slide 17

Slide 17 text

IMPORTͷ੔ཧ(1) ▸ importͷॱ൪͕ϑΝΠϧຖʹద౰ͩͱਖ਼௚Θ͔ΓͮΒ͍ؾ͕͢Δ ▸ Atomic ComponentͳͲΛಋೖ͍ͯ͠Δࡍʹ௚ײతʹ൑அͮ͠Β͍ ▸ ͦ΋ͦ΋૬ରύεͰimport͕ॻ͔Ε͍ͯΔͱϑΝΠϧύεมߋ࣌ʹେม ▸ ͳͲͳͲ

Slide 18

Slide 18 text

IMPORTͷ੔ཧ(2) package.jsonͷnameʹ໊લΛ͚ͭΔͱ ͔ͦ͜Βͷઈରύεͱͯ͠ࢦఆͰ͖Δ ্͔Βॱ൪ʹ˓˓ͱ͢Δ͜ͱͰ ͳΜͱͳ͘໾ׂͱ͔͕੔ཧ͞ΕͯΈ΍͍͢

Slide 19

Slide 19 text

ಡΈ΍͍͢ίʔυͷॻ͖ํͷεεϝ ͦͷଞ

Slide 20

Slide 20 text

ͦͷଞ ʙ ίϯϙʔωϯτΛฦ͢ϝιουΛJSX಺ʹॻ͔ͳ͍ ࠶ར༻ੑ͕͋ͬͨ৔߹ʹ ؆୯ʹίϯϙʔωϯτͱͯ͠෼཭Ͱ͖Δ

Slide 21

Slide 21 text

ͦͷଞ ʙ ίʔυهड़ྔΛݮΒ͢

Slide 22

Slide 22 text

ͦͷଞ ʙ ը૾ͳͲͷΞηοτΛҰݩ؅ཧ ը૾ΛҰݩ؅ཧ ΩϟογϡԽ΋؆୯ʹͰ͖Δ

Slide 23

Slide 23 text

·ͱΊ ▸ ಡΈ΍͍͢ίʔυͱ͸ʁ ▸ ෳ਺ਓͰ։ൃ͍ͯͯ͠΋ཧղͰ͖Δ ▸ ޙ͔Βݟฦͯ͠΋ཧղͰ͖Δ ▸ ಡΈ΍͘͢͢ΔͨΊͷϙΠϯτ ▸ eslint-config-airbnbΛಋೖͯ͠ϧʔϧͷ౷Ұ ▸ defaultPropsΛ࢖͏͜ͱͰԿ͕౉ͤΔ͔؆୯ʹ൑ผ ▸ import͢Δͱ͖ʹAtoms/Molecules/…ͳͲͰॱ൪Λ·ͱΊΔ ▸ JSX಺Ͱ{this.renderHoge()}ͷΑ͏ͳίϯϙʔωϯτΛฦ͢ϝιουΛ ॻ͔ͳ͍ ▸ .bind()ͳͲΛͤͣΞϩʔؔ਺Λ࢖͏ͳͲͯ͠ίʔυهड़ྔΛݮΒ͢ ▸ ը૾ͳͲΞηοτ͸౎౓require()͠ͳ͍Ͱ·ͱΊΔ

Slide 24

Slide 24 text

͓ΘΓ