導入編
コメントの書き方
- 1行コメント
// コメント - 複数行コメント
/* コメント */ - JSDoc(関数・引数・戻り値の説明)
/** コメント */
※ JSDocは IDE補完・可読性向上用。動作には影響しない。
JavaScriptファイルの基本
- 拡張子:
.js - 文字コード:UTF-8
- 改行コード:
LF(CR/LFでも動作上は問題なし)
※ UTF-8で統一しておくと、
HTML / CSS / JS / CSV すべて噛み合う。
HTMLにJavaScriptを書く場所
- DOM読み込み完了後に確実に実行したい場合
- 古くからある安全な書き方
- bodyタグの終了の前
<script src="main.js"></script>
</body>外部JavaScriptファイルの読み込み
基本形
<script src="main.js"></script>defer 属性(推奨)
<script src="main.js" defer></script>- HTML解析と 並行して読み込み
- DOM構築完了後に実行
DOMContentLoadedを意識しなくてよくなる- 👉 今どきはほぼこれ一択
type 属性
通常スクリプト
<script src="main.js"></script>ES Modules(推奨)
<script type="module" src="main.js"></script>import / exportが使える- 自動的に
defer相当の挙動 - スコープが分離される(グローバル汚染防止)
- 👉 新規で書くなら module前提でOK
scriptタグの属性まとめ
| 属性 | 役割 |
|---|---|
| src | 外部JSファイル指定 |
| defer | DOM構築後に実行(非同期) |
| async | 読み込み完了次第すぐ実行(順序保証なし) |
| type=”module” | ES Modules 有効化 |
※ async は依存関係がある処理では事故りやすい
コメント