RailsにJSを書く前に、yarn, npm, webpack, webpacker, ES6を理解する。

  • npmを便利にしたものが、yarn

  • JSは、ES5からES6へ。クラスやアロー関数などが使えるようになった。(babelで変換可)

  • 上記のファイルの依存関係等をいい感じにまとめてくれるのが、webpackで、Railsにフィットさせるためのwebpackerというのがある。

npm

JavaScript(正確にはNode.jsモジュール)のパッケージマネージャです。言ってみれば、JavaScript世界におけるRubygemです。

npm = rubyでいうgem

npm install bootstrap

npmは、ダウンロードしたパッケージを./node_modulesに保存し、パッケージのリストを./package.jsonに保存します

yarn

npmよりずっと高速です。

npmより新しいパッケージマネージャです。yarnはnpmのリポジトリからパッケージを取得する点は同じ

ES6

クラス、アロー関数などでJSが書けるようになった

Babel

全てのブラウザでES6が動くわけではないので、EC5に変換するためのファイル。

Webpack

yarn, npm es5,es6などの依存関係を綺麗にまとめるもの。

webpacker

RailsアプリケーションにWebpackをいい感じに取り込めるgem

ルール

  • application.jsは、app/javascript/packs配下に置かれる。

  • viewにjsをincludeするには、

view
<%= javascript_pack_tag 'pages/index' %>

↓

app/javascript/packs/index.js
//ここにjsを書く。

参考;

https://techracho.bpsinc.jp/hachi8833/2020_01_16/85940

Rails 6: Webpacker+Yarn+Sprocketsを十分理解してJavaScriptを書く: 後編(翻訳)|TechRacho(テックラッチョ)〜エンジニアの「?」を「!」に〜|BPS株式会社

webpack

Webpackerを使ったRailsでのJavaScript開発 - クックパッド開発者ブログ

webpack学習の基本のき