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

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

react-icon

Reactで動画編集機能を作り込める「remotion」を試してみた

1 はじめに2 Remotionとは3 Remotionを使ってみる3.1 導入3.2 動画のレイアウト作成3.3 Playerでの動画プレビュー3.4 テキスト編集機能を付け加える4 おまけ : C ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

フォロー

blog-page_side_responsive

2018年5月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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