メドピア開発者ブログスマートフォン用の表示で見るメドピア開発者ブログ集合知により医療を再発明しようと邁進しているヘルステックリーディングカンパニーのエンジニアブログです。Tumblrメドピアマッスル部のフロントエンドエンジニア村上(@pipopotamasu)です。最近筋トレに時間を割かれ、家でコードが書く時間が減ってしまったのが悩みの種です。今日は最近作ったメドピア用Railsフロントエンドのボイラープレート、「medpacker」を紹介しようと思います。github.commedpacker作成の背景Railsには公式で大きく分けて2つのフロントエンドの環境があります、アセットパイプラインとwebpackerです。これらはメドピアの既存プロダクトでも使ってきたのですが、プロダクトの規模が大きくなったり、時間が経つにつれて色々な辛みが見えるようになってきました。v3依存)これらの辛みのため新規でRailsプロジェクトを作成する時、今まで通りアセットパイプラインやwebpackerで構築してしまっていいのかという疑問が生じてきました。フロントエンド開発をメインで行うのがサーバーサイドエンジニアや外部のフロントエンドエンジニアさんということもあり、プロジェクト間で採用技術や質を標準化するために、またフロントエンドの環境構築の時間短縮のためRailsフロントエンド用のボイラープレートを用意しそれを横展開するのがよいのではないか?ということで、これらの辛みを克服するためにメドピア用Railsフロントエンド用のボイラープレート「medpacker」を作成しました。medpackerのコンセプトmedpackerのコンセプトは大きく2つです。素早く、簡単に導入できるwebpackerのような導入の簡単さを目指し、Railsのアプリケーションテンプレートを使用して設定できるようにしています。newをしてから2~3分でフロントエンド環境を構築することができます。だいたい開発や本番環境で必要なものが初期から設定されているアプリケーションテンプレートで導入した直後から、webpack・babel・lint・postcss・minify等がすでにセットアップされているため、すぐに開発に着手できるようになっています。実際にmedpackerを導入してみるそれでは実際にmedpackerを導入してみましょう。LOCATION=path/to/medpacker/template.rbこの際いくつかCLIに質問されるので、用途に応じて答えてください。page?にyesで答えないとこのページは表示されません)。medpacker_homemedpackerの中身について作成に至った背景、コンセプトなどはすでに説明した通りです。ここではmedpackerの中身についてみていきます。webpackmedpackerの核ともいうべきbundlerです。フロントエンドのアセットをビルドするために入れてます。Rails側でビルドしたアセットをHTMLに読み込むためのヘルパーを用意してあり、それを使うことで読み込むことができます。JSがminifyされるようになっています。webpack-dev-serverwebpackでの開発をサポートするツールです。以下のような機能があります。PostCSS導入時点で、SCSSとPostCSSの設定がされています。(※メドピアでは全てのRailsプロジェクトでSCSSを使用しているので、決め打ちで入れてあります)またPostCSSで初期導入されているプラグインは以下2つです。autoprefixer・・・自動的にベンダープレフィックスをつけてくれるライブラリpostcss-flexbugs-fixes・・・ブラウザが潜在的に持っているflexboxのバグを踏まないように、自動整形してくれるライブラリbabelJSを色々なブラウザで読み込めるように(例えば最新の記法が古いブラウザでも読み込めるように)変形/代替してくれるライブラリになります。導入時点で設定済みなので、IE11とか気にせずにJSを書いても問題ありません。基本的にメドピアの推奨環境に合わせてありますが、この辺をいじれば対応ブラウザを変えることができます。lint系SCSSのlint(stylelint)とJSのlint(eslint)の2つが設定済みです。導入側のプロジェクトのCIに組み込んでおいてください。Vue.jsmedpackerに入れるか迷ったのですが、導入時にVue.jsが初期設定してあります。個人的にJSライブラリを入れるのは本当に必要になった時に初めて入れればいいと思っているのですが、プロジェクト間での採用技術を統一するために入れてあります(以前とあるプロダクトで外部のエンジニアさんにお手伝いしていただいてた時、社内のほとんどのプロジェクトでVue.jsを使っているにも関わらず、しれっとReactが入っていたことがあったので...)。工夫したところライブラリアップデート月1回のペースで、自動的にgemとnpmのアップデートPRがCIで作られるようになっています。作成後は私がPR内容の確認・マージをしています(この辺は手動です)。「medpackerを適用しようとしたがバージョンが古い...」というメンテされずに放置されるという事態は避けるようにしています。アプリケーションテンプレートの使用より楽にプロジェクトにmedpackerを適用するためにRailsのアプリケーションテンプレートを使用しました。最初はこの便利機能の存在を知らずに、こちらの方法をメインの適用方法にと考えていました。今考えるととてつもなく使いづらいですね。終わりに現在メドピアでは3つのプロダクトでmedpackerを使用しています。使っているうちに出てくる改善点や追加機能などは日々更新していく予定です。このブログを見た人で「うちではこんなの使ってるよー」とか知見がある人はこっそり教えていただけたらありがたいです。medpackerに取り入れるかもしれません。このmedpackerを作る上でpixivさん、スタディストさんのブログを参考にさせていただきました。本当にありがとうございました。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。SREの侘美(たくみ)です。普段はRai...2019-07-04開発合宿に行ってきました!@松本メドピアのサーバーサイドサウナーの川井田です。エンジニアの宮原です。201...2019-03-26Rails初学者からみたRailsdm2019の景色こんにちは、メドピアフットサル部の櫻井です。月別アーカイブリンク医師専用サイト「MedPeer」エンジニア採用はこちら!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。