FrontEnd

Vue on Rails で作ったアプリを振り返ってみる

投稿日:2018年5月21日 更新日:

はじめに

個人的にRailsで作成していたWebアプリケーションのフロントエンド部分をVue.jsに切り出しました。
今回は私の使い方を振り返りつつ、記事にしたいと思います。
ドキュメントや他サイト様の記事を参考に、我流が入っている部分もあるので、ベストとは言えないかと思いますが、何かしらの気づきになれば良いな、と思います。

以前書いた、Vue.jsとRailsでTODOアプリのチュートリアルがベースにはなっています。

全体的なこと

ディレクトリ構成

RailsのWebpackerでVue.jsをインストールすると、 javascript ディレクトリができるので、その下をVue.js専用としています。

エントリーポイントは main.js になっており、Railsのビューでは javascript_pack_tag から呼んでいます。

各ディレクトリの私的な決めは後ほど記載したいと思います。

CSSフレームワーク

普通に使うならば、CSSや画像などのディレクトリもあった方が良いと思います。
ただ、今回はVuetifyを使用したため、自分で書くCSSはコンポーネント内で scope させたスタイルを当てました。

Vuetify自体の使用感としては、Vue.jsのメソッドなどを使用しながらマテリアルデザインっぽいスタイルで簡単に作れました。

ただ、Vuetifyのカスタムタグやプロパティを使うので、少し変えたいな、と思ったとき苦労します。

Capistranoでのデプロイ

Capistranoを使用すれば、特別な記述なくVue.jsを適用できます。
ただ、 asset:precompile の時間が長くなり、貧弱なサーバーだとメモリ不足になります。
(AWSのt2.microでは度々起こりました。)

一旦、Swap領域を設けて対応しました。
1分でできる!AmazonEC2のmicroインスタンスでswap領域を作る

axiosのラッパー

utils ディレクトリは汎用的なメソッドなんかを入れておこうと思っていますが、現状はHTTPクライアントaxiosのラッパーしか入っていません。。

こちらの記事を参考に作成させていただきました。
vue.js vuex入門 開発で最低限必要そうなこと
Vue.jsとRailsの最適な融合を考える

  • パラメーターのセット
  • カスタムヘッダーのセット
  • Authorizationヘッダーのセット
  • X-CSRF-TOKENヘッダーのセット

下記のような感じで使います。

Vuex

状態管理としてVuexを使用しました。
まだVuexは記事にしたことがなかったので、今後記事にしたいと思います。

コンポーネントを使用していて分かりにくいのは、コンポーネント間のプロパティの受け渡しです。

コンポーネント間で共有されるようなプロパティは、Vuexで管理した方が良さそうな感じです。
(書いていて思ったのは、アラートの表示フラグも状態管理していますが、別にこれはコンポーネントでも良かったな、と思っています。)

Vuexは名前空間を切れるので、分類ごとにファイルを分けています。

ログインの状態管理

簡略化しましたが、ログイントークンなんかをローカルストレージに保存しているとすると、下記のような感じで実装しました。

文法の詳細は割愛しますが、 login ミューテーションが呼ばれると、ローカルストレージにトークンを保存し、 loggedIn ステートを変更します。
logout の場合は逆です。

コンポーネントからは、下記のようにして参照します。

mapState でステートを、 mapActions でアクションをインスタンスに取り込みます。

ただ、Vuexはブラウザリロードすると状態がリセットされてしまうので、次のRouterで逐一チェックするようにしました。

Router

SPAなので、基本的にはvue-routerでルーティングします。
ログイン判定もVue.jsのナビゲーションガードを使用することで、各ページに遷移する前の処理を書けるので、そこで実施しています。

上述した、Vuexのリセット問題もナビゲーションガードの beforeEach で実施するようにしました。
簡単なサンプルです。

さいごに

実際に使ってみると、Vue.jsでできることが多いことが分かりました。
ただ、RailsもVue.jsもお互いにできることが多いので、明確に役割分担をしないと混乱するな、と感じています。

いずれはクライアントを完全にVue.jsで斬り離そうと考えているので、その時にまた報告したいと思います。

おすすめ書籍

基礎から学ぶ Vue.jsVue.js入門 基礎から実践アプリケーション開発までNuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

js

JavaScriptのみでPOSTした場合のCSRFトークンの認証に関するTIPS

1 はじめに2 実装2.1 なぜエラーが発生したか2.2 修正後のコード3 さいごに はじめに RailsアプリケーションでPOSTリクエストを送る場合、多くの場合はform_withなどのヘルパーを ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年5月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。
Get it on App Store
Get it on Google Play