Tweet
Tweet

Slide 1

Slide 1 text

2018/10/12 Θͨͳ΂Ώ͏ NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ NpmJSͷΞΧ΢ϯτ࡞੒ ▸ ؆୯ͳReactJSύοέʔδͷ࡞੒ ▸ ϓϩδΣΫτ࡞੒ ▸ ίϯϙʔωϯτ࡞੒ ▸ Ϗϧυ ▸ ϩʔΧϧͰͷ֬ೝ ▸ ެ։ ▸ ύοέʔδ࡞੒ྫ ▸ React Native(Expo)ͷTwitter APIύοέʔδ ▸ React JSͷiTunesϦϯΫύοέʔδ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ٕज़ॻయ5ʹͯ React Native(Expo) + FirebaseͷຊΛग़͠·ͨ͠

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ NpmJSͷΞΧ΢ϯτ࡞੒

Slide 6

Slide 6 text

▸ npmύοέʔδΛެ։͢Δʹ͸https://www.npmjs.com/ʹొ࿥ඞਢ ▸ ແྉ/༗ྉ/ΤϯλʔϓϥΠζͷ3छྨ ▸ ొ࿥ͨ͠Β$ npm adduserΛ࣮ߦ ▸ username / password /emailΛೖྗͯ͠tokenΛొ࿥ ▸ $ npm loginͰ΋OK NPMJSͷΞΧ΢ϯτ࡞੒(1) npmύοέʔδΛ࡞Δલஈ֊ͷ४උ׬ྃ

Slide 7

Slide 7 text

NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ؆୯ͳReactJSύοέʔδͷ࡞੒

Slide 8

Slide 8 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(1) Textͷ৭ͱେ͖͞Λม͑ΔΑ͏ͳύοέʔδΛ࡞Γ͍ͨ ϓϩδΣΫτ ࡞੒ ίϯϙʔωϯτ ࡞੒ ϩʔΧϧͰ֬ೝ Ϗϧυ ύοέʔδ ެ։

Slide 9

Slide 9 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(2) ʙϓϩδΣΫτ࡞੒ʙ ▸ ·ͣ͸࡞Γ͍ͨύοέʔδ໊Λnpmjs.comʹͯݕࡧ ▸ σεΫτοϓʹreact-npm-package-sampleͱ͍͏σΟϨΫτϦΛ࡞੒͠ɺ
 $ npm initͰॳظԽͯ͠package.jsonΛ࡞੒ ͍ͭͰʹgithub΋༻ҙ͓ͯ͘͠ͱ؅ཧָ͕ʹ

Slide 10

Slide 10 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(3) ʙίϯϙʔωϯτ࡞੒ʙ ▸ ςΩετͷ৭ͱେ͖͞Λม͑Δίϯϙʔωϯτͷ࡞੒ ▸ index.jsͱ͍͏໊લͰpackage.jsonͱಉ֊૚ʹอଘ ▸ utilͳͲ͕ଘࡏ͢Δ৔߹͸src/ͱ͍͏σΟϨΫτϦΛ࡞ͬͯ͋͛ΔͱΑ͍

Slide 11

Slide 11 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(4) ▸ ͦͷ··ύοέʔδͱͯ͠Πϯϙʔτ͠Α͏ͱ͢Δͱ… compileΤϥʔͱͳͬͯ͠·͏ͷͰɺ es5ʹίϯύΠϧ͔ͯ͠Βnpmύοέʔδʹ͢Δඞཁ͋Γ

Slide 12

Slide 12 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(5) ʙϏϧυʙ ▸ package.jsonʹbabel-cliͳͲίϯύΠϧ͢Δͷʹඞཁͳ΋ͷΛೖΕΔ ▸ scriptsʹbuildίϚϯυΛ௥Ճ ▸ mainͱͳ͍ͬͯΔͱ͜Ζ͸ɺ
 ίϯύΠϧ͞ΕͨϑΝΠϧʹ͍ͨ͠ͷͰɺ
 dist/index.jsͱ͢Δ ▸ $ npm run buildͰϏϧυ

Slide 13

Slide 13 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(6) ʙϩʔΧϧͰ֬ೝʙ ▸ ϩʔΧϧͰ֬ೝ͢Δʹ͸$ npm linkΛ࢖͑͹OK ▸ react-npm-package-sample಺Ͱ·ͣ͸$ npm link ▸ ࣍ʹςετ༻ͷϓϩδΣΫτ಺Ͱ$ npm link react-npm-package-sample ϓϩδΣΫτ಺Ͱimport StyledText from ‘react-npm-package-sample’Ͱ֬ೝ

Slide 14

Slide 14 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(7) ʙύοέʔδެ։ʙ ▸ $ npm publishΛ͢Ε͹ࣗಈతʹެ։ ▸ You must be logged in to publish packages.ͱ͍͏Τϥʔ͕ग़ͨΒ
 $ npm loginͰϩάΠϯΛ͠௚͢͜ͱͰղܾ ▸ .npmignoreΛ࡞͍ͬͯΒͳ͍ϑΝΠϧΛফ͓ͯ͘͜͠ͱΛ๨Εͣʹ ▸ https://www.npmjs.com/package/react-npm-package-sample

Slide 15

Slide 15 text

؆୯ͳREACTJSύοέʔδͷ࡞੒(8) ʙमਖ਼ͳͲʙ ▸ मਖ਼ͨ͠৔߹ͷखॱ ▸ ύονΞοϓσʔτ(1.0.xͳͲ) -> $ npm version patch ▸ ϚΠφʔΞοϓσʔτ(1.x.0ͳͲ) -> $ npm version minor ▸ ϝδϟʔΞοϓσʔτ(x.0.0ͳͲ) -> $ npm version major खಈͰ΋ίϚϯυೖྗͰ΋໰୊ͳ͠ όʔδϣϯΛมߋͨ͠Β$ npm publish

Slide 16

Slide 16 text

NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ύοέʔδ࡞੒ྫ React Native(Expo)ͷTwitter APIύοέʔδ

Slide 17

Slide 17 text

▸ https://github.com/watanabeyu/react-native-simple-twitter ▸ TwitterϩάΠϯΛ͢ΔͨΊͷWebViewΛදࣔ͢ΔͨΊͷύοέʔδ ▸ React Nativeͩͱes5ʹϏϧυ͢Δඞཁͳ͠ REACT NATIVE(EXPO)ͷTWITTER APIύοέʔδ

Slide 18

Slide 18 text

NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ύοέʔδ࡞੒ྫ React JSͷiTunesϦϯΫύοέʔδ

Slide 19

Slide 19 text

▸ https://www.npmjs.com/package/itunes-rss-component ▸ iTunesͷΞϓϦTOP10Λऔಘͯ͠දࣔͤ͞Δίϯϙʔωϯτ ▸ npmjsʹύοέʔδΛެ։͢ΔͱjsDeliverܦ༝ͰಡΈࠐΊΔͷͰɺ
 ͱͯ͠ಡΈࠐΉ࢓༷ͱͨ͠ ▸
ͱ͢Ε͹ࣗಈతʹdiv಺ʹϚ΢ϯτͯ͘͠ΕΔ REACT JSͷITUNESϦϯΫύοέʔδ

Slide 20

Slide 20 text

·ͱΊ ▸ npmύοέʔδΛ࡞ΔͳΒ͹͜͏͍͏ྲྀΕʹͳΔ ▸ React Nativeͷ৔߹͸ϏϧυΛ͠ͳ͍··ͰOK ▸ react-domΛ࢓ࠐΉܗʹ͢Ε͹ɺwidgetΛ࡞Δ͜ͱ΋Ͱ͖Δ ϓϩδΣΫτ ࡞੒ ίϯϙʔωϯτ ࡞੒ ϩʔΧϧͰ֬ೝ Ϗϧυ ύοέʔδ ެ։

Slide 21

Slide 21 text

༨ஊ μϯαʔ޲͚ͷಈըϓϥοτϑΥʔϜΞϓϦ࡞ͬͯ·͢ͷͰ ڵຯ͋Δํ͸࿩͠·͠ΐ͏ ͪͳΈʹ؅ཧը໘͸React + ElectronͰMacΞϓϦʹ͍ͯ͠·͢