JavaScript（jQuery）の基礎問題3選 中級編

はじめに

今回の記事は、前回書かせていただいた「JavaScript（jQuery）の基礎問題3選　初級編」の続編となります。

「中級編」ということなので前回より少し難易度を上げています！是非腕試しにチャレンジしていただければと思います！

また今回も同様にjQueryを使っていきますので、事前にファイルを読み込ませておきましょう。

読み込ませ方が分からない場合は、以下の記事を参考にしてください。

参考サイトのご紹介

今回も忍者CODEの無料問題集を参考に作成しました。
アカウント登録するだけで、すべての問題集を解答付きで見ることができます。
忍者コードの良い点は、とにかく手を動かしながら学習を進められることです。
また、有料コンテンツも用意されており、そちらだと400本以上の動画学習と24時間対応のチャットサポートを受けながら学習を行うことができます。他のスクールだと基本的に夜中とか朝とか対応してくれないので非常に魅力的なサービスです。是非ご活用ください！！

問題1　クリックした要素が何番目かをアラートに表示させよう

期待する挙動：x番目のボタンを押すと「あなたはx番目を押しました！」と表示される

まずは以下のHTMLとCSSをテキストエディタにコピーしましょう。

HTML

    <ul class="list">
        <li>1番目の忍者</li>
        <li>2番目の忍者</li>
        <li>3番目の忍者</li>
        <li>4番目の忍者</li>
        <li>5番目の忍者</li>
    </ul>

CSS

*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}
.list{
    width: 1000px;
    margin: 300px auto 0 auto;
    overflow: hidden;
}
.list li{
    padding: 20px;
    background-color: #73a5ff;
    margin-bottom: 10px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

解答を見る

JavaScript

$(function() {
    $('li').on('click', function() {
        let i = $(this).index() + 1;
        alert('あなたは' + i + '番目を押しました！');
    });
});

解説

• $('li')ですべての<li>タグを指定
• on()メソッドを使ってイベントハンドラを指定
• クリックした要素が何番目のものかをindex()メソッドを使って取得し、変数に代入
• index()メソッドは0から始まる連番を取得してくれるメソッド、0からカウントしてしまうのであらかじめ+1を設定することで1から取得できる
• alertを使ってポップアップ表示する

問題2　カラーピッカーで取得した色を反映させよう

期待する挙動：カラーピッカーで色を選択し、エンターキーを押すと「忍者参上！！」という文字に色が反映される

まずは以下のHTMLとCSSをエディタに張り付けてから問題を解いていきましょう。

HTML

<h1 class="title">忍者参上！！</h1>
<input type="color" id="color-change">

CSS

.title{
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    text-align: center;
    margin-top: 300px;
    font-size: 100px;
}
#color-change{
    display: block;
    margin: 0 auto;
    width: 100px;
}

解答を見る

JavaScript

$(function(){
  $('#color-change').on("change", function(){
    let select_color = $(this).val();
    $('.title').css('color', select_color);
  });
});

解説

• $('#color-change')でidを指定
• changeメソッドを使うことで、指定したidの要素の値が変更されたら時にイベントを発生させる
• select_colorという変数を作成し、その中に選択した色を代入する
• val()メソッドはinput要素などのvalue属性の内容を取得・変更ができる。今回であればcolor-changeはinput要素のことなのでカラーピッカーで選択する色を指します。
• 最後に、titleクラス（忍者参上！！）のCSSに色を反映させる

問題3　要素の「複製→削除」を繰り返しできるようにしよう

いよいよ中級編最後の問題です。
最後は「複製する処理」と「削除して修復する処理」の2つの関数を用いる必要があります。

期待する挙動：「複製する」を押すと複製され、「リセット」を押すと最初に戻る（何度でも行える状態）

こちらもまずは以下のHTMLをエディタに張り付けてから問題を解いていきましょう。

HTML

    <div class="clone">複製する</div>
    <div class="reset">リセット</div>
    <ul>
        <li>忍者CODE</li>
    </ul>

解答を見る

JavaScript

$(function() {
  $('.clone').on('click', function() {
    let li_clone = $('li').eq(0).clone();
    $('ul').append(li_clone);
  });
});

$(function() {
  $('.reset').on('click', function() {
    $('li').remove();
    $('ul').append('<li>忍者CODE</li>');
  });
});

解説

• $('li')をclone()メソッドで複製させるが、何番目の要素なのかを指定しなくてはいけないのでeq()メソッドを使用して引数に0を置く
• そうすることで複製された後も、一番初めのliタグのみを複製することができる
• それを変数li_cloneに代入し、append()メソッドを使ってulタグの最後に追加する。
• append()メソッドは選択した要素の末尾にコンテンツを挿入できるメソッド
• 次にリセットボタンを機能させるため、同様にon()メソッドをつかってイベントハンドラを定義
• クローンを削除するため、remove()メソッドを使ってliタグをすべて削除する
• そのあとすぐにappend()メソッドで('
• 忍者CODE
')とし、復元

最後に

いかがでしたでしょうか？

今回出題した問題の解答に関しては、一例に過ぎないのでご容赦ください。
プログラミングの世界では、プロパティやメソッドなどは山のようにあるため、答えは何通りも存在している場合があります。
もし「記述は違ったけど、挙動は同じだった」という場合はそれも正解にしてしまってOKです！
大事なのは期待された挙動に対して同じように動かすことができているかです！
コードが雑になっても、後々修正すれば問題ありません。
今回の問題を通して、スキルアップのお手伝いになっていれば嬉しく思います！
またどこかで最後の上級編を作る予定なので、良ければ見てください！

最後まで読んでいただきありがとうございました。