#8 progateでjQueryを学んでwebエンジニアを目指す!~スライドとデータの取得編~

jQuery
この記事は約20分で読めます。
スポンサーリンク

webエンジニアを目指して勉強している当ブログ管理人。

今回も学んだ内容を記録していきます。

学んだコース

今回学んだコースはprogateというプログラミング学習サービスの【jQuery上級編】

今回でjQueryのコースは終了しましたので、これからは参考書などを活用して勉強していきたいと思います。

webエンジニアへの道

webエンジニアを目指して勉強する当ブログ管理人の記録です

progate学習記録

プログラミングのオンライン学習サービス[progate]を使って学習した記録です

学んだ内容

今回学んだのは

  • スライドの作り方
  • データのとり方
  • アニメーション
  • スクロール

といったjQueryを活用したパーツの作り方です。

記事の後半の備忘録で紹介したいと思います。

学んだ内容をアウトプット!

今回も学んだ内容を生かしてwebページを作成しました。

そのページがこちら

web系の勉強を開始してから1週間と少しでここまで来れました。

作成したページでは、jQueryを使ってスライドやデータの取得、アニメーションを行っています。

学んだ内容の備忘録(jQuery)

スライドの作り方

ボタンを押すことで画像の表示を切り替えるスライドの作り方です。

htmlでスライドとボタンを作成

はじめに、htmlとcssでスライドとボタンを作成します。

  • スライド(画像表示部分)
  • 次へ/前へボタン
  • セレクトボタン(画像枚数分)

を作ります。

次へ/前へボタンは押すと次/前の画像を表示するボタンで、セレクトボタンは押したボタンによって対応した画像を表示します。

矢印ボタンが次へ/前へのボタンで、グレーのボタンがセレクトボタン。画像が表示されているところがスライドです。

コードは以下のような感じ。

   <div class="change-btns">
      <div class="change-btn" id="prev-btn">
        <p>←</p>
      </div>
      <div class="change-btn" id="next-btn">
        <p>→</p>
      </div>
    </div>
    <div class="slides">
      <div class="slide active">
        <img src="1.jpg" alt="">
      </div>
      <div class="slide">
        <img src="2.jpg" alt="">
      </div>
      <div class="slide">
        <img src="3.jpg" alt="">
      </div>
      <div class="select-btns">
        <div class="select-btn"></div>
        <div class="select-btn"></div>
        <div class="select-btn"></div>
      </div>
    </div>

とても単純な構造だとわかるかと思います。

この時点では表示するスライドの制御を行っていないので、設置したスライド分の画像がそのまま表示されていると思うので、CSSでスライドが一枚になるように隠します。

スライドにはすべてslideクラスがついているので、これを見えなくしましょう。

ただ、常に1枚はスライドを表示させておきたいので1つのスライドにactiveクラスをつけて表示しておきます。

.slide{
   display:none;
}

.active{
   display:block;
}

このとき、activeクラスの設定はslideクラスの設定の下に書きましょう。

CSSは上から読み込まれていきますので、display:noneをdisplay:blockで上書きする必要があるからです。

次に、jQueryを書いていきます。

セレクトボタンを制御

まずは、セレクトボタンを押したときの挙動を設定します。

  • どのボタンが押されたのかチェック
  • 押されたボタンに応じてスライドを表示(activeをつける)
  • 次へ/前へボタンを隠す ※後述

コードは以下のようになりました。

//セレクトボタンがクリックされたとき
  $('.select-btn').click(function() {
    //何番目のボタンをか調べる
    var s_btn_index = $('.select-btn').index($(this));

    //activeを取り除く
    $('.active').removeClass('active');

    //ボタンと同じ番号のスライドを表示
    $('.slide').eq(s_btn_index).addClass('active');

    hide_change_btn();
  });

まず、押されたボタンが何番目のボタンかを調べます。

//何番目のボタンをか調べる
var s_btn_index = $('.select-btn').index($(this));

s_btn_indexという変数に、押されたボタンの番号を記録します。

$(‘セレクタ’)とすると、この中には取れた要素が配列のように入っています。

例ではselect_btnクラスを指定していますので、設置したセレクトボタンが[0,1,2…..]という番号で入っているイメージです。

ここでindex()を使います。

index()は、指定したセレクタが何番目に入っているかの番号を返してくれる関数です。

ここでは、index($(this))としているので「押されたボタン」がすべてのセレクトボタンの何番目にあるか調べることができます。

例えば、3つあるうちの真ん中のボタンを押したら1(0,1,2の中の真ん中)が帰ってきます。

こうして、何番目のボタンがクリックされたのか調べることができました。

次に、対応する番号のスライドを表示します。

    //activeを取り除く
    $('.active').removeClass('active');

    //ボタンと同じ番号のスライドを表示
    $('.slide').eq(s_btn_index).addClass('active');

CSSでactiveをつけているスライドのみ表示する設定にしてあるので、activeクラスを付け替えることでスライドの表示を切り替えます。

クラスを取り除くにはremoveClass(‘クラス名’)、クラスを追加するのにはaddClass(‘クラス名’)です。

まずactiveクラスを取り除く処理ですが、activeクラスは1つだけについている(1枚のスライドだけ表示されている)ので、普通にクラスを指定して取り除きます。

//activeを取り除く
$('.active').removeClass('active');

次に、押されたセレクトボタンの番号と同じ番号のスライドを表示します。

使うのはeq()という関数。eq()は番号を渡すことでその番号の要素を取得できます。

先ほど説明したように、$(‘.slide’)ではすべてのスライドが番号をつけられて取得されています。

これに対してeq()で番号を指定し、一つのスライドのみを取り出します。

取り出した1つのスライドにaddClassでactiveクラスを追加して表示しているということです。

//ボタンと同じ番号のスライドを表示
$('.slide').eq(s_btn_index).addClass('active');

次へ/前へボタンを隠す

この処理は何度か使うので関数にしました。

関数は以下のようにして作成します。今回は引数が必要ないので()の中は空白です。

function 関数名 (引数){

}

作成した関数の実際のコードはこちら

idのprev-btnが前へボタン、next-btnが次へボタンを示しています

//次へ・前へボタンを隠す関数
function hide_change_btn() {
  //アクティブなとこのindex
  var index = $('.slide').index($('.active'));

  //indexが0なら前へを隠す
  if (index == 0) {
    $('#prev-btn').hide();
  } else {
    $('#prev-btn').show();
  }

  if (index == $('.slide').length - 1) {
    $('#next-btn').hide();
  } else {
    $('#next-btn').show();
  }
}

やっている処理は

  • いま何番目のスライドが表示されているか取得
  • 一番目のスライドが表示されていたら「前へ」ボタンを隠す
  • 最後のスライドが表示されていたら「次へ」ボタンを隠す

という処理です。

最後のスライドなのに「次へ」を押すというバグを防ぐためのもの。

セレクトボタンでやった処理と同じように、すべてのslideクラスからactiveクラスを持ったスライドの番号を取得します。

//アクティブなとこのindex
  var index = $('.slide').index($('.active'));

この取得した番号が0なら一番最初のスライドということ。

length – 1なら一番最後のスライドということです。

.lengthとは指定した要素が何個あるか調べるというもの。

slideクラスがついているものが3つあれば、3が取得できます。

ここで注意なのは、番号と個数の数の違い。

個数が3ならば番号は[0,1,2]となるので最後の番号は2となります。

なので、「現在表示されているスライドの番号」が「個数-1」ならば最後のスライドとして認識するということ。

 //indexが0なら前へを隠す
  if (index == 0) {
    $('#prev-btn').hide();
  } else {
    $('#prev-btn').show();
  }

  if (index == $('.slide').length - 1) {
    $('#next-btn').hide();
  } else {
    $('#next-btn').show();
  }

ついでにelse文を使って0ではないときは前へを表示、最後ではないときは次へを表示とすることで表示・非表示を制御します。

ページを読み込まれたときにも関数を呼び出したいので、一番上にも関数を置いておきましょう。

ここまででこんな感じになります。

$(function() {
  hide_change_btn();
  //セレクトボタンがクリックされたとき
  $('.select-btn').click(function() {
    //何番目のボタンをか調べる
    var s_btn_index = $('.select-btn').index($(this));

    //activeを取り除く
    $('.active').removeClass('active');

    //ボタンと同じ番号のスライドを表示
    $('.slide').eq(s_btn_index).addClass('active');

    hide_change_btn();
  });
});

//次へ・前へボタンを隠す関数
function hide_change_btn() {
  //アクティブなとこのindex
  var index = $('.slide').index($('.active'));

  //indexが0なら前へを隠す
  if (index == 0) {
    $('#prev-btn').hide();
  } else {
    $('#prev-btn').show();
  }

  if (index == $('.slide').length - 1) {
    $('#next-btn').hide();
  } else {
    $('#next-btn').show();
  }
}

前へ/次へボタンを制御

前へ/次へボタンを制御していきます。

流れは

  • 表示されているスライドを取得
  • 表示されているスライドの次のスライドを表示(activeをつける)
  • 前へ/次へボタンの表示切替関数を呼ぶ

です。

//次へボタンがクリックされたとき
  $('#next-btn').click(function() {
    //今表示されているスライドの次にactiveをセット
    var $active = $('.active');
    $active.removeClass('active');
    $active.next().addClass('active');
    hide_change_btn();
  });

  //後ろへボタンがクリックされたとき
  $('#prev-btn').click(function() {
    var $active = $('.active');
    $active.removeClass('active');
    $active.prev().addClass('active');
    hide_change_btn();
  });

まず「今表示されているスライド」というのをよく使うので変数(オブジェクト)としてとってしまいます。

変数と同じ感じで取得できます。

これで$activeの中には「activeクラスを持った要素」が入っています。

var $active = $('.active');

activeを持っているスライドが取れたので、スライドの表示を切り替えるためにactiveクラスをとって非表示にします。

$active.removeClass('active');

つぎは、activeをもっているスライドの次のスライド(前のスライド)を調べて表示します。

$active.prev().addClass('active');

.prevはひとつ前の要素を取得、.nextは一つ次の要素を取得する関数です。

activeクラスを持っているのはslideクラス。

今回はslideクラスにactiveクラスをつけているので、「次(前)の要素」は「ひとつ次(前)のslideクラス」となります。

前述したようにjQueryがslideクラスを取得したとき[0,1,2….]と番号がついているので、activeクラスが1番なら次は2のスライド、前は0のスライドが取れます。

これに対してactiveをつけることで、前後のスライドの表示を行っています。

最後に、さっき作った次へ/前へボタンの表示を制御する関数を入れましょう。

hide_change_btn();

これでスライドが完成しました!!

いろんなデータを取得する

htmlで書かれている文字列や、inputに入力された文字、セレクトされた要素などを取得する方法を覚えました。

テキストの取得

//テキストを参照
  var sample_text = $('.sample p').text();
  $('.out_text').text(sample_text);

.text()では、()の中に文字列を入れるとその文字列をセットする関数ですが、なにも入れなければすでに入っている文字列を取り出すことができます。

h1タグに入っているテキストを取得したいときはこんな感じ

//テキストを参照
  var sample_text = $('h1').text();
  $('.out_text').text(sample_text);

attrでいろいろなパラメータをとる

attrではアトリビュート(というのか?)をとります。

何かというと、htmlでタグの中に書くhrefとかvalとかnameとかのことです。

リンクをとるには次のようにします。

  //リンク
  var sample_link = $('.sample a').attr('href');
  $('.out_link').text(sample_link);

クラスもとれます

  //クラス
  var sample_class = $('.sample_class').attr('class');
  $('.out_class').text(sample_class);

入力された値をとる

inputやテキストエリアで入力されたものをとるにはvalを使います。

以下のコードはsubmitボタンがクリックされたとき、テキストエリアに入力された文字を取り出してout_textareaクラスに表示しているものです。

/テキストエリア
  $('.submit').click(function() {
    var sample_textarea = $('.sample_textarea').val();
    if (sample_textarea == '') {
      $('.out_textarea').text('入力されていない検知もできる');
    } else {
      $('.out_textarea').text(sample_textarea);
    }
  });

テキストエリアでは取得した文字列が”(空白)だったら、何も入力されていないということがわかります。

セレクトボックスで何が選ばれたか取得

セレクトボックスでは、htmlであらかじめvalに値を設定しておけば選ばれているその値をとることができます。

下の場合はmale,female,otherというvalを設定しておいたので、それらのうち選択されているものが取得されています。

  //セレクト
  $('.select_submit').click(function() {
    var selected = $('.sample_select').val();
    var tmp;
    if (selected == 'male') {
      tmp = '男'
    } else if (selected == 'female') {
      tmp = '女'
    } else {
      tmp = 'その他'
    }
    $('.out_select').text(tmp + "を選択しましたね");
  });

valで値をセットする

val()の中に値を入れればその値をセットすることもできます。

これを応用することで、押されたボタンに合わせてセレクトボックスの中身を変えるということが実装可能。

下のコードでは、あらかじめhtmlで3つのボタンを用意してそれぞれのクラスを与え、そのクラスによってセレクトボックスにセットするvalを変えています。

$('.btn').click(function() {
    if ($(this).hasClass('male_btn')) {
      $('.sample_select').val('male');
    }
    if ($(this).hasClass('female_btn')) {
      $('.sample_select').val('female');
    }
    if ($(this).hasClass('other_btn')) {
      $('.sample_select').val('other');
    }
  });

animeteでアニメーション

animeteを使えばjQueryでもアニメーションが実装できます。

使い方は、animete({アニメーションさせたいこと},時間(ミリ秒)); という形。

下のコードでは要素にマウスを乗せた時と話したとき、1000ミリ秒でfont-sizeを変えています。

書き方の癖があるので注意です。

$('.anime_text').hover(function() {
      $(this).animate({
        'font-size': '90px',
      }, 1000);
    },
    function() {
      $(this).animate({
        'font-size': '32px'
      }, 1000);
    });

スクロールを制御する

scrollTopを使うことでスクロールを制御することができます。

使い方はscrollTop(スクロールしたい場所の上からの距離)

以下のコードではページの一番上(上からの距離0)に移動します。

scrollTopを使うときはhtmlとbodyを指定して使うのが一般的なようです。

$('html,body').scrollTop(0);

位置を取得する

offsetで指定した要素の位置を取得できます。

取得できるのは上下左右からの距離。

方向を指定して使うこともできます。

下のコードではhogeクラスの上からの距離を取得します。

$('.hoge').offset().top;

ページ内リンクをjQueryで実装

先ほどのscrollTopとoffsetを使えばページ内リンクを実装できます。

  • クリックされたhrefを取得
  • hrefの中身の上からの距離を取得
  • その距離のところへスクロール

  $('.btm').click(function(){
    var dist = $(this).attr('href');
    var to = $(dist).offset().top;
    $('html,body').scrollTop(to);
  });

アニメーションしながらスクロール

animeteを↑に組み合わせることでアニメーションしながらスクロールさせることができます。

animeteの中にscrollTopを指定し、アニメーションにかかるミリ秒を設定。

 $('.btm').click(function(){
    var dist = $(this).attr('href');
    var to = $(dist).offset().top;
    $('html body').animate({
      "scrollTop":to
    },1000);
  });

まとめ

今回でprogateのjQueryコースはすべて終わりましたが、jQueryはできることがたくさんあってまだまだ不十分すぎるという感じです。

これからも継続的に勉強していかなければ、仕事としてつかえるレベルにはならなそう。

次回からは私の自己紹介サイト(ポートフォリオサイト)を作成しながら今までの学習を復習していこうと思っています。

コメント

タイトルとURLをコピーしました