メドピア開発者ブログスマートフォン用の表示で見るメドピア開発者ブログ集合知により医療を再発明しようと邁進しているヘルステックリーディングカンパニーのエンジニアブログです。Tumblrこんにちは。普段はRailsを触っていますが、時々フロントエンド周りの開発もしています。今回はメドピアの環境におけるWebpacker導入とフロントエンド周りの改善をテーマに記事を書きます。目次なぜWebpacker(Webpack)を導入するのか?フロントエンド改善計画Webpackerの導入で気をつけたことgithub.comなぜWebpacker(Webpack)を導入するのか?Webpackerを導入する背景として、主に2つの課題がありました。JavaScriptのビルド時間が長いパッケージのバージョン管理ができないJavaScriptのビルド時間が長い元々メドピアのフロントエンド開発においてBrowserifyというbundlerを使用していました。これにはビルド時間が長いという弱点があります。以下の2つの場面でその長さが目につきます。後者はBrowserifyと一緒に使っているbabel-plugin-transform-runtimeの実行に時間がかかり、JavaScriptの開発中は3秒ほどの時間がかかります。依存パッケージのバージョン管理ができないメドピアの環境のnpmのバージョンが3系であるため、パッケージのバージョンを固定するpackage-lock.json(npm5系から登場)がありません。そのため、RailsのGemfile.lockのように依存パッケージのバージョンが管理できないという問題があります。これら2つの課題はWebpackerを導入することで一気に解決されます。ビルド時間の短縮BrowserifyよりWebpackの方がビルドが早くなることのベンチマークは、以下の記事を参考にさせていただきました。perkframework.comBrowserifyとの比較がとてもわかりやすく掲載されています。build)がBrowserifyが速度的に上回っていますが、そのようなビルドをするのは初回の環境構築時くらいなのでほとんど気にする必要はないでしょう。Gemfile.lockのようにyarn.lockで依存パッケージのバージョン管理ができるようになります。他にもJavaScript以外のアセットファイルのビルドができたりエコシステムが充実しているという点はBrowserifyからWebpackへの乗り換えで大きな利点でもあります。このような背景からメドピアではWebpackerを導入することとなりました。フロントエンド改善計画しかし、いきなり全てのビルドをBrowserifyからWebpackerに置き換えるということはできません。今まで書いてきたJavaScriptのコード量が多いため、それをWebpacker用の領域(app/javascripts)に移し替えるのにテストを含め時間がかかるからです。移行するなら、同時にフロントエンドをもっと改善していくチャンスでもあります。Modulesに置き換えるVue.jsでデータバインディングのみでしか使用していなかったところを、単一ファイルコンポーネントも活用する単一ファイルコンポーネントのLintを導入する最新版パッケージへ継続的なUpdate体制の確立などがあります。ここで、それぞれの改善点の詳細なポイントについてみていきましょう。Modules(以下esm)に置き換えるメリットとしては個人的には大きく以下2つだと思います。実行前にモジュール読み込みのエラーを検知できるツールを使うことでコードの最適化ができるようになる実行前にモジュール読み込みのエラーを検知できるesmはCommonJSと違い静的構文であるため、コードの実行前に構文解析が走ります。これにより、開発者はより早い段階で間違いに気づくことができます。Errorが発生ツールを使うことでコードの最適化ができるようになるesmを使うことで、コードの最適化ができるようになります。Shakingという機能があります。ESモジュール形式で書かれたコードをbundleして一つのファイルにする時に、exportしているけどどこからもimportされていない、使われていないコードを削除する機能のことです。https://webpack.js.org/guides/tree-shaking/Edgeでもexport/import時にコードの最適化がされるようです。BlogまたCommonJSはいわゆるサードパーティなのに対し、esmはECMAScriptで定義されるJavaScriptの標準であるということも置き換えの理由です。単一ファイルコンポーネントの活用メドピアではJavaScriptのフレームワークとしてVue.jsを使用しています。Vue.jsの機能として、Vue.jsを適用させるテンプレート(HTML)とJavaScriptを同じファイル内に記述する単一ファイルコンポーネントというものがあります。単一ファイルコンポーネントを使用するメリットはいくつかありますが、最も大きな理由は可読性の向上です。可読性の向上については3つのポイントがあります。シンタックスハイライト同一ファイル内にテンプレートとテンプレートに適用するJavaScriptを書くことができるテンプレート内でES6が使用できるシンタックスハイライト単一ファイルコンポーネントを使用しない場合、HTMLファイル内にVue.jsのコードを書く必要があります。メドピアではViewテンプレートにHamlを採用しているため、Hamlファイル内にVue.jsのコードを書いています。Hamlファイル内にVue.jsのコードを書いてもシンタックスハイライトがHamlのコードにしか適用されないため非常に見辛いです。[単一ファイルコンポーネントのテンプレート][Haml内に書いたテンプレート]上のように、単一ファイルコンポーネント内のテンプレートは見やすくハイライトされ(※お使いのエディタでハイライトのプラグインを入れる必要があります)、一方Haml内に書いたテンプレートはHamlのシンタックスしかハイライトされないため見づらくなってしまいます。同一ファイル内にテンプレートとテンプレートに適用するJavaScriptを書くことができる単一ファイルコンポーネントの最大の特徴です。JavaScript(CSSも)が記述できるのでどのJavaScriptがどのHTMLに適用されているかを容易に知ることができます。テンプレート内でES6が使用できるHamlファイル内ではES6のJavaScriptのコードがトランスパイルされないので古いブラウザのサポートをする必要がある時は使用することができません。ES6を使いたい場面(特にv-bind時の文字列テンプレートの使用)で使えないことにより、可読性が落ちる場合があります。以下はinputタグに動的なclassをつける時の例になります。[単一ファイルコンポーネントのテンプレート][Haml内に書いたテンプレート]単一ファイルコンポーネントのLintを導入する単一ファイルコンポーネントはHTMLやJavaScriptのLinterが使用できないため、新たに専用のLinterが必要です。これの導入により、コードの質の担保・コーディングルールの統一を実現します。最新版パッケージへ継続的なUpdate体制の確立パッケージは定期的にアップデートしないと差分が大きくなり、いざアップデートしようとすると大怪我をする恐れがあります。幸いにメドピアではRubyのGemを定期的にアップデートする体制ができているため、それと合わせてパッケージをアップデートしていく体制にしていきたいです。Webpacker導入を機に、よりJavaScriptの開発をモダンにしていきたい野望があります。そこで、その野望を実現するために移行計画を立てました。upgrade体制の確立Webpackerの導入で気をつけたこと最後にメドピアにおけるWebpackerの導入で気をつけた部分を共有します。Docker用の設定メドピアでは開発環境にDockerを利用しています。デフォルトのWebpackerの設定ではhostがlocalhostに設定されているため、ホストOSのブラウザからDocker上の開発環境にアクセスできないため以下のような設定が必要です。aliasの設定はconfig/webpack/shared.jsに記述すればよかったのですが、3系からshared.jsが廃止され、この辺りの設定がnode_modules以下の@rails/webpackerに格納されています。alias等の設定を直接node_modules以下に追記することはできません。そのため、今回はwebpack-mergeを使ってconfig/webpack/environment.jsにそれらの設定しました。loaderなどの設定もここに追加していけばwebpackの設定がうまいことできそうです。終わりにまだまだモダンな環境への移行は道半ばですが、今後も変化の激しいフロントエンドの技術に追従できるように環境の改善及び技術力の向上に努めていきたいと考えています。その一貫として、メドピアでは毎週火曜日の19:30〜Vue.jsのもくもく会を開催しています。՞)☝︎メドピアでは一緒に働く仲間を募集しています。SREの侘美(たくみ)です。chromeを利用したファイルダウンロードのテスト方法についてこんにちは。月別アーカイブリンク医師専用サイト「MedPeer」エンジニア採用はこちら!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。