エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

【DAY19】jQueryのライブラリを使う。スライダー(カルーセル)を作る【#30DAYSトライアル2nd】

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

【DAY19課題】jQueryのライブラリを使う。スライダー(カルーセル)を作る

デイトラDAY19の課題は「jQueryのライブラリを使う。スライダー(カルーセル)を作る」です。

 

私はWEB関連の知識が無いので、はにわまんさん記事の中で出てきた単語を調べてみました。

 

スライダーとカルーセル【定義】

スライダー、カルーセルはほぼ同じ意味で使われることが多いようです。

一応、言葉の定義を確認しておきます。

 

スライダーは厳密には、現在位置を表す印のことらしいです

※厳密さにこだわってお客さんと話す必要はないと思いますけどね

現在位置を表す印をスライダー、スライダーが移動できる棒状の領域をスライダーバー(slider bar)

スライダーバーは、ウィンドウの表示領域を指し示すものはスクロールバー(scroll bar)とも呼ばれる

スライダー(スライダーバー)とは - IT用語辞典 e-Words

 

カルーセルは「回転木馬」という英単語です。

右端と左端が繋がっているので、裏側で「回転している」ということですね

コンピュータの操作画面を構成する要素の一つで、写真など複数の項目が横に並んでおり、これをマウスやタッチ操作で左右にスライドして項目を入れ替えることができる表示領域をカルーセルという。

カルーセルとは - IT用語辞典 e-Words

 

WEB制作で使う用語の学習メモ

WEB制作で使う用語を勉強しました

アローボタン、アローアイコン

アローボタン、アローアイコンについては、はにわまんさんの記事が参考になります。

以下のようなものが「アローアイコン」ですね

そのアイコンを使っているものが「アローボタン」という解釈で良いと思います

CSSで表現できるボタンの基本パターン(※ Font Awesomeを使うものもあり) | HPcode

 

ページネーション

 ページネーション(ページ割り)は

  • 内容の多いページを複数のページに分割する
  • 各ページ間をつなげるためのリンクを設置する

ことで実現できます。

 

Googleの検索結果もページネーションが使われていますね

  • 検索結果を10ページごと に分ける
  • 検索結果の一番下で別ページ(例:検索結果2ページ目)へのリンクを設置する

という感じ!

 

GitHub

スライダーのJavaScriptライブラリをダウンロードするときには、GitHubを使う場合があります。

GitHubとは、簡単に言うと「共用のソースコード置き場」です。

今回のようなライブラリ(ソースコードの集まり)を作った有志が、その成果物を置いている場所です。

※Gitとは?バージョン管理とは?みたいな話はとりあえず知らなくてOK

 

ライブラリのちょっとした解説【Swiper】

今回、はにわまんさんが紹介していた記事が非常にクオリティが高いので、そちらを参考にすれば出来ることがかなり増えます。

haniwaman.com

 

「ライブラリを初めて使う&何やっているか分からない」という人向けに簡単な解説をします。

 

</body>の直前に<script src="~~/swiper.js">を書かない理由

今まで、progateなどでも</body>の前に<script src="~~.js">を書くように!

と言われていました。

今回は、</body>の直前ではなく、JavaScriptの処理の前に書いていました。

<body>

<script src="dist/js/swiper.js"></script>

<script> var swiper = (省略); </script>

</body>

 

これは、 src="dist/js/swiper.js"でライブラリを読込をして、それからライブラリを使っているからです。

JavaScriptは上から順番に処理が読まれるので、先に「このライブラリを使いますよ」と言う必要があります。

 

new Swiperって何?

「new Swiper」という書き方は、まだ学んでいない気がします(多分)。

とりあえずは、Swiperの初期設定をしているんだなーという理解でOKです。

 

色々と細かく書かれていますが、

var swiper = new Swiper( 省略 );

という記述で、スライドショーの設定をしているだけです。

 

Swiperの中身の記述

Swiperの中身の記述については、大きく分けると2つのことをやっているだけです

  1. 【A】swiperを適用するクラスを指定する
  2. 【B】オプションを使って、挙動を設定する

 

簡略化して書くと以下のように、Swiperに2つの引数(A、B)を与えています。

var swiper = new Swiper( '【A】クラスの指定', {【B】オプション処理} );

 

swiperを適用するクラスの指定

前者の【A】swiperを適用するクラスの指定では、

'.swiper-container'

という風に書いています。

これは、HTMLで事前に定義しているクラスですね。

この「swiper-container」というクラスを対象にするよ!ということ。

 

swiperのオプション設定【分かりづらい】

【B】のオプション設定が分かりづらいです。

まずオプション設定は、2つ目の引数として、連想配列を使っています。

※連想配列は「KeyとValueの組み合わせ」が集まったものです。

 

なので、書き方は 中括弧{} になっています。

以下の赤い部分ですね。

new Swiper( '【A】クラスの指定', {【B】オプション処理} );

 

あとは、連想配列の書き方に沿って

Key1 : Value1,

Key2 : Value2,

Key3 : Value3,

と書いていけばOKです。

 

例えば、

loop: true,

speed: 100,

autoHeight: true,

みたいな感じです。

 

ここで、分かりづらくしているのがKey「navigation」です。

これも結局はKeyとValueの組み合わせです。

しかし「loop : true」などと違うのは、Valueが連想配列である点です。

よく見ると分かりますが

navigation : { }

という形で、Value部分が連想配列(中括弧{})になっています。

 

ということで、骨組みとしては

navigation : { nextEl: ~~, prevEl: ~~ },

loop: true,

speed: 100,

となっています。

 

~~~

以上のような感じで、やっていることの骨組みがつかめることが重要です。

 

あとは、ドキュメントを読みつつ、何か設定したい値があればそれを設定すれば大丈夫です。

※英語で読むこと&書き方に慣れるのは、ある程度慣れが必要ですけどね(最初のうちは、皆うまくいかないと思います)

 

以上、DAY19の解説でした。

プログラミング未経験者にはかなり難しい気がします。

※とりあえずコピペして先に進みつつ、徐々に慣れていくでも良い気もします

 

他の日の記事はこちらにまとめています↓

www.engineer-step.com