回答編集履歴
1
指摘の入った箇所を修正
answer
CHANGED
|
@@ -30,9 +30,14 @@
|
|
|
30
30
|
jQuery等の外部ライブラリが必要になった時は全て本命のJSより上の行で宣言してください。
|
|
31
31
|
（既存のプロジェクトは全てそうなっているはずです）
|
|
32
32
|
|
|
33
|
-
HTML5でこのルールに従わない挙動が可能ですが、
|
|
33
|
+
HTML5ではこのルールに従わない挙動が可能ですが、
|
|
34
34
|
[例外に関してはこの辺の記事](https://qiita.com/phanect/items/82c85ea4b8f9c373d684)を読んでみてください。
|
|
35
35
|
|
|
36
|
+
※ES2015という新しい仕様でimport構文が追加されましたが、
|
|
37
|
+
JSコード単体が勝手に外部のJSを読み込んでロードするほどの機能はありません。
|
|
38
|
+
使い方はこの質問のマイスマ君さんの回答を参考にしてみてください。
|
|
39
|
+
[https://teratail.com/questions/124725](https://teratail.com/questions/124725)
|
|
40
|
+
|
|
36
41
|
### 外部ライブラリの実装
|
|
37
42
|
|
|
38
43
|
基本的にはグローバル変数領域に直書きで`var jQuery = function...`という風な事が記載されています。
|
|
@@ -44,7 +49,8 @@
|
|
|
44
49
|
グローバル変数領域に自分のライブラリ名だけ宣言しておき
|
|
45
50
|
中身はクラス的なものを配置、`jQuery.hoge(123)`という風にプロパティやメソッドにアクセス使うという設計になっているのが一般的です。
|
|
46
51
|
|
|
52
|
+
※IE11がimport/exportに対応していない為、
|
|
47
|
-
|
|
53
|
+
後5年程度はimport構文を使って読み込むライブラリは出ないでしょう。
|
|
48
54
|
|
|
49
55
|
### main関数の代わり
|
|
50
56
|
|
|
@@ -67,8 +73,9 @@
|
|
|
67
73
|
### DOMのレンダリングを待つ方法
|
|
68
74
|
|
|
69
75
|
- `body.onload = fn`: バッドプラクティス
|
|
70
|
-
- `window.addEventListener('
|
|
76
|
+
- `window.addEventListener('DOMContentLoaded', fn)`: 基本はこれ
|
|
77
|
+
- `window.addEventListener('load', fn)`: 画像ファイル・CSSファイルの読み込みも待ってから発火したい場合はこちら
|
|
71
|
-
- `$(fn)`: jQueryのライブラリで用意されているエイリアス
|
|
78
|
+
- `$(fn)`: jQueryのライブラリで用意されているDOMContentLoaded相当のエイリアス
|
|
72
79
|
|
|
73
80
|
`fn`は関数を指しています。
|
|
74
81
|
変数に代入して持ってきても良いですし、こんな風にその場で宣言して格納しても良いです。
|