最初にまとめ
three.js に入門して、require とかもしたかったので、rollup に入門して、heroku にデプロイしました。
- rollup を使いつつ 小さな tree.js を heroku にデプロイするサンプル
- rollup で heroku にデプロイするサンプル（three.js 抜き）
three.js をはじめたい
毎月の社内 LT で毎回 three.js の発表をしてくれる人がいて、ぼくもやりたいなぁと思っていたところでアドベントカレンダの季節になりました。本屋さんにいって、「初めてのThree.js」を買ってページめくりつつ、three.min.js を落としてコピペするとできました。とても簡単だし立体的だし楽しいです。球を追加してみよう、立方体を追加してみよう、平面を追加してみよう。でも途中で思ったのです。ひとつのファイルが長い。**分割したいな。**できれば require とかしたいな。そして僕は、ファイルを分割して module.exports とか require とか書いてみました。そしてブラウザに怒られました。「require ないよ」
僕は初心者なのです。ES2015 も Commonjs も Node もどれも経緯もわからず生きているのです。**babel も webpack も browserify も gulp も名前しかしらないのです。**ジョインしたプロジェクトにはそれとなく入っていたりするけど、先人がいれてくたモノをつかっているだけで build とかについて真面目に考えたことがないのです。これは良い機会です。さっそく僕は「初めてのThree.js」を閉じて、パッケージ管理の歴史をしらべはじめました。調べると少しずつ状況が分かってきました。だけども全部を頭に叩き込むにはもちろんいたらず、なんとなく関係性がわかる程度です。「require したいからとりあえず browserify 使おう」と思いました。webpack というものがすごい勢いがあるというのはなんとなく雰囲気でわかっていました。そして完全に偏見ですが webpack ってなんか巨大そうだ、やめておこう、という気持ちもありました。そんな折、以下の記事を目にします。
先日、Facebookは膨大なプルリクエストをReactにマージして、既存のビルドシステムをRollupベースのシステムに移行しました。その結果、何人もの人々から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。
**はじめて rollup に出会いました。**そして思いました「やっぱり rollup にしてみよう」。しらべると少し rollup の記事はあって、それらも読んでみるととても "ちょうどいい感じ" に思えてきたのです。rollup は本家の README を見ながら動かしてみたのですが、これまでビルドとかトランスパイルとかをまったく勉強してこなかった僕にはとても良い勉強になりました。もちろんローカル開発のことを考えると、毎回 rollup コマンド叩くわけにはいかないので、config をつくってそこに watch とかの設定をかきました。サーバーも動かしたいので、そんな設定も書きました。そういえば、話は前後しますが Node.js の server も初めて書きました。ひとまず rollup -c --watch とすれば、サーバが立って、開発ができるようになりました。あとは heroku にデプロイするだけです。
heroku にデプロイするのに対応したことは２つです。package.json に heroku-postbuild を書くことと、heroku config で NPM_CONFIG_PRODUCTION を false にすることです。こちらの README なども参照いただければと思います。
three.js に入門したつもりが、パッケージ管理についてしらべたりデプロイについてしらべたりして、とても楽しかったです。詳しい内容は、冒頭のGitHub などをご覧頂ければ幸いです。なにかを初めてみることで、普段の仕事とはちがった角度からプログラミングを楽しむことができました。（いま抱えてる仕事が滞っています！）ありがとうございました。