【JavaScript】ナンプレの作り方-初心者が部品ごと作っていく過程-①マス目をクリックしたら水色にする

2026年9月15日 6分45秒

趣味で脳トレのパズルを作っていたら、ナンバープレイス（数独）や神経衰弱などクリックで動く簡単なブラウザゲームを作りたくなりました。じつは、数年前にプログラミングをやりたいと思って勉強したときは、作りたいものが見えていなくて途中で挫折したのです…いま、やっと作りたいものに対して調べたり学んだりする方向が分かり、けっこう楽しく夢中になっています（笑）

2026年9月現在、chatGPTなどAIに「JavaScriptでナンバープレイスを作って」と打ち込めば、パッとコードが生成されると思います。難易度別に問題生成のアルゴリズムも教えてくれるのかもしれません。

AIでなくとも、「JavaScriptで作るナンバープレイス」と検索すれば、初心者向けとして完成コードが表示されますよね。ただ、それだと、まだちょっと難しいところがあるのとプログラミングの勉強もしたいので部品ごとに学んでいこうと思いました。もちろん、AIを使っての調べながらですけれどｗ

そこで、勉強記録としてナンプレ作成過程を残していきます。初心者の拙いコードになると思いますが、生暖かく見守っていただければ幸いです。(*'ω'*)

ナンプレ部品-01-マス目をクリックしたら水色にする

ナンバープレイスは、9×9のマス目の縦の列、横の行のいずれにも、1から9までの数字を1つずつ入れていくというゲームです。

ゲームとして、まず「どのマス目に数字を入れるのか選択する」が初手になります。

そこで、

「マス目をクリックしたら水色にする」というコードを作ろうと思いました。※色を付けるだけ、まだ選択はできないｗ

マス目をクリックしたら水色にする（実行結果）

１・２・３・４のマス目をクリックすると水色が付きます。

ナンプレ部品-01-マス目をクリックしたら色が付く

1	2
3	4

マス目をクリックしたら水色にする（JavaScriptコード）

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>ナンプレ部品-01-マス目をクリックしたら水色にする</title>
  </head>
  <body>
    <table id="fourSquares">
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>

    <script>
      const table = document.getElementById("fourSquares");

      table.addEventListener("click", (event) => {
        //クリックされたのが td タグの場合のみ実行
        if (event.target.tagName === "TD") {
          event.target.style.backgroundColor = "#6EC8E2";
        }
      });
    </script>
  </body>
</html>

<!doctype html>

<head>

<title>ナンプレ部品-01-マス目をクリックしたら水色にする</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

const table = document.getElementById("fourSquares");

table.addEventListener("click", (event) => {

//クリックされたのが td タグの場合のみ実行

if (event.target.tagName === "TD") {

event.target.style.backgroundColor = "#6EC8E2";

}

});

</script>

</body>

</html>

マス目をクリックしたら水色にする（CSSコード）

<style>
      table {
        border-collapse: collapse;
        width: 150px;
        margin: 0 auto;
      }
      td {
        border: solid 1px #000;
        width: 40px;
        padding: 20px;
      }
      td {
        text-align: center;
      }
</style>

<style>

table {

border-collapse: collapse;

width: 150px;

margin: 0 auto;

}

td {

border: solid 1px #000;

width: 40px;

padding: 20px;

}

td {

text-align: center;

}

</style>

マス目をクリックしたら水色にする（JavaScriptコード）解説

<script>
    const table = document.getElementById("fourSquares");

    table.addEventListener("click", (event) => {
      //クリックされたのが td タグの場合のみ実行
      if (event.target.tagName === "TD") {
        event.target.style.backgroundColor = "#6EC8E2";
      }
    });
</script>

const table = document.getElementById("fourSquares");

table.addEventListener("click", (event) => {

//クリックされたのが td タグの場合のみ実行

if (event.target.tagName === "TD") {

event.target.style.backgroundColor = "#6EC8E2";

}

});

</script>

2行目

const table = document.getElementById("fourSquares");

2	const table = document.getElementById("fourSquares");

getElementById()メソッドを使って、id="fourSquares"が付いている<table>要素を取得しています。

そして、取得した<table>要素を、新しく作った変数tableに代入しています。

これで、変数tableを使って、この<table>要素を操作できるようにしました。

4行目

table.addEventListener("click", (event) => {

4	table.addEventListener("click", (event) => {

addEventListener()は、指定したイベントが起きたときに、指定した処理を実行するように設定するメソッドです。

ここでは、

table.addEventListener("click", ...)

1	table.addEventListener("click", ...)

としているので、

「このtableの中でclickが起きたら、後ろに書いた処理を実行する」

という設定をしています。

そして、(event) => { }のeventには、今回のクリックに関する情報が入っています。

6行目

if (event.target.tagName === "TD") {

6	if (event.target.tagName === "TD") {

ここでは、

「今回、実際にクリックされたHTML要素のタグ名がTDだったら」

という条件を指定しています。

event.targetは、今回のクリックで実際にクリックされたHTML要素を表します。

そして、tagNameは、その要素自身のタグ名を返してくれます。

例えば、クリックされたものが、

・<table>なら"TABLE"

・<tr>なら"TR"

・<td>なら"TD"

・<p>なら"P"

つまり、

event.target.tagName === "TD"

6	event.target.tagName === "TD"

は、

「実際にクリックされた要素のタグ名がTDと一致するか？」

を確認しています。

今回作っているのはナンプレのマス目なので、<td>がクリックされた場合だけ、次の処理を実行したいわけです。

「tableの中でクリックされたものが、本当にマス目（td）だった場合だけ実行する」

という条件を作っています。

ナンプレ作成過程の目次

次回は、「水色のマス目を、もう一度クリックしたら元に戻す」を作ります。

ナンプレの作り方-①マス目をクリックしたら水色にする

ナンプレの作り方-②もう一度クリックしたら元に戻す

良ければ、人生の応援メッセージをランダムで表示するボタンもどうぞ