プログラミング基礎「分岐処理」「ループ処理」
概要
JavaScriptを使って、分岐処理（条件によって処理を分ける）とループ処理（繰り返し処理）の基本を学びます。最終的に「FizzBuzz」という定番の練習問題をブラウザで動作する形で実装します。
学べること
以下のような基本構文と実装方法を体験できます。
- if文 / switch文による条件分岐の書き方
- for文 / while文による繰り返し処理
- HTML + JavaScriptの連携
- FizzBuzzプログラムの作成
実務活用例
- 年齢による表示内容の出し分け
- リストやテーブルをループ処理で出力
- 条件に応じたCSSの適用
- ボタンクリックで処理を実行するWebアプリケーション
サンプルコード
if文の基本
switch文の例
for文：1〜10の出力
while文：1〜10の合計
FizzBuzz（1〜30）
ブラウザ上でFizzBuzzを実行するHTMLサンプル
試してみよう
- if文で年齢判定ロジックを変更してみましょう（例：65歳以上は「高齢者」）
- FizzBuzzの上限値を100にして、ルールに「7の倍数はBang」も追加してみましょう
- HTMLを応用して、実行結果をテーブルで表示するUIに変えてみましょう
この記事は以下のプロンプトでAI生成されています
以下の記事をNotionで作成するためマークダウン形式で出力してください
内容：JavaScriptの分岐処理とループ処理について初心者向けに解説。FizzBuzzのHTML演習付きで、ブラウザで動くことを重視。
ポイント：
- サンプルコードはコンソールとHTML両方
- 実務応用やWebアプリ構築の一歩につながる流れにする
チャレンジ問題
- 7の倍数のとき「Bang」を表示するように変更してみましょう
- テーブル形式で出力して、Fizz・Buzz・FizzBuzzに色をつけましょう
- ボタンを押すたびに結果を「追加」するようにしてみましょう（追記表示）
次のステップ
- 配列とオブジェクトを使ったデータ操作
- ユーザー入力に応じた分岐処理の高度化
- DOMの操作やイベントハンドリングの理解
このように、分岐と繰り返しの基本が分かれば、さまざまなロジックをプログラムで表現できます。まずは自分の手で書いて、試して、理解を深めていきましょう！