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


関連記事

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

Vuexの機能と使い方

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

js

WebページにGoogleMapを配置する

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

svelte

SvelteのStore入門

1 はじめに2 SvelteにおけるStoreの概要2.1 Storeの条件2.2 Storeの種類3 Storeの実装と使い方3.1 Writable Store3.1.1 実装例3.1.2 使用例 ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

フォロー

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

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