teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

追記部分より下の行を追記

2018/12/02 13:20

投稿

退会済みユーザー
answer CHANGED
@@ -11,4 +11,91 @@
11
11
 
12
12
  $でみたければ、自身で代入すればよいです。
13
13
  import jquery from 'jquery';
14
- window.$ = jquery
14
+ window.$ = jquery
15
+
16
+ ## 追記
17
+
18
+ `es5`というバージョンのjavascriptにはjsのモジュール化という仕組みがありません。
19
+ そのため、複数のjsファイルでのやり取りはグローバルオブジェクト(`window`)でやり取りを行います
20
+
21
+ hoge.js
22
+ ```javascrip
23
+ window.hoge = funciton(){ 処理 }
24
+ ```
25
+
26
+ piyo.hs
27
+ ```javascript
28
+ window.hoge(); //hoge.jsで定義した関数を使う
29
+ ```
30
+
31
+ このやり方は、ファイル数が増えれば増えるほど、定義場所が不明になったり、piyo.jsより先にhoge.jsを読み込むなど読み込む順を気にする必要があったりと、色々問題があり、あまりよろしくありません。
32
+
33
+ ----
34
+ `node`はこれを解決するために`commonJs`というjsファイルをモジュール化する仕組みを取り入れる事で解決しました。
35
+
36
+ hoge.js
37
+ ```javascript
38
+ module.exports.hoge = function(){ 処理 }
39
+ ```
40
+
41
+ piyo.js
42
+ ```javascript
43
+ var result = require('./hoge');
44
+ result.hoge(); //hoge.jsで定義した関数を使う
45
+ ```
46
+
47
+ このようにする事で、使用者が`require`で読み込むjsファイルを指定するので、定義場所は明確にわかりますし、
48
+ 読み込みの順番を管理する必要がないなど先ほどの問題を解決しました
49
+
50
+ `commonJs`についてはご自身で調べてください。
51
+
52
+ ---
53
+ `browser`でも、この仕組みを使いたい訳ですが、あくまで`node`で実装されている仕組みであり、`browser`では使えません。
54
+
55
+ これを`browser`でも使えるようにするために開発されたものが`webpack`です。
56
+
57
+ ---
58
+ `jquery`は`scriptタグ`で読み込まれたか`require`(`import`)で読み込まれたか検知する仕組みがはいており、
59
+ `scriptタグ`で読み込まれた場合は、`window.jquery`(`window.$`)に展開し、
60
+ `require`(`import`)で読み込まれた場合は`module.exports`でjqueryオブジェクトを返すだけになっています。
61
+
62
+ そのため`import 'jquery'`でjqueryを読み込んでもwindow.$には何も入りません。
63
+
64
+ ---
65
+ ```javascript
66
+ import jquery from 'jquery'
67
+ window.$ = jquery;
68
+ ```
69
+
70
+ これを行うと問題は解決しますが、`webpack`でモジュール化をする利点が一切なくなります。
71
+ `webpack`を使うのであれば、個々のjsファイルで都度importするのが正しい使い方になります
72
+
73
+ hoge.js
74
+ ```javascript
75
+ import jquery from 'jquery'
76
+
77
+ jqueryオブジェクトを使う
78
+ ```
79
+
80
+ piyo.js
81
+ ```javascript
82
+ import jquery from 'jquery'
83
+
84
+ jqueryオブジェクトを使う
85
+ ```
86
+
87
+ app.js
88
+ ```javascript
89
+ import './hoge';
90
+ import './fuga';
91
+
92
+ ```
93
+
94
+ ---
95
+ 最後にrequireとimportの違いですが、
96
+ `browser`にはモジュール化の仕組みがないと記載しましたが、新しいバージョンのjavascriptではモジュール化の仕組みが入りました。(chromeなどではもう使えますが、IEでは使えません)
97
+ これは、nodeのcommonJsと同じような仕組みなのですが、書き方が変わり、import/exportになっています
98
+
99
+ `esModule`と呼ばれる仕組みなので。ご自身で調べてみてください。
100
+
101
+ `webpack`は、どちらの書き方にも対応しているので、どちらの書き方も解釈することができます。