スライドショー

【Rails入門】Webpackerではじめるフロントエンド開発!Rails5.1対応

こんにちは!システムエンジニアのオオイシです。

Ruby on RailsのWebpackerをご存知ですか!?

Webpackerを使うとフロントエンド開発で有名なWebpackがRuby on Railsで使えるようになります。

そもそも、フロントエンド開発はよくわからない・・・

Webpackはなにに使うの?

というそんなあなたにも、今回は以下の内容について解説していきます!

【基礎】Webpackerとは
【基礎】Webpackの特徴
【基礎】Webpackerのインストール方法
【発展】Webpackerで追加されたファイル一覧
【発展】webpacker.ymlの設定とエントリーポイントの解説
【発展】Webpackerでコンパイルしてみよう
【発展】Webpackerの便利な機能を紹介

Webpackerについて初心者でもわかるように解説していますので、使い方についてはしっかりと理解しておきましょう!

Webpackerとは

Webpackerとは、モダンなフロントエンド開発を強力にサポートするWebpackをRuby on Railsで使うためのgemパッケージです。

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

Webpackとは、CSS、JavaScript、画像などを1つのファイルとしてまとめるためのモジュールバンドラーで、node.jsのモジュールの1つです。

もともと、Ruby on Rails には、Asset Pipeline(Sprockets)というモジュールバンドラーがありますが、急速に進化してきたJavaScriptなどのフロントエンド環境と比較すると、Asset Pipelineは古いものになりつつあります。

近年のモダンなフロント開発に合わせる形で、Ruby on Railsも進化してきたと言えるでしょう。

そんな、Webpackの特徴について次項で解説していきます。

Webpackの特徴

Webpackは、モジュールバンドラの機能以外にも色々な特徴を備えています。

例えば、

  • 便利で豊富なツール(ローダーやプラグイン)
  • コード変更と同時に画面に反映するホットリロード
  • アロー関数やクラスなどの新しいJavaScript構文(ES6)をブラウザで動くように変換(babel-loader)
  • ReactVue.jsPostCSSなどのモダンなフレームワークに対する豊富な実績

などの高機能ツールです。

今回紹介する、WebpackerはWebpackが備える機能をRuby on Railsのコマンドや設定などと統合し、Railsでも使いやすくしたGemなのです!

そんな、Webpackerのすごいところを解説していきます!

Webpackerのインストール方法

本項では、Webpackerのインストール方法について解説していきます。

yarnのインストール

Webpackerはyarn(ヤーン)を使います。

yarnとは、Facebookが開発したnode.jsのパッケージマネージャです。

node.jsにはnpmという標準のパッケージマネージャがありますが、yarnの場合は、

  • モジュールのインストールがとにかく早い!
  • yarn.lockというバージョン固定の仕組みがある
  • package.json(node.jsの依存関係解決)をそのまま使える

などの特徴があります。

それでは、インストールしましょう。

macOS X:

Homebrewからインストールできます。

$ brew install yarn

Windows:

インストーラーがあるので、こちらからインストールしてください。

なお、node.jsのインストールについては、こちらで詳しく解説しているので、ぜひ参照してみてください。

【Node.jsとは?】初心者も理解できる言語の特徴を体系的に解説!
更新日 : 2019年10月8日

Railsアプリケーションの作成

Webpackerに対応したRubyアプリケーションを作成するには「rails new」コマンドで「--webpack」オプションを追加します。

今回は、ほとんど使われなくなったCoffeeScriptやturbolinksは除外しました。

--webpackオプションをつけてrails new:

$ bundle exec rails new . --skip-coffee --skip-turbolinks --webpack

実行結果:

# ~~ 省略 ~~
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 4.47s.
Webpacker successfully installed 🎉 🍰
# ~~ 省略 ~~

このように、node.jsのモジュールも同時にインストールされました。

今回は紹介しませんが、モダンなJavaScriptフレームワークを使うための雛形を準備するための、

  • --webpack=react
  • --webpack=vue

と指定することも可能です。

つづいて、Webpackerで追加された設定ファイルについて解説していきます。

Webpackerで追加されたファイル一覧

ここでは、Webpackerで追加されたファイルについて紹介します。

ファイル説明
bin/webpackwebpackでコンパイルを実行
bin/webpack-dev-serverwebpack-dev-serverを実行
config/webpacker.ymlエントリーポイントやdevelopやproduction固有の設定を定義する。
webpackのwebpack.config.jsに相当。
node_modules/node.jsのモジュール群の保管場所
package.jsonnode.jsの依存関係を解決
config/webpack/environment.jsローダーやプラグインの設定
app/javascript/webpack用のソースディレクトリのルート。
webpacker.ymlで変更可能
app/javascript/packs/application.jsデフォルトのエントリーポイント。
開発規模に応じて、複数のエントリーポイントを定義できる

bin/webpack」はJavaScriptやCSSなどをコンパイルするためのコマンドで、「rake assets:precompile」に相当します。

bin/webpack-dev-server」は、ローカル環境の開発でJavaScriptやCSSのソースコードの変更を自動検知して、ブラウザに自動で反映してくれる優れものです!

「rails s」(webrick)は別途起動する必要があるので注意しましょう。

webpacker.ymlの設定とエントリーポイントの解説

config/webpacker.yml」はRailsでWebpackを制御するための設定ファイルです。

一番重要な設定は、エントリーポイントの定義です。

エントリーポイントとは、WebブラウザからJavaScriptで読み込ませるための基点になります。

エントリーポイントの解説:

app/javascript/
├── javascripts
│   ├── a.js
│   └── b.js
├── packs
│   └── application.js # エントリーポイント。a.js, b.js, c.cssを1ファイルにまとめたファイル。
└── stylesheets
    └──c.css

「app/javascript/packs/application.js」をエントリーポイントとする場合は、

  • <%= javascript_pack_tag 'application' %>
  • <%= stylesheet_pack_tag 'application' %>

で、Viewから呼び出すことができます。

config/webpacker.yml:

default: &default
 source_path: app/javascript  # ソースのルートパス
 source_entry_path: packs   # エントリーポイントのルートパス
 public_output_path: packs  # コンパイルした結果を配置する/public配下のパス 
 cache_path: tmp/cache/webpacker

 # Additional paths webpack should lookup modules
 # ['app/assets', 'engine/foo/app/assets']
 resolved_paths: []   #WebpackでAssetを参照する場合のパス

# 〜〜 省略 〜〜

Webpackerの主なファイルについて理解いただけたでしょうか!?

次項では、Webpackerを実行する方法について紹介していきます。

Webpackerでコンパイルしてみよう

ここでは、Webpackerの使い方をサンプルアプリケーションを使って紹介していきます。

ちなみに、モジュールをバンドルしたり変換することを一般にコンパイルといいます。

サンプルのコントローラーを作成

サンプルプログラムを実行するためのコントローラーとViewを作成します。

必須ではありませんが、不要なファイルを作成しないように設定を追加します。

config/application.rb:

# 〜〜 以下を追記 〜〜
  config.generators do |g|
     g.test_framework  false
     g.stylesheets     false
     g.javascripts     false
     g.helper          false
     g.channel         assets: false
   end

サンプルコントローラーの生成:

$ bin/rails g controller hello world
Running via Spring preloader in process 1839
      create  app/controllers/hello_controller.rb
       route  get 'hello/world'
      invoke  erb
       exist    app/views/hello
      create    app/views/hello/world.html.erb
      invoke  assets
      invoke    js

HTTPサーバー実行:

$ bin/rails s

http://localhost:3000/hello/world にアクセスすると初期画面が表示されます。

JavaScriptをコンパイルしてみる

H1タグを”Hello#world”から”Hello#Webpacker”に書き換えるJavaScriptのサンプルコードを確認してみましょう。

ディレクトリの構造:

app/javascript/
├── javascripts 
│   ├── hello.js # “Hello”を返却する関数
│   ├── hello_webpacker.js #hello.jsとwebpacker.jsを参照
│   └── webpacker.js #”Webpacker”を返却する関数
└── packs
    └── application.js # エントリーポイント。hello_webpacker.jsを参照

JavaScript用のソースコードを保存するため「javascripts」を新規作成して、配下にソースコードを保存します。

このプログラムの特徴は「hello.js」と「webpacker.js」を別のモジュール(ファイル)に定義している点です。

app/javascript/javascripts/hello.js:

export default function hello() {
   return "Hello";
}

app/javascript/javascripts/webpacker.js:

export default function webpacker() {
    return "Webpacker";
}

app/javascript/javascripts/hello_webpacker.js:

import hello from '../javascripts/hello'
import webpacker from '../javascripts/webpacker'

window.onload = function() {
   document.getElementsByTagName("H1")[0].innerText = hello() + "#" + webpacker();
}

app/javascript/packs/application.js:

import '../javascripts/hello_webpacker'

WebpackでJavaScriptを呼び出すためのタグを変更します。

app/views/layouts/application.html.erb:

<%= javascript_include_tag 'application' %>
↓ 変更
<%= javascript_pack_tag 'application' %>

引数の'application'は、エントリーポイントにある「app/javascript/packs/application.js」を指してます。

http://localhost:3000/hello/world にアクセスしてみてください。

このようにWebpackでJavaScriptが実行されるのが確認できました。

「rails s」(Webric)のログを確認するとリロードしたタイミングで自動コンパイルされたことがわかります。

〜〜 省略 〜〜
Rendered hello/world.html.erb within layouts/application (0.7ms)
[Webpacker] Compiling…
[Webpacker] Compiled all packs in /Users/oishimakoto/app/samurai/webpk_sample/public/packs
Completed 200 OK in 2365ms (Views: 2362.0ms | ActiveRecord: 0.0ms)

つづいて、CSSの実行方法についてみていきましょう。

なお、サンプルコードで登場したJavaScriptはこちらを参考にしています。

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは
更新日 : 2019年4月22日

CSSをコンパイルしてみる

Webpackerでは、CSSをバンドルするための「css-loader/style-loader」が最初からインストールされています。

SassPostCSSなどのフレームワークも初めから使えます。

ここでは、背景色を黄色に変更するサンプルプログラムについて紹介していきます。

ディレクトリ構成:

app/javascript/
├── packs
│   └── application.js #エントリーポイント
└── stylesheets #ディレクトリを作成
    └── hello_webpack.css

app/javascript/stylesheets/hello_webpacker.css:

html, body {
   background: yellow; /* 背景色を黄色に */
}

app/javascript/packs/application.js:

import '../javascripts/hello_webpacker'
import '../stylesheets/hello_webpacker' # CSSをインポートする定義を追記

WebpackでCSSを呼び出すためのタグを変更します。

app/views/layouts/application.html.erb:

<%= stylesheet_link_tag 'application', media: 'all' %>
↓ 変更
<%= stylesheet_pack_tag 'application'%>

http://localhost:3000/hello/world にアクセスしてみてください。

このようにWebpackでCSSが反映されるのことが確認できました。

次項では、Webpackerの便利な機能について紹介していきます。

Webpackerの便利な機能を紹介

コンパイルなしで画面に反映(webpack-dev-server)

ローカル環境で開発中の場合は、ソースコードの変更の度に「bin/webpack」でコンパイルしたり、画面をリロードするにはとても面倒くさいと思いませんか!?

webpackではソースコードの変更を検知してリアルタイムに画面反映する「webpack-dev-server」というものがあります。

$ bin/webpack-dev-server

背景色をにして遊んでみましょう!

app/javascript/stylesheets/hello_webpacker.css:

html, body {
  background: yellow;
  ↓変更
  background: blue;
}

Webブラウザをリロードしなくても反映されるはずです。

便利ですね!

jQueryを使えるようにする

jQueryもまだまだ現役のフレームワークです。

Webpackで使えるようにしてみましょう。

yarnでjQueryのnodeモジュールをインストールします。

$ yarn add jquery

実行結果:

# 〜〜 省略 〜〜
success Saved lockfile.
success Saved 1 new dependency.
└─ [email protected]
✨  Done in 3.28s.

Webpackでいつでもどこでもモジュール使えるようにするためのProvidePluginでjQueryを使えるように設定します。

config/webpack/environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
   'Provide',
   new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery',
       jquery: 'jquery'
   })
)
module.exports = environment

サンプルコードをjQueryに書き換えてみましょう。

app/javascript/javascripts/hello_webpacker.js:

    // 〜〜 省略 〜〜
window.onload = function() {
   document.getElementsByTagName("H1")[0].innerText = hello() + "#" + webpacker();
}
// ↓変更
$(function(){
   $("H1")[0].innerText =  hello() + "#" + webpacker();
})

http://localhost:3000/hello/world にアクセスすると確認できます。

まとめ

いかかでしたか?

今回は、RailsのWebpakerの使い方をについて解説しました。

Webpackerは、WebpackをRuby on Railsで使うことができるGemパッケージです。

Webpackは、JavaScript、CSSや画像を1つにまとめるためのモジュールバンドラーの機能や、モダンなフロントエンド開発を強力にサポートする機能を備えているので、ぜひ使ってみてください。

そして、Webpackerの使い方を忘れてしまったらこの記事を確認してくださいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

オオイシ

オオイシ

システムエンジニア歴15年のオオイシです!好物は Java と Ruby。プログラミング、システムアーキテクトからマネジメントに到るまでなんでも食べます。
システム開発の相談やお困りごとがあればお気軽に
[email protected] まで連絡頂けると幸いです

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説