FrontEnd

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

投稿日:2017年9月11日 更新日:

はじめに

前回作成した、TODOアプリを修正したいと思います。
完成図は下図のようなかたちになります。

サーバーサイドをRailsで作成しつつ、ビューは1ファイルのみ、そこを差し替えていってSPAっぽくしたいと思います。

せっかくなので、コンポーネントvue-routerなどを使ってみたいと思います。

なお、環境はDockerでRails + Vue.jsの環境を作ってみるを使用するので、割愛します。

vue-routerのインストール

vue-routerを使用することで、URLから画面の一部を差し替えることができます。

まずはインストールする必要があります。

yarnを使用している場合は、下記です。

サーバーサイドの改修

APIに詳細(show)を追加

前回は、一覧、作成、更新のAPIしか用意していなかったので、showを追加します。

元となるビューファイルを作成

一番はじめにレンダリングされるビューファイルを作成します。
このファイル上で、コンポーネントを差し替えていきます。

<router-view></router-view>の部分が差し替わっていきます。
ハンドリングはVue.js側でやるので、これだけです。

コントローラーも修正しておきます。

ルーティングの修正

サーバーサイドのルーティングを定義しておきます。

Railsの場合、ルーティングにマッチしていなかった場合、エラーになってしまいます。
そのため、Vue.jsでルーティングするとしても登録しておいた方が良いようです。
Has anyone look at using vue router with rails router?

Vue.jsで詳細画面と一覧を差し替えようとおもいますが、両方とも同じコントローラーのメソッドなので、紐付けておきます。

Vue.jsの実装

大元のVue.jsのファイルを作成する

Vue.jsはapp/javascript/packs以下に記載していきます。

コンポーネントの作成

コンポーネント

コンポーネントを利用することで、再利用可能な部分を切り出したり、ファイルの肥大化を抑えることができます。
また、単一ファイルコンポーネントというものを使用することで、HTML、CSS、JSをひとまとめでコンポーネント管理できます。

コンポーネントはcomponetsディレクトリを作成してそこで管理します。
また、単一コンポーネントを使用する場合は、拡張子が.vueになります。

一覧のコンポーネント

まずは「Index」のコンポーネントですが、こちらは前回のものを流用します。

<router-link :to="path">aタグを生成してくれます。
このリンクがよしなにvue-routerからマッチしたコンポーネントを呼び出してくれます。

export defaultを使用することで、Vue.js(vue-loader)がコンポーネントのJSと解釈してくれます。
Vue Component の仕様

また、<style>タグですが、scopedを使用することで、そのファイル内のスタイルを定義できます。
イレギュラーなクラスなどはここで定義してしまえばよさそうです。

v-cloakというディレクティブを使用しました。
例えば、APIの返り値を使用してレンダリングする場合、API処理が終わるまでは、{{ task.name }}がそのまま文字列としてレンダリングされてしまいます。
(インスタンスに値がセットされたら、その値が表示されます。)
<table v-cloak>とし、CSSにて、

としておくことで、Vueインスタンスが作成されるまで非表示にしておけます。

詳細のコンポーネント

一覧のときと同じように、APIにてそのIDの値を取得してレンダリングします。

先ほども使用しましたが、ライフサイクルフックのmountedのタイミングで実施しています。
今回の場合であれば、createdでもあまり変わらないような感じです。
このあたりはもっと理解する必要があります。。。
ライフサイクルダイアグラム

ルーティングファイルの作成

コンポーネントの準備はできたので、このコンポーネントとメインのtodo.jsを結びつける、ルーティングのファイルを作成します。

ルーティングも専用のディレクトリを作成してそこで管理しようと思います。

基本的にはroutes以下で、パスとコンポーネントを結びつけます。

また、mode: 'history'とすることで、HTMLのhistory APIを使用して、一見同じビュー内ですがURLを書き換えることができます。
HTML5 History モード

さて、これをメインのtodo.jsに追記します。

これで、はじめの画像のようになるかと思います。

個人的に詰まったこと

コンポーネントのmethods内で、thisにアクセスできなくなりました。
色々調べたところ、バージョンに基づいた書き方をしないと、thisを認識しなくなるようです。
‘This’ object inside vue instance methods is undefined

私の場合は、APIの返りの部分を下記のように書いており、

これを下記のように書き換えたところ、うまくthisにアクセスできました。

ここはいまいちよく分かりませんね。。。

9/12 追記

migi様よりコメントをいただきました。
上記の件は、アロー関数を使用することで、thisを束縛せずに渡せることが原因とのことです。
ここですね。

今まで通りfunction(response) {で書こうとするならば、

あらかじめ変数宣言しておく必要があるそうです。

アロー関数

さいごに

今回のソースコードはこちらになります。
https://github.com/naoki85/rails-vue-practice/tree/add_components_and_router_to_todo_app

コンポーネントは、今までCSSの方でモジュール管理してたものを移せそうです。

age_footer_300rect




age_footer_300rect




-FrontEnd
-,

執筆者:


  1. migi より:

    「個人的に詰まったこと」に書いてある現象の原因は「アロー関数はthisを束縛しない」ことにあります。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

    前者のパターンの場合は事前にlet that = thisを宣言しておいて、then以下でthisの代わりにthatを呼べば問題なく動くかと思います。

    • naoki85 より:

      ご指摘いただき、ありがとうございます!
      migi様からのご指摘を記事内に追加いたしました。
      よろしければご覧ください。

comment

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

関連記事

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

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

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ …

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で …

Vue.js入門その1〜基本文法〜

はじめに 軽量JSフレームワークとして有名なVue.js。 最近、Laravelに触れる機会が増えたことと、以前からRails + Vueという構築を耳にするので、今更ではありますが勉強を始めようと思 …

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ …

page_side_300rect






follow us in feedly

2017年9月
« 8月    
 12
3456789
10111213141516
17181920212223
24252627282930