jQueryが好きだ

はじめに

jQueryが好きだ。初めて出会ったとき、あまりにも簡単にWebの画面の書き換えが出来ることに驚愕した。
このライブラリを作った人は天才だ。おせじでもなく、おおげさでもなく、本心からそう思った。
jQueryを否定する勢力が増している。わたしは今でもjQueryが大好きです。
食わず嫌いの方へ。一口食べてみませんか？

研修の講師をしています。簡単なことを複雑に複雑に解決しているプログラムをみて苛立ちを覚えます。
簡単なことを簡単に伝える。複雑なことも簡単に伝える。解説いらずのソースコードの掲載を目指します。

全体構造

■ パターン１ サーバー連携有り

①入力処理
②送信処理
③業務処理(サーバーサイド)
④受信処理
⑤出力処理

■ パターン２ サーバー連携無し

①入力処理
③業務処理(クライアントサイド)
⑤出力処理

■ jQueryで出来ること

• DOMツリーの操作
  • ①入力処理
  • ⑤出力処理
• ajax通信
  • ②送信処理
  • ④受信処理

③はjQueryには無関係である。
この部分で理解に苦しむ場合は、プログラミング言語の学習およびアルゴリズムの学習が不足していると認識すればよい。
うまくいかないことをjQueryのせいにしないように！

① 入力処理

② 送信処理

③ 業務処理

④ 受信処理

■ xmlデータの操作

$(() => {
  /*
    xmlData：xmlデータ(文字列)
    xmlDOMTree: xmlDOMツリー(オブジェクト)
  */

  const xmlData = `
    <items>
    	<item>
    		<id>100</id>
    		<name>aaa</name>
    		<file>aaa.png</file>
    		<price>1000</price>
    	</item>
    	<item>
    		<id>200</id>
    		<name>bbb</name>
    		<file>bbb.png</file>
    		<price>2000</price>
    	</item>
    	<item>
    		<id>300</id>
    		<name>ccc</name>
    		<file>ccc.png</file>
    		<price>3000</price>
    	</item>
    </items>
  `;

  /*
    xmlデータ(文字列)をxmlDOMツリー(オブジェクト)に変換し、
    そのroot要素をjQueryオブジェクトにラップし取得する
  */
  const xmlDOMTree = $.parseXML(xmlData);
  const $xmlRoot = $(xmlDOMTree);

  /*
    jQueryオブジェクトにはjQueryメソッドが適用できる
    以下、簡単なサンプルを示す
  */

  /*
    2つ目の商品の単価を表示する
  */
  const price = $xmlRoot.find("item:eq(1) price").text();
  console.log(price);

  /*
    別解法：$(selector, context)の構文に準ずる使い方
  */
  const price2 = $("item:eq(1) price", $xmlRoot).text();
  console.log(price2);
});

■ JSONデータの操作

$(() => {
  /*
    JSONData：JSONデータ(文字列)
    data: JSのオブジェクト
  */

  const JSONData = `
    [
      {"id": 100, "name": "aaa", "file": "aaa.png", "price": 1000},
      {"id": 200, "name": "bbb", "file": "bbb.png", "price": 2000},
      {"id": 300, "name": "ccc", "file": "ccc.png", "price": 3000}
    ]
  `;

  /*
    JSONデータ(文字列)をJSのオブジェクトに変換する
  */
  const data = JSON.parse(JSONData);

  /*
    2つ目の商品の単価を表示する
  */
  const price = data[1].price;
  console.log(price);
});

書いてみたわかったこと
いまさらですが、JSONデータの操作にjQueryは無関係であることがよくわかりました(笑)
好みにもよりますが表示するだけならxmlよりのJSONの方がシンプルでよいかな。
でもxmlは探索も出来るところがすごいんだよな。
結論
どちらもすばらしい！

⑤ 出力処理

■ テーブルに行を追加する

$(() => {

  const id = 100;
  const name = "aaa";
  const price = 1000;

  // 新規tr要素の作成
  const $tr = $(`
    <tr>
      <td>${id}</td>
      <td>${name}</td>
      <td>${price}</td>
    </tr>
  `);

  // テーブルに行を追加する
  $("#table1").append($tr);
});

■ 複数行を一括で追加する

$(() => {

  /*
    テーブルに複数の行を一括して追加する
    DOMの更新頻度をさげるための工夫をする
  */

  const dataList = [
    {id: 100, name: "aaa", file: "aaa.png", price: 1000},
    {id: 200, name: "bbb", file: "bbb.png", price: 2000},
    {id: 300, name: "ccc", file: "ccc.png", price: 3000}
  ];

  /*
    親のない子を束ねるDocumentFragmentの作成
  */
  const $df = $(document.createDocumentFragment());

  $.each(dataList, (index, element) => {

    const $tr = $(`
      <tr>
        <td>${element.id}</td>
        <td>${element.name}</td>
        <td>${element.file}</td>
        <td>${element.price}</td>
      </tr>
    `);
    
    // DocumentFragmentに行を追加する
    $df.append($tr);
  });

  /*
    テーブルにDocumentFragmentを追加する
    DocumentFragmentは消滅し、親(table)と子(tr)が結束される
  */
  $("#table1").append($df);
});