備忘録です。
wapperとcontainerの違い
| クラス名 | 役割のイメージ | 構造的か否か | 具体例 |
|---|---|---|---|
container |
幅の制御と配置という単なるレイアウト機能を提供する。 | 機能的 | 「幅を1200pxに制限する」という目的のみを持つ。 |
wrapper |
特定のセクション全体を包み、そのセクションの開始と終了、全体的なスタイルを定義する。 | 構造的 | 「ヘッダーセクション全体」や「メインコンテンツ全体」を包む。 |
scriptタグを書く位置について
| 記述方法 | 順位 | 理由（簡潔） |
|---|---|---|
<head> 内 + defer 属性 |
第1位 | 最速のダウンロードと安全な実行を両立。HTMLパースをブロックせず、DOM構築後に実行されるため、パフォーマンスと機能面で優れる。 |
</body> の直前（属性なし） |
第2位 | 最もシンプルで確実。DOMが完全に準備された状態で実行されるため、DOM操作のエラーリスクが低い。互換性も高い。 |
<head> 内 + async 属性 |
特殊 | 外部の追跡タグや依存関係のない独立したスクリプトに限定。非同期で実行されるが、実行順序が保証されない。 |
<head> 内（属性なし） |
非推奨 | 必須の設定やポリフィルなどごく特殊なケースのみ。HTMLパースをブロックし、ページの描画を遅延させる。 |
HTMLパースとは、ブラウザが画面上にコンテンツを正しく描画（レンダリング）できるように、HTMLのテキストを意味のある構造に変換することです。
-
<head> + deferが選ばれるのは、「コンテンツの表示を妨げない」という</body>直前配置の最大のメリットを保ちつつ、「スクリプトファイルのダウンロードをより早く開始できる」**という<head>配置のメリットを取り込めるためです。 -
</body>直前の方法は、特別な属性が不要なため、今でもシンプルで信頼性の高い選択肢として広く使われています。
推奨される理由
1. 🚀 パフォーマンスと体感速度の向上
ブラウザは通常、<script>タグを見つけると、HTMLの解析（パース）を一時停止し、スクリプトのダウンロードと実行を優先します。
-
<head>や途中に置くと、スクリプトの処理が終わるまでコンテンツの表示が遅延し、ユーザーは「何も表示されない白い画面」を見ることになり、体感的な読み込み速度が低下します。 -
</body>直前に置くと、HTMLのパースとコンテンツ表示を最優先で行えるため、ユーザーはすぐに画面を見ることができ、体感速度が向上します。
2. 🧱 DOM操作の確実性
JavaScriptはHTML要素（DOM）を操作しますが、操作対象の要素が存在しなければエラーになります。
-
</body>直前で実行すれば、その手前のすべてのHTMLコンテンツは既にパースされ、DOMツリーに組み込まれているため、JavaScriptが要素を確実に操作できます。 -
<head>内で実行すると、操作したい要素がまだ読み込まれていない可能性が高く、エラーになるリスクがあります。