Upgrade to Pro — share decks privately, control downloads, hide ads and more …

我が家の web フロントエンド開発・ビルド環境の遍歴

wakamsha
June 05, 2017

我が家の web フロントエンド開発・ビルド環境の遍歴

2017年6月5日の『We Are JavaScripters! @8th』で発表した資料です。

私がこれまで使用してきた web フロントエンド開発におけるビルド環境の遍歴をご紹介しています。それぞれの概要やユースケースは勿論、なぜそれを使うのをやめたのかについても言及しています。

#WeJS

wakamsha

June 05, 2017
Tweet

More Decks by wakamsha

Other Decks in Technology

Transcript

  1. զ͕Ոͷ
    XFCϑϩϯτΤϯυ։ൃɾϏϧυ؀ڥͷวྺ
    - The itinerant history of our web frontend dev & build environment -

    /BPLJ:"."%"
    !XBLBNTIB
    8F"SF+BWB4DSJQUFST!UI

    View Slide

  2. Introduction
    w XBLBNTIB͕͜Ε·Ͱ࢖༻͖ͯͨ͠XFCϑϩϯτΤϯυ։ൃʹ͓͚Δ
    Ϗϧυ؀ڥͷวྺΛ͝঺հ
    w ͦΕͧΕͷ֓ཁ΍Ϣʔεέʔε͸໪࿦ɺͳͥͦΕΛ࢖͏ͷΛ΍Ίͨͷ͔
    ʹ͍ͭͯ΋ݴٴ

    View Slide




  3. OPX

    View Slide

  4. Build static websites with an easy-to-use framework
    - 2013.early ~ 2014.early -
    Middleman

    View Slide

  5. Middleman
    3VCZ੡ͷʰ੩తXFCαΠτδΣωϨʔλʱ
    4JOBUSBͱ͍͏3VCZ੡%4-ʹґଘ
    3VCZ 4JOBUSB

    View Slide

  6. Middleman
    ֦ுϝλݴޠͱͯ͠)BNM4$44 4BTT
    $P⒎FF4DSJQU͕
    ࠷ॳ͔Β࢖༻Մೳ

    View Slide

  7. Middleman
    3VCZ(FNTʹͯ഑෍͞Ε͍ͯΔͨΊ
    ίϚϯυϥΠϯͻͱͭͰΠϯετʔϧ׬ྃ
    $ gem install middleman
    $ middleman init my-project
    $ middleman server
    $ middleman build

    View Slide

  8. $ gem install middleman
    $ middleman init my-project
    $ middleman server
    $ middleman build
    w ๛෋ͳϔϧύʔϝιου
    w 3BJMTͱಉ͡΋ͷ͕΄΅࢖༻Մೳ
    w ࠷ॳ͔ΒϏϧυ؀ڥ͕׬੒͍ͯ͠ΔͷͰ௒ઈ͓खܰ
    w ֤छϝλݴޠͷίϯύΠϧ
    w -JWF3FMPBE
    w "TTFU1JQFMJOF +4 $44ͷ݁߹ϛχϑΝΠԽ

    w FUDʜ

    View Slide

  9. w ϓϩμΫτͷXFCϑϩϯτΤϯυ։ൃͱ͍͏ΑΓ͸
    ϓϩτλΠϐϯά؀ڥͱͯ͠׆༻
    w 6*ݕূͷͨΊͷϞοΫΞοϓ
    w σϞ༻
    w ͜Ε͕͔͋ͬͨΒࠓ೔ͷࣗ෼͕͍Δͱݴͬͯ΋աݴͰ
    ͸ͳ͍
    w "MU+4 "MU$44ͰίʔσΟϯά͠ɺϩʔΧϧαʔόͰಈ࡞֬ೝ͢Δ
    ͱ͍͏։ൃϑϩʔΛҰ௨Γମײ͢Δ͜ͱ͕ग़དྷͨ
    6TFDBTF

    View Slide

  10. w 5ZQF4DSJQUΛϝΠϯͰ࢖͍ͨ͘ͳͬͨ
    w .JEEMFNBOͷΤίγεςϜ಺Ͱ͸54ΛίϯύΠϧग़དྷͳ͍
    w (SVOU্Ͱ54ίϯύΠϧ.JEEMFNBO࣮ߦ͢Δ؀ڥΛߏங
    w ྑ͘΋ѱ͘΋ग़དྷΔ͜ͱ͕ܾ·͍ͬͯΔͨΊɺ͔ͦ͜Β͸Έग़͠
    ͨ͜ͱΛ͠Α͏ͱ͢Δͱ్୺ʹϋοΫ·͕͍ͷ͜ͱΛ͢Δඞཁ͕
    ͋Δ
    ଔۀͷ͖͔͚ͬ

    View Slide




  11. OPX

    View Slide

  12. The JavaScript Task Runner
    - 2014.early ~ 2015.early -
    Grunt

    View Slide

  13. Grunt
    +BWB4DSJQU੡ͷλεΫϥϯφʔ /PEFKT্Ͱಈ͘

    XFCϑϩϯτΤϯυք۾ͰλεΫϥϯφʔ͕ຊ֨తʹ࢖ΘΕ͸͡ΊΔ͖͔͚ͬͱͳͬͨ

    View Slide

  14. w ϓϥάΠϯ /PEFϞδϡʔϧ
    ͕๛෋
    w ͦΕΒΛ૊Έ߹Θͤͯཁ݅ʹదͨ͠Ϗϧυ؀ڥΛߏங
    w ֤छϝλݴޠ 5ZQF4DSJQU4$44+BEFʜ
    ͷίϯύΠϧ
    w ϩʔΧϧαʔόͷىಈ
    w -JWF3FMPBE
    w +4 $44ͷ݁߹ϛχϑΝΠԽ
    w FUDʜ
    w gruntfile.jsʹϋογϡܗࣜͰλεΫΛఆٛ
    w ˞$P⒎FF4DSJQUͰ΋هड़Մೳ

    View Slide

  15. w খن໛ͳαʔόʔϨεΞϓϦέʔγϣϯͷ։ൃ؀ڥ
    w 8PSE1SFTTͷςʔϚ։ൃ
    w +BWB4DSJQU͸5ZQF4DSJQU $44͸4$44Ͱهड़ͨ͠ͷΛϏϧυ
    6TFDBTF

    View Slide

  16. w λεΫͷॻ͖΍͢͞Մಡੑ͕ΠϚΠν
    w άάͬͯݟ͚ͭͨίʔυΛίϐϖ͚ͨͩ͠Ͱಈ͍ͨ͜ͱ͕Ұ౓΋
    ͳ͘ɺԿ͔͠Βͷख௚͕͠ඞཁͩͬͨ
    w ಉ͡໨తͰ΋ఆٛͷهड़͕݁ߏόϥ͍͍ͭͯΔ
    w ࢖͍͜ͳ͢લʹ(VMQʹڵຯ͕Ҡͬͨ
    ଔۀͷ͖͔͚ͬ

    View Slide




  17. OPX

    View Slide

  18. Automate and enhance your workflow
    - 2015.early ~ 2016.mid -
    Gulp

    View Slide

  19. Gulp
    /PEFKTͷ4USFBN"1* ΠϕϯτετϦʔϜ
    Λ޼Έʹར༻ͨ͠λεΫϥϯφʔ
    ΤϯδχΞք۾͚ͩͰͳ͘ɺσβΠφʔք۾Ͱ΋࢖ΘΕΔ͘Β͍ʹ·Ͱීٴ͍ͯ͠Δ

    View Slide

  20. w νΣʔϯϝιου෩ʹλεΫΛఆٛ
    w ͷΑ͏ͳಉظతॲཧΛՄಡ
    ੑߴ͘ఆٛͰ͖Δ
    w ॲཧͷྲྀΕ͕௥͍΍͍͢
    w (SVOUΑΓ΋هड़ʹ౷Ұײ͕͋Δ
    w ฒྻॲཧ͕ݪଇ
    w λεΫͷ࣮ߦ଎౓͕଎͍
    w ˞(SVOU͸Ұͭͣͭॱ൪ʹॲཧ͢Δ

    View Slide

  21. w େن໛41"։ൃҊ݅ͷϑϩϯτΤϯυ։ൃج൫
    w 5ZQF4DSJQU4$44+BEF 1VH
    ͷίϯύΠϧ
    w ϓϩμΫγϣϯίʔυͱґଘϥΠϒϥϦͱͷ݁߹
    w ϩʔΧϧαʔόͷىಈͱXBUDI -JWF3FMPBE

    w Ϗϧυ؀ڥͷຊ֨తͳߏஙϊ΢ϋ΢ͷଟ͘Λ͜ͷஈ֊
    Ͱशಘ
    w /PEFKTͷ֓ཁ΋͜ͷࠒʹֶΜͩ ˞ͦ͜·Ͱਂ͘͸ཧղͯ͠ͳ͍

    6TFDBTF

    View Slide

  22. Browserify lets you require ( ‘modules’ ) in the browser by bundling up all of your dependencies
    - 2016.mid ~ 2016.later -
    Use Browserify

    View Slide

  23. w +BWB4DSJQUϑϨʔϜϫʔΫΛ࡮৽
    w "OHVMBS΍$ZDMFKTͱ͍ͬͨΑΓϞμϯͳ'8Λݕূ
    w ˞࠷ऴతʹ$ZDMFKTΛ࠾༻
    w CSPXTFSJGZΛಋೖ
    w +4ͷϞδϡʔϧؒͷґଘղܾ΍ϑΝΠϧ݁߹ͷͨΊʹඞཁ
    w Ϗϧυ࣌ؒ୹ॖͷͨΊʹXBUDIJGZ΋ซͤͯಋೖ ࠩ෼ίϯύΠϧ

    View Slide

  24. w CSPXTFSJGZΛ(VMQͷ4USFBN"1*Ͱ࢖͏ϝϦοτ͕
    খ͍͞ͱ൑அ
    w WJOZMTPVSDFTUSFBNͰϥοϓͯ͠ແཧ΍Γ4USFBN"1*্ʹ৐ͤ
    ͯ͋͛Δඞཁ͕͋Δ
    w ϏϧυͷͨΊʹґଘ͢Δ/PEFϞδϡʔϧΛݮΒ͍ͨ͠
    w (VMQ্Ͱಈ͔͢Ҏ্ɺ֤छίϯύΠϥͷ(VMQϥούʔ͕ඞཁ
    w όʔδϣϯ61ͨ͠Βಈ͔ͳ͘ͳͬͨͱ͍͏ϦεΫ͕૿͑Δ
    w ˞࣮ࡍʹԿ౓͔ಈ͔ͳ͘ͳΔ͜ͱ͕͋ͬͨ
    ଔۀͷ͖͔͚ͬ

    View Slide




  25. OPX

    View Slide

  26. npm scripts the “scripts” property of the package.json script, for following scripts
    - 2017.early ~ Now -
    npm-scripts

    View Slide

  27. npm-scripts
    λεΫϥϯφʔͱ͍͏ΑΓ͸TIFMMTDSJQUͷΤΠϦΞείϚϯυ
    iTerm
    my-project > npm run build
    > [email protected] watch /path/to/your/project/my-project
    > node ./bin/build.js

    View Slide

  28. iTerm
    my-project > npm run build
    > [email protected] watch /path/to/your/project/my-project
    > node ./bin/build.js

    w λεΫࣗମ͸TIϑΝΠϧ΍KTϑΝΠϧʹఆٛ
    w OQNTDSJQUT͸ͦΕΒΛ࣮ߦ͢Δ͚ͩ
    w .shͳΒbash task.sh
    w jsͳΒnode task.js
    w $JSDMF$*ͷcircle.ymlΈ͍ͨͳΠϝʔδ
    w (VMQ΄ͲෳࡶͳλεΫͷఆٛʹ͸޲͔ͳ͍͕ɺ͋Δ
    ఔ౓͸͜Ε͚ͩͰॆ෼ΧόʔՄೳ

    View Slide

  29. iTerm
    my-project > npm run build
    > [email protected] watch /path/to/your/project/my-project
    > node ./bin/build.js

    w /PEFϞδϡʔϧؒͷґଘ͕ܹݮ
    w (VMQ༻ͷϥούʔϞδϡʔϧ͕ෆཁ
    w ΞοϓσʔτʹΑΔյ໓ͱ͍͏ϦεΫ͕ܹݮ
    w ࣮ߦ଎౓͕ܶతʹ޲্

    View Slide

  30. my-project > npm run build
    > [email protected] watch /path/to/your/project/my-project
    > node ./bin/build.js

    iTerm
    w ݱߦͷ41"։ൃͷͨΊͷج൫
    w 5ZQF4DSJQU4UZMVT1VHͷίϯύΠϧ
    w CSPXTFSJGZͰ+4Ϟδϡʔϧͷґଘؔ܎ΛղܾϑΝΠϧ݁߹
    w ϑϩϯτΤϯυɾΤίγεςϜͷਐԽʹ൐ͬͯλεΫ
    ఆ͕ٛ؆ུԽ
    w +4ϑϨʔϜϫʔΫ͕ద੾ʹϞδϡʔϧԽ͞Ε͍ͯΔ
    w #PXFSΛ࢖Θͣͱ΋ຆͲͷ+4ϥΠϒϥϦ͕OQNܦ༝ͰΠϯε
    τʔϧͰ͖ΔΑ͏ʹͳͬͨ
    6TFDBTF

    View Slide

  31. {
    "name": “my-project",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
    "build": “node ./bin/build.js”
    },
    "dependencies": {
    "@cycle/dom": "^17.3.0",
    "@cycle/run": "^3.1.0",
    "@cycle/rxjs-run": “^7.0.0",
    "ramda": "^0.24.1",
    "rxjs": "^5.4.0",
    "xstream": "^10.8.0"
    },
    "devDependencies": {
    "browser-sync": "^2.18.11",
    "browserify": "^14.3.0",
    "connect-modrewrite": "^0.10.1",
    "pug": "^2.0.0-rc.1",
    "pug-cli": "^1.0.0-alpha6",
    "stylus": "^0.54.5",
    "tsify": "^3.0.1",
    "typescript": "^2.3.2",
    "watchify": "^3.9.0"
    }
    }
    package.json

    View Slide

  32. {
    "name": “my-project",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
    "build": “node ./bin/build.js”
    },
    "dependencies": {
    "@cycle/dom": "^17.3.0",
    "@cycle/run": "^3.1.0",
    "@cycle/rxjs-run": “^7.0.0",
    "ramda": "^0.24.1",
    "rxjs": "^5.4.0",
    "xstream": "^10.8.0"
    },
    "devDependencies": {
    "browser-sync": "^2.18.11",
    "browserify": "^14.3.0",
    "connect-modrewrite": "^0.10.1",
    "pug": "^2.0.0-rc.1",
    "pug-cli": "^1.0.0-alpha6",
    "stylus": "^0.54.5",
    "tsify": "^3.0.1",
    "typescript": "^2.3.2",
    "watchify": "^3.9.0"
    }
    }
    package.json
    // Compile Pug sources
    execSync(`pug src/templates -o public -w`);
    // Compile Stylus sources
    execSync(`stylus src/styles/style.styl -o public/assets/style.css`);
    // Compile TypeScript sources
    let b = browserify({
    entries: ['./src/scripts/main.ts'],
    cache: {},
    packageCache: {},
    plugin: [watchify],
    debug: true
    })
    .plugin(tsify);
    b.on('update', bundle)
    bundle();
    function bundle() {
    b.bundle().on('error', (err) => {
    console.log(err.message);
    }).pipe(fs.createWriteStream('./public/assets/main.js'));
    }
    // Run Server
    browserSync.create().init({
    files: ['public'],
    server: {
    baseDir: ['public']
    },
    startPath: '/',
    reloadDebounce: 500
    });
    build.js

    View Slide

  33. {
    "name": “my-project",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
    "build": “node ./bin/build.sh”
    },
    "dependencies": {
    "@cycle/dom": "^17.3.0",
    "@cycle/run": "^3.1.0",
    "@cycle/rxjs-run": “^7.0.0",
    "ramda": "^0.24.1",
    "rxjs": "^5.4.0",
    "xstream": "^10.8.0"
    },
    "devDependencies": {
    "browser-sync": "^2.18.11",
    "browserify": "^14.3.0",
    "connect-modrewrite": "^0.10.1",
    "pug": "^2.0.0-rc.1",
    "pug-cli": "^1.0.0-alpha6",
    "stylus": "^0.54.5",
    "tsify": "^3.0.1",
    "typescript": "^2.3.2",
    "watchify": "^3.9.0"
    }
    }
    package.json
    #!/usr/bin/env bash
    # Compile Pug sources
    nohup pug src/templates -o public -w &
    pug_pid=$!
    trap "kill -15 $pug_pid &>/dev/null" 2 15
    # Compile Stylus sources
    nohup stylus src/styles/app.styl -o public/assets -m -w &
    stylus_pid=$!
    trap "kill -15 $stylus_pid &>/dev/null" 2 15
    # Compile TypeScript sources
    nohup watchify -d src/scripts/main.ts -p [ tsify ] -o public/assets/
    app.js &
    watchify_pid=$!
    trap "kill -15 $watchify_pid $>/dev/null" 2 15
    # Run Server
    nohup browser-sync start --config bs-config.js &
    browserSync_pid=$!
    trap "kill -15 $browserSync_pid &>/dev/null" 2 15
    tail -f nohup.out
    build.sh

    View Slide

  34. OPX
    w 1SFQBDL
    w $44.0%6-&4
    w FUDʜ
    ࠓޙ࢖ͬͯΈ͍ͨ΋ͷ

    View Slide

  35. *OUSPEVDFNZTFMG
    Զͷ໊લΛݴͬͯΈΖ
    ࣗݾ঺հ

    View Slide

  36. גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    XFCϑϩϯτΤϯυΤϯδχΞ
    ࢁా ௚थ
    /BPLJ:"."%"
    *OUSPEVDFNZTFMG
    !XBLBNTIB

    View Slide

  37. https://tech.recruit-mp.co.jp
    NET BIZ DIV. TECH BLOG

    View Slide

  38. View Slide

  39. https://tech.recruit-mp.co.jp
    3.1 ϒϩά

    View Slide

  40. 5IBOLZPV

    View Slide