JavaScriptでXMLを読み込む方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでXMLを読み込む方法について現役エンジニアが解説しています。XMLはマークアップ言語で、タグを使って文書構造や修飾を表す仕組みのことです。今回はjQueryのAjaxを使用して、画面表示時に指定したXMLファイルを読み込み、画面に表示してみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでXMLを読み込む方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでXMLを読み込む方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

XMLとは

XMLとは「Extensible Markup Language」の略称で「拡張可能なマークアップ言語」と日本語訳されます。

マークアップ言語とは、「タグ」と呼ばれる文字列(<タグ></タグ>などの<>;</>で囲んだ文字列を装飾するもの)を使用して、文章の構造やタイトル、文字の修飾情報などを埋め込んでいく言語です。

XMLの特徴として、

  • データの意味に合わせて要素名(<○○></○○>の○○の部分)を自由に定義できること
  • 要素の定義を自由にできるので拡張性が高いこと
  • 記述方式が世界標準で統一されているため、様々なコンピュータシステムとデータの共有が可能なこと

が挙げられます。

JavaScriptでXMLを読み込む方法

JavaScriptでXMLファイルを読み込む方法はいくつかありますが、今回はjQueryのAjaxを使用して、画面表示時に指定したXMLファイルを読み込み、画面に出力する方法を行いたいと思います。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

test.xml(読み込むXMLファイル)

<?xml version="1.0" encoding="UTF-8"?>
<test_list>
<test_data>
<id>1</id>
<name>赤・青・緑</name>
<text>初代</text>
</test_data>
<test_data>
<id>2</id>
<name>金・銀</name>
<text>二代目</text>
</test_data>
<test_data>
<id>3</id>
<name>ルビー・サファイア</name>
<text>三代目</text>
</test_data>
</test_list>

 

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-language" content="ja">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="test.js"></script>
<title>タイトル</title>
</head>
<body>
<table>
<thead>
<tr>
<th>名前</th>
<th>備考</th>
</tr>
</thead>
<tbody id="data_list">
</tbody>
</table>
</body>
</html>

 

test.js

$(function(){
$.ajax({
url : 'test.xml'
, type : 'get'
, dataType : 'xml'
, cache : false
, success : function(data) {
var count = 0 ;
$(data).find("test_list").find("test_data").each(function(){
$("#data_list").append("<tr id=\"data_id" + count + "\"class=\"ins_data\"></tr>") ;
$("#data_list #data_id"+ count).html(
"<td>" + $(this).find("name").text() + "</td>"
+ "<td>" + $(this).find("text").text() + "</td>"
) ;
count++ ;
}) ;
}
, error : function() {
alert("データが見つかりませんでした。") ;
}
});
})

 

筆者プロフィール

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。