railsのapp.jsで使う「//=」と「import」の違いがわかりません

Rails6でプロジェクトビルド中

application.js
1//= require jquery
2//= require jquery.turbolinks
3//= require rails-ujs
4//= require activestorage
5//= require turbolinks
6//= require_tree .
7
8import 'bootstrap'
9import '@fortawesome/fontawesome-free/js/all'
10import '../src/application.scss'

application.jsにbootstrapやfontawesome、jqueryを入れようとしているのですが、import文で記述した方はうまく読み込めていて、require文で入れようとした分は全然うまくいきません。

そもそも//=とimportの違いがよくわからないです。
どなたかこの違いについてご教示いただけないでしょうか。

【追記】
jQueryが導入できなかった原因について

app.html.erb
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

このコードを<head>タグ内に追記することで解決しました。
結局のところ、js_pack_tagでインストールしても問題は解決しなかったので、CDN経由で導入しました。
原因の特定は残念ながらできませんでした、、、

行動規範の内容に同意します

回答1件

ベストアンサー

Sprocketsとwebpackerの違いです。

もし、app/assets/javascriptsの配下にJavaScriptが置いてある場合は、Sprocketsですので//= require ...や//= require_tree .の記述を使って下さい。

もし、app/javascriptの配下にJavaScriptが置いてある場合は、webpackerですので、require(...)やimport ...を使って下さい。この場合は、webpackerが利用するwebpackのドキュメントを参考にして下さい。import文はES2015+の構文ですので、MDNのJavaScriptのドキュメントも参考になります。

今日のコラム：JavaScriptのモジュール実装の歴史(Rails編)

もともとJavaScriptにはモジュールやライブラリという概念はありませんでした。ブラウザで複数のJavaScriptを指定した場合、それらは単に結合され、一つのJavaScriptのように動作します。JavaScriptの中で別のJavaScriptを呼び出すと言ったこともできなかったのです。つまり、複数のJavaScriptにわかれて記述する場合、HTML上に一つ一つscriptタグで指定していく必要があったと言うことです。順番も依存関係を考慮しなければなりませんし、競合した場合の解決方法も容易ではありません。

それではあまりにも不便なため、Sprocketsというものが開発されました。JavaScriptとしてはただのコメントですが、特殊なコメントを書くことで、他のJavaScriptをその部分に自動的に埋め込むようにしたのです。そのJavaScriptが依存しているものだけを書けば済みますし、それぞれのJavaScriptについてはIIFEにしておけば、競合も防げます。

また、JavaScript単独でもモジュールやライブラリを扱いたいと思う人は多くいました。Sprocketsとは別でCommonJS(requireを使う方法)やAMD等の手法が作られました。Node.jsが採用したとあって、CommonJSが主流になっていきました。

ブラウザ環境でのCommonJSは他のJavaScriptを動的に読み込むのではなく、Sprocketsのように予め複数のJavaScriptを結合して一つのファイルにするというものです(Node.js環境では動的に読み込みます)。その結合するツールとしてBrowserify、webpack、Rollup等が作られました。その中でも、webpackはJavaScriptだけではなくCSSや画像なども総合して扱えると言うこともあって、人気が出ました。

やがて、ES2015がリリースされ、JavaScriptの正式なモジュールの読み込み方法としてimport文が作られました。初めはやや混乱していましたが、import文はCommonJSにやや近い作りであったため、import文をCommonJSに変換できるようになりました(Babelを使用)。その時点でimport文が使えていたのですが、メインJavaScriptから使用される必要なコードだけを取り込むことを実装するために、webpack自体がimport文をサポートするようになりました。

時は経って、Railsの話です。ES2015リリース以降、JavaScript界隈はJavaScriptだけで動作するモジュールのエコシステムが発展し、多くの開発者もそれを使うようになりました。このとき、RailsのSprocketsはやや時代遅れなシステムになってしまっていたのです。そこで、Railsの開発者はwebpackを使ってJavaScriptを管理できるようにしました。そうして開発されたのがwebpackerで、Rails 5.1から使用できるようになりました。Rails 6からはJavaScriptのデフォルトをwebpackerに変更し、新規作成した場合は、Sprocketsは作らずに、webpackerのファイルのみ作られるようにしました。

ということで、新規アプリケーションでSprocketsの書き方をすることは今後ほとんどないと思います。import文の書き方はES2015+そのものですので、ES2015+を学んでいくと良いでしょう。

明日のコラム：ブラウザがネイティブにモジュールを扱う時代へ…(妄想編)

将来的にはwebpackもいらなくなると私は思っています。最新のモダンブラウザはモジュールベースのJavaScriptに対応しており、ES2015+構文のimport文をネイティブに取り扱えるからです。もはや、メイン処理のJavaScriptのライブラリのJavaScriptを一緒にしておく必要などありません。むしろ、ライブラリを独立して動的に読み込ませるのであれば、別々のメイン処理が書かれたJavaScriptを設置する場合、容量や転送量(同じライブラリならキャッシュされる)も削減されます。公開されたライブラリならCDNを使っても良いでしょう。

そんな時代が来たとき、webpackですら無用の長物になるような気がします。まぁ、先のことはわかりませんが。

投稿2020/02/22 22:35