RailsとVue.jsを合わせて使ってみる

やったこと

以下の記事のTODOアプリを作った * Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた - Qiita

学習したこと

• webpackerについて
• Vue-Routerについて
• RailsでAPI作る
• Axiosを使ってAPI通信

→　Rails + Vue.jsでSPAっぽいものを作れそう。

webpacker

• 読んだ

  • 最新版で学ぶwebpack 3入門 - JavaScript開発で人気のバンドルツール - ICS MEDIA

• Webコンテンツを構成するファイルをひとまとめにするツール

• 複数のファイルを１つにまとめることでファイル転送の時間削減ができる
• webpackはjsだけでなくcssや画像までもバンドルできる

Vue-Router

Vue-Routerを使用することで、登録されたパスとコンポーネントで画面内を差し替える（SPAっぽい）

Vue.use()でプラグインの使用（今回はVue-Router） またVue-Routerの使い方を見ないといけない…

npm install vue-router --saveしてなくてハマった…w

• VueRouterを使用すると、<router-link>と<router-view>というタグを使用できる
  • <router-link>は<a>タグとして変換するが、画面遷移でなく、VueRouterに登録されたパスからコンポーネントを探す
  • そして<router-view>の部分に表示する

その他メモ

• インストールでハマった。webpackerのインスコとvueのインスコもれでした
  • rails webpacker:install
  • rails webpacker:install:vue
• Node.jsの界隈では、機能ごとに分割されたJavaScriptファイルのことを一般的に「モジュール」と呼ぶ
• webpack関連のファイルは変更したらコンパイルする必要がある

• foreman は、Procfile を読み込み、複数のプロセスを管理できるツール。

  • foreman で アプリケーションを動かす。 - Qiita

• RailsのAPI作成はだいぶ楽そうだけど手順がよくわかっていない。

  • これは別でやればいいと思うから飛ばす

• document.querySelector: 与えられたCSSセレクタにマッチする文章中の最初の要素を返す

• classList: class属性のトークンリストを返す
  • #finished-tasksを引っ張ってきて、.display_noneの追加削除を交互に行うことで表示非表示を行う