仕事・勉強・読書

jQueryの基本|テキストフォームを使って実践

こんにちは、ボーノです。

今回はjQueryを使ったテキストフォーム操作をご紹介します。

記事内では実際に動くパーツを実装し、そのコードを公開していますので、

jQueryの動きを体感できると同時に、プログラムの書き方を知ることができます。

jQueryとは

jQueryとは、ジェイクエリーと読み、JavaScriptを使いやすくしたものです。

HTMLと組み合わせることによって、画面上の表示を動的に変更することができます。

基本的に、

  1. セレクタ(要素の指定)
  2. 実行のタイミング
  3. 処理

という構成でプログラムを記述することになります。

<script>
  $("①セレクタ").②実行のタイミング(function(){
      ③処理
  })
</script>

 

この段階ではまだよく分からないと思いますので、以下で具体的なものを見ていきます。

先述のとおり、jQueryはJavaScriptを使いやすくしたものなので、その正体はJavaScriptです。

そのため、jQueryを使う場合はscriptタグ内で記述する必要があります。

【基礎1】テキストフォームに値を設定

まずは、jQueryを使ってテキストフォームに値を設定してみます。

HTMLでボタンとテキストフォームを準備しました。

ボタン1を押してみてください。

テキストフォームに値が勝手に設定されたかと思います。

これは以下のプログラムで実現することができます。

<!-- HTML -->
<div>
  <button type="button" id="button_1">ボタン1</button>
</div>
<div>
  <input type="text" id="sample_1" name="sample_1" autocomplete="off">
</div>

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- jQueryを使ってテキストフォームに値をセット -->
<script>
    // idがbutton_1の要素をクリックしたときに発動
  $("#button_1").click(function(){
        // idがsample_1の要素に値をセット
      $("#sample_1").val("ボタンを押しました");
    })
</script>

 

ここで復習です。jQueryは

  1. セレクタ(要素の指定)
  2. 実行のタイミング
  3. 処理

という構成でプログラムを記述することになります。

今回のプログラムで当てはめると、以下のとおりになります。

  1. #button_1 ← idがbutton_1の要素を
  2. click ← クリックしたタイミングで
  3. $(“#sample_1”).val(“ボタンを押しました”); ← 値を設定
  1. 「#」+「文字列」でHTML内のidを指定。classやnameを指定する方法もあります。
  2. セレクタ.clickとすることで、セレクタで指定した要素をクリックしたときに処理が行われるようにできます。今回はボタンを使いましたが、ボタン以外でも大丈夫です。
  3. 処理の中でもjQueryを使っています。セレクタ.val(“任意の文字列”)で、指定したフォームの値(value)を設定することができます。

jQueryは、使う前にjQuery自体を読み込む必要があります。

「Web上にあるものを読み込む方法」と「ダウンロードしたjQueryを読み込む方法」があります。

今回は、前者を採用しています。

【基礎2】テキストフォームの値を取得

次は、jQueryを使って、テキストフォームに入力された値を取得してみます。

HTMLでボタンとテキストフォーム×2を準備しました。

上のフォームに文字を入力し、ボタン2を押してみてください。

 

上のフォームに入力した値が、下のフォームにコピーされたかと思います。

これは以下のプログラムで実現することができます。

<!-- HTML -->
<div>
  <p>ボタン2を押すと上のフォームの値が下のフォームにコピーされます</p>
  <button type="button" id="button_2">ボタン2</button>
</div>

<div>
  <input type="text" id="sample_2" name="sample_2" placeholder="ここに入力してください" autocomplete="off">
</div>

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- jQueryを使って、テキストフォームの値を取得し、別のテキストフォームに値をセット -->
<script>
  // idがbutton_2の要素をクリックしたときに発動
  $("#button_2").click(function(){
    // idがsample_2の要素の値を取得し、idがsample_3の要素に値をセット
    $("#sample_3").val($("#sample_2").val());
  })
</script>

 

ほとんど『【基礎1】テキストフォームに値を入力』のときのプログラムと同じです。

  1. #button_2 ← idがbutton_2の要素を
  2. click ← クリックしたタイミングで
  3. $(“#sample_3”).val($(“#sample_2”).val()); ← 値を入力

違うのは③の処理ですね。

先ほどは、val(“ボタンを押しました”)と記述していたため、固定の文字列をテキストフォームに設定していました。

しかし今回は、”ボタンを押しました”の部分を次のように記述しています。

$(“#sample_2”).val()

セレクタ.val()の()内に何も書かなかった場合は、指定した要素の値を取得することができます。よって、

  1. $(“#sample_3”).val($(“#sample_2”).val());

は、『下のフォーム(id=”sample_3″)に値を設定します。その値は、上のフォーム(id=”sample_2″)の値です』というプログラムになっていたので、今回の動きが実現できました。

セレクタ.val()は、

  • ()内に何も書かなかった場合、フォームの値を取得
  • ()内に何か書いた場合、()内に書いた値を設定

【応用】取得した値を使った処理(文字数チェック)

次は、jQueryを使って、テキストフォームに入力された値の文字数をチェックするプログラムをご紹介します。

※JavaScriptの変数やif文を使っています。

テキストフォームに文字を入力してみてください。

入力文字数:0文字

入力中に文字数が表示され、11文字以上入力すると、フォームの背景色が変わり、メッセージが表示されます。

これは以下のプログラムで実現することができます。

<!-- HTML -->
<div>
  <input type="text" id="sample_4" name="sample_4" placeholder="入力してください" autocomplete="off">
  <p>入力文字数:<span id="count">0</span>文字</p>
  <p id="error_message"></p>
</div>

<!-- jQuery読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- 入力中の値を取得し、文字数チェックを行う -->
<script>
  // idがsample_4の要素でキーを離したときに発動
  $("#sample_4").keyup(function(){
    // 要素の値を取得し、文字数を数える
    var wordCount = $(this).val().length;
    // idがcountの要素に文字数をセット
    $("#count").text(wordCount);

    // 文字数に応じて処理
    if(wordCount>10){
      // 10文字より多い場合、フォームの背景をピンク色にし、エラーメッセージを表示
      $(this).css({"background-color":"pink"});
      $("#error_message").text("10文字以内で入力してください");
    }else{
      // それ以外の場合、フォームの背景を白色にし、エラーメッセージを削除
      $(this).css({"background-color":"white"});
      $("#error_message").text("");
    }
  })
</script>

 

  • セレクタ.keyup
    今回は、実行のタイミングを「click」ではなく、「keyup」としています。
    「keyup」は、キーボードのキーが押され、上がった際に処理を行います。
    これによって、テキストフォームの入力中に、文字数をチェックする処理を行うことができます。
  • $(this)
    セレクタに「this」と記述している箇所があります。
    これは、イベント(実行のタイミングのこと)が発生した要素を指します。
    今回でいうと「keyup」が発生した要素、つまり「”#sample_4″」のことを指します。
  • セレクタ.text()
    text()はセレクタで指定したpタグやspanタグなどに対し、()内に記述したテキスト(文字)を設定します。
  • セレクタ.css()
    css()はセレクタで指定した要素に対し、()内に記述したCSS(文字の色や大きさ、背景色などを指定するための言語)を設定します。

10文字より多い場合の処理だけを書いていると、一度10文字を超えた場合にhtmlが書き換わってしまうため、その後入力内容を修正して10文字以下になった場合にフォームの背景や表示したメッセージは元に戻りません。

そのため、10文字以下の場合の処理(背景やメッセージを元の状態に戻す)も書いておく必要があります。

おわりに

例としてテキストフォームを使い、jQueryで出来ることやプログラムの書き方をご紹介しましたが、これはjQueryの機能のほんの一部に過ぎません。

次のサイトにjQueryで出来ることがまとめられていますので、興味がある方は覗いてみてください。

jQuery日本語リファレンス

※辞書的に使用するのが向いているサイトなので、実際にコードを書く場面で参考にするのがよいかと思います。

jQueryを使うためには、HTMLとJavaScriptの知識が必須になってきます。

CSSはデザインを整えるのにあたって使えた方がよいですが、とりあえずjQueryを動かすという点では必須ではないかなと思います。※Webサイトを作成するのに結局必要になります。

これからWebサイト作成の勉強を始める方はHTML→CSS→JavaScript→jQueryの順で学んでいけばよいかと思います。

ちなみに、僕は、かの有名な『Progate』で学んだあと、以下の書籍で学習を行いました。

<スラスラわかるHTML&CSSのきほん>

架空のCafeのWebサイトを作成しながらHTMLとCSSのきほんを学ぶことができます。

オールカラーで画像やコードを挟みながら、

  • そもそもHTMLとは?
  • 自分のパソコンでHTMLファイルを作ってブラウザで確認する方法

といったところから、

  • HTMLの階層関係や各タグの使い方
  • CSSの基礎からレスポンシブデザイン(パソコンやスマホなど画面サイズによってサイトの見た目を変える現代では必須の知識)

まで一通り勉強することができます。

この本を学習しておけば、自分でサイトを作り始めることができるかなと。

もちろん実際に作り始めると分からないことやうまくいかないことも出てきますが、ネットで調べて出てくる情報を理解できるレベルになっていると思います。

<確かな力が身につくJavaScript「超」入門>

こちらもオールカラーで、

  • JavaScriptとは?
  • HTMLとCSSとの関係

といったところから、

  • JavaScriptの各文法
  • jQuery
  • Ajax(非同期通信といってこちらも現代では必須の知識)

まで、実際に動くものを作りながら学ぶことができます。


 

ただし、jQueryについては、10ページ程度しかないため、本格的に学びたい場合は別途教材が必要になるかと思います。

僕もまだjQueryの書籍は購入しておらず、ネットで調べながら使っているところですが、体系的な知識を得るため何か1冊は買う予定ですので、その際にはまたご紹介したいと思います。

End



この記事を読んだ人がよく読んでいる記事