ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
結論: 現代のベストプラクティス
例
コンテンツ
script タグの 3 つの読み込みモード
| モード | HTML パース | 実行タイミング | 順序保証 |
|---|---|---|---|
(素) | ブロック | ダウンロード完了次第即実行 | ○ |
| ブロックしない | HTML パース完了後、DOMContentLoaded 前 | ○ |
| ブロックしない | ダウンロード完了次第即実行 | × |
| ブロックしない | defer と同等 | ○ |
歴史: なぜ 末尾に置くテクニックが流行ったか
2000 年代後半〜 2010 年代前半、まだ defer/async が普及していなかった頃、 を に置くと:
- ブラウザは HTML パース中に script タグに遭遇
- JS ファイルのダウンロード・実行が完了するまでHTML パースを停止
- 結果、ユーザーには白画面が長く表示される
これを避けるため、「 の直前に置けば HTML パースは終わってる」というテクニックが広まりました。jQuery 全盛期の Web 制作本はほぼこのスタイルです。
例
コンテンツ
defer 属性 (推奨)
defer を付けると、ブラウザは:
- script を並行ダウンロード (HTML パースをブロックしない)
- HTML パース完了後に、記述順に実行
DOMContentLoadedイベントの直前に実行される
async 属性
async も並行ダウンロードしますが、ダウンロードが完了した順に即実行します。順序は保証されません。
type="module" (ES Modules)
ES Modules (import/export を使うモジュール) は常に defer 扱いです。明示的に defer を書かなくても OK:
Critical CSS との関係 (Web Vitals)
Core Web Vitals の LCP (Largest Contentful Paint) 改善には、ファーストビュー描画を阻害しないことが重要です。defer / async の徹底に加え、Critical CSS のインライン化を組み合わせます:
Resource Hints (preload/prefetch/preconnect)
ヒントを使うとさらに高速化できます:
サードパーティ JS の遅延読込
チャットウィジェット・コメント欄・SNS シェアボタン等、ファーストビューに不要な JS は意図的に遅延させると Web Vitals が上がります:
// ユーザー操作後にチャットウィジェットを読み込む
document.addEventListener('scroll', loadChat, { once: true });
document.addEventListener('click', loadChat, { once: true });
function loadChat() {
const s = document.createElement('script');
s.src = 'https://widget.example.com/chat.js';
s.async = true;
document.head.appendChild(s);
}
// または IntersectionObserver で要素が見えたとき
const obs = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
const s = document.createElement('script');
s.src = '/js/comments.js';
document.head.appendChild(s);
obs.disconnect();
}
});
obs.observe(document.querySelector('#comments-section'));
使い分け早見表
| JS の種類 | 推奨配置 | 属性 |
|---|---|---|
| 自前のアプリケーション JS | head 内 | defer |
| ES Modules | head 内 | type="module" |
| GA / GTM / Facebook Pixel | head 内 | async |
| jQuery + プラグイン | head 内 | defer (順序保持) |
| インライン script (極小) | head 内 or body 内 | 属性不要 |
| レガシーブラウザ対応 (IE11) | body 末尾 | 属性なし |
FAQ
Q: defer と async どちらが速い?
A: ダウンロード速度は同じ。実行タイミングが違うだけです。順序が必要なら defer、不要なら async。
Q: インライン に defer は効く?
A: 効きません。defer/async は外部ファイル (src 指定) にのみ有効です。
Q: body 末尾でも defer は必要?
A: body 末尾なら不要ですが、現代では head + defer に統一すると保守しやすいです。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- git remote 完全ガイド — add/rm/-v/set-url/rename/prune、origin と upstream の使い分け 2026-06-11 02:43:48
- HTML em 要素の正しい使い方(口調強調・スクリーンリーダー・strong との違い) 2026-06-11 02:43:48
- HTML5 footer 要素の正しい使い方(複数配置可・SEO・ARIA role=contentinfo) 2026-06-11 02:43:48
- NetBeans に git を導入する手順 — プラグイン有効化、リポジトリ Clone、Commit / Push / Pull、SSH 鍵設定 2026-06-11 02:43:48
- UE5 HighResShot コンソールコマンドで超高解像度スクリーンショットを保存する手順 2026-06-11 02:43:48
- PyCharm Professional を Mac にインストールする手順(Toolbox / dmg / Apple Silicon 対応) 2026-06-11 02:43:48
- host コマンド完全ガイド — DNS 正引き/逆引き/MX/TXT/CNAME 確認、dig / nslookup との比較 2026-06-11 02:43:48
- Apache httpd.conf で .htaccess を有効化する手順 — AllowOverride All、性能影響、Nginx との比較 2026-06-11 02:43:48
- Unity Terrain の Raise/Lower / Set Height / Smooth / Stamp と Heightmap 編集まとめ 2026-06-11 02:43:48
- Django Admin の有効化・スーパーユーザ作成・モデル登録・URL アクセス手順 2026-06-11 02:43:48
- WSL2 インストール完全ガイド — wsl --install、Ubuntu 設定、.wslconfig、Windows Terminal/VS Code 連携、CUDA 2026-06-11 02:43:48
- ルーティングテーブル確認コマンド — Linux ip route / Windows route print / PowerShell Get-NetRoute 2026-06-11 02:43:48
- git「Another git process seems to be running」.git/index.lock の原因と消し方 2026-06-11 02:43:48
- Inno Setup 入門(ISL スクリプト・セクション構造・Pascal Script・署名・NSIS との比較) 2026-06-11 02:43:48
- FileZilla 完全ガイド(インストール・SiteManager・SFTP/FTPS・転送設定・トラブル対処) 2026-06-11 02:43:48
コメントを削除してもよろしいでしょうか?