JavaScript
ライブラリの利用
外部ライブラリの選定基準、推奨ライブラリ、管理ルール
ライブラリやモジュールを活用してなるべく少ない工数で実装できることが望ましいですが、利用するライブラリが信用できるかどうかは十分に検証する必要があります。
ライブラリを利用するということは、将来的にそのライブラリが提供する機能やセキュリティに問題が発生した場合、そのライブラリをアップデートまたは別のものに置き換えたりする必要があることを意味します。
これはクライアントのウェブサイトを継続的に保守運用できるかどうかで慎重に判断する必要があります。
これはクライアントのウェブサイトを継続的に保守運用できるかどうかで慎重に判断する必要があります。
推奨ライブラリ
次に上げるライブラリは利用しても構いません。
これら以外のライブラリを利用する場合は ライブラリ選定基準 に基づいて適切にライブラリの利用を検討してください。
UI ライブラリ
- Swiper - カルーセル・スライダー
- Embla Carousel - カルーセル・スライダー
アニメーションライブラリ
- GSAP - 高性能なアニメーション
DOM API ラッパー
- jQuery（3 系最新版） - DOM 操作の簡略化
ライブラリ選定基準 {#ライブラリ選定基準}
ライブラリを選定する際は、まずアクティブに開発が続けられているか、定期的なアップデートや GitHub での活動状況、コミュニティのサポート体制を確認してください。
また、セキュリティ上の問題がないか事前に調査し、メンテナンス性や将来的なバージョンアップ対応も考慮してください。プロジェクトの規模や要件に対して過剰な機能を持つライブラリは避け、既存のプロジェクト構成やコーディング規約と整合性が取れているかも確認することが大切です。
ライブラリ管理ルール
基本方針
ライブラリや外部モジュールを使用する際は、まず必ずライセンスを確認してください。また、そのライブラリが本当に必要かどうかを検討し、必要最小限のものだけを導入するようにしてください。
CMS やその他の制約がある場合は外部ファイルとして読み込んでも構いません。その場合はダウンロードしてウェブサイトと同じサーバーにホストしてください。
CDN 利用について
CDN の配信サーバが障害を起こした際に影響を受けてしまうため、CDN からの直接参照は避けてください。
CDN の配信サーバが障害を起こした際に影響を受けてしまうため、CDN からの直接参照は避けてください。
<!-- ❌ CDNから参照している。 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- ✅ サイトと同じサーバに配置して参照する。 -->
<script src="/js/jquery.min.js" defer></script>
ディレクトリ構造
/assets/vendor/
├── jquery/
│ ├── jquery-3.6.0.min.js
│ └── LICENSE.txt
├── swiper/
│ ├── swiper-bundle.min.js
│ ├── swiper-bundle.min.css
│ └── LICENSE
└── gsap/
├── gsap.min.js
└── LICENSE
実装例
ライブラリ管理例
<!-- 外部ライブラリの読み込み -->
<head>
<!-- jQuery 3.6.0 -->
<script defer src="/assets/vendor/jquery/jquery-3.6.0.min.js"></script>
<!-- Swiper 8.4.5 -->
<link rel="stylesheet" href="/assets/vendor/swiper/swiper-bundle.min.css" />
<script defer src="/assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- 自作スクリプト -->
<script defer src="/assets/js/common.js"></script>
</head>
package.json での管理（推奨）
{
"name": "project-name",
"version": "1.0.0",
"dependencies": {
"swiper": "^8.4.5",
"@splidejs/splide": "^4.1.4",
"gsap": "^3.12.2"
},
"devDependencies": {
"webpack": "^5.74.0",
"babel-core": "^6.26.3",
"copy-webpack-plugin": "^11.0.0"
}
}
npm スクリプトでの自動化
{
"scripts": {
"install-vendor": "npm run copy-jquery && npm run copy-swiper",
"copy-jquery": "cp node_modules/jquery/dist/jquery.min.js assets/vendor/jquery/",
"copy-swiper": "cp -r node_modules/swiper/swiper-bundle.* assets/vendor/swiper/",
"build": "webpack --mode production",
"dev": "webpack serve --mode development"
}
}