教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
この回では、Webpackerを使ってVue.jsをRailsアプリケーションに導入していきます。
※ Railsアプリケーション作成時に--webpack=vue
オプションを付加することで導入もできます。しかし今回はあえてVue.jsを既存のRailsアプリケーションに導入する方法を知るためにも少し遠回りな方法を紹介しています。
今回の目標は「Vue.jsを導入して、簡単なページを表示する」ことです。
ゴールまでの手順は次の通りです。
それでは、実際にVue.jsの導入を行いましょう。
Webpackerとは、複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。
Rails5.1から標準でサポートされるようになりました。
webpackとはモジュールバンドラツールのことで、昨今のモダンなJavaScript開発で必須となりつつある仕組みです。
以下の画像はwebpackの公式サイトのイメージ図になります。
参考)webpack
※ 本教材では、webpackについては詳しく解説していません。詳しく解説しようとすると、webpackだけで1つの教材ができるくらいボリュームがあるためです。そのため詳しく学びたい方はご自身で調べていただければと思います。
Webpakcerをインストールするには、まずGemfile
に以下のコードを追加します。ただ先ほど説明した通り、Rails5.1以降標準でサポートされているため、デフォルトでGemが追加されています。
一応Gemfileを確認してみましょう。
Copied!gem 'webpacker', '~> 4.0'
なのでGemは追加する必要はありません。
ただ、以下のコマンドでWebpackerをインストールする必要があります。
console Copied!rails webpacker:install
上記のコマンドを実行して、以下のような結果が表示されていればWebpackerのインストールはうまくいっています。
console Copied!.
.
✨ Done in 3.69s.
insert package.json
Webpacker successfully installed 🎉 🍰
RailsアプリケーションにVue.jsをWebpackerで導入するには以下のコマンドを実行します。
console Copied!rails webpacker:install:vue
コマンドを実行すると、次のような結果が表示されます。
console Copied!Copying vue loader to config/webpack/loaders
create config/webpack/loaders/vue.js
Adding vue loader plugin to config/webpack/environment.js
insert config/webpack/environment.js
insert config/webpack/environment.js
Adding vue loader to config/webpack/environment.js
insert config/webpack/environment.js
insert config/webpack/environment.js
Updating webpack paths to include .vue file extension
insert config/webpacker.yml
Copying the example entry file to /Users/daijiro.maeyama/test_projects2/memo-app/app/javascript/packs
create app/javascript/packs/hello_vue.js
Copying Vue app file to /Users/daijiro.maeyama/test_projects2/memo-app/app/javascript/packs
create app/javascript/app.vue
.
.
.
ファイルが追加されたり書き込みが行われています。1つずつファイルを見ていきましょう。
※ 下記のファイルに関する内容は難しいため、説明は簡単にしています。詳しく知りたい方はご自身で調べていただければと思います。
webpackはJavaScriptファイルのみそのままの状態で取り扱えます。なのでJavaScriptファイル以外のファイルはwebpackで読み込むことができません。しかし、VueやCSSを読み込む必要があります。その際にloaderと呼ばれるものを使って、JavaScriptファイル以外も読めるようにします。今回はvue-loader
というもので、WebpackerがVueファイルを認識するための設定が書かれています。
config/webpack/environment.js
はそれぞれの環境の設定を行うためのファイルです。このファイルにvue-loader
の読み込みを行う記載があります。つまり、このファイルがあることでvue-loader
を使うことができます。
config/webpacker.yml
はwebpackerの設定を行うファイルになります。
設定ファイルとは別に、「Hello Vue!」を出力するためにapp/javascript/packs/hello_vue.js
と app/javascript/app.vue
ファイルが作成されます。
vueファイルだけでなくjsファイルがある理由としては、vue単体だけでは動作せず、jsを介してvueを呼び出しています。
イメージとしては以下のような図になります。
Webpackerを使ってVue.jsの導入はできたので、
簡単なページを表示してみます。Railsでは、ルーティング→コントローラー→ビューという順で処理が行われるので、実装もこの順番でやっていきます。
まず簡単なページのルーティングの設定を行います。
ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。
今回はhomeコントローラーのindexアクションのルーティングを簡単なページのルーティングとして設定します。
config/routes.rb
に以下のコードを追加してください。
config/routes.rb1234 +- Copied!Rails.application.routes.draw do
get 'home', to: 'home#index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
routes.rb
ファイルにデフォルトであるコメントアウトは特に必要はないので削除されて大丈夫です。
rails routes
というコマンドを実行することで設定しているルーティングを全て表示できます。実際に下記のコマンドを入力してください。
console Copied!rails routes
すると下記の画像のようにルーティングの一覧が表示されます。
下記のルーティングが今回設定したルーティングの情報になります。
Copied!home GET /home(.:format) home#index
名前付きヘルパー | HTTP動詞 | パス | コントローラー#アクション |
---|---|---|---|
home | GET | /home | home#index |
簡単に用語を解説すると、名前付きヘルパーはhome_path
のように末尾に_path
を付け加えることで、ビュー内で使えるURLになります。
HTTP動詞はクライアントが行いたい処理をサーバーに伝えるという役割があります。
Railsでは以下の4種類のHTTP動詞があります。
今回はページを表示させたいだけなので、HTTP動詞はGETに指定しています。
次にコントローラーを作成します。コントローラーの名称は先程設定したルーティングでhomeと指定したので、homeコントローラーを作成していきます。
コントローラーはルーティングからリクエストを受け取り、データをモデルから取得したりモデルに保存するなどの作業を行い、最後にビューを使用してHTML出力を生成します。
コントローラーは「rails g controller コントローラー名」というコマンドで作成出来ます。
以下のコマンドを実行してください。
console Copied!rails g controller home
上記のコマンドを実行するとターミナルに下記のような実行結果が表示されます。
console Copied!rails g controller home
Running via Spring preloader in process 24650
create app/controllers/home_controller.rb
invoke erb
create app/views/home
invoke test_unit
create test/controllers/home_controller_test.rb
invoke helper
create app/helpers/home_helper.rb
invoke test_unit
invoke assets
invoke scss
create app/assets/stylesheets/home.scss
次に作成したコントローラーにアクションを追加していきます。ルーティングが実際に処理するのはコントローラーに作成されたアクションです。
まず先ほど追加したルーティングを確認してみましょう。
名前付きヘルパー | HTTP動詞 | パス | コントローラー#アクション |
---|---|---|---|
home | GET | /home | home#index |
今回の場合はhome#index
、つまりhomeコントローラーのindexアクションを処理するように指定しています。なのでhomeコントローラーにindexアクションを作成していきましょう。
app/controlllers/home_controller.rb
に以下のコードを追加してください。
app/controlllers/home_controller.rb1234 ++ Copied!class homeController < ApplicationController
def index
end
end
今回は特にデータベースからデータを取ってくるわけではないのでindexアクションの中には何も書かないです。
最後にビューを追加します。アプリケーションのapp/views
ディレクトリには、1つのコントローラーごとに1つのディレクトリが作成され、そこにビューテンプレートファイルが置かれます。このビューテンプレートはそのコントローラーに関連づけられています。
今回はhomeコントローラーなのでhomeディレクトリのアクションごとに出力された結果をビューで表示させます。
なのでapp/views/home/
ディレクトリ内にindex.html.erb
を追加します。以下のコマンドを実行してください。
console Copied!touch app/views/home/index.html.erb
作成したindex.html.erb
ファイルには、app/javascript/packs/hello_vue.js
ファイルを読み込むコードを記載します。このhello_vue.js
ファイルを介してjavascript/packs/app.vue
ファイルを読み込みます。
app/views/home/index.html.erb
に以下のコードを追加してください。
app/views/home/index.html.erb1 Copied!<%= javascript_pack_tag 'hello_vue' %>
ビューでJavaScript packをインクルードするにはjavascript_pack_tag '<pack名>'
を使います。今回hello_vue.js
を読み込みたいので、pack名の箇所にhello_vue
を記載しています。
では、http://localhost:3000/home にアクセスして「Hello Vue!」が表示されているか確認しましょう。下記の画像のように表示されていればうまく動作しています。
以上で本パートは終了です。
お疲れさまでした。