XMLという任意のデータを定義するルールを提供するマークアップ言語です。
引用：https://aws.amazon.com/jp/what-is/xml/
マークアップ言語とは、文章を構造化するための言語です。「文章を構造化する」というと、なんだか非常に難しそうな印象を受けますが、基本的には「ここはタイトル部分です」「ここから本文が始まります」「ここは非常に重要な部分です」など、人間であれば直感的に理解できる事柄を、タグや記号で表示し、コンピューターに認識させることを指します。
引用：https://mynavi-creator.jp/blog/article/what-is-mark-up-language
結局どういうときに使うか、の全量は分からないですが、1つはわかりますので書き留めておきます。
それは、更新頻度の多いHTMLのエリアを、XMLで読み込んだデータで表示させるようにする、です。
ピックアップされたアイテム（例：お勧め商品やニュース記事など）を動的にウェブページ上に表示する際に使われます。
HTMLを直接編集するわけではなく、XMLで定義しているデータの中身（テキスト部分）を変更したり、データ自体を削除するだけで簡単に更新できます。
…と書きましたが、実際はそんなにHTMLを直接編集するときとそんなに変わらないかもしれません。
ただ、少しは早くなります。
コード例を以下に記録しておきます。
HTML
「pick_up_list」というclass名がついたulタグを記述します。
<ul class="pick_up_list"></ul>そして、ulタグの中にどういうコードを生成したいかを定義しておきます。（記述の必要はない）
fadeInは別の実装（スクロールフェードイン）のために、記述したものです。
<li class="fadeIn">
<a href="/practice/programming/article_001">
<div class="li_img">
<img src="/practice/programming/images/main_img.jpg" alt="">
</div>
<p class="li_p">記事001<br><span class="li_p_supplement">2024.11.02 ｜ プログラミング</span></p>
</a>
</li>XML
続いてXMLファイルを用意します。
<?xml version="1.0" encoding="UTF-8" ?>
<items>
<item type="programming" pickup="true">
<link>/practice/programming/article_001</link>
<image>/practice/programming/images/main_img.jpg</image>
<alt></alt>
<title>記事001</title>
<date>2024.11.02 ｜ プログラミング</date>
</item>
</items>jQuery
最後にXMLをHTMLに表示するためのjQueryを用意します。
$(function () { //ページが完全に読み込まれた後に実行されるため、ページ内の要素を安全に操作できます。
//start
$.ajax({
url: 'xml/pick_up.xml', //jQueryの$.ajax関数を使って、XMLファイルに非同期でアクセスしています。
type: 'GET', //HTTPリクエストの種類をGETに指定しています。サーバー上のデータを読み込むリクエストです。
dataType: 'xml', //取得するデータの形式をxmlと指定しており、XML形式のデータとして処理します。
timeout: 1000, //通信が1秒（1000ミリ秒）を超えた場合、エラーメッセージが表示されます。
error: function() {
alert("ロード失敗");
},
success: function(xml) { //通信に成功した場合、取得したXMLデータをxmlという変数に渡し、さらに処理を行います。
$(xml).find("item[pickup=true]").each(function() {
//取得したXMLデータから、pickup属性がtrueであるitem要素を探し、1つずつ処理します。each関数を使って、該当するすべてのitem要素に対してループ処理を行います。
$(".pick_up_list").append
('<li class="fadeIn"><a href="'
+ $(this).find('link').text()
+ '"><div class="li_img"><img src="'
+ $(this).find('image').text() + '" alt="' + $(this).find('alt').text() + '"></div><p class="li_p">'
+ $(this).find('title').text() + '<br><span class="li_p_supplement">' + $(this).find('date').text() + '</span></p></a></li>');
})
}
})
//finish
});少しわかりづらいのが、append以降の記述かな、と思いますので以下に整理します。
('<li class="fadeIn"><a href="'
+ $(this).find('link').text()
+ '"><div class="li_img"><img src="'
+ $(this).find('image').text()
+ '" alt="'
+ $(this).find('alt').text()
+ '"></div><p class="li_p">'
+ $(this).find('title').text()
+ '<br><span class="li_p_supplement">'
+ $(this).find('date').text()
+ '</span></p></a></li>'
)基本の形は、①と②を＋で連結させているということです。
①「’」で囲んだHTMLコード
②取得したXMLデータの中からタイトルやリンク・画像パスの情報を表示させる
Webページで頻繁に使用される形式なので、構造を覚えておくべきだと思いました。
追記
一度実装しましたが、追加で理解しておくべきと思いましたので、追記します。
練習サイトのURL：https://skblogwp.com/practice/
①JavaScript上で指定するXMLは、ルートからの相対パスで記述します。そうしないと、下層ページ読み込んだ際に行方不明（参照エラー）になります。
×
$.ajax({
url: 'xml/pick_up.xml',
〇
$.ajax({
url: '/practice/xml/pick_up.xml',②TOPページでは、すべてのジャンルから特に表示させたいもの（pickup=true）を表示、下層ページでは同一ジャンルのものを表示させると、1つのXMLファイルで済むので便利です。
▼XML
<item type="javascript" pickup="true">
<link>/practice/javascript/article_001</link>
<image>/practice/javascript/images/30378285_m.jpg</image>
<alt></alt>
<title>スムーススクロール</title>
<date>2024.11.03 ｜ JavaScript</date>
</item>
<item type="others" pickup="true">
<link>/practice/others/article_001</link>
<image>/practice/others/images/gtm_click.jpg</image>
<alt></alt>
<title>GTMで「カートに追加する」クリックイベント計測する練習</title>
<date>2024.11.02 ｜ その他</date>
</item>
…▼TOPページでは、pickup=trueのもののみを表示させる制御を行います。（falseになっているものは表示しない）
success: function(xml) {
$(xml).find("item[pickup=true]").each(function() {▼下層ページ（各ジャンルページ）では、true、falseに関係なくジャンルが一致するものを表示する制御を行います。
success: function(xml) {
$(xml).find("item[type='others']").each(function() {
コメント