プログラミングで何が作れる？

✅ 回答

HTML/CSS/JavaScriptを学べば、ブラウザで動くものは何でも作れるようになります。学習段階ごとに作れるものを紹介します。

学習段階別：作れるもの一覧

段階	学んだこと	作れるもの
1週間	HTML基礎	自己紹介ページ、推しプロフィール
2〜3週間	HTML + CSS	学園祭サイト、レシピページ、部活紹介
1〜2ヶ月	+ JavaScript基礎	おみくじ、じゃんけん、クイズアプリ
2〜3ヶ月	+ DOM操作	ToDoリスト、電卓、タイマー、カウンター
3〜6ヶ月	+ API連携	天気アプリ、翻訳ツール、ポートフォリオ

中高生に人気の制作例

• 推しのファンサイト — 画像ギャラリー、プロフィール、イベントカレンダー
• 学園祭の特設サイト — 出し物一覧、タイムテーブル、アクセスマップ
• 自分用ツール — 宿題管理、単語帳、カウントダウンタイマー
• ブラウザゲーム — 神経衰弱、タイピングゲーム、○×ゲーム
• AO入試用ポートフォリオ — 作品集、活動記録、自己PR

「こんなものも作れるの？」意外な例

• Chrome拡張機能 — ブラウザに自分だけの機能を追加（HTML/CSS/JSで作れる）
• LINEボット — 自動返信するLINEアカウント（JavaScript + API）
• デジタルサイネージ — 学校の掲示板をWebページで表示

最初の1作品は何がいい？

迷ったら「自己紹介ページ」がおすすめ。理由：

1. 内容を考える必要がない（自分のことを書くだけ）
2. HTML/CSSの基本が全部使える
3. 完成したらそのままポートフォリオの第1号になる

「何を作ろう」と悩む時間があったら、まず自己紹介ページを1つ作ってみましょう。作り始めれば「次はこうしたい」というアイデアが自然に湧いてきます。

レベル別の作品アイデア

【初級：HTML/CSS だけ】
- 自己紹介ページ
- 学園祭のWebサイト
- 好きなアニメ・ゲームの紹介サイト
- レシピまとめサイト

【中級：JavaScript 追加】
- クイズアプリ（4択問題）
- ToDoリスト（追加・削除・完了）
- カウントダウンタイマー
- おみくじアプリ
- タイピングゲーム

【上級：API連携・データ保存】
- 天気予報アプリ（API連携）
- 家計簿アプリ（localStorage）
- チャットアプリ（WebSocket）
- ポートフォリオサイト

おすすめの始め方：「自分が毎日使いたいもの」を作る。使う人（自分）がいるから、改善したくなって学習が続きます。

最初の作品のコード例

<!-- 最もシンプルな「おみくじアプリ」 -->
<button id="btn">おみくじを引く</button>
<p id="result"></p>
<script>
  const fortunes = ["大吉", "中吉", "小吉", "凶"];
  document.getElementById("btn").addEventListener("click", () => {
    const i = Math.floor(Math.random() * fortunes.length);
    document.getElementById("result").textContent = fortunes[i];
  });
</script>

たった10行で「動くアプリ」が作れます。ここから機能を追加していけば、立派な作品になります。