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


関連記事

Go言語

Go WebAssemblyでPromiseを使って非同期化してみた

1 はじめに2 Go WebAssemblyで非同期化のコード3 Promise化する4 おまけ5 さいごに6 おすすめ書籍 はじめに 先日WebAssemblyに入門して、実際に以下のチュートリアル ...

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

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

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

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

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

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

フォロー

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

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