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 ベースのフレームワークによるシングルページアプリケーション開発

page_footer_300rect




page_footer_300rect




-FrontEnd
-,

執筆者:


comment

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

CAPTCHA


関連記事

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

react-icon

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

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

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

フォロー

follow us in feedly

page_side_300rect

2018年5月
« 4月 6月 »
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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