JQuery実践編

先日JQueryについての記事を書きました

今日は前回作った郵便番号検索のプログラムをJQueryを使って実際に書き換えてみたいと思います

以下がそのコードです

JQueryを使って書き換えたコード

1つめがHTMLのコードです

こちらも少し書き換えています

JQueryを利用する際のHTMLの書き方について

前回の内容と変えた点は

15行目　<button type=”button” class=”zipcloud_search”>検索</button>　の部分です

前回はこんな感じでした

<button type=”button” class=”zipcloud_search” onclick=”serchAdr();”>検索</button>

前回のコードでは、HTMLで直接イベントの処理を加え、関数を呼び出していました

今回は、class名だけ与えて、Javascriptのファイルのほうへイベントの実行を移しました

JSファイルのこの部分です　$(‘.zipcloud_search’).click(function (){

JQueryを使うとこのような記述の仕方になります

DOM操作がしやすいというのがJQueryの特徴の一つです

直接働きかけるようなコードがかけるため

HTMLに呼び出す形ではなく、Javascript側からJQueryを利用して書いたほうが一元化されるため処理がすっきりして見やすいですよね

JQuery詳しい説明はJSファイルの説明のところでします

HTMLに話を戻します

もう一つ変更した点は22行目です

この1行で<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

JQueryを利用可能な状態にしています

ダウンロードではなくCDNを利用して呼び出しています

詳しくは前回の記事を参照にしてください

23行目にJavascriptの本体のjsファイルとの紐づけをしていますが、こちらより前に記入して実行するようにしてください

エラーがでて実行できなくなります！

HTMLについては以上ですね

JSファイル側の書き方について　処理開始時の注意点

JQueryを利用するということは、DOM操作が入ると考えられます

そのため、最初に現れるのが1行目のこの表記です

$(function(){処理……}

この表記によって

DOMの表示がすべて終了したら処理を開始するということになります

たった1行で読み込みのタイミングによるエラーを抑えることができる優れものです

ここの書き方は3つあります

1. ①$(function() {処理});
   ②$(document).ready(function(){});
2. ③$(window).on(‘load’, function() {処理});

１の①②は同じ処理です

②の短縮した書き方が①になります

では１．と２．の違いを説明します

１．のreadyの処理はDOMが読み込まれた直後

２．のloadは画像なども含めてすべて完了後に処理を実行

よって基本はreadyの１．①②でOKです

DOMの読み込みが終了した時点で処理が開始されますので、画像を読み込む時間を短縮できます

その分処理が早くなるため、基本的にreadyの処理の①②を使いましょう

画像を読み込んだあとでないと都合が悪い場合はloadを利用します

画像に対する処理が行う場合は当然画像の読み込みができていないとエラーが生じます

その場合はloadの処理である③の書き方をして処理を開始するようにしましょう

普段①②を使うのが当たり前になるとこういったミスって気が付かないとなかなかわからなくて延々とはまり続けることもありますので

③の選択についてもしばらくは考えてコードを書く癖が必要になりますね

DOM要素の変更の仕方

DOM要素の内容の取得や、変更についてはとても簡単に書くことができます

2行目の$(‘.zipcloud_search’).click(function (){ボタンクリック後の処理…}

の部分がイベント処理の基本的な書き方です

$(’.〇〇’).イベント(function(){処理}

ポイントはHTMLでidやclass名をつけて処理をする場合は

idが#（ナンバーサイン）でclassは.（ドット)の記号で表します

当然イベント処理以外にもメソッドを処理することができますので、それ以外の処理も含めて基本的なJQueryの書き方を確認しておきましょう

記述ルール

セレクタの書き方は先ほど書いた通りです

処理をしたいセレクタを引数に入れるとをオブジェクト返ってきます

そしてそのオブジェクトにメソッドを施すわけです

.メソッド()の書き方はオブジェクトに対するメソッドの処理をする際の書き方と同じですね

先ほどのクリックイベントのようにメソッドの引数に関数を入れて処理をすることもできます

また、同じオブジェクトに対してメソッドを複数こ並べることもできます

これをメソッドチェーンといいます

またそれを利用したコードが出てきたときに説明の記事を書きたいと思います

JQueryでAjax処理をおこなう

Ajaxというのは、WebAPIを利用する際に使用することの多い処理方法です

もともとは同期処理をおこなって、再読み込みをしてレスポンスを処理していましたが

その場合、処理がストップしてしまい

どうしてもスムーズな閲覧ができなくなってしまいます

そこで使われるのがAjaxというJavascriptとXMLを利用した非同期処理とよばれる処理になります

これによって、一部の情報に対するリクエストを送る形になります

ということで変更点の処理だけになりますので、スムーズに動かせるというのが簡単な説明となります

前回のWebAPIを利用するプログラミングでも、必要な個所だけ変更をするというDOM操作を行っていました

あれもAjaxを利用した処理です

今回はそのAjax処理をJQueryで記述するとどうなるかを説明します

それがこの部分です5行目$.ajax({リクエスト}).done(function(data){処理…　})

とても簡単に書くことができます

リクエストの書き方から

たったのこれだけでリクエストができます

今回のコードでは

　url: ‘http://郵便番号APIのリクエストURL/search?zipcode=’ + $(‘#yubincode’).val()

とかいて後ろでセレクタの中身を抜き出してそれを書き加えています

このセレクタの中身はインプットされた郵便番号です

これによって返されるのはJSON形式で記述されたオブジェクト型のデータです

そしてそのままそれに対する処理を.done以下で書くというだけです

では、後半部分のレスポンスに対する処理の書き方を確認します

このように、JQueryをりようすることで、簡単にWebAPIを利用することができます

JQueryがDOM操作に便利であるということは今回の記事でご理解いただけたのではないでしょうか

今回はかなり大切なないようになりますのでYouTubeも長編となっています

時間があるときにぜひご覧ください！