株式会社Gutlink

未経験からプロのエンジニアへ

♦

学習デモ

♦

プログラミング体験デモ（詳しい解説付き）

実際にコードの動きを体験しながら、 プログラミングの仕組みを学んでみましょう。

① 超初心者向け：文字と色を変えて遊ぼう

ボタンを押すと箱の色と文字がランダムに変わります。 関数って何かをまとめた命令の箱です。

Hello! 
// まずは関数を作ります。「myFunction」という名前にしました
// ※関数名は自分で好きな名前に変えてOK！
function myFunction() {

    // この箱（funBox）を取ってきます
    const box =
        document.getElementById('funBox');

    // 色の倉庫を用意します
    const colors =
        ['青', '赤', '黄', '緑'];

    // 文字の倉庫を用意します
    const texts =
        ['Hello!', 'Hi!', '😊', '🎉'];

    // 倉庫からランダムに1つ選びます
    const colorIndex =
        Math.floor(Math.random() * colors.length);

    const textIndex =
        Math.floor(Math.random() * texts.length);

    // 箱の色と文字を変更します
    box.style.background = colors[colorIndex];
    box.textContent = texts[textIndex];
}

💡 この関数は 「ボタンを押したら箱の色と文字をランダムに変えるよ！」 という流れです。 関数名や色・文字は自由に変えて遊んでOK！

② 中級向け：数字当てゲーム

1～10の数字を当てます。 当たったら終了です。 

// 1～10のランダムな数字を作ります
const secretNumber2 =
    Math.floor(Math.random() * 10) + 1;

// 判定する関数を作ります
function checkGuess2() {

    // 入力欄から数字を取得します
    const guess =
        Number(
            document.getElementById(
                'guessInput2'
            ).value
        );

    const result =
        document.getElementById(
            'guessResult2'
        );

    // 入力が空の場合
    if (!guess) {

        result.textContent =
            "数字を入力してください";

        return;
    }

    // 1～10以外の場合
    if (guess < 1 || guess > 10) {

        result.textContent =
            "1〜10の数字を入力してください";

        return;
    }

    // 入力と正解を比べて判定します
    if (guess === secretNumber2) {

        result.textContent =
            "🎉 当たり！";

    } else if (guess < secretNumber2) {

        result.textContent =
            "もっと大きい数字です";

    } else {

        result.textContent =
            "もっと小さい数字です";
    }

    document.getElementById(
        'guessInput2'
    ).value = '';
}

💡 この関数は 「数字を入力して正解か判定する」 処理です。 関数名や数字の範囲は自由に変えて遊べます。

③ 上級向け：連続挑戦版数字当てゲーム

1～10の数字を当て、 正解すると次の数字に挑戦できます。 スコアと履歴も表示します。

スコア： 0 

// 新しい数字を生成する関数
function generateNewNumber3() {

    return Math.floor(
        Math.random() * 10
    ) + 1;
}

// 最初の正解数字
let secretNumber3 =
    generateNewNumber3();

// スコアと履歴を初期化
let score3 = 0;

let history3 = [];

// 判定関数
function checkGuess3() {

    const guess =
        Number(
            document.getElementById(
                'guessInput3'
            ).value
        );

    const result =
        document.getElementById(
            'guessResult3'
        );

    const historyDiv =
        document.getElementById(
            'history3'
        );

    if (!guess) {

        result.textContent =
            "数字を入力してください";

        return;
    }

    if (guess < 1 || guess > 10) {

        result.textContent =
            "1〜10の数字を入力してください";

        return;
    }

    let message = '';

    if (guess === secretNumber3) {

        message =
            "🎉 当たり！次の数字に挑戦できます！";

        score3++;

        secretNumber3 =
            generateNewNumber3();

    } else if (guess < secretNumber3) {

        message =
            "もっと大きい数字です";

    } else {

        message =
            "もっと小さい数字です";
    }

    result.textContent = message;

    history3.push(
        `あなたの入力: ${guess} → ${message}`
    );

    historyDiv.innerHTML =
        history3
            .map(
                item =>
                    '<div>' +
                    item +
                    '</div>'
            )
            .join('');

    document.getElementById(
        'score3'
    ).textContent = score3;

    document.getElementById(
        'guessInput3'
    ).value = '';
}

💡 この関数は 「連続挑戦＋スコア＋履歴」 を管理しています。 関数名や数字の範囲、表示方法も自由に変えられます。

初級編：文字と色を変えて遊ぼう

ボタンを押して色や文字を変えたあと、 「実行」ボタンで表示内容を更新します。 変更箇所はハイライトされます。

Hello!

コードプレビュー 

<div style="color:blue;">Hello!</div>

💻 初級編：文字と色を変えて遊ぼう（自分のPCで試す）

ボタンを押して色や文字を変えたあと、 「実行」ボタンで表示内容を更新します。 変更箇所はハイライトされます。

  1. 保存場所（フォルダ）を作る
    デスクトップで右クリック →「新規作成」 →「フォルダー」を選択
    フォルダ名を HelloWorld にする （名前は自由ですが、 わかりやすい名前がオススメ）
  2. メモ帳を開く
    Windowsなら 「スタート」 →「メモ帳」をクリック
  3. HTMLコードを書く
    以下のコードをコピーして貼り付けます： 
    <!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Hello World 実験</title>
</head>

<body>

    <div id="myBox"
         style="color:blue; font-size:24px;">
        Hello World
    </div>

    <button
        onclick="document.getElementById('myBox').style.color='red'">
        赤にする
    </button>

    <button
        onclick="document.getElementById('myBox').style.color='green'">
        緑にする
    </button>

</body>

</html>
  4. ファイルとして保存
    メモ帳で 「ファイル」 →「名前を付けて保存」 を選択
    保存場所を先ほど作った 「HelloWorld」フォルダにする
    ファイル名を index.html と入力
    「ファイルの種類」を 「すべてのファイル」に変更
    「文字コード」を UTF-8 に変更
    「保存」をクリック
  5. ブラウザで開く
    保存した index.html をダブルクリック
    ChromeやEdgeなどのブラウザで開く
    ボタンを押すと文字色が変わる！

🎲 中級編：数字当てゲーム（自分のPCで試す）

1〜10の数字を当てるゲームを作ってみましょう。 入力して判定ボタンを押すと、 正解かどうかが表示されます。

  1. フォルダを作る
    デスクトップで右クリック →「新規作成」 →「フォルダー」を選択
    フォルダ名を NumberGame にする
  2. メモ帳を開く
    Windowsなら 「スタート」 →「メモ帳」をクリック
  3. HTMLコードを書く
    以下のコードをコピーして貼り付けます： 
    <!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>数字当てゲーム</title>
</head>

<body>

    <h1>数字当てゲーム</h1>

    <input
        type="number"
        id="guessInput"
        min="1"
        max="10"
        placeholder="1〜10の数字">

    <button onclick="checkGuess()">
        判定
    </button>

    <p id="result"></p>


    <script>

        const secretNumber =
            Math.floor(Math.random() * 10) + 1;

        function checkGuess() {

            const guess =
                Number(
                    document.getElementById(
                        'guessInput'
                    ).value
                );

            const result =
                document.getElementById(
                    'result'
                );

            if (!guess) {

                result.textContent =
                    "数字を入力してください";

                return;
            }

            if (guess < 1 || guess > 10) {

                result.textContent =
                    "1〜10の数字を入力してください";

                return;
            }

            if (guess === secretNumber) {

                result.textContent =
                    "🎉 当たり！";

            } else if (guess < secretNumber) {

                result.textContent =
                    "もっと大きい数字です";

            } else {

                result.textContent =
                    "もっと小さい数字です";
            }

            document.getElementById(
                'guessInput'
            ).value = '';
        }

    </script>

</body>

</html>
  4. ファイルとして保存
    メモ帳で 「ファイル」 →「名前を付けて保存」
    ファイル名を index.html と入力
    「ファイルの種類」を 「すべてのファイル」
    「文字コード」を UTF-8 に変更
  5. ブラウザで開く
    保存した index.html をダブルクリック
    入力欄に数字を入れて 「判定」を押すと、 結果が表示されます

🏆 上級編：連続挑戦＋スコア付き数字当てゲーム（自分のPCで試す）

数字を当てると次の問題に挑戦でき、 スコアと履歴も表示されるゲームを作ります。

  1. フォルダを作る
    デスクトップで右クリック →「新規作成」 →「フォルダー」を選択
    フォルダ名を NumberGameAdvanced にする
  2. メモ帳を開く
    Windowsなら 「スタート」 →「メモ帳」をクリック
  3. HTMLコードを書く
    以下のコードをコピーして メモ帳に貼り付けます （このまま実行可能です）： 
    <!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>連続挑戦数字当てゲーム</title>
</head>

<body>

    <h1>連続挑戦数字当てゲーム</h1>

    <input
        type="number"
        id="guessInput"
        min="1"
        max="10"
        placeholder="1〜10の数字">

    <button onclick="checkGuess()">
        判定
    </button>

    <p id="result"></p>

    <p>
        スコア:
        <span id="score">0</span>
    </p>

    <div id="history"></div>


    <script>

        let secretNumber =
            Math.floor(Math.random() * 10) + 1;

        let score = 0;

        let history = [];


        function checkGuess() {

            const guess =
                Number(
                    document.getElementById(
                        'guessInput'
                    ).value
                );

            const result =
                document.getElementById(
                    'result'
                );

            const historyDiv =
                document.getElementById(
                    'history'
                );


            if (!guess) {

                result.textContent =
                    "数字を入力してください";

                return;
            }


            if (guess < 1 || guess > 10) {

                result.textContent =
                    "1〜10の数字を入力してください";

                return;
            }


            let message = '';


            if (guess === secretNumber) {

                message =
                    "🎉 当たり！次の数字に挑戦できます！";

                score++;

                secretNumber =
                    Math.floor(
                        Math.random() * 10
                    ) + 1;

            } else if (guess < secretNumber) {

                message =
                    "もっと大きい数字です";

            } else {

                message =
                    "もっと小さい数字です";
            }


            result.textContent =
                message;


            history.push(
                "あなたの入力: " +
                guess +
                " → " +
                message
            );


            historyDiv.innerHTML =
                history
                    .map(
                        item =>
                            "<div>" +
                            item +
                            "</div>"
                    )
                    .join('');


            document.getElementById(
                'score'
            ).textContent =
                score;


            document.getElementById(
                'guessInput'
            ).value = '';
        }

    </script>

</body>

</html>
  4. ファイルとして保存
    メモ帳で 「ファイル」 →「名前を付けて保存」
    ファイル名を index.html と入力
    「ファイルの種類」を 「すべてのファイル」
    「文字コード」を UTF-8 に変更
  5. ブラウザで開く
    保存した index.html をダブルクリック
    入力欄に数字を入れて 「判定」を押すと、 結果とスコア・履歴が表示されます

💡 正解すると次の問題に進む仕組みと スコア管理が学べます！

✨ 最後に…

ここまで作った初級～上級のサンプルを 自分でいろいろ変えて遊んでみましょう！

  • 文字や色、数字、スコア表示などを 自由に変更してみる
  • ボタンを増やしたり、 表示メッセージを変えてみる
  • 自分で変えた内容が 思った通りに動くか試してみる

💡 自分で編集して遊ぶことが、 プログラミングを理解する近道です！ 楽しみながら挑戦してみてください。