#7 progateでjQueryを学んでwebエンジニアを目指す!~モーダルとアコーディオン編~

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

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

この記事はそんな勉強の記録です。

これからプログラミングの勉強をする方や、現在している方、将来身につけたいと思っている方は私が勉強した記録一覧が参考になるかと思います。

  • どのくらいの勉強期間が必要か
  • 勉強したらどんなスキルが身につくのか

そういったことがわかると思います。

webエンジニアへの道

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

progate学習記録

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

今回学んだコース

今回学んだのは、プログラミング学習サービスであるprogateの【jQuery中級編】。

このコースではjQueryを使って「モーダル」・「アコーディオン」と呼ばれるwebページの部品(表現)を学ぶことができました。

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

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

「モーダル」と「アコーディオン」を1から自分で作ってみたというページになっています。

そのページがこちら

※今回はレスポンシブ対応していないのでスマホだと見づらいと思います。

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

今回も学んだ内容を備忘録として載せておきます

jQueryはreadyイベントの中に書く

jQueryで実装したい機能は普通readyイベントの中に書きます。

readyイベントとは、HTMLの読み込みが完了したら呼ばれるイベント。

HTMLの読み込みが終わっていないのにjQueryによる操作が生じると不具合が起こることがあるようです。

readyイベントは、下記のように書きます。

$(function(){
  //やりたい処理を書いていく
}

モーダル

モーダルとは、特定の場所(ボタンなど)をクリックすると出現する要素のこと。

よくあるのは「ログインはこちら」というボタンを押すと、IDやパスワードを入力するための小窓が表示されます。

今回のアウトプットで作成したのでイメージしづらい方は見てみてください。

ログインボタンを押すとモーダルが現れます。 こちら

モーダルの作り方

モーダルの作り方はこんな感じ。

  1. モーダル部分をHTML&CSSで作成
  2. CSSでdisplay:noneしてモーダルを非表示にする
  3. モーダルの表示のきっかけとなるボタンを作成
  4. ボタンのclickイベントでモーダルを表示
  5. モーダルを再度消すきっかけを作成

モーダル部分をHTML&CSSで作成

まずは単純にモーダルのレイアウトを作ります。

このとき、ボタンのクリックイベントで参照ができるようにクラスかidを設定しておきます。

モーダルが表示されたとき想定の位置に表示されるように、この段階から表示位置で作成しましょう。

相対位置と絶対位置を使うと指定がしやすいです。

<div id="login-modal">
   ...
</div>

CSSでdisplay:noneしてモーダルを非表示に

モーダルの見た目が出来上がったら、cssで非表示にします。

モーダルはボタンなどのきっかけによって表示するため、最初は非表示にしておくという準備が必要です。

先ほど設定したクラス/idに対してdisplay:noneをすればよいでしょう

#login-modal{
   display:none;
}

モーダルの表示のきっかけとなるボタンを作成

次に、「このボタンが押されたときモーダルを表示する」という役割のボタンを作成します。

といってもdivタグで囲ってクラスかidをつけ、見た目を整えればOK

クリックイベントを使うので、クラスかidは設定しましょう。

<div class="login-btn">
   ログイン
</div>

ボタンのように見せたいときは以下のようなCSSが便利です。

上から順に

  • 枠をまるっこくする
  • 重ねた時のマウスの見た目を変える
  • 真ん中に文字を表示する

となります。

.login-btn{
   border-radius:10px;
   cursor:pointer;
   text-align:center;
}

そのほかにも:hoverを使って重ねた時の色を変えたり、影をつけるとボタンっぽくなります。

ボタンのクリックイベントでモーダルを表示

モーダルやボタンの見た目は整えられたので、jQueryで表示・非表示を制御します。

流れは

  1. ボタンがクリックされたら
  2. モーダルを表示

というだけ。簡単ですね。

//ログインボタンがクリックされたら
$('#login-btn').click(function(){
  //モーダルを表示させる
  $('#login-modal').show();
});

モーダルを再度消すきっかけを作成

モーダルを表示することはできましたが、これでは再度消すことができません。

間違って押したときなどに、元の表示に戻れるようにモーダルを消すボタンを作りましょう。

モーダルの子要素にボタンを設置して、クリックイベントを行うだけです。

モーダルの子要素に設置することで、モーダルが表示されたときのみ押すことができるようになります。

//モーダルのxボタンがクリックされたら
  $('#exit-btn').click(function(){
    //モーダルを隠す
    $('#login-modal').hide();
  });

これでモーダルを作成することができました。

アコーディオン

アコーディオンとは、クリックしたらより詳細な情報が出るような要素。

FAQや「詳しく見る」という形で目にすることが多いのではないでしょうか。

アコーディオンも今回のアウトプットで作成しましたので見ていただくとわかりやすいと思います。

アコーディオンの作り方

アコーディオンの作り方はこんな感じ

  1. アコーディオンの見た目を作る
  2. クリックによって表示・非表示を制御

アコーディオンの見た目を作る

モーダル同様、まずは見た目を作ります。

progateではリストで作っていましたが、この方法が一般的なのかはわかりません。

構造が単純なので理解はしやすいと思います。

<ul class = "aq-list">
   <li class="aq">
      <p>アコーディオンはどうやってつくるんですか?<p>
      <span>+</span>
      <div class="answer">
         こうやってつくります
      </div>
   </li>
   
   ....
   
</ul>

<li>タグの中身が一つのアコーディオンです。

aqクラスをクリックしたらanswerクラスが表示/非表示になるというのを目指します。

このような構造にしておくことで、「aqクラスをクリック→aqクラスの子要素のanswerを表示」というように子要素を参照して処理を行えるため複数のアコーディオンを作るときとても楽。

複数のアコーディオンを作るときは<li>で囲まれた部分をコピーして文字を変えればいいだけになります。

<span>タグはアコーディオンを開くか閉じるかのガイドとして表示します。

あとは適当にcssで見た目を整えましょう。

クリックによって表示・非表示を制御

モーダル同様にクリックによって表示と非表示を切り替えます。

モーダルと違うところは、

  • アコーディオンが開いているときにクリック→閉じる
  • アコーディオンが閉じているときにクリック→開く

と「アコーディオンが開いているかどうか」の判定がいるところです。

でも難しくはありません。

開いた時にopenクラスをaddClassによってアコーディオンに追加、閉じた時にremoveClassによって除去します。

こうすることでhasClassを使うと開いているかどうかがチェックできます。

$('.aq').click(function(){
    //子要素のanswerは以下でよく使うので変数にしておく
    var $answer = $(this).children('.answer');

    //answerがopenを持っているか調べる
    //持っていたら
    if($answer.hasClass('open')){
      //openクラスを除去
      $answer.removeClass('open');
      //非表示にする
      $answer.slideUp(500);
      //spanの中身を+に
      $(this).children('span').text('+');
    }else{
      //持っていなかったら
      //openクラスを追加
      $answer.addClass('open');
      //表示
      $answer.slideDown(500);
      //spanの中身を-に
      $(this).children('span').text('-');
    }
  });

spanの中身はガイドで、開いているときは「-」を表示して閉じるように、しまっているときは「+」で開けるように書き換えます。

書き換えにはtext()を使います。

これでアコーディオンを作成することができました。

まとめ

今回はprogateで【jQuery中級編】を学んだ内容を記事にしました。

HTML&CSSの時とは違って、なかなか内容が濃くなってきました。

しかしその分実際に使われているような表示を自分で実装する技術が学べているので、モチベーションがあがりますね。

私のわかる範囲でよければ質問などにも答えていきたいと思っていますので、一緒に勉強していきましょう。

コメント

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