【Rails入門】YarnでjQueryとBootstrapを使うには!?

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

Ruby on Rails5.1から対応したYarn(ヤーン)をご存知ですか?

Yarnはフロントエンド開発のためのNodeモジュールのパッケージマネージャです。

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

「Yarnはなにに使うの?」

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


【基礎】Yarnとは?
【基礎】Railsにおけるyarnの役割
【基礎】yarnコマンド一覧
【応用】QueryとBootstrapをAsset Pipelineで使う方法
【応用】QueryとBootstrapをWebpackで使う方法

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

目次

Yarnとは?

Yarnとは、Facebook、Googleなどが共同開発したNode.js(JavaScript)のパッケージマネージャです。

Yarn自体もNodeモジュールのパッケージです。

Node.jsには、もともと、npm(Node Package Manager)というパッケージマネージャがありますが、npmと比較してYarnは、

  • Nodeモジュールのインストールがとても早い
  • 誰が作っても同じバージョンになる機能がある(バージョンロック機能)
  • セキュリティが強化されている
  • コマンドラインの出力がシンプルでみやすい

のような特徴があります。

RailsにはBundlerというGemのパッケージマネージャがありますが、そのJavaScript版だと理解しやすいと思います。

そんなYarnのRailsでの役割についてみていきましょう。

なお、Gemfileについてはこちらで詳しく解説しているので、ぜひ参考にしてみてください。

Node.jsについては、こちらで解説しています。

Railsにおけるyarnの役割

Rails5.1からは、フロント開発のためのNode.jsが標準でサポートされるようになりました。

そのためNodeのパッケージマネージャであるyarnもサポートされるようになりました。

Railsで正式にサポートしてるフロントエンドのモジュールとして、

  • Webpack
  • Vue.js
  • React.js
  • TypeScript
  • PostCSS

などがあります。

これらのモジュールをRailsから簡単に管理するためのツールとしてYarnが使われています。

インストールしたNodeモジュールは、node_modulesディレクトリに保存されます。

yarn.lockファイルとは

yarn.lockファイルとは、Nodeモジュールのバージョンロックするためのファイルです。

RailsのGemfile.lockと同じで、Nodeモジュールの依存関係と依存するモジュールのバージョンを管理します。

ファイルを直接編集することはありませんが、共同で開発するためにはgitなどのバージョン管理として含める必要があるのでファイルの存在は覚えておくとよいでしょう。

yarn.lockの例:

"@rails/webpacker@3.5":
  version "3.5.5"
  resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-3.5.5.tgz#8911c66bcefc8bc6b91270e92f0d39e3c2d43116"
  dependencies:
    babel-core "^6.26.3"
    babel-loader "^7.1.5"
    babel-plugin-syntax-dynamic-import "^6.18.0"
〜〜 省略 〜〜

なお、git については、こちらで詳しく解説しているので、ぜひ参照してみてください。

yarnコマンド一覧

よく使うyarnのコマンドの一覧を紹介します。

コマンド説明
yarn add 最新のパッケージをインストール
yarn add [パッケージ名]指定したバージョンのパッケージをインストール
yarn list --depth=深さ(数値)パッケージの一覧と依存関係を階層で出力。
--depth オプションは依存関係の階層の深さを指定
yarn upgradepackage.jsonにしたがって全てのパッケージをアップデート
yarn remove [パッケージ名]パッケージのアンインストール
yarn -hコマンドヘルプを表示

覚えることがとても少ないのでカンタンですね!

次項では、yarnコマンドを使ったRailsのフロント開発を方法をわかりやすく紹介します!

Asset PipelineでjQueryとBootstrapを使う方法

YarnでインストールしたjQueryとBootstrapを従来のAsset Pipelineで使う方法について解説します。

Yarnはとっても簡単に使えることがわかっていただけると思います!

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

はじめに、WebpackなしでRailsプロジェクトを作成します。

$ bundle exec rails new .
$ bin/rails g controller hello world
$ bin/rails db:create
$ bin/rails s

今回は、Bootstrapが適用されたことを確認するためにHTMLボタン追加します。

<h1>Hello#world</h1>
<p>Find me in app/views/hello/world.html.erb</p>
<!-- ボタンを追加 -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

http://localhost:3000/hello/world にアクセスして、初期のサンプル画面を確認してみましょう。

このように、サンプル画面が表示されました。

次の説明で、この画面をBootstrapに対応させていきます。

yarn addコマンドjQueryとBootstrapをインストール

このサンプル画面にBootstrapをインストールする手順について解説していきます。

まずは、yarnコマンドでBootstrapをインストールします。

  • yarn add <モジュール名>

Bootstrapは、jQueryとPopper.jsを使うため、同時にインストールします。

Popper.jsは簡単にツールチップを実装できるJavaScriptライブラリです。

jqueryをインストール:

$ yarn add jquery
yarn add v1.9.4
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[-] 0/1(node:92122) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ jquery@3.3.1
info All dependencies
└─ jquery@3.3.1
✨  Done in 1.75s.

このように、絵文字つきでシンプルな出力でインストールされました!

BootstrapとPopper.jsもインストールします。

BootstrapとPopper.jsをインストール:

$ yarn add popper.js
$ yarn add bootstrap

Nodeモジュールのインストールリストを確認してみます。

$ yarn list
yarn list v1.9.4
├─ bootstrap@4.1.3
├─ jquery@3.3.1
└─ popper.js@1.14.4
✨  Done in 0.11s.

このようにNodeモジュールを確認することができました。

@以降の数字はバージョンを意味します。

インストールしたNodeモジュールはnode_modulesディレクトリ配下にインストールされています。

node_modules/
├── bootstrap
│   ├── dist
│   │   ├── css
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   └── bootstrap.min.css.map
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── bootstrap.js.map
│   │       ├── bootstrap.min.js
〜〜 省略 〜〜

jQueryとBootstrapの設定をする

インストールしたjQueryとBootstrap、Popper.jsをマニフェストに追加します。

app/assets/javascript/application.js:

〜〜 省略 〜〜
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery/dist/jquery.js // ここを追加
//= require popper.js/dist/popper.js // ここを追加
//= require bootstrap/dist/js/bootstrap.js // ここを追加
//= require_tree .

app/assets/stylesheets/application.css:

〜〜 省略 〜〜
*= require bootstrap/dist/css/bootstrap #ここを追加
*= require_tree .
*= require_self

再び、http://localhost:3000/hello/world にアクセスして、サンプル画面を確認してみましょう。

このように、Bootstrapがインストールできました。

次項では、同じ内容でWebpackerを使ったサンプルを紹介いたします。

なお、Railsのマニフェストファイルについては、こちらで詳しく解説しているため、ぜひ参考にしてみてください。

WebpackでjQueryとBootstrapを使う方法

ここでは、前項で紹介した、Asset PipelineからWebpackを使った方法に変更する方法を紹介いたします。

WebpackerのGemをインストール

Railsでwebpackを使うための、Gemをインストールします。

Gemgile:

gem 'webpacker' 追加

Webpackerをインストールします。

$ bin/bundle install
$ bin/rake webpacker:install

「yarn list」 コマンドを実行すると、多数のNodeモジュールがインストールされたことが確認できます。

$ yarn list
yarn list v1.9.4
├─ @rails/webpacker@3.5.5
│  ├─ babel-core@^6.26.3
│  ├─ babel-loader@^7.1.5
│  ├─ babel-plugin-syntax-dynamic-import@^6.18.0
│  ├─ babel-plugin-transform-class-properties
〜〜 省略 〜〜

なお、RailsでWebpackを使うためのWebpackerについてはこちらで解説しているので、ぜひ参照してみてください!

WebpackでjQueryとBootstrapを使う設定

Webpackを使ってYarnでインストールしたjQueryとBootstrapを使えるように設定します。

Asset Pipelineのマニフェストで追加したモジュールは、Webpackではエントリーポイントに追加します。

app/javascript/packs/application.js:

import 'jquery/dist/jquery.js'
import 'popper.js/dist/popper.js'
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap.css'

Webpack用のタグに変更します。

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

〜〜  省略 〜〜
 <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
↓変更
 <%= stylesheet_pack_tag    'application' %>

 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
↓変更
 <%= javascript_pack_tag    'application' %>
〜〜  省略 〜〜

BootstrapがjQueryを参照できるようにするためにjQueryがどこでも参照できるように設定します。

Popper.jsについても同様です。

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',
      Popper: 'popper.js/dist/popper'
  })
)
module.exports = environment

以上で設定作業は終わりました。

http://localhost:3000/hello/world にアクセスして、サンプル画面を確認してみましょう。


このように、WebpackでもBootstrapがインストールできました。

まとめ

いかかでしたか?

今回は、Rails5.1で使えるようになったのYarnについて解説しました。

YarnはNode.js(JavaScript)のパッケージマネージャです。

Railsでモダンなフロントエンド開発をするためにはYarnでNodeモジュールのパッケージ管理が必須になってくるため、ぜひ使ってみてください。

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

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次