【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からインストールできます。

Windows:

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

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

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

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

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

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

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

実行結果:

このように、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/packs/application.js」をエントリーポイントとする場合は、

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

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

config/webpacker.yml:

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

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

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

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

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

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

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

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

config/application.rb:

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

HTTPサーバー実行:

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

JavaScriptをコンパイルしてみる

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

ディレクトリの構造:

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

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

app/javascript/javascripts/hello.js:

app/javascript/javascripts/webpacker.js:

app/javascript/javascripts/hello_webpacker.js:

app/javascript/packs/application.js:

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

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

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

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

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

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

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

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

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

CSSをコンパイルしてみる

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

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

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

ディレクトリ構成:

app/javascript/stylesheets/hello_webpacker.css:

app/javascript/packs/application.js:

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

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

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

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

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

Webpackerの便利な機能を紹介

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

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

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

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

app/javascript/stylesheets/hello_webpacker.css:

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

便利ですね!

jQueryを使えるようにする

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

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

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

実行結果:

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

config/webpack/environment.js:

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

app/javascript/javascripts/hello_webpacker.js:

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

まとめ

いかかでしたか?

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

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

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

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

オオイシ

オオイシ

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

おすすめコンテンツ

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

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