JavaScriptのwhile文を駆使してリスト要素を動的に生成するアプローチ｜DAD UNION

実際のウェブ開発の現場では、JavaScriptを使用して動的にコンテンツを生成し、サイトのユーザビリティやパフォーマンスを向上させるテクニックが日常的に利用されています。
この記事では、while文を使用してHTMLのulタグ内にliタグを動的に追加する方法について詳しく解説します。
そして、これがいかにしてウェブページの効率化や拡張性の向上に寄与するかを探求します。

前回の記事（実践JavaScript: for文を活用してHTMLタグ要素を動的に生成・追加する完全ガイド）とほぼ同じ処理をやってます。

Contents

ウェブ開発とJavaScriptのロール
効率的なコードを書く重要性
スタイリングの役割と実装方法
HTMLの枠組みを設計
実装 – JavaScriptで動的要素生成
while文を使ってループし、ulタグ内にliタグを追加するデモページ
まとめ

ウェブ開発とJavaScriptのロール

ウェブ開発において、ページ上で繰り返し要素を効率的に生成・管理する方法は数多く存在します。
中でも、JavaScriptはフロントエンド開発で頻繁に使われる言語です。
そのため、基本的なループ構文であるwhile文の使用法を理解することは、ウェブ開発者にとっての基礎中の基礎です。

効率的なコードを書く重要性

プログラムを書く際には、コードの簡潔さと効率性が重要となります。
なぜなら、それがページの読み込み速度や、メンテナンスのしやすさに直結するからです。
JavaScriptで繰り返し要素を生成することで、HTMLファイルのサイズを軽減し、コードの可読性を向上させることができます。

スタイリングの役割と実装方法

HTML要素がどのようにスタイリングされ、ページ上でどのように表現されるかは、CSSによってコントロールされます。
以下のCSSコードは、先ほどのul要素とli要素のスタイリングの一例です。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 30px 0;
}

ul{
  width: 120px;
  margin: 0 auto;
  padding: 0;
}
ul li{
  list-style: none;
  text-align: center;
  font-weight: bold;
}
</style>

　
CSSは、動的に生成される要素の見た目を整えるだけでなく、レイアウトやレスポンシブデザインの調整にも使用されます。

HTMLの枠組みを設計

次にHTMLを記述し、後でJavaScriptによって要素が動的に追加される領域を定義します。

<h1>以下はwhile文を使って10回ループし、ulタグ内にliタグを10個追加してます</h1>

<ul class="whiletxt">
</ul>

　
このulタグは、次のステップで説明するJavaScriptのコードのアウトプット先となります。

実装 – JavaScriptで動的要素生成

JavaScriptとそのライブラリであるjQueryを使用することで、HTML要素を動的に生成し、ページ上にレンダリングすることが可能です。
以下のコードは、ul要素にliタグを追加する基本的な実装の一例です。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  var i=1;

  while(i<=10){
    $('.whiletxt').append('<li>追加テキスト'+i+'</li>')
    i++;
  }
});
</script>

　
この方法を利用することで、データベースから取得した情報を基に動的にリスト要素を生成したり、ユーザーのアクションに応じてコンテンツを更新したりすることが可能となります。