frontend-shikoku#1

第1回フロントエンド四国のLTスライド

Transcript

1. OQYίϚϯυͰ࣮ߦ͢Δ
   

   )FMMPϞδϡʔϧΛ࡞Ζ͏ʂ
   

   View Slide

2. XFCϑϩϯτΤϯυ։ൃ؀ڥͷத֩Λͳ͢΋ͷ
   

   View Slide

3. View Slide

4. +BWB4DSJQUͷτϥϯεύΠϧɾόϯυϧ
   JavaScript
   (ES6 source)
   React Component
   (ES6 source, JSX)
   JavaScript
   (ES6 module)
   JavaScript
   (CommonJS module)
   JavaScript
   (ES5 distribution)
   Bundler
   (Browserify)
   Transpiler
   (Babel)
   /PEFKTͷ+BWB4DSJQUϥϯλΠϜΛ࢖ͬͯ

   λεΫ͕ॲཧ͞ΕΔ
   

   View Slide

5. /PEFKTΛΞοϓσʔτ͠·͔ͨ͠ʁ
   /PEFKTͷϦϦʔεεέδϡʔϧ

   IUUQTHJUIVCDPNOPEFKT3FMFBTFSFMFBTFTDIFEVMF
   

   View Slide

6. OQNW /PEFKTWҎ߱
   ʹಉࠝ͞ΕΔ

   ศརίϚϯυ
   $ npx
   

   View Slide

7. OQNͰࣗݾ঺հϞδϡʔϧΛ
   ࡞Δͷ͕ྲྀߦ͍ͬͯΔΈ͍ͨ
   ൃ୺͸ΈΜͳେ޷͖4JOESF
   IUUQTUXJUUFSDPNTJOESFTPSIVTTUBUVT
   

   View Slide

8. w /PEFͷW͕ਪ঑൛-54ʹͳͬͨ͜ͱ
   w ΈΜͳ͕OQYίϚϯυΛ࢖͑Δ͸ͣ
   ྲྀߦͷཧ༝ʁ
   

   View Slide

9. ࡞ͬͨ

   $ npx kamataryo
   

   View Slide

10. View Slide

11. Ҿ਺΋औΕΔ

    $ npx kamataryo github
    

    View Slide

12. View Slide

13. ࣮࣭਺ߦ͘Β͍ͷ+BWB4DSJQU
    IUUQTHJUIVCDPNLBNBUBSZPLBNBUBSZP
    

    View Slide

14. େ·͔ͳ࡞੒खॱ
    ࣗݾ঺հΛඪ४ग़ྗʹు͘+BWB4DSJQUΛॻ͘
    QBDLBHFKTPOͰΤϯτϦϙΠϯτʹࢦఆ͢Δ

    { "bin": { "kamataryo": "./src/cli" } }
    ࣮ߦՄೳʹ͢Δ

    $ chmod +x ./src/cli
    όʔδϣϯ؅ཧ

    $ npm version patch # バージョンx.y.zのzをインクリメントする
    OQNKTDPN ʹαΠϯΞοϓͯ͠ɺ։ൃϚγϯͰϩάΠϯ

    $ npm login
    公開する

    $ npm publish /PEFύοέʔδͷ࡞੒ೖ໳ʹ࠷ద͔΋
    

    View Slide

15. )FMMPϞδϡʔϧΛ࡞Δ͜ͱͰಘΒΕΔ΋ͷ
    w OQNΛ࢖ͬͨϫʔΫϑϩʔΛ஌Δ͜ͱ͕Ͱ͖Δ
    w ʢ4JOESFͷҒେ͞ʣ
    XFCϑϩϯτΤϯυͷ։ൃʹ͔ܽͤͳ͘ͳͬͨ/PEFKT

    )FMMPϞδϡʔϧΛ࡞ͬͯɺ

    /PEFKTͷΤίγεςϜΛࢧ͑ΔOQNͷੈքʹ৮ΕͯΈΑ͏ʂ
    

    View Slide