未分類

GASでフォームのランダム表示を実装！Math.randomで業務効率を劇的改善

GASでフォームのランダム表示を実装！Math.randomで業務効率を劇的改善

Webアプリ開発におけるフォーム作成で、毎回同じ質問順だと回答者の集中力が低下し、質の低いデータが集まることがあります。また、API連携で取得したデータをランダムに表示したい、ダッシュボードで情報をシャッフルして表示したいといったニーズも存在します。この記事では、GAS（Google Apps Script）のMath.random関数を利用して、これらの課題を解決し、Webアプリケーションの品質向上と業務効率化を実現する方法を解説します。

Math.random関数の基本

Math.random()は、0以上1未満の浮動小数点数を擬似乱数として生成するJavaScriptの関数です。GASでもJavaScriptの関数が利用できるため、Math.random()も同様に使用できます。この関数を応用することで、配列の要素をランダムに並び替えたり、特定の範囲の整数をランダムに生成したりすることが可能です。

Math.random()の基本的な使い方

// 0以上1未満の乱数を生成する
let randomNumber = Math.random();
console.log(randomNumber);

指定範囲の乱数を生成する方法

// 1から10までの乱数を生成する
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

フォームのランダム表示の実装

フォームの質問項目をランダムに表示することで、回答者の先入観を防ぎ、より自然な回答を得ることができます。ここでは、GASとHTML Serviceを使用して、フォームの質問項目をランダムに表示する実装例を紹介します。

実装手順

  1. 質問項目を配列として定義

  2. Math.random()を使って配列の要素をシャッフル

  3. シャッフルされた配列をHTMLに表示

コード例：質問項目のランダム表示

// questions.gs
function doGet() {
  const questions = [
    "名前を入力してください",
    "年齢を入力してください",
    "好きな食べ物を入力してください",
    "趣味を入力してください"
  ];

  // 配列をシャッフルする関数
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  const shuffledQuestions = shuffleArray(questions);
  const htmlOutput = HtmlService.createTemplateFromFile('index');
  htmlOutput.questions = shuffledQuestions;
  return htmlOutput.evaluate();
}
// index.html



  
  ランダムフォーム



コード解説

  • questions.gs: 質問項目の配列を定義し、shuffleArray関数でシャッフルしています。

  • index.html: シャッフルされた質問項目をHTMLフォームとして表示します。

API連携におけるランダム表示

APIから取得したデータをランダムに表示することで、ユーザーに新しい発見を提供したり、特定のデータに偏った注目が集まるのを防ぐことができます。

コード例：APIデータのランダム表示

function getRandomApiData() {
  // サンプルAPIエンドポイント（JSONPlaceholder）
  const apiUrl = "https://jsonplaceholder.typicode.com/todos";
  const response = UrlFetchApp.fetch(apiUrl);
  const data = JSON.parse(response.getContentText());

  // データをシャッフル
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  const shuffledData = shuffleArray(data);

  // 最初の5件を表示
  let result = "";
  for (let i = 0; i < 5; i++) {
    result += shuffledData[i].title + "
";
  }

  return result;
}

function doGet() {
  const apiData = getRandomApiData();
  return HtmlService.createHtmlOutput(apiData);
}

コード解説

  • getRandomApiData関数は、APIからデータを取得し、shuffleArray関数でシャッフルしています。

  • 最初の5件のデータのタイトルをHTMLとして返します。

ダッシュボードでのランダム表示

ダッシュボードで重要な指標をローテーション表示することで、常に新鮮な情報を提供し、ユーザーの注意を喚起することができます。

コード例：ダッシュボード指標のランダム表示

function getRandomDashboardData() {
  const dashboardData = [
    { title: "売上", value: 1000000 },
    { title: "アクセス数", value: 5000 },
    { title: "コンバージョン率", value: 0.05 },
    { title: "顧客満足度", value: 4.5 }
  ];

  // データをシャッフル
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  const shuffledData = shuffleArray(dashboardData);

  // HTMLを作成
  let result = "";
  for (let i = 0; i < shuffledData.length; i++) {
    result += "
" + shuffledData[i].title + "
" + shuffledData[i].value + "
";
  }

  return result;
}

function doGet() {
  const dashboard = getRandomDashboardData();
  return HtmlService.createHtmlOutput(dashboard);
}

コード解説

  • getRandomDashboardData関数は、ダッシュボードの指標データを定義し、shuffleArray関数でシャッフルしています。

  • シャッフルされたデータをHTMLとして返します。

よくある問題とトラブルシューティング

  • 乱数が偏る： Math.random()は擬似乱数であるため、完全にランダムではありません。偏りを減らすためには、より高度な乱数生成アルゴリズムを検討する必要があります。

  • API連携でエラーが発生する： APIのエンドポイントが正しいか、APIキーが必要ないかなどを確認してください。

  • HTMLが表示されない： HTMLの構文エラーや、GASのコードにエラーがないか確認してください。

カスタマイズ方法と応用例

  • 質問項目の重み付け： 特定の質問項目がより高い頻度で表示されるように、重み付けを実装することができます。

  • APIデータのフィルタリング： ランダムに表示するAPIデータを、特定の条件でフィルタリングすることができます。

  • ダッシュボードの自動更新： 一定時間ごとにダッシュボードのデータを自動的に更新することができます。

まとめ

GASのMath.random関数は、Webアプリ開発において、フォームのランダム表示、APIデータのシャッフル、ダッシュボードの指標ローテーションなど、様々な場面で活用できます。この記事で紹介したコード例を参考に、ぜひあなたのWebアプリケーションにMath.random関数を取り入れて、ユーザーエクスペリエンスの向上と業務効率化を実現してください。

PR

CodeCampは、現役エンジニアからマンツーマンで学べるオンラインプログラミングスクールです。WebデザインやWebサービス開発、転職支援など、目的に合わせた多様なコースが選べます。
朝7時〜夜23時40分まで、365日レッスンが受けられるため、忙しい方でも自分のペースで学習を進めることが可能です。通過率8%の厳しい選考を通過した質の高い講師陣が、あなたのキャリアチェンジを強力にサポートします。
さらに、未経験者向けのカリキュラムや、学習開始から20日以内の全額返金保証制度もあるため、プログラミング学習に不安を感じている方でも安心して始めることができます。

CodeCampで理想の働き方を実現しよう