階層の配列データをリストタグでマークアップする方法

カテゴリーの階層をリスト形式でマークアップする際に、プログラミングでどのように書くのかパッと分からない人のためのヒントとして書いてみました。

本のジャンルをリストタグでマークアップしてみる

今回は「本 > コンピューター > プログラミング > JavaScript」という階層を次のように配列にしてみます。

var cats  = ['Book', 'Computer', 'Programming', 'JavaScript'];

これを次のようなリストになるようにしてみましょう。

<ul>
<li>Book
<ul>
<li>Computer
<ul>
<li>Programming
<ul>
<li>JavaScript</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

サンプルコード

サンプルコードはこちら。
備忘録としてのコードスニペットなのでまぁ、簡単なものです。

var cats  = ['Book', 'Computer', 'Programming', 'JavaScript'];
var len   = cats.length;
var close = '';
for (var i=0; i<len; i++) {
document.write('<ul><li>' + cats[i]);
close += '</li></ul>';
}
document.write(close);

ポイントは最後に閉じるタグ文字列を一気に結合する部分ですね。
DOMモデル操作でやってもいいのですが、より汎用性を持たせてみました。

この例のように特定の文字列で挟んでいくようなルールを持った情報を形作るには、後半の閉じていく部分をループで形作っていき、最後に結合するという手法で実現させます。

応用すれば他言語や複雑な階層にも対応できると思いますので参考にどうぞ～。

1冊ですべて身につくJavaScript入門講座

￥2,515 (2025-04-26 01:19 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)

これからのJavaScriptの教科書

￥3,168 (2025-04-26 01:19 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)

独習JavaScript 新版

￥2,950 (2025-04-26 17:05 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)