はじめに
JavaScriptの配列を使って、リンク集(リスト一覧)を作る方法をまとめました。
《配列とは？》
複数のデータを１つのグループに格納して取り扱えるJavaScriptの機能のこと。
["タイトル", "サイトのURL"]
{title:"タイトル", url:"サイトのURL"}
などの形でデータを取り扱える。
大量のデータを取り扱いたい時に便利。
JavaScriptの配列で作ったリンク集の例
リンク集のサンプル
https://text.sakura.ne.jp/note-sample/qiita-hairetsu-links.html
JavaScriptのソースコードの例
JavaScript (配列でリンク集を作成)
window.onload = function() {
// [01] <div id="links"></div>を作成
// <body>の下に<div>を作り、<div>の中に『id="links"』を挿入
document.getElementsByTagName("body").item(0).appendChild(document.createElement("div")).setAttribute("id", "links");
// [02] <ul></ul>を作成
// <div>の中に<ul>を作り、<ul>の中に『id="lists"』を挿入
document.getElementById("links").appendChild(document.createElement("ul")).setAttribute("id", "lists");
// [03] リンクしたいサイトのタイトルと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"}
];
// [04] <li></li>を作成
// <li>の中に『<a href="リンクのURL">リンクのタイトル</a>』を挿入
for (let i = 0; i < sites.length; ++i){
document.getElementById("lists").innerHTML += `
<li><a href="${sites[i].url}">${sites[i].title}</a></li>
`;
}
};
配列を使うメリット
- データの追加･修正･削除が簡単
- データの中身が見やすい
- データを出力する時の形式が変わっても簡単に対応できる
- リンク形式の例［①］[タイトル](URL)
- リンク形式の例［②］<a href="URL">タイトル</a>
- ソースコードが見やすい
(text_sakura)