JavaScript
HTML への読み込み
type="module"とdefer属性によるスクリプト読み込みのベストプラクティス
スクリプトの読み込み時、<head> タグ内で defer 属性や type="module" を活用することで、パフォーマンスを損なわずにスクリプトを読み込めます。
モジュール方式（推奨）
ES6 モジュールを利用する場合は、type="module" を指定して読み込みます。これにより、スクリプトは自動的に遅延実行され、依存関係も管理しやすくなります。
<head>
<script type="module" src="/assets/js/main.js"></script>
</head>
defer 属性を使用
従来のスクリプトを利用する場合は、defer 属性を付与することで HTML のパースを妨げずにスクリプトを読み込めます。
<head>
<script defer src="/assets/js/common.js"></script>
<script defer src="/assets/js/page-specific.js"></script>
</head>
defer 属性の利点
- HTML パース中断なし：HTML の解析を中断せずにスクリプトをダウンロード
- 実行順序保証：記述順序通りにスクリプトが実行される
- DOMContentLoaded 前実行：DOM 構築完了後、DOMContentLoaded イベント前に実行
- パフォーマンス向上：ページの読み込み速度が向上
例外的なケース
一部のケースでは、即座に実行したいスクリプトや初期化処理が必要な場合があります。その場合は、インラインスクリプトや defer を使わない読み込みも検討します。
<!-- インライン初期化スクリプト（最小限に） -->
<head>
<script>
// 重要な初期設定のみ
window.APP_CONFIG = {
apiUrl: "/api",
debug: false,
};
</script>
</head>
<!-- 外部ライブラリで即座の実行が必要な場合 -->
<head>
<script src="/assets/vendor/critical-lib.js"></script>
</head>