第5回 ライブラリ活用（7/6）

科目：フロントエンド表現演習

到達目標 外部ライブラリ（Swiper）を導入し、基本オプションの設定・カスタマイズができる。ライブラリのドキュメントを自力で読み解く姿勢を身につける。

1コマ目：導入と基本実装

① 導入・イントロ

• なぜライブラリを使うのか（車輪の再発明を避ける／実務での活用頻度）
• 「ゼロから実装する力」と「ライブラリを使いこなす力」の両方が必要

② Swiperとは

• Swiperの概要：スライダー・カルーセル実装用JSライブラリ
• 公式サイトの見方：Demos／API／Get Startedの各ページの役割を解説
• CDN版とnpm版の違い（本講座はCDN版を使用）

③ 導入

CDNの読み込み方法

<!-- head内 -->
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css>" />

<!-- body終了直前 -->
<script src="<https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js>"></script>

基本HTML構造（swiper／swiper-wrapper／swiper-slide）

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

初期化コード

const swiper = new Swiper('.swiper', {
  loop: true,
});