学び

未経験からプログラミングを学ぶ順番｜HTML・CSS・JavaScriptからゲーム公開まで

2026年10月7日 ・ kakapo

「プログラミングを始めたいけど、何から学べばいいかわからない」

僕もプログラミング経験はまったくのゼロでした。今は AI の Claude と一緒に、ブラウザで遊べるゲームを4本作って、このサイトで公開しています。

この記事では、未経験の人がブラウザで動くもの（ゲームやWebサイト）を作れるようになるまでの順番を、僕の体験とあわせて紹介します。

全体の流れ

必要なのは、パソコンとブラウザ、メモ帳（できれば無料のコードエディタ）だけです。

3つの役割を、まずはつかもう

HTML・CSS・JavaScript は、それぞれ役割がちがいます。たとえるなら、こんな関係です。

• HTML：家の骨組み。どこに何があるか
• CSS：家の内装。色や形、配置
• JavaScript：家の電気や仕掛け。スイッチを押すと明かりがつく

3つが1つのファイルに入った、いちばん小さな例です。メモ帳に貼り付けて button.html という名前で保存し、ブラウザで開くと、ボタンを押すたびに数字が増えます。

動かしてみる

button.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのボタン</title>
  <style>
    /* CSS：見た目を決める */
    button { padding: 12px 24px; font-size: 18px; border-radius: 999px; }
    #count { font-size: 32px; font-weight: bold; }
  </style>
</head>
<body>
  <!-- HTML：画面の部品を置く -->
  <p>押した回数：<span id="count">0</span></p>
  <button id="push">押してね</button>

  <script>
    // JavaScript：動きをつける
    let count = 0;
    document.getElementById("push").addEventListener("click", () => {
      count++;
      document.getElementById("count").textContent = count;
    });
  </script>
</body>
</html>

コメント（/* */、<!-- -->、// で書いた部分）を見ると、どこが HTML・CSS・JavaScript なのかがわかります。

ステップ1：HTML で部品を置く

最初は、見出し（h1）、文章（p）、ボタン（button）、画像（img）くらいを使えれば十分です。「どの部品に、どんな名前（id）を付けるか」を意識しておくと、あとで JavaScript から動かしやすくなります。

ステップ2：CSS で見た目を整える

色（color・background）、大きさ（font-size・width）、余白（margin・padding）から始めましょう。慣れてきたら、部品を横や縦に並べる flex や grid を覚えると、スマホでもくずれない画面が作れます。

ステップ3：JavaScript で動きをつける

ここがいちばんの山場です。最初に覚えたいのは、次の4つです。

• 変数：点数や回数を覚えておく（上の例の count）
• イベント：「クリックされたら」「キーが押されたら」に反応する（addEventListener）
• 条件分岐：「正解なら〇〇、ちがったら××」（if）
• 画面の書きかえ：表示されている文字や数字を変える（textContent）

この4つがわかれば、クイズのような簡単なゲームはもう作れます。

ステップ4：小さなゲームを1本完成させる

勉強だけを続けるより、小さくてもいいから1本完成させるのが、いちばん力がつきます。おすすめは、4択のクイズゲームです。HTML・CSS・JavaScript がすべて出てくるうえに、コードが短く、問題を変えるだけで自分だけの作品になります。

作り方はHTMLとJavaScriptだけでクイズゲームを作る方法で、コピペで動くコード付きで解説しています。慣れてきたら、タイピングゲームやブロック崩しにも挑戦してみてください。

ステップ5：ネットに公開する

完成したら、ネットに公開しましょう。URLを友だちに送って遊んでもらえるのは、とてもうれしい瞬間です。僕のゲームを遊んでもらったときも、「今はAIでこんなのができるのか」と驚いてもらえました。

公開の方法は、個人サイトを独自ドメインで公開する方法にまとめています。無料で公開できるサービスもあります。

僕の場合：順番どおりではなく、AIと作りながら

正直に言うと、僕はこの順番どおりに学んだわけではありません。AIの Claude に相談しながら、いきなりゲームを作り始めました。頭の中にあったゲームを伝えたら、1日で遊べるものができあがりました。

ただ、作っていくうちに困ったことがあります。細かい部分を直そうとすると、全体が壊れてしまうのです。AIを使えば「作る」ことはできますが、直したり機能を足したりするには、どこが HTML で、どこが CSS で、どこが JavaScript なのか、という仕組みの理解が必要でした。

なので、これから始める人には、こんな進め方をおすすめします。

• この記事の順番で、3つの役割と基本だけを先にざっくりつかむ
• あとは作りたいものを決めて、わからないところは AI や公式のドキュメントで調べながら作る
• AI が書いたコードは、「なぜこう書いたの？」と聞いて、仕組みを理解しながら進める

AI への頼み方のコツは、AIにゲーム制作を頼むコツにまとめています。

学ぶときに役立つもの

• MDN Web Docs：HTML・CSS・JavaScript の公式に近い解説サイト。無料で、日本語のページもあります
• AI（Claude など）：わからないところを質問したり、書いたコードを説明してもらったりできる
• スクールやオンライン講座：体系的に学びたい人、質問できる先生がほしい人向け。費用の一部が国の制度で戻ってくる講座もあります（給付金の記事）

独学とスクールのどちらが合うかは、プログラミングの学び方診断や、独学とスクールの比較記事を参考にしてください。

まとめ

• 学ぶ順番は、HTML → CSS → JavaScript → 小さなゲーム → 公開
• 最初は3つの役割と基本だけをつかめばOK
• 勉強だけで終わらせず、小さくても1本完成させる
• AI を使うなら、「なぜこう書いたの？」と聞いて、仕組みも理解しながら進める