配列を使ってリンク集(リスト一覧)を作る方法《JavaScript》

Last updated at 2025-10-29Posted at 2025-10-27

はじめに

JavaScriptの配列を使って、リンク集(リスト一覧)を作る方法をまとめました。

《配列とは？》
複数のデータを１つのグループに格納して取り扱えるJavaScriptの機能のこと。
["タイトル", "サイトのURL"]
{title:"タイトル", url:"サイトのURL"}
などの形でデータを取り扱える。
大量のデータを取り扱いたい時に便利。

JavaScriptの配列で作ったリンク集の例

リンク集のサンプル
https://text.sakura.ne.jp/note-sample/qiita-hairetsu-links.html

JavaScriptのソースコードの例

JavaScript (配列でリンク集を作成)

window.onload = function() {

//[01]	<ul id="lists"></ul>を作成
//		<body>の下に<ul>を作り、<ul>の中に『id="lists"』を挿入
document.getElementsByTagName("body").item(0).appendChild(document.createElement("ul")).setAttribute("id", "lists");

//[02]	リンクしたいサイトのタイトルとURLの一覧を作成
//		タイトルは『sites[0].title』、URLは『sites[0].url』で呼び出せる
let sites = [
{title:"クリスマス・イブ",		url:"https://youtu.be/x8CgehqveLI"} ,
{title:"ビビデバ",				url:"https://youtu.be/xRl-RPv5bU8"} ,
{title:"いとしのエリー",			url:"https://youtu.be/xDRNp15kG-A"} ,
{title:"楓",					url:"https://youtu.be/828sdsTqsok"} ,
{title:"LA･LA･LA LOVE SONG",	url:"https://youtu.be/l155d_6hohY"} ,
{title:"大丈夫",					url:"https://youtu.be/im40yS65leA"} ,
{title:"浪漫飛行",				url:"https://youtu.be/8AA-QRI3u-4"} ,
{title:"田園",					url:"https://youtu.be/14f7ZoGiqWA"} ,
{title:"わたしを甘やかすなら",	url:"https://youtu.be/lhzIgTidMqU"} ,
{title:"君色に染まる",			url:"https://youtu.be/InrwpyXNtio"}
];

//[03]	<li></li>を作成
//		<li>の中に『<a href="リンクのURL">リンクのタイトル</a>』を挿入
for (let i = 0; i < sites.length; ++i){
document.getElementById('lists').insertAdjacentHTML('beforeend', `<li><a href="${sites[i].url}">${sites[i].title}</a></li>`);
}

};

HTMLのソースコードの例

HTML

<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>配列を使ってリンク集(リスト一覧)を作る方法《JavaScript》</title>
<script src="qiita-hairetsu-links.js"></script>
</head><body>
</body></html>

配列を使うメリット

データの追加･修正･削除が簡単
データの中身が見やすい
データを出力する時の形式が変わっても簡単に対応できる
- リンク形式の例［①］[タイトル](URL)
- リンク形式の例［②］<a href="URL">タイトル</a>
ソースコードが見やすい

配列を使ってリンク集(リスト一覧)を作る方法《JavaScript》

はじめに

JavaScriptの配列で作ったリンク集の例

JavaScriptのソースコードの例

HTMLのソースコードの例

配列を使うメリット

関連サイト