いつParcel を使うのか いつParcel を使うのか いつParcel を使うのか いつParcel を使うのか いつParcel を使うのか いつParcel を使うのか 2017.12.19 #js_taiban @potato4d 2017.12.19 #js_taiban @potato4d 2017.12.19 #js_taiban @potato4d 2017.12.19 #js_taiban @potato4d 2017.12.19 #js_taiban @potato4d 2017.12.19 #js_taiban @potato4d 1 / 29

自己紹介 自己紹介 自己紹介 自己紹介 自己紹介 自己紹介 potato4d potato4d potato4d potato4d potato4d potato4d pixiv→ フリーランスなJavaScript/PHP エンジニア pixiv→ フリーランスなJavaScript/PHP エンジニア pixiv→ フリーランスなJavaScript/PHP エンジニア pixiv→ フリーランスなJavaScript/PHP エンジニア pixiv→ フリーランスなJavaScript/PHP エンジニア pixiv→ フリーランスなJavaScript/PHP エンジニア Vue.js 日本ユーザーグループスタッフ Vue.js 日本ユーザーグループスタッフ Vue.js 日本ユーザーグループスタッフ Vue.js 日本ユーザーグループスタッフ Vue.js 日本ユーザーグループスタッフ Vue.js 日本ユーザーグループスタッフ jp.vuejs.org jp.vuejs.org jp.vuejs.org jp.vuejs.org jp.vuejs.org jp.vuejs.org commiter commiter commiter commiter commiter commiter                   2 / 29

今日話すこと 今日話すこと 今日話すこと 今日話すこと 今日話すこと 今日話すこと Parcel とは何か Parcel とは何か Parcel とは何か Parcel とは何か Parcel とは何か Parcel とは何か Parcel のメリット・デメリット Parcel のメリット・デメリット Parcel のメリット・デメリット Parcel のメリット・デメリット Parcel のメリット・デメリット Parcel のメリット・デメリット 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 まとめ まとめ まとめ まとめ まとめ まとめ                         3 / 29

先に結論から 先に結論から 先に結論から 先に結論から 先に結論から 先に結論から 4 / 29

May be May be May be May be May be May be webpack は死に webpack は死に webpack は死に webpack は死に webpack は死に webpack は死にません ません ません ません ません ません 5 / 29

Parcel Parcel Parcel Parcel Parcel Parcel https://github.com/parcel-bundler/parcel https://github.com/parcel-bundler/parcel https://github.com/parcel-bundler/parcel https://github.com/parcel-bundler/parcel https://github.com/parcel-bundler/parcel https://github.com/parcel-bundler/parcel 6 / 29

Blazing fast, Blazing fast, Blazing fast, Blazing fast, Blazing fast, Blazing fast, zero con guration zero con guration zero con guration zero con guration zero con guration zero con guration web application bundler web application bundler web application bundler web application bundler web application bundler web application bundler https://parceljs.org/ https://parceljs.org/ https://parceljs.org/ https://parceljs.org/ https://parceljs.org/ https://parceljs.org/ 7 / 29

Installation Installation Installation Installation Installation Installation $ $ mkdir mkdir sample-project sample-project $ yarn init $ yarn init $ yarn add parcel $ yarn add parcel $ yarn parcel index.html $ yarn parcel index.html 8 / 29

$ yarn parcel index.html $ yarn parcel index.html 9 / 29

Use jQuery Use jQuery Use jQuery Use jQuery Use jQuery Use jQuery window window. .$ $ = = require require( ('jquery' 'jquery') ) $ $( (document document) ). .ready ready( (function function ( () ) { { $ $( ('#root' '#root') ). .append append( (` `

Parcel for jQuery

Parcel for jQuery

` `) ) } }) ) 10 / 29

with React with React with React with React with React with React .babelrc .babelrc .babelrc .babelrc .babelrc .babelrc { { "presets" "presets": : [ ["react-app" "react-app"] ] } } 11 / 29

with React with React with React with React with React with React package.json package.json package.json package.json package.json package.json "devDependencies" "devDependencies": : { { "babel-preset-react-app" "babel-preset-react-app": : "^3.1.0" "^3.1.0", , "parcel-bundler" "parcel-bundler": : "^1.2.0" "^1.2.0", , "react" "react": : "^16.2.0" "^16.2.0", , "react-dom" "react-dom": : "^16.2.0" "^16.2.0" } } 12 / 29

with React with React with React with React with React with React index.js index.js index.js index.js index.js index.js import import React React from from 'react' 'react' import import { { render render } } from from 'react-dom' 'react-dom' import import App App from from './App' './App' render render( ( < >, , document document. .getElementById getElementById( ('root' 'root') ) ) ) 13 / 29

with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) package.json package.json package.json package.json package.json package.json "dependencies" "dependencies": : { { "babel-plugin-transform-runtime" "babel-plugin-transform-runtime": : "^6.23.0" "^6.23.0", , "babel-preset-es2015" "babel-preset-es2015": : "^6.24.1" "^6.24.1", , "vue" "vue": : "^2.5.11" "^2.5.11" } } 14 / 29

with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) with Vue (UnO cial) index.js index.js index.js index.js index.js index.js import import Vue Vue from from 'vue' 'vue' import import App App from from './App.vue' './App.vue' new new Vue Vue( ({ { el el: : '#app' '#app', , render render: : h h => => h h( (App App) ) } }) ) 15 / 29

with Vue(UnO cial) with Vue(UnO cial) with Vue(UnO cial) with Vue(UnO cial) with Vue(UnO cial) with Vue(UnO cial) App.vue App.vue App.vue App.vue App.vue App.vue < > < > > < > export export default default { { data data ( () ) { { return return { { msg msg: : 'Parcel for Vue' 'Parcel for Vue' } } } } } } </ > 16 / 29

https://github.com/potato4d/parcel-examples https://github.com/potato4d/parcel-examples https://github.com/potato4d/parcel-examples https://github.com/potato4d/parcel-examples https://github.com/potato4d/parcel-examples https://github.com/potato4d/parcel-examples jQuery, React and preact, Vue.js Examples jQuery, React and preact, Vue.js Examples jQuery, React and preact, Vue.js Examples jQuery, React and preact, Vue.js Examples jQuery, React and preact, Vue.js Examples jQuery, React and preact, Vue.js Examples       17 / 29

Parcelのメリット Parcelのメリット Parcelのメリット Parcelのメリット Parcelのメリット Parcelのメリット 18 / 29

Parcelのメリット Parcelのメリット Parcelのメリット Parcelのメリット Parcelのメリット Parcelのメリット もちろんZero con gration もちろんZero con gration もちろんZero con gration もちろんZero con gration もちろんZero con gration もちろんZero con gration DSLを覚える必要がない DSLを覚える必要がない DSLを覚える必要がない DSLを覚える必要がない DSLを覚える必要がない DSLを覚える必要がない プロジェクトごとの余計な設定の差異が存在しない プロジェクトごとの余計な設定の差異が存在しない プロジェクトごとの余計な設定の差異が存在しない プロジェクトごとの余計な設定の差異が存在しない プロジェクトごとの余計な設定の差異が存在しない プロジェクトごとの余計な設定の差異が存在しない デフォルトでの対応範囲の広さ デフォルトでの対応範囲の広さ デフォルトでの対応範囲の広さ デフォルトでの対応範囲の広さ デフォルトでの対応範囲の広さ デフォルトでの対応範囲の広さ HTML, CSS, JS(X), JSON, Image HTML, CSS, JS(X), JSON, Image HTML, CSS, JS(X), JSON, Image HTML, CSS, JS(X), JSON, Image HTML, CSS, JS(X), JSON, Image HTML, CSS, JS(X), JSON, Image 明確なプラグインベースでの拡張システム 明確なプラグインベースでの拡張システム 明確なプラグインベースでの拡張システム 明確なプラグインベースでの拡張システム 明確なプラグインベースでの拡張システム 明確なプラグインベースでの拡張システム Babelの設定などは自由に拡張可能 Babelの設定などは自由に拡張可能 Babelの設定などは自由に拡張可能 Babelの設定などは自由に拡張可能 Babelの設定などは自由に拡張可能 Babelの設定などは自由に拡張可能                                           19 / 29

Parcelの Parcelの Parcelの Parcelの Parcelの Parcelのデ デ デ デ デ デメリット メリット メリット メリット メリット メリット 複雑なことを行うには不向き 複雑なことを行うには不向き 複雑なことを行うには不向き 複雑なことを行うには不向き 複雑なことを行うには不向き 複雑なことを行うには不向き ちょっとした「これを足したい」という要望に対しての柔軟さは ちょっとした「これを足したい」という要望に対しての柔軟さは ちょっとした「これを足したい」という要望に対しての柔軟さは ちょっとした「これを足したい」という要望に対しての柔軟さは ちょっとした「これを足したい」という要望に対しての柔軟さは ちょっとした「これを足したい」という要望に対しての柔軟さは ない ない ない ない ない ない 一応webpackのaliasなどはbabel側で対応可能 一応webpackのaliasなどはbabel側で対応可能 一応webpackのaliasなどはbabel側で対応可能 一応webpackのaliasなどはbabel側で対応可能 一応webpackのaliasなどはbabel側で対応可能 一応webpackのaliasなどはbabel側で対応可能 まだまだ対応していないものもある まだまだ対応していないものもある まだまだ対応していないものもある まだまだ対応していないものもある まだまだ対応していないものもある まだまだ対応していないものもある Vue.jsの場合はまだ非公式のものしかない Vue.jsの場合はまだ非公式のものしかない Vue.jsの場合はまだ非公式のものしかない Vue.jsの場合はまだ非公式のものしかない Vue.jsの場合はまだ非公式のものしかない Vue.jsの場合はまだ非公式のものしかない 逆にReactなどは大分サポートが手厚い 逆にReactなどは大分サポートが手厚い 逆にReactなどは大分サポートが手厚い 逆にReactなどは大分サポートが手厚い 逆にReactなどは大分サポートが手厚い 逆にReactなどは大分サポートが手厚い                                     20 / 29

他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 他のバンドラとの比較 21 / 29

comparison to comparison to comparison to comparison to comparison to comparison to webpack webpack webpack webpack webpack webpack 22 / 29

comparison to comparison to comparison to comparison to comparison to comparison to webpack webpack webpack webpack webpack webpack ゼロベースでSandboxを作る分にはparcelで十分 ゼロベースでSandboxを作る分にはparcelで十分 ゼロベースでSandboxを作る分にはparcelで十分 ゼロベースでSandboxを作る分にはparcelで十分 ゼロベースでSandboxを作る分にはparcelで十分 ゼロベースでSandboxを作る分にはparcelで十分 yarnで入れると yarnで入れると yarnで入れると yarnで入れると yarnで入れると yarnで入れると $ yarn parcel $ yarn parcel $ yarn parcel $ yarn parcel $ yarn parcel $ yarn parcel だけで動かせるのは高ポイント だけで動かせるのは高ポイント だけで動かせるのは高ポイント だけで動かせるのは高ポイント だけで動かせるのは高ポイント だけで動かせるのは高ポイント 凝ったことをしたければcreate-react-appやvue-cliになる 凝ったことをしたければcreate-react-appやvue-cliになる 凝ったことをしたければcreate-react-appやvue-cliになる 凝ったことをしたければcreate-react-appやvue-cliになる 凝ったことをしたければcreate-react-appやvue-cliになる 凝ったことをしたければcreate-react-appやvue-cliになる CRAやvue-cliはwebpackベースのテンプレが殆ど CRAやvue-cliはwebpackベースのテンプレが殆ど CRAやvue-cliはwebpackベースのテンプレが殆ど CRAやvue-cliはwebpackベースのテンプレが殆ど CRAやvue-cliはwebpackベースのテンプレが殆ど CRAやvue-cliはwebpackベースのテンプレが殆ど ベストプラクティス構成を暗記しているのであれば同じものを ベストプラクティス構成を暗記しているのであれば同じものを ベストプラクティス構成を暗記しているのであれば同じものを ベストプラクティス構成を暗記しているのであれば同じものを ベストプラクティス構成を暗記しているのであれば同じものを ベストプラクティス構成を暗記しているのであれば同じものを 作っても良さそう 作っても良さそう 作っても良さそう 作っても良さそう 作っても良さそう 作っても良さそう CSS Modules対応のプラグインは現状webpackしかなさそう CSS Modules対応のプラグインは現状webpackしかなさそう CSS Modules対応のプラグインは現状webpackしかなさそう CSS Modules対応のプラグインは現状webpackしかなさそう CSS Modules対応のプラグインは現状webpackしかなさそう CSS Modules対応のプラグインは現状webpackしかなさそう このあたりもSandbox的ユースケースとしての限界が見える このあたりもSandbox的ユースケースとしての限界が見える このあたりもSandbox的ユースケースとしての限界が見える このあたりもSandbox的ユースケースとしての限界が見える このあたりもSandbox的ユースケースとしての限界が見える このあたりもSandbox的ユースケースとしての限界が見える                                           23 / 29

comparison to comparison to comparison to comparison to comparison to comparison to egoist/poi egoist/poi egoist/poi egoist/poi egoist/poi egoist/poi 24 / 29

What's What's What's What's What's What's egoist/poi egoist/poi egoist/poi egoist/poi egoist/poi egoist/poi ? ? ? ? ? ? Vueのコアコミッタの Vueのコアコミッタの Vueのコアコミッタの Vueのコアコミッタの Vueのコアコミッタの Vueのコアコミッタのegoist egoist egoist egoist egoist egoistさんが開発しているFew Con gration さんが開発しているFew Con gration さんが開発しているFew Con gration さんが開発しているFew Con gration さんが開発しているFew Con gration さんが開発しているFew Con gration なビルドツール なビルドツール なビルドツール なビルドツール なビルドツール なビルドツール webpackをラップしており、デフォルトでZero con gration、凝 webpackをラップしており、デフォルトでZero con gration、凝 webpackをラップしており、デフォルトでZero con gration、凝 webpackをラップしており、デフォルトでZero con gration、凝 webpackをラップしており、デフォルトでZero con gration、凝 webpackをラップしており、デフォルトでZero con gration、凝 ったことをしたいのであれば随時書き足す形で追加していける ったことをしたいのであれば随時書き足す形で追加していける ったことをしたいのであれば随時書き足す形で追加していける ったことをしたいのであれば随時書き足す形で追加していける ったことをしたいのであれば随時書き足す形で追加していける ったことをしたいのであれば随時書き足す形で追加していける 走り出しも簡単、必要に応じて拡張ができるとHobby Useには十 走り出しも簡単、必要に応じて拡張ができるとHobby Useには十 走り出しも簡単、必要に応じて拡張ができるとHobby Useには十 走り出しも簡単、必要に応じて拡張ができるとHobby Useには十 走り出しも簡単、必要に応じて拡張ができるとHobby Useには十 走り出しも簡単、必要に応じて拡張ができるとHobby Useには十 分なポテンシャル 分なポテンシャル 分なポテンシャル 分なポテンシャル 分なポテンシャル 分なポテンシャル ただ個人プロダクト色が強いので方向性としてVue/React中心とな ただ個人プロダクト色が強いので方向性としてVue/React中心とな ただ個人プロダクト色が強いので方向性としてVue/React中心とな ただ個人プロダクト色が強いので方向性としてVue/React中心とな ただ個人プロダクト色が強いので方向性としてVue/React中心とな ただ個人プロダクト色が強いので方向性としてVue/React中心とな る流れには見える る流れには見える る流れには見える る流れには見える る流れには見える る流れには見える https://github.com/egoist/poi https://github.com/egoist/poi https://github.com/egoist/poi https://github.com/egoist/poi https://github.com/egoist/poi https://github.com/egoist/poi                         25 / 29

comparison to comparison to comparison to comparison to comparison to comparison to egoist/poi egoist/poi egoist/poi egoist/poi egoist/poi egoist/poi 単純にReact/Vue利用における利便性だけで言えばpoiのほうが使 単純にReact/Vue利用における利便性だけで言えばpoiのほうが使 単純にReact/Vue利用における利便性だけで言えばpoiのほうが使 単純にReact/Vue利用における利便性だけで言えばpoiのほうが使 単純にReact/Vue利用における利便性だけで言えばpoiのほうが使 単純にReact/Vue利用における利便性だけで言えばpoiのほうが使 いやすい いやすい いやすい いやすい いやすい いやすい poiはどうやってもwebpackベースなのでビルド速度はwebpack poiはどうやってもwebpackベースなのでビルド速度はwebpack poiはどうやってもwebpackベースなのでビルド速度はwebpack poiはどうやってもwebpackベースなのでビルド速度はwebpack poiはどうやってもwebpackベースなのでビルド速度はwebpack poiはどうやってもwebpackベースなのでビルド速度はwebpack と同等となる と同等となる と同等となる と同等となる と同等となる と同等となる parcelは新たなエコシステムを形成する形となるが、poiはあくま parcelは新たなエコシステムを形成する形となるが、poiはあくま parcelは新たなエコシステムを形成する形となるが、poiはあくま parcelは新たなエコシステムを形成する形となるが、poiはあくま parcelは新たなエコシステムを形成する形となるが、poiはあくま parcelは新たなエコシステムを形成する形となるが、poiはあくま でもwebpackのloaderを追加する形となる でもwebpackのloaderを追加する形となる でもwebpackのloaderを追加する形となる でもwebpackのloaderを追加する形となる でもwebpackのloaderを追加する形となる でもwebpackのloaderを追加する形となる どちらを利用するかは今後の情勢によって変わるが、現状は好み どちらを利用するかは今後の情勢によって変わるが、現状は好み どちらを利用するかは今後の情勢によって変わるが、現状は好み どちらを利用するかは今後の情勢によって変わるが、現状は好み どちらを利用するかは今後の情勢によって変わるが、現状は好み どちらを利用するかは今後の情勢によって変わるが、現状は好み の側面が強い の側面が強い の側面が強い の側面が強い の側面が強い の側面が強い 印象としてはpoiは 印象としてはpoiは 印象としてはpoiは 印象としてはpoiは 印象としてはpoiは 印象としてはpoiはHobby Use Hobby Use Hobby Use Hobby Use Hobby Use Hobby Use, parcelは , parcelは , parcelは , parcelは , parcelは , parcelはSandbox Sandbox Sandbox Sandbox Sandbox Sandboxまで耐えうる まで耐えうる まで耐えうる まで耐えうる まで耐えうる まで耐えうる                               26 / 29

Parcelは素振り向きなDevKit Parcelは素振り向きなDevKit Parcelは素振り向きなDevKit Parcelは素振り向きなDevKit Parcelは素振り向きなDevKit Parcelは素振り向きなDevKit 27 / 29

まとめ まとめ まとめ まとめ まとめ まとめ 28 / 29

Parcelまとめ Parcelまとめ Parcelまとめ Parcelまとめ Parcelまとめ Parcelまとめ ParcelはZero-Con grationなバンドルツールである ParcelはZero-Con grationなバンドルツールである ParcelはZero-Con grationなバンドルツールである ParcelはZero-Con grationなバンドルツールである ParcelはZero-Con grationなバンドルツールである ParcelはZero-Con grationなバンドルツールである yarn add -D parcel-bundler yarn add -D parcel-bundler yarn add -D parcel-bundler yarn add -D parcel-bundler yarn add -D parcel-bundler yarn add -D parcel-bundleryarn parcel yarn parcel yarn parcel yarn parcel yarn parcel yarn parcel ではじめられる ではじめられる ではじめられる ではじめられる ではじめられる ではじめられる デフォルトで様々なSyntaxに対応しており、プラグインでも拡張 デフォルトで様々なSyntaxに対応しており、プラグインでも拡張 デフォルトで様々なSyntaxに対応しており、プラグインでも拡張 デフォルトで様々なSyntaxに対応しており、プラグインでも拡張 デフォルトで様々なSyntaxに対応しており、プラグインでも拡張 デフォルトで様々なSyntaxに対応しており、プラグインでも拡張 できる できる できる できる できる できる Zero-Con grationでミニマルに作られているので、Productionと Zero-Con grationでミニマルに作られているので、Productionと Zero-Con grationでミニマルに作られているので、Productionと Zero-Con grationでミニマルに作られているので、Productionと Zero-Con grationでミニマルに作られているので、Productionと Zero-Con grationでミニマルに作られているので、Productionと して使っていくには柔軟さや機能面で不安が残る して使っていくには柔軟さや機能面で不安が残る して使っていくには柔軟さや機能面で不安が残る して使っていくには柔軟さや機能面で不安が残る して使っていくには柔軟さや機能面で不安が残る して使っていくには柔軟さや機能面で不安が残る SandboxにParcel, Hobby Useにpoi, Production Useにraw webp SandboxにParcel, Hobby Useにpoi, Production Useにraw webp SandboxにParcel, Hobby Useにpoi, Production Useにraw webp SandboxにParcel, Hobby Useにpoi, Production Useにraw webp SandboxにParcel, Hobby Useにpoi, Production Useにraw webp SandboxにParcel, Hobby Useにpoi, Production Useにraw webp ackという形で適切に使い分けることが大切 ackという形で適切に使い分けることが大切 ackという形で適切に使い分けることが大切 ackという形で適切に使い分けることが大切 ackという形で適切に使い分けることが大切 ackという形で適切に使い分けることが大切 非フロントエンドエンジニアへのTeach用にはオススメ！ 非フロントエンドエンジニアへのTeach用にはオススメ！ 非フロントエンドエンジニアへのTeach用にはオススメ！ 非フロントエンドエンジニアへのTeach用にはオススメ！ 非フロントエンドエンジニアへのTeach用にはオススメ！ 非フロントエンドエンジニアへのTeach用にはオススメ！                                     29 / 29