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の方でモジュール管理してたものを移せそうです。

おすすめ書籍

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

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


  1. migi より:

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

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

    • naoki85 より:

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

comment

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

CAPTCHA


関連記事

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

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

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

react-icon

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

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

js

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

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

フォロー

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

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