Onishiこんばんは。最近までコートを羽織っていたと思えば、もう随分暖かくなりましたね。数日前から趣味で新しいウェブアプリを書いていて、折角なので勉強がてら新たにPHPフレームワークのLaravelを採用することにしました。噂には聞いていましたが確かに素晴らしい出来で、今後PHPのプロジェクトでは第一候補としたくなるようなものでした。デフォルトでSassやLessのコンパイル、JSのcombine&minifyとかできるすごいやつ。TypeScriptはサポートしてくれないので、自力でがんばる必要があります。Onishi前回まででTypeScriptを使ってフロントエンドJavaScriptをビルドする話を書きましたが、TypeScrptに慣れてしまうとES2015で書く気にはなれません。当然のようにサーバーサイドもTypeScriptでコードを書き始めたのですが、ビルドにフロントエンドでも使っていたWebPackを採用して少しハマったので共有します。グローバルインストール済み。ts-loader@0.8.1WebPackでTypeScriptをビルドするためのローダーをローカルインストールしています。使いましょう、という話。捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。大きく次の問題がありました。コマンドを打たなくてはいけない特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。Browsersyncとは何かBrowsersyncはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。Reloadの機能を提供してくれるnpmモジュールは他にもありますが、Browsersyncの特徴の一つはそれらに依存せず、単体で動作する点が挙げられるでしょう。gulpであればgulp-webserver、前回のwebpackであればDev-Serverなどがありますが、これらと違い完全に独立したモジュールとなっています。大きな特徴として、複数環境でのデバッグ容易性向上に関する機能が多く含まれているという点です。FireFoxとChromeで同じページを開いておきながら、片方のブラウザでページ内をクリックしたとき、もう片方のブラウザでも同じ箇所へのクリックイベントを実行することが可能です。スクロールも同期することが可能なので、複数のブラウザを開いていても常に同じ箇所を表示していることになり、同時デバッグやブラウザ間の表示比較などがとても容易に実現できるはずです。(今回はこの機能については触れていません。