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

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

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

#WeJS

Transcript

1. զ͕Ոͷ
   XFC
   ϑϩϯτΤϯυ։ൃɾϏϧυ؀ڥͷวྺ - The itinerant history of our web frontend dev & build environment -  /BPLJ
   :"."%"
   !XBLBNTIB 8F
   "SF
   +BWB4DSJQUFST
   !UI
2. Introduction w XBLBNTIB
   ͕͜Ε·Ͱ࢖༻͖ͯͨ͠
   XFC
   ϑϩϯτΤϯυ։ൃʹ͓͚Δ Ϗϧυ؀ڥͷวྺΛ͝঺հ
   w ͦΕͧΕͷ֓ཁ΍Ϣʔεέʔε͸໪࿦ɺͳͥͦΕΛ࢖͏ͷΛ΍Ίͨͷ͔ ʹ͍ͭͯ΋ݴٴ
3. 
    
    
   
    
   
    
   
   OPX 
   
   
4. Build static websites with an easy-to-use framework - 2013.early ~ 2014.early - Middleman
5. Middleman 3VCZ
   ੡ͷʰ੩త
   XFC
   αΠτδΣωϨʔλʱ
   4JOBUSB
   ͱ͍͏
   3VCZ
   ੡
   %4-
   ʹґଘ 3VCZ 4JOBUSB
6. Middleman ֦ுϝλݴޠͱͯ͠
   )BNM
   
   4$44
   
   4BTT
   
   
   $P⒎FF4DSJQU
   ͕
   ࠷ॳ͔Β࢖༻Մೳ
7. Middleman 3VCZ(FNT
   ʹͯ഑෍͞Ε͍ͯΔͨΊ
   ίϚϯυϥΠϯͻͱͭͰΠϯετʔϧ׬ྃ $ gem install middleman $ middleman init my-project $ middleman server $ middleman build
8. $ gem install middleman $ middleman init my-project $ middleman server $ middleman build w ๛෋ͳϔϧύʔϝιου
   w 3BJMT
   ͱಉ͡΋ͷ͕΄΅࢖༻Մೳ
   w ࠷ॳ͔ΒϏϧυ؀ڥ͕׬੒͍ͯ͠ΔͷͰ௒ઈ͓खܰ
   w ֤छϝλݴޠͷίϯύΠϧ
   w -JWF3FMPBE
   w "TTFU
   1JQFMJOF
   
   +4
   $44
   ͷ݁߹
   
   ϛχϑΝΠԽ
   
   w FUD
   ʜ
9. w ϓϩμΫτͷ
   XFC
   ϑϩϯτΤϯυ։ൃͱ͍͏ΑΓ͸ ϓϩτλΠϐϯά؀ڥͱͯ͠׆༻
   w 6*
   ݕূͷͨΊͷϞοΫΞοϓ
   w σϞ༻
   w ͜Ε͕͔͋ͬͨΒࠓ೔ͷࣗ෼͕͍Δͱݴͬͯ΋աݴͰ ͸ͳ͍
   w "MU+4
   "MU$44
   ͰίʔσΟϯά͠ɺϩʔΧϧαʔόͰಈ࡞֬ೝ͢Δ ͱ͍͏։ൃϑϩʔΛҰ௨Γମײ͢Δ͜ͱ͕ग़དྷͨ 6TF
   DBTF
10. w 5ZQF4DSJQU
    ΛϝΠϯͰ࢖͍ͨ͘ͳͬͨ
    w .JEEMFNBO
    ͷΤίγεςϜ಺Ͱ͸
    54
    ΛίϯύΠϧग़དྷͳ͍
    w (SVOU
    ্Ͱ
    54
    ίϯύΠϧ
    
    .JEEMFNBO
    ࣮ߦ͢Δ؀ڥΛߏங
    w ྑ͘΋ѱ͘΋ग़དྷΔ͜ͱ͕ܾ·͍ͬͯΔͨΊɺ͔ͦ͜Β͸Έग़͠ ͨ͜ͱΛ͠Α͏ͱ͢Δͱ్୺ʹϋοΫ·͕͍ͷ͜ͱΛ͢Δඞཁ͕ ͋Δ ଔۀͷ͖͔͚ͬ
11. 
     
     
    
     
    
     
    
    OPX 
    
    
12. The JavaScript Task Runner - 2014.early ~ 2015.early - Grunt
13. Grunt +BWB4DSJQU
    ੡ͷλεΫϥϯφʔ
    
    /PEFKT
    ্Ͱಈ͘
    
    XFC
    ϑϩϯτΤϯυք۾ͰλεΫϥϯφʔ͕ຊ֨తʹ࢖ΘΕ͸͡ΊΔ͖͔͚ͬͱͳͬͨ
14. w ϓϥάΠϯ
    
    /PEF
    Ϟδϡʔϧ
    
    ͕๛෋
    w ͦΕΒΛ૊Έ߹Θͤͯཁ݅ʹదͨ͠Ϗϧυ؀ڥΛߏங
    w ֤छϝλݴޠ
    
    5ZQF4DSJQU
    
    4$44
    
    +BEF
    ʜ
    
    ͷίϯύΠϧ
    w ϩʔΧϧαʔόͷىಈ
    w -JWF3FMPBE
    w +4
    $44
    ͷ݁߹
    
    ϛχϑΝΠԽ
    w FUD
    ʜ
    w gruntfile.js
    ʹϋογϡܗࣜͰλεΫΛఆٛ
    w ˞
    $P⒎FF4DSJQU
    Ͱ΋هड़Մೳ
15. w খن໛ͳαʔόʔϨεΞϓϦέʔγϣϯͷ։ൃ؀ڥ
    w 8PSE1SFTT
    ͷςʔϚ։ൃ
    w +BWB4DSJQU
    ͸
    5ZQF4DSJQU
    $44
    ͸
    4$44
    Ͱهड़ͨ͠ͷΛϏϧυ 6TF
    DBTF
16. w λεΫͷॻ͖΍͢͞
    
    Մಡੑ͕ΠϚΠν
    w άάͬͯݟ͚ͭͨίʔυΛίϐϖ͚ͨͩ͠Ͱಈ͍ͨ͜ͱ͕Ұ౓΋ ͳ͘ɺԿ͔͠Βͷख௚͕͠ඞཁͩͬͨ
    w ಉ͡໨తͰ΋ఆٛͷهड़͕݁ߏόϥ͍͍ͭͯΔ
    w ࢖͍͜ͳ͢લʹ
    (VMQ
    ʹڵຯ͕Ҡͬͨ ଔۀͷ͖͔͚ͬ
17. 
     
     
    
     
    
     
    
    OPX 
    
    
18. Automate and enhance your workflow - 2015.early ~ 2016.mid - Gulp
19. Gulp /PEFKT
    ͷ
    4USFBN"1*
    
    ΠϕϯτετϦʔϜ
    
    Λ޼Έʹར༻ͨ͠λεΫϥϯφʔ
    ΤϯδχΞք۾͚ͩͰͳ͘ɺσβΠφʔք۾Ͱ΋࢖ΘΕΔ͘Β͍ʹ·Ͱීٴ͍ͯ͠Δ
20. w νΣʔϯϝιου෩ʹλεΫΛఆٛ
    w <ίϯύΠϧ>
    
    <݁߹>
    
    <ϛχϑΝΠ>
    ͷΑ͏ͳಉظతॲཧΛՄಡ ੑߴ͘ఆٛͰ͖Δ
    w ॲཧͷྲྀΕ͕௥͍΍͍͢
    w (SVOU
    ΑΓ΋هड़ʹ౷Ұײ͕͋Δ
    w ฒྻॲཧ͕ݪଇ
    w λεΫͷ࣮ߦ଎౓͕଎͍
    w ˞
    (SVOU
    ͸Ұͭͣͭॱ൪ʹॲཧ͢Δ
21. w େن໛
    41"
    ։ൃҊ݅ͷ
    ϑϩϯτΤϯυ։ൃج൫
    w 5ZQF4DSJQU
    
    4$44
    
    +BEF
    
    1VH
    
    ͷίϯύΠϧ
    w ϓϩμΫγϣϯίʔυͱґଘϥΠϒϥϦͱͷ݁߹
    w ϩʔΧϧαʔόͷىಈͱ
    XBUDI
    
    -JWF3FMPBE
    
    w Ϗϧυ؀ڥͷຊ֨తͳߏஙϊ΢ϋ΢ͷଟ͘Λ͜ͷஈ֊ Ͱशಘ
    w /PEFKT
    ͷ֓ཁ΋͜ͷࠒʹֶΜͩ
    
    ˞
    ͦ͜·Ͱਂ͘͸ཧղͯ͠ͳ͍
    6TF
    DBTF
22. Browserify lets you require ( ‘modules’ ) in the browser by bundling up all of your dependencies - 2016.mid ~ 2016.later - Use Browserify
23. w +BWB4DSJQU
    ϑϨʔϜϫʔΫΛ࡮৽
    w "OHVMBS
    ΍
    $ZDMFKT
    ͱ͍ͬͨΑΓϞμϯͳ
    '8
    Λݕূ
    w ˞
    ࠷ऴతʹ
    $ZDMFKT
    Λ࠾༻
    w CSPXTFSJGZ
    Λಋೖ
    w +4
    ͷϞδϡʔϧؒͷґଘղܾ΍ϑΝΠϧ݁߹ͷͨΊʹඞཁ
    w Ϗϧυ࣌ؒ୹ॖͷͨΊʹ
    XBUDIJGZ
    ΋ซͤͯಋೖ
    
    ࠩ෼ίϯύΠϧ
    
24. w CSPXTFSJGZ
    Λ
    (VMQ
    ͷ
    4USFBN"1*
    Ͱ࢖͏ϝϦοτ͕ খ͍͞ͱ൑அ
    w WJOZMTPVSDFTUSFBN
    Ͱϥοϓͯ͠ແཧ΍Γ
    4USFBN"1*
    ্ʹ৐ͤ ͯ͋͛Δඞཁ͕͋Δ
    w ϏϧυͷͨΊʹґଘ͢Δ
    /PEF
    ϞδϡʔϧΛݮΒ͍ͨ͠
    w (VMQ
    ্Ͱಈ͔͢Ҏ্ɺ֤छίϯύΠϥͷ
    (VMQ
    ϥούʔ͕ඞཁ
    w όʔδϣϯ61ͨ͠Βಈ͔ͳ͘ͳͬͨͱ͍͏ϦεΫ͕૿͑Δ
    w ˞
    ࣮ࡍʹԿ౓͔ಈ͔ͳ͘ͳΔ͜ͱ͕͋ͬͨ ଔۀͷ͖͔͚ͬ
25. 
     
     
    
     
    
     
    
    OPX 
    
    
26. npm scripts the “scripts” property of the package.json script, for following scripts - 2017.early ~ Now - npm-scripts
27. npm-scripts λεΫϥϯφʔͱ͍͏ΑΓ͸
    TIFMM
    TDSJQU
    ͷΤΠϦΞείϚϯυ iTerm my-project > npm run build > my-project@1.0.0 watch /path/to/your/project/my-project > node ./bin/build.js ⋮
28. iTerm my-project > npm run build > my-project@1.0.0 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
    ΄ͲෳࡶͳλεΫͷఆٛʹ͸޲͔ͳ͍͕ɺ͋Δ ఔ౓͸͜Ε͚ͩͰॆ෼ΧόʔՄೳ
29. iTerm my-project > npm run build > my-project@1.0.0 watch /path/to/your/project/my-project > node ./bin/build.js ⋮ w /PEF
    Ϟδϡʔϧؒͷґଘ͕ܹݮ
    w (VMQ
    ༻ͷϥούʔϞδϡʔϧ͕ෆཁ
    w ΞοϓσʔτʹΑΔյ໓ͱ͍͏ϦεΫ͕ܹݮ
    w ࣮ߦ଎౓͕ܶతʹ޲্
30. my-project > npm run build > my-project@1.0.0 watch /path/to/your/project/my-project > node ./bin/build.js ⋮ iTerm w ݱߦͷ
    41"
    ։ൃͷͨΊͷج൫
    w 5ZQF4DSJQU
    
    4UZMVT
    
    1VH
    ͷίϯύΠϧ
    w CSPXTFSJGZ
    Ͱ
    +4
    Ϟδϡʔϧͷґଘؔ܎Λղܾ
    
    ϑΝΠϧ݁߹
    w ϑϩϯτΤϯυɾΤίγεςϜͷਐԽʹ൐ͬͯλεΫ ఆ͕ٛ؆ུԽ
    w +4
    ϑϨʔϜϫʔΫ͕ద੾ʹϞδϡʔϧԽ͞Ε͍ͯΔ
    w #PXFS
    Λ࢖Θͣͱ΋ຆͲͷ
    +4
    ϥΠϒϥϦ͕
    OQN
    ܦ༝ͰΠϯε τʔϧͰ͖ΔΑ͏ʹͳͬͨ 6TF
    DBTF
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
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
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
34. 
    
    OPX w 1SFQBDL
    w $44
    .0%6-&4
    w FUD
    ʜ ࠓޙ࢖ͬͯΈ͍ͨ΋ͷ
35. *OUSPEVDF
    NZTFMG Զͷ໊લΛݴͬͯΈΖ 
    ࣗݾ঺հ
    
36. גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    XFC
    ϑϩϯτΤϯυΤϯδχΞ ࢁా ௚थ /BPLJ
    :"."%" 
    *OUSPEVDF
    NZTFMG
     !XBLBNTIB
37. https://tech.recruit-mp.co.jp NET BIZ DIV. TECH BLOG
39. https://tech.recruit-mp.co.jp 3.1 ϒϩά
40. 5IBOL
    ZPV