皆さんこんにちは

私はとあるスーパーで副店長をしているとうすけと申します。
今回はChatGPTに力を借りてスマホで資格試験の問題演習ができるツールを"Google Apps Script（以下GAS）"で作ってみました。

📚 この記事でわかること

なぜ資格学習ツールを作ったのか
実際の画面と使い方
使用技術と構成
スプレッドシートとGASの設定手順
ChatGPTとのやりとり
自作して気づいたこと

🎯 きっかけと背景

私は今年から本格的にデジタルの学習に取り組むと決めました。

そこで、まずはデジタルの世界の登竜門とされるITパスポート試験を受験することにしました。

テキストと問題集を購入しましたが、分厚くて持ち運ぶのが大変。

スマホで学習がしたい！

テキストはともかく問題集ぐらいなら自分で作れないかな。

というわけで"GAS"を使ってITパスポート試験の問題集を作ってみました。

✨ 完成形

"問題を出す"をクリック
問題が表示されます
"〇"か"×"をクリック
正誤判定と解説まで自動表示されます

🧩 使用した技術構成

技術	用途
Google Apps Script	Webアプリのベース、UI操作
Google スプレッドシート	問題の管理

📌 ステップ①：スプレッドシート準備

1.スプレッドシートを作成し、シート名をquestionsにします。
2.最上列は｜問題ID｜問題文｜正解｜解説に設定
3.次の列から項目を入力
4.拡張機能をクリックしApps Script エディタを開く

📌 ステップ②：Apps Script の設定

`Code.gs`の設定

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile("index");
}

function getRandomQuestion() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("questions");
  const data = sheet.getDataRange().getValues();
  const questions = data.slice(1); // 1行目は見出し
  const randomIndex = Math.floor(Math.random() * questions.length);
  const q = questions[randomIndex];
  return {
    id: q[0],
    question: q[1],
    answer: q[2],
    explanation: q[3],
  };
}

📌 ステップ③index.html 作成とデプロイ

以下が index.html のコード全体です。これをGASのスクリプトエディタで新規ファイルとして作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ITパスポート問題集アプリ</title>
    <style>
      body {
        font-family: sans-serif;
        padding: 2em;
        background: #f5f5f5;
      }
      #question {
        margin-bottom: 1em;
        font-size: 1.2em;
      }
      .answer-button {
        font-size: 1em;
        padding: 0.5em 1em;
        margin: 0.5em;
        cursor: pointer;
      }
      #result {
        margin-top: 1em;
        font-weight: bold;
      }
      #explanation {
        margin-top: 1em;
        background: #fff;
        padding: 1em;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>📝 ITパスポート 問題集アプリ</h1>
    <button onclick="loadQuestion()">問題を出す</button>

    <div id="question"></div>
    <div>
      <button class="answer-button" onclick="submitAnswer('〇')">〇</button>
      <button class="answer-button" onclick="submitAnswer('×')">×</button>
    </div>

    <div id="result"></div>
    <div id="explanation"></div>

    <script>
      let currentAnswer = "";
      let currentExplanation = "";

      function loadQuestion() {
        document.getElementById("result").textContent = "";
        document.getElementById("explanation").textContent = "";

        google.script.run.withSuccessHandler((q) => {
          document.getElementById("question").textContent = q.question;
          currentAnswer = q.answer;
          currentExplanation = q.explanation;
        }).getRandomQuestion();
      }

      function submitAnswer(choice) {
        const result = choice === currentAnswer ? "✅ 正解！" : "❌ 不正解！";
        document.getElementById("result").textContent = result;
        document.getElementById("explanation").textContent = currentExplanation;
      }
    </script>
  </body>
</html>

🚀 デプロイ方法
Apps Script エディタで「デプロイ」＞「新しいデプロイ」をクリック

種類を「ウェブアプリ」に設定

アクセス権限を「全員（匿名ユーザーを含む）」に変更

発行されたURLがアプリのリンクになります

🤖 ChatGPTでも難しかったこと

今回作成したツールではスプレッドシートを自分で入力しないといけない手間があります。

そこでChatGPTに何か簡単にできる方法を聞いてみたところ以下のように返ってきました。
ちなみに方法①は自分で入力する(推奨)でした。

これはお願いするしかないと思い実行させたところ、
以下のような問題ができあがりました。

さすがに甘くはないですね。
プロンプト次第ではうまくできるのかもしれません。

まとめ

昨今こういった資格試験の無料アプリがたくさん出回っています。
また、お金を支払えばスマホで完結ができる通信講座もあります。
そんな中、自分で苦労して作る意味ってあるのでしょうか？

初めはスプレッドシートを自分で入力するなんてめんどくさいと思ってました。
でもよくよく考えると、
自分の手で問題を作り、解説を入力する
これってすごく効率のいいアウトプットなのではないでしょうか。
しかも理解した問題は簡単に消せるし、新たに問題を追加するのも簡単。
スプレッドシートに入力するだけ。

というわけで、無理に問題を生成してもらうのではなく、
今回はこのままで完成ということにしておきます。

次は四択問題や、穴埋め問題、記述式問題もやってみたいです。

最後まで読んでいただきありがとうございました。