メドピア開発者ブログスマートフォン用の表示で見るメドピア開発者ブログ集合知により医療を再発明しようと邁進しているヘルステックリーディングカンパニーのエンジニアブログです。Tumblrもう新年を迎えて2ヶ月が経ちますね。本日はその懺悔も込めてVue.jsとRailsの話をお送りします。以前ブログで書いた通り、現在Webpackerへの移行を機にフロントエンド周りの改善を進めています。その中でVue.jsとRailsをいい感じに組み合わせるにはどうしたら良いかについて悩むことがあったので、本記事にて共有させていただきます。悩んだ内容としては以下になります。今回の記事ではサンプルコードを多く載せています。主なもののバージョンは以下になります。2.0.0-rc.41.Ajax通信時にCSRFトークンをどう設定すればいいか?RailsではAjax通信時、破壊的なHTTPメソッド(POSTとかDELETEとか)を送る場合はCSRFトークンの検証が必要となります。jquery-railsのGemで上記のようなAjax通信を行う場合は、Gemの方でCSRFトークンをリクエストヘッダーに自動的に含めてくれるのですが、jQuery以外だとそうはいきません。自身でCSRFトークンをリクエストヘッダーに含める必要があります。私自身どうしたらいい感じに実装できるか悩んだため、ここで悩んだ末にたどり着いた実装をご紹介します。今回のケースではHTTPクライアントとしてaxiosを使用します。リクエストヘッダーにCSRFトークンを仕込んでみる通常、Railsが提供しているフォームヘルパーを利用せずにAjax通信を行う場合は明示的にCSRFトークンを設定する必要があります。設定しない場合まずはAjaxを送る部分のソースを見てみます。上記のようにCSRFトークンを設定しない状態だと...このようなエラーが起こるので、ちゃんと通るようにしてみましょう。今度はCSRFトークンを設定する場合です。上記の10行目でCSRFトークンの取得、11行目でリクエストヘッダーにトークンを設定しています。今回は上手く処理されました。この方法はViewのDOM内のCSRFトークンを直接取得し、axiosに設定する方法です。実はこれと同じ方法を提供してくれるパッケージがあります。次はそのパッケージ、「rails-ujs」を用いた方法を見てみましょう。rails-ujsを使ってみるまずはrails-ujsをインストールします。rails-ujs次にrails-ujsからcsrfTokenを取得するメソッドをimportし、CSRFトークンを設定してみましょう。これで先ほどの例のように破壊的なリクエストを送ることができるようになります。Vue.jsのPluginにしてみるここまででCSRFトークンを設定するところまでみてきました。上記の例だと、1つのエントリーファイルに1つのコンポーネントしかありませんでしたが、実際には複数のコンポーネントを使用することが多いと思います。その場合、上記の例だとaxiosで破壊的なHTTPメソッドを使用する全てのコンポーネントに...axiosをimportrails-ujsをimportリクエストヘッダーにCSRFトークンを設定しなければなりません。そこで、Vue.jsのプラグインを作成し上記の処理を一纏めにしてしまいましょう。Vue.jsのPluginを実装します。Pluginを実装することにより、Vueオブジェクトからaxiosを呼び出せるようにしてみましょう。app/javascript/plugins/vue-axios.js次はエントリーファイルにて上記で作成したPluginをVueに組み込みます。app/javascript/packs/chapter1/index.js最後にコンポーネントでVue経由でaxiosを呼び出してみましょう。app/javascript/components/chapter1/App.vueこれで各々のコンポーネントで設定しなくていいようになりました。以上のようにCSRFトークンの設定からコンポーネント内でのaxiosの呼び出しについて、メドピア内でどうしているかをみていきました。皆さんはVue.jsとRailsを組み合わせる時、どのようにしているでしょうか?2.単一ファイルコンポーネントで書くHTMLをもっと効率よく書けないか?RailsのViewは独自のテンプレートエンジンを用いることで、効率的にHTMLコーディングをすることが可能になります。ほとんどの人はHamlやSlimといったテンプレートエンジンを使って効率化しているのではないでしょうか?Vue.jsの単一ファイルコンポーネントのデフォルトのテンプレートは通常のHTMLです。RailsはHamlやSlimを使用しているのに、単一ファイルコンポーネントはHTMLって非効率です。JSのテンプレートエンジンといえば、Vue.jsに組み込まれているMustachやEJSが有名ですが、今回の目的はHTMLの効率的なコーディングです。HTMLの省略記法に対応しているのはそれほど多くなく、調べてみた結果「Pug」の一強のようです(もし他に有名なやつがあればこっそり教えてください)。そこで、メドピアではPugを採用することにしました。PugとはHamlに影響を受けたテンプレートエンジンです。Jadeという名前でしたが、すでにJadeが商標登録?されていたためPugにしたらしいです。・JSの実行という特徴があります。それでは次にPugを使って単一ファイルコンポーネントを書くとどのようになるのかを見ていきましょう。Pugを使用しない場合と言いつつも、Pugを使用した場合と使用しない場合のbefore/afterが見れた方が良いので、まずはpugを使用しない場合の単一ファイルコンポーネントを見てみます。今回の例ではみんな大好きTodoリストです。次はPugを使用する例を見ていきます。Pugを使用する場合まずはPugのパッケージと、WebpackでPugをコンパイルするためのpug-loaderをインストールします。pug-loader後は単一ファイルコンポーネントのtemplateタグにlang="pug"とpugの設定をするだけです。Webpackerの場合はコンフィグファイルに設定を追記する必要はありません。なるかというと...app/javascript/components/chapter2/PugTodoApp.vueこのようにかなりスッキリさせることができました。みなさんも是非pugを使って見てください!3.単一ファイルコンポーネントとフォームヘルパーの兼ね合いVue.jsの単一ファイルコンポーネントはとても便利です。以前技術ブログでも書きましたが、単一ファイルコンポーネントは以下のようにとても便利です。テンプレート内でES6以降のものが使用できるしかし残念なことに、単一ファイルコンポーネントではRailsのフォームヘルパーを使うことができません。いって本来フォームヘルパーで生成されるはずのHTMLを単一ファイルコンポーネント内のテンプレートに直書きするのも効率が悪いです。比較そこで、単一ファイルコンポーネントでテンプレートを書くかRailsのViewでテンプレートを書くか比較してみることにしました。今度はユーザーの新規作成画面を例にしてみます。単一ファイルコンポーネント内にテンプレートを書く場合app/javascript/components/chapter3/UserRegisterForm.vue全体としてこのような感じになりました。このテンプレートを作ってみて面倒だったのはformタグとhidden要素です。フォームヘルパーならform_forやform_withで一行で作成できる部分をわざわざ手打ちしてHTMLを書かなければなりません。hiddenのinputタグのauthenticity_tokenのvalueですが、フォームヘルパーなら自動的にCSRFトークンが設定されるところ、わざわざ自身で設定しなければなりません。結果、テンプレートを作成するのにそこそこ手間がかかってしまいました。今度はフォームヘルパーを活用する場合です。全体としてはこんな感じになります。app/views/chapter3/new.html.erb先ほどのformタグとhiddenの件はフォームヘルパーのおかげでかなり楽になりました。他にもtext_fieldやlabelなどのヘルパーのおかげで、全体的にコード量が減っているのが見て取れます。デメリットもあります。Vue.js部分がシンタックスハイライトが効かないため若干見にくいpolyfillが効かないテンプレートとコードが離れるデメリットこそありますが、メドピア内ではフォームヘルパーを使う時は基本的に単一ファイルコンポーネントを使わず、RailsのViewにテンプレートを書く方法にしています。まとめ今回の記事ではメドピア内でRailsとVue.jsを組み合わせる時に悩んだ3つのことと、その対応策を書いてみました。使用したサンプルコードは以下のリポジトリに置いてあります。medpeer-inc/medpeer-dev-blog2正直これがベストなソリューションであるという確信はありません。「もっといい方法があるよ」というアイデアがある方は是非メドピアに遊びに来てそれをご教授ください。「俺がもっといけてるコードにしてやるぜ!」という方は一緒に働きましょう!またメドピアでは毎週火曜日にVue.jsのもくもく会を実施しています。՞)☝︎是非読者になってくださいメドピアでは一緒に働く仲間を募集しています。SREの侘美(たくみ)です。chromeを利用したファイルダウンロードのテスト方法についてこんにちは。chromeへ移行する時に気をつけることこんにちは。月別アーカイブリンク医師専用サイト「MedPeer」エンジニア採用はこちら!スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。