ライブラリ・モジュールの利用

ライブラリやモジュールを活用してなるべく少ない工数で実装できることが望ましいですが、利用するライブラリが信用できるかどうかは十分に検証する必要があります。

ライブラリを利用するということは、将来的にそのライブラリが提供する機能やセキュリティに問題が発生した場合、そのライブラリをアップデートまたは別のものに置き換えたりする必要があることを意味します。これはクライアントのウェブサイトを継続的に保守運用できるかどうかで慎重に判断する必要があります。また、このリスクや責任範囲に関しては受注前にクライアントと十分な説明と合意を得ることが必要です。

次に上げるライブラリは利用しても構いません。ただし、これら以外のライブラリを利用する場合は相談を必ずしてください。

• Polyfill
  • core-js
  • @oddbird/popover-polyfill
  • invokers-polyfill
• インタラクション検知
  • what-input
• DOM API ラッパー
  • jQuery
• UIライブラリ
  • Splide

利用方法

基本的にはyarnでNPMからインストールして実装するファイルにimportして利用します。

$ yarn add @splidejs/splide

インストールしたパッケージの共有

追加インストールした際にpackage.jsonのdependenciesにモジュールが追加されることを確認してください。package.jsonとyarn.lockの変更はコミットして共有する必要があります。

// importして利用する
import Splide from '@splidejs/splide';
import '@splidejs/splide/css';

new Splide('.c-carousel').mount();

CMSやその他の制約がある場合は外部ファイルとして読み込んでも構いません。その場合はダウンロードしてウェブサイトと同じサーバーにホストしてください。

STOP

CDNから直接参照は避けてください。

<!-- ❌ CDNから参照している。 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- ✅ サイトと同じサーバに配置して参照する。 -->
<script src="/js/jquery.min.js" defer></script>

CDNの配信サーバが障害を起こした際に影響を受けてしまうためです。

TypeScriptの型定義の読み込み

TypeScriptでは利用する際に型定義ファイルが必要になる場合があります。@types/から始まるパッケージは必要に応じてインストールしても構いません。

yarn add -D @types/jquery