はじめに

以前ご紹介した記事ではHTMLファイルにコドンを埋め込む方法で実装したのですが、Rails6系からはWebpackerが導入されているのにもかかわらず、そのような方法を取るのはいけてないよなあと思ったので記事を書くことにしました。

Webpackerとは

以下公式ページからの引用です。

Webpacker makes it easy to use the JavaScript pre-processor and bundler webpack 5.x.x+ to manage application-like JavaScript in Rails. It coexists with the asset pipeline, as the primary purpose for webpack is app-like JavaScript, not images, CSS, or even JavaScript Sprinkles (that all continues to live in app/assets).

Webpackerはあくまでも、WebpackをRailsに取り込むためのgemです。このWebpackによりJavascriptをコンパイルすることができます。rails newコマンドでrailsアプリを立ち上げた際には、自身のJavaScript pack（つまりapplication.js）はapp/javascript/packs/の下に置かれ、app/views/application.html.erbの<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>の記述によりインクルードされます。

npm

npmはJapascriptのパッケージマネジャです。npmは、ダウンロードしたパッケージを./node_modulesに保存し、パッケージのリストを./package.jsonに保存します。さらに./package-lock.jsonにて依存関係を記録し、node_modulesを再現可能なものとします。

いざ、導入

ここまでの話から、「npmでBootstrapをインストールして、Webpackerでコンパイルすればいいよね」ということになります。よって以下のコマンドを打ちます。

npm install bootstrap

すると以下のように表示されると思います。

added 3 packages, changed 2 packages

パッケージが3つインストールされていますね！npmはこのように依存関係にあるパッケージをインストールすることができるのです。最後にapp/javascript/packs/applicaton.jsにrequire("bootstrap")と読み込んであげれば導入完了です！

まとめ

同様の方法でjQueryなどその他のパッケージも導入することもできます。Webpackerとnpmを理解してスマートにJavascriptのパッケージを導入しましょう。