JavaScript の理論、そしてそれを使ってできることについて学んだところで、完全に実用的なチュートリアルを通じて、JavaScript の基本的な機能についての短期集中コースをお見せします。ここでは、簡単な「数字を当てる」ゲームをステップバイステップで構築します。

ここでは、JavaScript (とその他のプログラミング言語) がどのように動くのかという高度なコンセプトを紹介したいので、一度ですべての詳細を理解する必要はありません。詳細については続く記事にてご紹介しますので！

プログラマーのように考える

プログラミングで一番難しいのは、書き方を覚えることではなく、現実の問題にどう適用するかということです。プログラマーのように考え始める必要があります — それは一般的に、そのプログラムが何をしなければならないかという説明を見て、それを満たすためにコードのどんな機能を用いるかを考え、さらにそれを組み合わせていかなければなりません。

これには努力・プログラミング文法の経験・練習に加え、少しの想像力が必要です。たくさんコードを書けばもっと慣れていくでしょう。たったの 5分で「プログラマー脳」を開発することは約束できませんが、このコースを通じてプログラマーのように考えるたくさんの機会を提供したいと思います。

まずはそれを念頭に置いてから、この記事で作るプログラムの実例を見てみましょう。さらにその後、具体的な手順に落とし込む方法について学習しましょう。

例: 数字当てゲーム

この記事では、以下に示す簡単なゲームを作る方法を紹介します。

前提条件:	基本的なコンピューターの知識および HTML と CSS への理解、JavaScript とは何かを知っている。
目的:	簡単な JavaScript を書いてみて、JavaScript のプログラムを書くために必要な知識を会得する。

Top hidden code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>数字当てゲーム</title>
    <style>
        html {
            font-family: sans-serif;
        }

        body {
            width: 50%;
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }

        .lastResult {
            color: white;
            padding: 3px;
        }
    </style>
</head>

<body>
    <h1>数字当てゲーム</h1>
    <p>1 から 100 までの数字を当ててみて！10 回以内に当てられるでしょうか。選んだ数字が大きいか小さいかを表示します。</p>
    <div class="form"> <label for="guessField">予想を入力してください: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="予想を入力" class="guessSubmit"> </div>
    <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
    </div>
</body>
<script>
    // JavaScript はここから
    let randomNumber = Math.floor(Math.random() * 100) + 1;
    const guesses = document.querySelector('.guesses');
    const lastResult = document.querySelector('.lastResult');
    const lowOrHi = document.querySelector('.lowOrHi');
    const guessSubmit = document.querySelector('.guessSubmit');
    const guessField = document.querySelector('.guessField');
    let guessCount = 1;
    let resetButton;
    function checkGuess() {
      let userGuess = Number(guessField.value);
      if (guessCount === 1) {
        guesses.textContent = '前回の予想: ';
      }

      guesses.textContent += userGuess + ' ';

      if (userGuess === randomNumber) {
        lastResult.textContent = 'おめでとう! 正解です!';
        lastResult.style.backgroundColor = 'green';
        lowOrHi.textContent = '';
        setGameOver();
      } else if (guessCount === 10) {
        lastResult.textContent = '!!!ゲームオーバー!!!';
        lowOrHi.textContent = '';
        setGameOver();
      } else {
        lastResult.textContent = '間違いです!';
        lastResult.style.backgroundColor = 'red';
        if(userGuess < randomNumber) {
          lowOrHi.textContent='今の予想は小さすぎです!もっと大きな数字です。' ;
        } else if(userGuess > randomNumber) {
          lowOrHi.textContent = '今の予想は大きすぎです!もっと小さな数字です。';
        }
      }

      guessCount++;
      guessField.value = '';
    }

    guessSubmit.addEventListener('click', checkGuess);

    function setGameOver() {
      guessField.disabled = true;
      guessSubmit.disabled = true;
      resetButton = document.createElement('button');
      resetButton.textContent = 'Start new game';
      document.body.appendChild(resetButton);
      resetButton.addEventListener('click', resetGame);
    }

    function resetGame() {
      guessCount = 1;
      const resetParas = document.querySelectorAll('.resultParas p');
      for(let i = 0 ; i < resetParas.length ; i++) {
        resetParas[i].textContent = '';
      }

      resetButton.parentNode.removeChild(resetButton);
      guessField.disabled = false;
      guessSubmit.disabled = false;
      guessField.value = '';
      guessField.focus();
      lastResult.style.backgroundColor = 'white';
      randomNumber = Math.floor(Math.random() * 100) + 1;
    }
</script>

</body>
</html>

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

さあ、ゲームで遊んでみてください。次に進む前にゲームに慣れておきましょう。

上司から、次のように作るゲームの概要を聞いたところを想像してみてください。

できるだけプログラマーのように考えると、この概要から最初に行うべきことは、簡潔な実行可能な単位に分割することです。

さあ、先に進みましょう。この手順をどのようにコードにするのか見て、JavaScript の機能を探求していきましょう。

まず初めに

チュートリアルを開始するにあたり、自分のコンピューターに number-guessing-game-start.html ファイル (こちらでデモが見られます) をコピーしてください。テキストエディターとブラウザーの両方でそのファイルを開いてください。すると、簡単な見出しと説明の段落、予想を入力するフォームが見えるでしょう。ただし、そのフォームはまだ何もできません。

コードを入力するのはすべて HTML の一番下にある {{htmlelement("script")}} 要素の中です。

データを保持する変数を追加する

始めましょう。まず、{{htmlelement("script")}} 要素の中に以下の内容を書いてみてください。

上記のコードはプログラムが使用するデータを保持する変数と定数をセットアップしています。変数とは基本的には値 (数字や文字など) の入れ物です。 let (か var) キーワードに続いて変数の名前を書くことで、変数を作成します (これらのキーワードの違いは以降の記事で見ます) 。定数は変更しない値を保持するのに、 const キーワードといっしょに使います。この場合では、定数をユーザーインターフェイスのパーツへの参照を保存するのに使っていて、一部の内部のテキストは変わるかも知れませんが、参照されるHTML要素は同じままです。

等号記号 ( = ) に続いて、与えたい値を書いて、変数や定数に値を代入できます。

関数

次に、以下のコードを先ほどの JavaScript に追加してください。

関数は再利用可能なコードのかたまりです。何度も実行することができ、同じコードを書く手間を省けます。これはとても便利です。関数の書き方 (定義の仕方) はいくつかありますが、今回は集中するために、一つの簡単な書き方だけを使用します。ここでは function キーワードに続いて関数の名前、括弧 ( () )、中括弧 ( { } )が続く書き方で定義しました。中括弧の中に、関数を呼ぶたびに実行されるコードを書きます。

関数を実行したい場合には、関数の名前に続いて括弧を書きます。

それでは試してみましょう。コードを保存してブラウザーを再読み込みしてみてください。開発者ツールの JavaScript コンソールを開いてください。そして次のコードを実行します。

Return/Enter を押した後で、"ここはプレースホルダです"という警告が表示されましたね。呼び出すと、いつでも警告が表示される関数を定義することができました。

演算子

JavaScript で演算子を使用して値の確認をしたり、計算したり、文字を結合したりなど、いろいろなことができます。

コードを保存してブラウザーを再読み込みしてみてください。まだ開いていなければ、開発者ツールの JavaScript コンソールを開いて、表の「例」の列に書いてある通りに入力してみましょう。例を一つ入力したら、その都度 Return/Enter キーを押してください。結果が表示されるはずです。

演算子	名前	例
`+`	加算	`6 + 9`
`-`	減算	`20 - 15`
`*`	乗算	`3 * 7`
`/`	除算	`10 / 5`

また、 + 演算子は 2 つの文字を繋げて一つにするときにも使います。(プログラミングでは文字列を結合すると言います。) 下の例も試してみてください。

累算代入演算子と呼ばれるもっと短い書き方もあります。すでにある文字列に、さらに文字を追加した結果を返したい場合などに使います。例えば、

true/false テスト（例えば条件内 - {{anch("Conditionals", "below")}}参照）を実行しているとき、比較演算子を使用します。例えば：

条件式

先ほどの checkGuess() 関数に話を戻します。当然ですが、ただ単にプレースホルダメッセージを出したいわけではありませんよね。この関数にはプレイヤーの予想が正しいかどうかを調べて適切に返事をすることを望みます。

それでは、今の checkGuess() 関数を以下のように書き換えてみましょう。

たくさん書きましたね！各部分に分割して、それぞれの部分を詳細に見て何をしているか説明しましょう。

イベント

ここまでで、checkGuess() 関数を上手に実装することができました。しかしまだ何も起きません。なぜなら、まだこの関数を呼び出していないからです。出来れば、"予想を入力"のボタンが押されたときに、この関数が呼ばれるようにしたいです。そのためにはイベントを使います。イベントとは、ボタンが押されたり、ページが読み込まれたり、ビデオを再生したりといったブラウザーで起きることで、それに反応してコードを実行させることができます。イベントが発生したことを聞き取る構成がイベントリスナーで、発生したイベントに反応して実行されるコードブロックがイベントハンドラーです。

guessSubmit ボタンに対して、イベントリスナーを追加しました。これは発生したことを知りたいイベントの種類 (この場合は click)と、イベントが発生した場合に実行するコード (この場合は checkGuess()) の 2 つの入力値 (引数と言います) を取る関数です。({{domxref("EventTarget.addEventListener", "addEventListener()")}}の中では括弧を書く必要はありません。)

保存して再度コードを読み直してください。今度はきっとある程度まで動くはずです。ただし、まだ問題があります。もし正解したり、予想回数の上限に達してしまった場合には、ゲームが止まってしまうでしょう。なぜなら、ゲームが終わった時に実行されるべき関数 setGameOver() をまだ定義していないためです。さあ、足りないコードを書いてチュートリアルの機能を完成させましょう。

ゲームの機能を完成させる

setGameOver() 関数をコードの一番下に追加して、中身を見てみましょう。これを JavaScript の一番下に追加します。

この関数も定義しなければなりませんね！もう一度、以下のコードを JavaScript のいちばん下に追加してください。

ちょっと長めのこのコードブロックは、プレイヤーが次のゲームができるように、ゲームを起動したときの状態に完全にリセットします。

ここまでで (単純ではありますが) 動くゲームの完成です。お疲れ様でした!

この記事では、あと少し説明しなければならない大事な機能が残っています。既に見ているはずですが気づいたでしょうか。

ループ (繰り返し)

上のコードでもう少し詳しく説明しなければならないのは、for ループです。ループはプログラミングにおいてとても重要な概念です。ある条件に達するまで何度も何度もコードを繰り返し実行することができます。

どうでしょうか。1 から 20 の数字がコンソールに出力されましたね。これが繰り返しです。for ループには 3 つの入力値 (引数) が必要です。

さて、それでは数字当てゲームに登場したループを見てみましょう。resetGame() 関数に以下の記述がありますね。

このコードは <div class="resultParas"> に含まれるすべての {{htmlelement("p")}} 要素を {{domxref("Document.querySelectorAll", "querySelectorAll()")}} というメソッドを使用して取得しています。そしてループを使用してその一つ一つの要素の中身を消去しています。

オブジェクトについて(簡単に)

オブジェクトについて説明する前に、プログラムに対して最後のちょっとした改良を加えてみましょう。JavaScript の書き出しの方にある let resetButton; のすぐ下に、以下の行を追記してファイルを保存します。

この行はページが読み込まれるとすぐ、 {{domxref("HTMLElement.focus", "focus()")}} メソッドを呼び出して、入力フォームの {{htmlelement("input")}} 要素に対して自動的にカーソル (フォーカス) を設定しています。つまり、ページが開いたと同時に、入力フォームを最初にクリックすることなくプレイヤーが予想を入力できるようにしているのです。本当にちょっとしたことですが、ユーザーにゲームで遊ぶためには何をすればよいかの視覚的なヒントを教えてあげることで、使い勝手が向上します。

もう少し詳細に何が起こっているのか分析しましょう。JavaScript では、すべてのものはオブジェクトです。オブジェクトというのは 1 か所に関連する機能をまとめたものです。自分でオブジェクトを作ることもできますが、高度なことなので、このコースの大分後まで出てきません。今は簡単に、これを使うと多くの便利なことができるようになる、ブラウザーに含まれる組み込みオブジェクトについて説明します。

この具体的なケースでは、HTML のテキスト入力フィールドを参照するために、最初に guessField 変数を作成しました。以下の行は最上部のあたりの変数定義で見つかります、

この参照を得るため、{{domxref("document")}} オブジェクトの{{domxref("document.querySelector", "querySelector()")}} メソッドを使用しています。querySelector() はある情報 (必要な要素を選択する CSS セレクタ) を受け取ります。

guessField に {{htmlelement("input")}} 要素の参照が得られたので、これでたくさんのプロパティ (基本的にはオブジェクトの内部に保持されている変数のことですが、中には値を変えられないものもあります) とメソッド (基本的にはオブジェクトの内部に保持されている関数のこと) にアクセスできるようになりました。ようやく {{htmlelement("input")}} 要素のメソッドの一つである focus() メソッドを使ってテキストフィールドにフォーカスを当てられます。

入力フォームの要素の参照を含まない変数に対しては、focus() は使用できません。例えば、guesses 変数には {{htmlelement("p")}} 要素への参照が入っていますし、guessCount には数値が入っています。

ブラウザーのオブジェクトで遊ぼう

少しブラウザーが持っているオブジェクトで遊んでみましょう。

ここで一息...

これで数字当てゲームができました。最後までついて来れましたね！作ったプログラムを動かしてみてください。(最後のプログラムはこちらでも遊べます。) もし作ったプログラムが動かなければ、ソースコードと見比べてみてください。

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

演算子	名前	例
`===`	厳密に等しい (全く同じかどうか)	`5 === 2 + 4 // false 'Chris' === 'Bob' // false 5 === 2 + 3 // true 2 === '2' // false; number versus string`
`!==`	等しくない (違うかどうか)	`5 !== 2 + 4 // true 'Chris' !== 'Bob' // true 5 !== 2 + 3 // false 2 !== '2' // true; number versus string`
`<`	小なり	`6 < 10 // true 20 < 10 // false`
`>`	大なり	`6 > 10 // false 20 > 10 // true`