この記事について

ProgateでjQueryを学習中の初心者がアウトプットの為に書いている記事です。間違っている点があればご指摘いただけると助かります。

ボタンを押すと対応するスライドに切り替わるようにする。

"display: none"で基本的にスライドを非表示にし、activeクラス（名前は自由）を付加されたものが表示されるようにしておきます。このactiveクラスを付け替えることで表示させるスライドを切り替えます。

eqメソッド

eqメソッドでjQueryオブジェクトの中から引数と同じ数字と同じインデックス番号の要素を取得できます。

index.html


<ul>
  <li>リスト0</li>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

script.js

//リスト2が赤くなる
$('li').eq(2).css('color', 'red');

indexメソッド

indexメソッドを用いることで、activeクラスが当てられている要素を取得することができます。

index.html


<ul>
  <li>リスト0</li>
  <li class="active">リスト1</li>
  <li>リスト2</li>
</ul>

script.js

//li要素中のactiveクラスを持つインデックス番号1の要素を取得
$('li').index($('.active'));

prevメソッドとnextメソッド

prevメソッドは同じ階層の要素の中から1つ前の要素を、nextメソッドは1つ後ろの要素を取得するメソッドです。

index.html


<ul>
  <li>リスト0</li>
  <li class="active">リスト1</li>
  <li>リスト2</li>
</ul>

script.js

//リスト0が赤くなる
$('.active').prev().css('color', 'red');
//リスト2が青くなる
$('.active').next().css('color', 'blue');

これらのメソッドを駆使して以下のように実装します。

index.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="slide-wrapper">
      <h2 class="slide-title">にんじゃわんこの一年</h2>
        <div class="change-btn-wrapper">
          <div class="change-btn prev-btn">← 前へ</div>
          <div class="change-btn next-btn">次へ →</div>
        </div>
        <ul class="slides">
          <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/summer.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"></li>
          <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"></li>
        </ul>
        <div class="index-btn-wrapper">
          <div class="index-btn">1</div>
          <div class="index-btn">2</div>
          <div class="index-btn">3</div>
          <div class="index-btn">4</div>
          <div class="index-btn">5</div>
        </div>
      </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

stylesheet.css


body {
  font-family: "Hiragino Maru Gothic ProN", sans-serif;
}

ul {
  list-style: none;
}

.slide-wrapper {
  text-align: center;
  width: 1000px;
  margin: 0 auto;
  color: #5e6f84;
  padding: 60px 0;
}

.slide-title {
  font-size: 40px;
  margin-bottom: 30px;
}

.change-btn-wrapper {
  width: 500px;
  margin: 20px auto;
  font-size: 18px;
}

.change-btn-wrapper:after {
  content: "";
  clear: both;
  display: block;
}

.prev-btn {
  cursor: pointer;
  float: left;
  display: none;
}

.next-btn {
  cursor: pointer;
  float: right;
}

.slides {
  padding: 0;
}

.slide {
  display: none;
}

.active {
  display: block;
}

.slide img {
  width: 500px;
  height: auto;
  border-radius: 5px;
}

.index-btn-wrapper {
  font-size: 16px;
  margin-top: 20px;
}

.index-btn {
  display: inline-block;
  color: #4e90af;
  background-color: #e0f5ff;
  width: 40px;
  padding: 6px 0;
  margin: 0 5px;
  border-radius: 3px;
  cursor: pointer;
}

.index-btn:hover {
  color: #fff;
  background-color: #5cabd0;
}

script.js


$(function() {
  
  function toggleChangeBtn() {
//activeクラスを持つ要素をindexメソッドで取得して変数に代入
    var slideIndex = $('.slide').index($('.active'));
    $('.change-btn').show();
//if文による条件分岐
    if (slideIndex == 0) {
//一番最初のスライドの時は前へボタンを消す
      $('.prev-btn').hide();
//一番最後のスライドの時は次へボタンを消す
//インデックス番号は0から割りふられるので1引いてあげる
    } else if (slideIndex == $('.slide').length - 1 ) {
      $('.next-btn').hide();
    }
  }
  
  $('.index-btn').click(function() {
    $('.active').removeClass('active');
//クリックされた要素を変数に代入
    var clickedIndex = $('.index-btn').index($(this));
    $('.slide').eq(clickedIndex).addClass('active');
    toggleChangeBtn();
  });
  
  $('.change-btn').click(function() {
    var $displaySlide = $('.active');
    $displaySlide.removeClass('active');
//if文による条件分岐
//クリックされた要素に'next-btn'クラスがある場合は次のスライドに移る
    if ($(this).hasClass('next-btn')) {
      $displaySlide.next().addClass('active');
//クリックされた要素に'next-btn'クラスがない場合('prev-btn'がある場合)は次のスライドに移る
    } else {
      $displaySlide.prev().addClass('active');
    }
//関数の呼び出し
    toggleChangeBtn();
  });
});

lengthメソッド

上のscript.js中にある".length"はlengthメソッドです。このメソッド要素の数を取得できます。
これによりスライドの枚数が増えてもscript.jsを書き換える必要がなくなります。

index.html


<ul>
  <li>リスト0</li>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>

script.js

//結果は3となる
$('li').length;

フォームを操作する

jQueryを使ってHTMLから情報を取得するようにします。

textメソッド

引数に指定した文字を要素にセットすることができます。引数を入れてない場合は、要素内の文字を取得することができます。

index.html


<h1>こんにちは</h1>
<p>さようなら</p>

script.js


//h1の"こんにちは"を"こんばんは"に書き換える
$('h1').text('こんばんは');

//p要素の"さようなら"を取得
$('p').text('');

attrメソッド

HTMLの属性を追加及び取得することができます。追加する時は属性名と属性値の2つの引数を指定する必要があります。引数を指定しないことでtextメソッドと同様に取得することができます。

index.html


<h1>こんにちは</h1>
<a href="https://prog-8.com">リンク</a>

script.js


//h1にid "greet"を追加
$('h1').attr('id', 'greet');

//a要素のhref属性の値である"https://prog-8.com"を取得
$('a').attr('href');

HTMLのメソッドは自分で作成して設定することができます。その場合、名前は"data-"から始める必要があります。

index.html


<div data-select="name"></div>

script.js


//nameを取得できる
$('div').attr('data-select');

valメソッド

valメソッドはinputタグに入力されている値を取得するのに使用します。

index.html


<form>
  <div>名前</div>
  <input id="name" type="text">
</form>

script.js


//入力フォームに入力された値(文字)がnameに代入される
var name = $('#name').val();

submitイベント

submitイベントは送信ボタンがクリックされた時及びEnterキーで送信された時に処理を起こすイベントです。

script.js


//入力フォームに入力された値(文字)がnameに代入される
var name = $('#name').val();

Progateでは以下のような実装を行ないました。

index.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="section-title">
        <h3>キャラクター総選挙</h3>  
      </div>
      <div class="section-content">
        <p class="call-to-action">好きなキャラクターをクリック！</p>
        <div class="option-wrapper">
          <div class="option-group">
            <img class="option-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/progate_baby_wanko.png">
            <div class="option-btn" data-option="1">1. ベイビーわんこ</div>
          </div>
          <div class="option-group">
            <img class="option-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/progate_wanko.png">
            <div class="option-btn" data-option="2">2. にんじゃわんこ</div>
          </div>
          <div class="option-group">
            <img class="option-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/progate_hitsuji.png">
            <div class="option-btn" data-option="3">3. ひつじ仙人</div>
          </div>
        </div>
        <form id="form" class="form">
          <div class="form-group">
            <div>キャラクター：</div>
            <select id="select-form" class="select-form">
              <option value="0">選択してください</option>
              <option value="1">1. ベイビーわんこ</option>
              <option value="2">2. にんじゃわんこ</option>
              <option value="3">3. ひつじ仙人</option>
            </select>  
          </div>
          <div class="form-group">
            <p id="error-message" class="error-message"></p>
            <div>理由：</div>
            <textarea id="text-form" class="text-form"></textarea>  
          </div>
          <button type="submit" class="btn btn-submit">送信</button>
        </form>
        <div class="output-wrapper">
          <h4>結果</h4>
          <div class="output-inner">
            <p class="output-item">好きなキャラクター：<span id="output-select"></span></p>
            <p class="output-item">理由：<span id="output-text"></span></p>  
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

script.js


$(function() {
  $('#form').submit(function() {
//選択肢された値を変数に代入
    var selectItem = $('#select-form').val();
//入力された文章
    var textItem = $('#text-form').val();
//テキストフォームが空欄の時にエラーメッセージを表示するようにする。
    if (textItem == '') {
      $('#error-message').text('理由を記入してください');
    } else {
      $('#error-message').text('');
    }
//選択された値を結果として表示する
    $('#output-select').text(selectItem);
//入力された文章を表示する
    $('#output-text').text(textItem);
    return false;
  });

  $('.option-btn').click(function() {
//クリックされたものの名前を変数に代入
    var optionText = $(this).text();
// 変数clickedOptionに、クリックした要素のdata-optionの値を代入
    var clickedOption = $(this).attr('data-option');
    
    $('#text-form').val(optionText + 'が好きな理由は、');
// 変数clickedOptionを用いて、「#select-form」の値を自動で入力
    $('#select-form').val(clickedOption)
    
  });
});

アニメーションの追加

動的な変化をjQueryで実装する方法を学習しました。

animateメソッド

$('セレクタ').animate({'プロパティ': '値'},時間);と書くことでアニメーションを付加できます。

script.js

//h1にある文字を1000ミリ秒かけて文字サイズを50pxに変化させる
$('h1').animate({

'font-size': '50px'

}, 1000);

ページ内リンク

縦長のページでは"トップに戻る"などといった名前でページの最上部に戻るボタンがあります。このような機能をページ内リンクと呼びます。

aタグでのページ内リンクの実装

リンクの飛び先でidを設定し、aタグのhref属性に"#id名"とすることで、aタグをクリックするとそのidを含む場所に飛ぶことができます。

index.html

//このaタグをクリックすると下のdivタグの部分に飛ぶ
<a href="#contact">
</a>

<div id="contact">
</div>

scrollTopメソッド

ページ内リンクをjQueryで実装する時はscrollTopメソッドを利用します。＄('html, body').scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができます。scrollTopは基本的に$('html, body')セレクタに対して使用するものなので丸暗記で大丈夫です。

script.js


$('#top-btn').click(function(){
//上から0pxの場所(最上部)へ移動
  $('html', 'body').scrollTop(0);

});

アニメーションとして付加することもできます。

script.js


$('#top-btn').click(function(){

  $('html', 'body').animate({

  'scrollTop': 0

  }, 1000);

});

offsetメソッド

offsetメソッドは要素の位置情報を取得する時に使用するメソッドです。

script.js

//{top: 180px, left: 100px}といったような位置情報を取得
$('#content').offset();

//topの値だけ取得
$('#content').offset().top;

Progateでは以下のような実装を学習しました。

index.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700">
    <link rel="stylesheet" href="stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- ヘッダー -->
    <header>
      <div class="container">
        <div class="header-title">
          <div id="top-btn" class="header-logo">にんじゃわんこの部屋</div>
        </div>
        <div class="header-menu">
          <ul class="header-menu-right">
            <li>
              <a href="#stamps">LINEスタンプ</a>
            </li>
            <li>
              <a href="#interview">インタビュー</a>
            </li>
            <li>
              <a href="#contact">お問い合わせ</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

    <!-- トップ部分 -->
    <div class="top-section gray-section">
      <div class="top-inner">
        <div class="container">
          <div class="top-description">
            <h2>ようこそ！にんじゃわんこの部屋へ！</h2>
            <p>Progate公式キャラクター「にんじゃわんこ」の日常です。</p>
          </div>
        </div>
      </div>
    </div>

    <!-- スライダー -->
    <div id="stamps" class="stamps-section">
      <div class="container">
        <div class="section-title">
          <h3>LINEスタンプ大好評発売中！</h3>
        </div>
        <div id="stamp-carousel" class="carousel slide" data-ride="carousel"> 
          <ol class="carousel-indicators">
            <li data-target="#stamp-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#stamp-carousel" data-slide-to="1" class=""></li>
            <li data-target="#stamp-carousel" data-slide-to="2" class=""></li>
          </ol>
          <div class="carousel-inner">
            <div class="item stamp-box active">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/LineStamp1.jpg" class="stamp-image">
              <h4>にんじゃわんこがLINEスタンプに登場！</h4>
            </div>
            <div class="item stamp-box">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/LineStamp2.jpg" class="stamp-image">
              <h4>プログラミング関連のスタンプも！</h4>
            </div>
            <div class="item stamp-box">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/LineStamp3.jpg" class="stamp-image">
              <h4>新キャラ・ベイビーわんこも！</h4>
            </div>
          </div> 
        </div> 
        <p>全40種類！使いやすく、可愛い！にんじゃわんこの日常を表現したスタンプです！<br>
          ご購入は<a class="stamp-link" href="https://store.line.me/stickershop/product/1132359/ja" target="_blank"> こちら</a>（LINE STORE）から！
        </p>
      </div>
    </div>

    <!-- インタビュー -->
    <div id="interview" class="interview-section">
      <div class="interview-section-top gray-section">
        <div class="container">
          <div class="section-title">
            <h3>特別インタビュー</h3>
          </div>
          <img class="interview-image" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/interview_wanko.jpg">
        </div>
      </div>
      <div class="interview-section-bottom">
        <div class="container">
          <div class="interview-box">
            <h5>Q. 普段はどのような活動をされているのですか？</h5>
            基本的に、渋谷にあるProgateのオフィスでくつろぐのが日課でござる。Progateのオフィスは本当に居心地が良いでござる。
            スピーカーで好きな音楽を流しながら、カフェみたいな空間でProgateの宣伝方法について考えてる時間は、最高に充実しているでござる。
          </div>
          <div class="interview-box">
            <h5>Q. にんじゃわんこさんは、プログラミングはできるのですか？また、得意な言語は何ですか？</h5>
            Progateのレッスンは全て終了したから、それなりにはできるでござる。最近は本気でエンジニアを目指して、WankoBook Proを購入したでござる。<br>
            得意な言語は、Rubyでござる。Railsで面白いWebアプリを作りたいでござる。
          </div>
          <div class="interview-box">
            <h5>Q. 好きな食べものは何ですか？やっぱりドッグフードですか？</h5>
            ラーメンが大好きでござる。オフィスの近くには美味しいラーメン屋さんが多くあって幸せでござる。<br>
            ドッグフードはおいしくないでござる。炊きたてのご飯の方が何倍も美味しいと思うでござる。
          </div>
          <div class="interview-box">
            <h5>Q. 最後に、今後の活動展開について教えてください。</h5>
            今後はさらにProgateの宣伝に努めていくでござる。あと、僕のLINEスタンプも。スタンプの売上は拙者のお小遣いになるから、是非ともみんなに買ってほしいでござる。
          </div>
        </div>
      </div>
    </div>

    <!-- Contact -->
    <div id="contact" class="contact-section gray-section">
      <div class="contact-section-inner">
        <div class="container">
          <div class="section-title">
            <h3>お問い合わせ</h3>
          </div>
          <div class="contact-form">
            <h4>メッセージを送る</h4>
            <form>
              <div class="error-message"></div>
              <input type="text" name="name" placeholder="お名前" class="contact-name">
              <div class="error-message"></div>
              <input type="text" name="email" placeholder="メールアドレス" class="contact-email">
              <div class="error-message"></div>
              <textarea name="message" placeholder="メッセージ内容"></textarea>
              <button type="submit" class="btn btn-contact">送信</button>
            </form>
          </div>
          <div class="contact-about">
            <h4>About Me</h4>
            <p>Progateで飼われている柴犬。忍者の格好をするのが趣味(可愛いさが際立つと思っている)。妖精によって深夜4時半頃に召喚され、それ以来Progateのサイトに居座るように。<br>
              Progateでは、ユーザーの癒やしから、学習のサポートまでを担当。また、フィードバック番長も努め、ユーザーにフィードバックを返信しないと毎日22時に怒鳴ってくる。
            </p>
            <h4>Address</h4>
            <p>
              <i class="fa fa-map-marker"></i>東京都渋谷区神宮前6-19-20 第15荒井ビル9階
            </p>
            <p>
              <i class="fa fa-phone"></i>Phone: 03-6455-0950
            </p>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container">
        <div class="follow-us">
          <a href="https://www.facebook.com/Progate-742679992421539" class="social-icon" target='_blank'>
            <span class="fa fa-facebook"></span>
          </a>
          <a href="https://twitter.com/progatejp" class="social-icon" target='_blank'>
            <span class="fa fa-twitter"></span>
          </a>
        </div>
        <div class="copyright">©2016-
          Progate
        </div>
      </div>
    </footer>

    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

script.js


$(function(){

  // SNSボタン
  $('.social-icon').hover(
    function(){
//マウスカーソルが乗ると大きくなる
      $(this).children('span').animate({
        'font-size':'30px'
      }, 300);
    },
    function(){
//マウスカーソルが外れると元のサイズになる
      $(this).children('span').animate({
        'font-size':'24px'
      }, 300);
    }
  );
  
  // トップへ戻るボタン
  $('#top-btn').click(function(){
    $('html,body').animate({ 
      'scrollTop': 0 
    }, 'slow');
  });
  
  // ヘッダー内の<a>タグをクリックしたときのclickイベントを作成
  $('header a').click(function() {
//クリックされた要素のhref属性を変数idに代入
    var id = $(this).attr('href');
//idの位置情報を変数に代入
    var position = $(id).offset().top;
    $('html, body').animate({
//その位置情報に移動する
      scrollTop: position
    }, 500);
  });
  
});

　感想

これでProgateでのjQueryの学習が終了しました。苦手意識があったにもかかわらず、学習が終わる頃には楽しく感じました。次の言語学習でも楽しめるように頑張っていこうと思います(小並感)。