【Rails6】Webpackerの使用方法！【コピペでOK】

Ruby on Rails

SHARE

目次

はじめに

Railsで開発をしていて、もちろんCSSを使いたいときってありますよね？
また、JavaScriptで簡単なアニメーションであったり、画像を載せる時も頻繁にあるかと思います。
その際にWebpackerかSprocketsという技術を用いてそれらを読み込ませています。
結論から言うと、現在ではWebpackerを使ってそれらを実装することがほとんどです。
なので、今回は簡単にWebpacker自体の説明と使い方を解説します！

注意(追記：2022/12/30)

本記事はRailsのバージョンが6の人を対象にしています。

Rails7ではWebpackerは非推奨となっており、 rails newの時点でWebpackerがデフォルトで入ることは無くなりました。

この記事の概要

この記事は、Railsを使う上では避けて通れないWebpackerという技術についての概要を説明します。
そしてなんとなくでも理解してもらって、どのように、どんな時に使うかを覚えて帰ってもらいます！

対象読者

  • Railsの初学者
  • Webpackerについてあまり理解していない人

Webpackerとは

サクッと結論

めちゃくちゃ簡単に説明すると、CSS、Javascript、画像等をひとまとめにして軽く使いやすくしてくれるツールです！

また、その過程で

  • SASSをCSSに変換
  • 画像のサイズを圧縮
  • bootstrapを始めとしたJSライブラリのインストール

などを良い感じに行ってくれます！

実際には、Webpackというフロントエンドでよく使用されるツールを、あまり理解していない人でも簡単に使えるようにしたツールです。
RailsでCSSやJavascriptを使うために必要なんだなー、くらいの感覚で理解をしておけば一旦OKです！
なんとなく理解できたと思うので、ここからは実際に使い方を説明していきます！

Webpackerの使い方

Webpackerの導入

とりあえず、Webpacker自体がRailsプロジェクトに入っていないと使うことができないので、Webpackerの導入を行います。
とは言え、Railsのバージョンが6の人は何も意識せずともインストールされているかと思います！
Gemfileを確認して、

source 'https://rubygems.org'
# 中略
gem 'webpacker', '~> 5.0'
# 中略

こんな感じで、gem ‘webpacker’という記述があればOKです！
（※ バージョンは違うかもしれません）

もし無かった人は、Gemfileに上記の記述をしてから、


$ bundle install
$ rails webpacker:install

上記の2つのコマンドを行うことでインストールが完了します！

Javascriptの使い方

自分で作成したJavascriptのファイルを呼び出して、使う方法は簡単です！
まずはapp/javascript内にsrcディレクトリを作成、その中にファイルを作成します

$ mkdir ./app/javascript/src
$ touch ./app/javascript/src/hello.js

そして、hello.js内に行いたい記述をします。今回はWebpackerの動作確認テストなので下記の様なコードにします。

window.addEventListener('load', () => {
  console.log('ページが完全に読み込まれました');
});

次に、app/javascript/packs/application.jsを編集して先程作成したhello.jsを読み込ませてやります。

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";

Rails.start();
Turbolinks.start();
ActiveStorage.start();

// 上の記述は人それぞれ違います

import "../src/hello";

上記11行目のように、importを使って相対パスでファイルを指定します。
この時、拡張子(.js)がありませんが、問題なく読み込みまれます（拡張子を記述しても問題無いです）。

そして最後に、app/views/layouts/application.html.erbのheadタグ内に追記をして終了です！

<!DOCTYPE html>
<html>
  <head>
    <title>サイトタイトル</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="description" content="metaディスクリプション文章。">
    <%= favicon_pack_tag "favicon.png" %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

ブラウザで開いて、コンソールに先程の文言（’ページが完全に読み込まれました’）が表示されれば成功です！
あとはお好みでDOM操作やアニメーション等を取り入れてリッチなシステムにしましょう!

CSSの使い方

CSSもJavascriptと似たような形で導入可能です！
まずは、ディレクトリとエントリーポイントとなるファイルを作成します

$ mkdir app/javascript/stylesheets
$ touch app/javascript/stylesheets/application.scss

このapplication.scssにテストで記述をします。

body {
 background-color: #333333;
}

そして今回も、app/javascript/packs/application.jsを編集して先程作成したapplication.scssを読み込ませてやります。

import Rails from "@rails/ujs";
import Turbolinks from "turbolinks";
import * as ActiveStorage from "@rails/activestorage";

Rails.start();
Turbolinks.start();
ActiveStorage.start();

// 上記記述は人それぞれ違います

import "../src/hello";
import "../stylesheets/application.scss";

上記のように、12行目のimport文を追加してあげます。
今回は.jsと違って、拡張子をちゃんと記述する必要があるので注意して下さい。

そしてこちらも最後に、app/views/layouts/application.html.erbのheadタグ内に追記をして終了です！

<!DOCTYPE html>
<html>
  <head>
    <title>サイトタイトル</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="description" content="metaディスクリプション文章。">
    <%= favicon_pack_tag "favicon.png" %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

stylesheet_pack_tagからはじまる11行目部分です。

Chromeなどブラウザで開いて、bodyタグ内の色が変化していれば成功です！

画像をimgタグとして呼び出す方法

最後に、画像も呼び出してみましょう！
まずはapp/javascript/imagesディレクトリを作成します

$ mkdir ./app/javascript/images

そして、使いたい画像をapp/javascript/images内にどんどん入れてやりましょう
最後にimgタグとして使いたい部分に下記のように記述してあげます

<%= image_pack_tag "ファイル名.png"  %>
<!-- クラスをつけたい時 -->
<%= image_pack_tag "ファイル名.png", class: "sample-class" %>

上記のように記述することでimgタグを生成してくれます！
もちろん、pngだけでなく、jpgやgif、svg等imgタグで使える拡張子は必要

もし、パスだけがほしい場合は、

<img src="<%= asset_pack_path "media/images/ファイル名.png" %>" alt="画像の説明文">

上記のようにasset_pack_pathに引数としてmedia/imagesに続く形でファイル名を記述することでパスを出力してくれます。
こちらもたまに使うので覚えておくと良いですね！

終わりに

今回は簡単にWebpacker自体の説明と使い方を書かせてもらいました！
だいぶざっくり書いたので、まだまだわからない部分があると思いますが、リクエストがあれば書かせてもらいますので、コメントなどお待ちしてます🙏

Railsの勉強をしたい方はこの本が参考になるかと思いますので興味がある方は是非読んで見て下さい🙇‍♂️

前の記事

Ruby on Rails
【Rails】gemを使わない日本語化の設定

次の記事

【初学者向け】Sprocketsの解説！Webpackerとの…
Ruby on Rails