【Rails入門】Webpackerではじめるフロントエンド開発!Rails5.1対応オオイシ2018/8/182018/8/21こんにちは!システムエンジニアのオオイシです。Railsで使えるようになります。Railsで使うためのgemパッケージです。5.1から標準でサポートされるようになりました。Webpackとは、CSS、JavaScript、画像などを1つのファイルとしてまとめるためのモジュールバンドラーで、node.jsのモジュールの1つです。Pipelineは古いものになりつつあります。Railsも進化してきたと言えるでしょう。そんな、Webpackの特徴について次項で解説していきます。Webpackの特徴Webpackは、モジュールバンドラの機能以外にも色々な特徴を備えています。便利で豊富なツール(ローダーやプラグイン)コード変更と同時に画面に反映するホットリロードアロー関数やクラスなどの新しいJavaScript構文(ES6)をブラウザで動くように変換(babel-loader)React、Vue.js、PostCSSなどのモダンなフレームワークに対する豊富な実績などの高機能ツールです。本項では、Webpackerのインストール方法について解説していきます。yarnのインストールWebpackerはyarn(ヤーン)を使います。yarnとは、Facebookが開発したnode.jsのパッケージマネージャです。node.jsにはnpmという標準のパッケージマネージャがありますが、yarnの場合は、モジュールのインストールがとにかく早い!yarn.lockというバージョン固定の仕組みがあるpackage.json(node.jsの依存関係解決)をそのまま使えるなどの特徴があります。それでは、インストールしましょう。X:Homebrewからインストールできます。yarnWindows:インストーラーがあるので、こちらからインストールしてください。node.jsのインストールについては、こちらで詳しく解説しているので、ぜひ参照してみてください。new」コマンドで「--webpack」オプションを追加します。今回は、ほとんど使われなくなったCoffeeScriptやturbolinksは除外しました。~~このように、node.jsのモジュールも同時にインストールされました。今回は紹介しませんが、モダンなJavaScriptフレームワークを使うための雛形を準備するための、--webpack=react--webpack=vueと指定することも可能です。つづいて、Webpackerで追加された設定ファイルについて解説していきます。Webpackerで追加されたファイル一覧ここでは、Webpackerで追加されたファイルについて紹介します。エントリーポイントやdevelopやproduction固有の設定を定義する。webpackのwebpack.config.jsに相当。webpack用のソースディレクトリのルート。デフォルトのエントリーポイント。assets:precompile」に相当します。s」(webrick)は別途起動する必要があるので注意しましょう。「config/webpacker.yml」はRailsでWebpackを制御するための設定ファイルです。重要な設定は、エントリーポイントの定義です。エントリーポイントとは、WebブラウザからJavaScriptで読み込ませるための基点になります。c.cssを1ファイルにまとめたファイル。%>で、Viewから呼び出すことができます。〜〜Webpackerの主なファイルについて理解いただけたでしょうか!?次項では、Webpackerを実行する方法について紹介していきます。Webpackerでコンパイルしてみようここでは、Webpackerの使い方をサンプルアプリケーションを使って紹介していきます。ちなみに、モジュールをバンドルしたり変換することを一般にコンパイルといいます。サンプルのコントローラーを作成サンプルプログラムを実行するためのコントローラーとViewを作成します。必須ではありませんが、不要なファイルを作成しないように設定を追加します。アクセスすると初期画面が表示されます。JavaScriptをコンパイルしてみるH1タグを”Hello#world”から”Hello#Webpacker”に書き換えるJavaScriptのサンプルコードを確認してみましょう。hello_webpacker.jsを参照JavaScript用のソースコードを保存するため「javascripts」を新規作成して、配下にソースコードを保存します。このプログラムの特徴は「hello.js」と「webpacker.js」を別のモジュール(ファイル)に定義している点です。'../javascripts/hello_webpacker'WebpackでJavaScriptを呼び出すためのタグを変更します。%>引数の'application'は、エントリーポイントにある「app/javascript/packs/application.js」を指してます。アクセスしてみてください。このようにWebpackでJavaScriptが実行されるのが確認できました。s」(Webric)のログを確認するとリロードしたタイミングで自動コンパイルされたことがわかります。0.0ms)つづいて、CSSの実行方法についてみていきましょう。サンプルコードで登場したJavaScriptはこちらを参考にしています。2019年4月22日CSSをコンパイルしてみるWebpackerでは、CSSをバンドルするための「css-loader/style-loader」が最初からインストールされています。SassやPostCSSなどのフレームワークも初めから使えます。ここでは、背景色を黄色に変更するサンプルプログラムについて紹介していきます。CSSをインポートする定義を追記WebpackでCSSを呼び出すためのタグを変更します。アクセスしてみてください。このようにWebpackでCSSが反映されるのことが確認できました。次項では、Webpackerの便利な機能について紹介していきます。Webpackerの便利な機能を紹介コンパイルなしで画面に反映(webpack-dev-server)ローカル環境で開発中の場合は、ソースコードの変更の度に「bin/webpack」でコンパイルしたり、画面をリロードするにはとても面倒くさいと思いませんか!?webpackではソースコードの変更を検知してリアルタイムに画面反映する「webpack-dev-server」というものがあります。blue;}Webブラウザをリロードしなくても反映されるはずです。便利ですね!jQueryを使えるようにするjQueryもまだまだ現役のフレームワークです。Webpackで使えるようにしてみましょう。yarnでjQueryのnodeモジュールをインストールします。3.28s.Webpackでいつでもどこでもモジュール使えるようにするためのProvidePluginでjQueryを使えるように設定します。environmentサンプルコードをjQueryに書き換えてみましょう。アクセスすると確認できます。まとめいかかでしたか?今回は、RailsのWebpakerの使い方をについて解説しました。Railsで使うことができるGemパッケージです。Webpackは、JavaScript、CSSや画像を1つにまとめるためのモジュールバンドラーの機能や、モダンなフロントエンド開発を強力にサポートする機能を備えているので、ぜひ使ってみてください。Webpackerの使い方を忘れてしまったらこの記事を確認してくださいね!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。プログラミング、システムアーキテクトからマネジメントに到るまでなんでも食べます。