質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

2256閲覧

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

weekplane

総合スコア29

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/02/22 15:44

編集2020/02/23 02:26

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経由で導入しました。
原因の特定は残念ながらできませんでした、、、

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

raccy

総合スコア21737

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

weekplane

2020/02/23 02:23

ご丁寧なご回答ありがとうございました。 添付していただいたコラムもわかりやすく、理解することができました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問