【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【13週間目】

当記事はデイトラでWEB制作コースを受講して13週間、どんな状況でどんな勉強をしているのかまとめています!

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

未経験でもできるの？
他の人がどんな風に勉強しているのか知りたい。
デイトラを受講したいと思っているけどどんなものなの？

そんな方の判断材料になれば幸いです！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

ばく

13週目はswiperというものをひたすらいじっていました。難しい～！

当記事内ではswiperについて初学者から見た使い方を解説しています。同じくスワイパーの扱いがわからない、よくわからんという方に届いたらうれしいです。

図解入りで説明しています！

＼デイトラを受けるならここから／

Swiper(スワイパー)とは？
SwiperのHTMLを図解化する
- HTMLの構造を図解化しました。
swiperのJavaScriptはよく見たら単純！
【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【13週間目】❘まとめ

Swiper(スワイパー)とは？

スライドしてみてね→

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

スライドショーが実装できるJavaScriptのプラグインになります。

プラグインとは「拡張機能」の事で、Swiperはスライドショーを実装するための拡張機能の名前ですね！

これを使えば簡単にスライドショーが実装できる！と話題(らしい）のですが、使い方が難しく、悪戦苦闘していました。

デイトラ内でも簡単に使い方を説明してもらえますが、HTML、CSS、JavaScriptが絡んでくるためJavaScriptに慣れていないとすごく難しく感じます。

ばく

簡単に実装できる！とのことですが、やれることの幅が広すぎて把握できない感じです。

スワイパーのデモをコード付きで紹介している公式サイトを3日間ずっと見て、触っていました。それでもやっぱりよくわからん！

ちなみに、↑のスワイパーはワードプレスだとこんな風に書いています。

各クラスにstyle当てているだけです。長い。

<swiper-container
  class="mySwiper"
  pagination="true"
  pagination-type="fraction"
  style="height: 428px"
>
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #8bf09d;
    "
    >スライドしてみてね→</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #6ebaa8;
    "
    >Slide 2</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #6589ab;
    "
    >Slide 3</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #5b5ba6;
    "
    >Slide 4</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #9660b5;
    "
    >Slide 5</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #9660b5;
    "
    >Slide 6</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #9660b5;
    "
    >Slide 7</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #a653a2;
    "
    >Slide 8</swiper-slide
  >
  <swiper-slide
    style="
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: grid;
      place-items: center;
      background-color: #802e53;
    "
    >Slide 9</swiper-slide
  >
</swiper-container>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>