カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

1-2

WebpackerでVue.jsを導入

この回では、Webpackerを使ってVue.jsをRailsアプリケーションに導入していきます。

※ Railsアプリケーション作成時に--webpack=vueオプションを付加することで導入もできます。しかし今回はあえてVue.jsを既存のRailsアプリケーションに導入する方法を知るためにも少し遠回りな方法を紹介しています。

今回のゴール

今回の目標は「Vue.jsを導入して、簡単なページを表示する」ことです。

image

ゴールまでの流れ

ゴールまでの手順は次の通りです。

  1. Webpackerとは
  2. Webpackerをインストール
  3. Vue.jsをWebpackerで導入する
  4. ルーティングの設定
  5. コントローラーの作成
  6. ビューを作成

それでは、実際にVue.jsの導入を行いましょう。

1. Webpackerとは

Webpackerとは、複数のJavaScriptファイルなどを1つにまとめて出力するツールであるwebpackを簡単にRailsアプリケーションに統合できるGemです。

Rails5.1から標準でサポートされるようになりました。

webpackとはモジュールバンドラツールのことで、昨今のモダンなJavaScript開発で必須となりつつある仕組みです。

以下の画像はwebpackの公式サイトのイメージ図になります。

image

参考)webpack

※ 本教材では、webpackについては詳しく解説していません。詳しく解説しようとすると、webpackだけで1つの教材ができるくらいボリュームがあるためです。そのため詳しく学びたい方はご自身で調べていただければと思います。

2. Webpackerをインストール

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 🎉 🍰

3. Vue.jsをWebpackerで導入する

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つずつファイルを見ていきましょう。

※ 下記のファイルに関する内容は難しいため、説明は簡単にしています。詳しく知りたい方はご自身で調べていただければと思います。

config/webpack/loaders/vue.js

webpackはJavaScriptファイルのみそのままの状態で取り扱えます。なのでJavaScriptファイル以外のファイルはwebpackで読み込むことができません。しかし、VueやCSSを読み込む必要があります。その際にloaderと呼ばれるものを使って、JavaScriptファイル以外も読めるようにします。今回はvue-loaderというもので、WebpackerがVueファイルを認識するための設定が書かれています。

config/webpack/environment.js

config/webpack/environment.jsはそれぞれの環境の設定を行うためのファイルです。このファイルにvue-loaderの読み込みを行う記載があります。つまり、このファイルがあることでvue-loaderを使うことができます。

config/webpacker.yml

config/webpacker.ymlはwebpackerの設定を行うファイルになります。

その他のサンプルファイル

設定ファイルとは別に、「Hello Vue!」を出力するためにapp/javascript/packs/hello_vue.jsapp/javascript/app.vue ファイルが作成されます。

vueファイルだけでなくjsファイルがある理由としては、vue単体だけでは動作せず、jsを介してvueを呼び出しています。

イメージとしては以下のような図になります。

4. ルーティングの設定

Webpackerを使ってVue.jsの導入はできたので、
簡単なページを表示してみます。Railsでは、ルーティング→コントローラー→ビューという順で処理が行われるので、実装もこの順番でやっていきます。

まず簡単なページのルーティングの設定を行います。

ルーティングは受け取ったURLを認識し、適切なコントローラー内のアクションを動かすように設定します。

image

今回はhomeコントローラーのindexアクションのルーティングを簡単なページのルーティングとして設定します。

config/routes.rbに以下のコードを追加してください。

config/routes.rb
1234
+-
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

すると下記の画像のようにルーティングの一覧が表示されます。

image

下記のルーティングが今回設定したルーティングの情報になります。

Copied!
home GET /home(.:format) home#index
名前付きヘルパー HTTP動詞 パス コントローラー#アクション
home GET /home home#index

簡単に用語を解説すると、名前付きヘルパーはhome_pathのように末尾に_pathを付け加えることで、ビュー内で使えるURLになります。

HTTP動詞はクライアントが行いたい処理をサーバーに伝えるという役割があります。

Railsでは以下の4種類のHTTP動詞があります。

  • GET・・・サーバーからブラウザに情報を返す。単にウェブサイトを閲覧したいときに利用される
  • POST・・・ブラウザからサーバーにリソースを送信し作成する。フォームでデータを保存したいときに利用される
  • PATCH・・・リソースを更新する。データを更新したいときに利用される
  • DELETE・・・リソースを削除する。データを削除したいときに利用される

今回はページを表示させたいだけなので、HTTP動詞はGETに指定しています。

参考)Rails のルーティング

5. コントローラーの作成

次にコントローラーを作成します。コントローラーの名称は先程設定したルーティングで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.rb
1234
++
Copied!
class homeController < ApplicationController def index end end

今回は特にデータベースからデータを取ってくるわけではないのでindexアクションの中には何も書かないです。

6. ビューを作成

最後にビューを追加します。アプリケーションの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.erb
1
Copied!
<%= javascript_pack_tag 'hello_vue' %>

ビューでJavaScript packをインクルードするにはjavascript_pack_tag '<pack名>'を使います。今回hello_vue.js を読み込みたいので、pack名の箇所にhello_vueを記載しています。

では、http://localhost:3000/home にアクセスして「Hello Vue!」が表示されているか確認しましょう。下記の画像のように表示されていればうまく動作しています。

image

以上で本パートは終了です。

お疲れさまでした。