Gotanda.js #4

1. 大規模プロダクト
Webpack
やっていく気持ち
@_tohashi

2. about me
• Takumi Ohashi
• twitter: @_tohashi
• GitHub: @tohashi
• freeeという会社でエンジニア

3. 会計freee
• クラウド会計ソフト
• 2013/03/19 リリース
• 日々機能追加や改善を続けています

4. 昨年中頃まで
コーヒーバック
ボーンスプロケ
ッツ

5. 最近
バベルリアクト
ガルプウェブパ
ック

6. フロントのモダン化進行中
• CoffeeScript, Backbone.js, Sprockets ->
Babel(ES2015), React.js, gulp.js, Webpack
• 新規開発やリファクタ部分をメインに段階的
に移行中
• 似たような話は最近ちらほら

7. ビルドはgulp.js & Webpackで
• scss, images, template
-> gulp.js で build & watch
• JavaScript(ES2015), CoffeeScript
-> Webpack でbuild & watch
• npm scriptでまとめて実行

8. ある日の開発風景

9. 今日もjs書くぞ〜〜〜

13. …

14. 暇になって遊び始める

15. コミットして一旦ブランチ変え
るぞ〜〜〜

17. 突然の死

18. 最初に戻る

20. 監視対象が多い
• JavaScript: 800
• CoffeeScript: 600
• Sass: 200
• gulp.js のperformance issueはv4で解決すると
いう話もあるが…

21. jsのエントリーポイントが多い
• SPAではない
• 元々application.js一つだけだったのをルーテ
ィングごとに依存解決して分割していった
• 結果、現在のjsエントリーポイント数: 80

22. Webpackのモジュール解決
• 最初に依存関係にあるモジュールを全部ビル
ドしてキャッシュ
• 以降、変更のあったモジュールのみビルドし
直す（インクリメンタルビルド）
• 当然ファイル数に応じて時間がかかる

23. ファイル変更検知と
最初に全モジュールの
ビルドをやめる

24. webpack-dev-server
• Webpackの成果物配信用のローカルサーバー
を起動（中身はexpress）
• Hot Module Replacementでページをリロード
せずに部分的に更新
• 最初に全部ビルドするのは変わらず

25. lazy mode
• 変更を監視せずに、ローカルサーバーに対し
てリクエストがあったタイミングでビルド
• Hot Module Replacementとの併用はできない
• assetsの参照先をlazy modeで起動した
webpack-dev-serverに変更

26. DEMO

27. やや改善したが…
• 立ち上がりの遅さ & メモリ使用量は改善
• 結局初回リクエスト時に各モジュールをビルドし
直すのはそれなりに時間がかかる
• 前回起動時のキャッシュをimportして再利用でき
れば早いのでは
• プラグインないので作るよ！

28. DEMO
進捗ダメです

29. 展望
• キャッシュの件はうまくいったら公開します
• gulp.jsとWebpackの併用は正直しんどい
• CSSなどもWebpackに寄せていきたい
• CSS in JSにするかはさておき…

30. フロントエンド環境
• 日々いろんな事例は聞くけど微妙にコンテキストやアー
キテクチャが違う
• Webサイト or Webアプリ, SPA or ページ遷移, サーバ
ーサイドの環境、etc…
• 確立されたものはないのでアプリやチームの変化に対応
していく必要がある
• フロントエンド環境職人が求められる

31. やっていく気持ちをもって
やっていきましょう

32. 求人情報
• gulpfileとかwebpack.config書くのが趣味の人
• 「ES6で書く」と聞くと「ES6なんて名前の言
語は存在しない（後略」と言わずにはいられ
ない人
• jQueryUIに親を殺された人

33. ありがとうございました