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