学習デモ – 株式会社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; }

  // 入力と正解を比べて判定します
  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; }

  // 判定してメッセージを作成
  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 => ''+item+'').join('');

  // スコア表示更新
  document.getElementById('score3').textContent = score3;

  // 入力欄を空にする
  document.getElementById('guessInput3').value='';
}

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

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

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

Hello!

コードプレビュー

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

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

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

保存場所（フォルダ）を作る
デスクトップで右クリック → 「新規作成」→ 「フォルダー」を選択
フォルダ名を HelloWorld にする（名前は自由ですが、わかりやすい名前がオススメ）
メモ帳を開く
Windowsなら「スタート」→「メモ帳」をクリック

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>

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

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

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

フォルダを作る
デスクトップで右クリック → 「新規作成」→ 「フォルダー」を選択
フォルダ名を NumberGame にする
メモ帳を開く
Windowsなら「スタート」→「メモ帳」をクリック

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 === secretNumber) { result.textContent = "🎉 当たり！"; }
      else if (guess < secretNumber) { result.textContent = "もっと大きい数字です"; }
      else { result.textContent = "もっと小さい数字です"; }
      document.getElementById('guessInput').value = '';
    }
  </script>
</body>
</html>

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

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

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

フォルダを作る
デスクトップで右クリック → 「新規作成」→ 「フォルダー」を選択
フォルダ名を NumberGameAdvanced にする
メモ帳を開く
Windowsなら「スタート」→「メモ帳」をクリック

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; 
      }
      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>

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

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

✨ 最後に…

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

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

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