8. AIが生成したコードの活用方法

プログラミングの知識がなくても、生成AIが出力したコードを適切に活用することで、実用的なアプリケーションを開発できます。

コードの種類の区別

AIが出力するコードは大きく3種類に分けられます：

サーバーサイドコード：Code.gsファイルに貼り付ける関数
クライアントサイドHTML：HTMLファイルに貼り付けるUI部分
クライアントサイドJavaScript：HTMLファイル内の<script>タグ内に記述するコード

効率的な方法：AIに「ウェブアプリのHTML部分とJavaScript部分、そしてサーバーサイドの関数を別々に生成して」と指示すると整理しやすいです

コードのコピー＆ペースト

AIが出力したコードをコピーします
GASエディタで該当するファイル（Code.gsやHTMLファイル）を開きます
適切な位置にコードを貼り付けます

サーバーサイドコード例（Code.gs）

function getGrade(name) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Grades');

  var data = sheet.getDataRange().getValues();

  for (var i = 0; i < data.length; i++) {

    if (data[i][1] == name) {

      return data[i][2];

    }

  }

  return '生徒が見つかりません';

}

特殊関数の扱い方

doGetやdoPostのような特殊な関数は、既存のコードとの統合が必要な場合があります。

doGet関数の例

function doGet() {

  return HtmlService.createTemplateFromFile('index').evaluate()

    .setTitle('教育用アプリ')

    .addMetaTag('viewport', 'width=device-width, initial-scale=1');

}

注意：既存のdoGet関数がある場合は、AIに「この機能を既存のdoGet関数に統合する方法」を質問しましょう

9. スプレッドシートの基本操作

GASアプリケーションの多くは、スプレッドシートをデータベースとして活用します。スプレッドシートの基本操作を理解しましょう。

スプレッドシートの基本構造

ブック（Spreadsheet）：複数のシートを含むファイル全体
シート（Sheet）：個々の表（タブ）
セル（Cell）：表の各マス
範囲（Range）：複数のセルを含む領域

GASからのアクセス方法

スプレッドシートへのアクセス例

// アクティブなスプレッドシートを取得

var ss = SpreadsheetApp.getActiveSpreadsheet();

// URLを指定してスプレッドシートを開く

var ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/...');

// IDを指定してスプレッドシートを開く

var ss = SpreadsheetApp.openById('1a2b3c...');

// シートを取得

var sheet = ss.getSheetByName('シート名');

// アクティブなシートを取得

var sheet = ss.getActiveSheet();

基本的なCRUD操作

CRUD操作とは「Create（作成）」「Read（読み取り）」「Update（更新）」「Delete（削除）」の頭文字をとったものです。

データの読み取り (Read)

// 特定のセルの値を読み取る

var value = sheet.getRange(2, 3).getValue(); // 2行目、3列目

// 複数セルの値を配列として読み取る

var values = sheet.getRange(2, 1, 5, 3).getValues(); // 2行目、1列目から5行3列分

// シート全体のデータを取得

var allData = sheet.getDataRange().getValues();

データの作成・更新 (Create/Update)

// 単一セルに値を設定

sheet.getRange(1, 1).setValue('氏名');

// 複数セルに一度に値を設定

var data = [

  ['山田太郎', 85, '合格'],

  ['佐藤花子', 92, '合格'],

  ['鈴木一郎', 65, '不合格']

];

sheet.getRange(2, 1, data.length, data[0].length).setValues(data);

// 行を追加

sheet.appendRow(['高橋次郎', 78, '合格']);

データの削除 (Delete)

// セルの内容をクリア

sheet.getRange(2, 3).clearContent();

// 行全体を削除

sheet.deleteRow(3); // 3行目を削除

// 列全体を削除

sheet.deleteColumn(2); // 2列目を削除

10. HTMLとCSSの基礎知識

GASウェブアプリの見た目と機能性を向上させるためには、基本的なHTMLとCSSの知識が役立ちます。

基本的なHTMLタグの説明

基本的なHTMLタグ

<!DOCTYPE html> <!-- HTML5文書宣言 -->

<html lang="ja"> <!-- HTML文書の開始、言語指定 -->

  <head> <!-- ヘッダー部分（メタ情報） -->

    <meta charset="UTF-8"> <!-- 文字コード指定 -->

    <title>タイトル</title> <!-- ブラウザのタブに表示されるタイトル -->

  </head>

  <body> <!-- 表示される内容 -->

    <h1>見出し</h1> <!-- 大見出し -->

    <p>段落</p> <!-- 段落 -->

    <a href="URL">リンク</a> <!-- ハイパーリンク -->

    <div>ブロック要素</div> <!-- 汎用ブロック要素 -->

    <span>インライン要素</span> <!-- 汎用インライン要素 -->

  </body>

</html>

CSSによるスタイリングの基本

CSSはHTMLの見た目を整えるためのスタイルシート言語です。

CSSの基本構文

<style>

  /* セレクタ { プロパティ: 値; } の形式で記述 */

  body {

    font-family: Arial, sans-serif;

    background-color: #f5f5f5;

    margin: 0;

    padding: 20px;

  }

  h1 {

    color: #333;

    border-bottom: 2px solid #ccc;

  }

  .input-form {

    background-color: white;

    padding: 15px;

    border-radius: 5px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  }

  #submitButton {

    background-color: #4285f4;

    color: white;

    border: none;

    padding: 10px 15px;

    border-radius: 4px;

    cursor: pointer;

  }

</style>

セレクタの種類：

タグ名 - 指定したHTMLタグすべてに適用（例：h1）
.クラス名 - 指定したクラスを持つ要素に適用（例：.input-form）
#ID名 - 指定したIDを持つ要素に適用（例：#submitButton）

モバイル対応のポイント

ビューポートの設定：<meta name="viewport" content="width=device-width, initial-scale=1">
レスポンシブデザインの実装：メディアクエリを使った画面サイズに応じたスタイル調整
タッチ操作を考慮したUI設計：ボタンやリンクの十分なサイズ確保

メディアクエリの例

/* スマートフォン向けスタイル */

@media (max-width: 768px) {

  .container {

    width: 100%;

    padding: 10px;

  }

  h1 {

    font-size: 24px;

  }

  .input-form {

    padding: 10px;

  }

}

11. サーバーサイドとクライアントサイドの連携

GASウェブアプリの大きな特徴は、HTMLファイル（クライアントサイド）からGAS関数（サーバーサイド）を簡単に呼び出せることです。

google.scripts.runの使い方

HTMLファイル内のJavaScriptから、Code.gsの関数を呼び出すための特別なAPIです。

クライアントサイド連携例

<script>

  document.getElementById('submitButton').addEventListener('click', function() {

    var name = document.getElementById('nameInput').value;

    google.scripts.run.withSuccessHandler(function(grade) {

      document.getElementById('gradeDisplay').innerHTML = grade;

    }).getGrade(name);

  });

</script>

データの受け渡し

サーバーへの送信：google.scripts.run.関数名(パラメータ)
サーバーからの受信：withSuccessHandler(コールバック関数)
エラー処理：withFailureHandler(エラー処理関数)

この仕組みにより、プログラミング初心者でもインタラクティブなウェブアプリを作成できます！

成功/失敗ハンドリング

具体的な実装例

生徒の名前を入力して成績を表示するフォーム：

HTML & JavaScript

<!-- HTML部分 -->

<input type="text" id="nameInput" placeholder="生徒の名前を入力">

<button id="submitButton">成績を表示</button>

<div id="gradeDisplay"></div>

<script>

  document.getElementById('submitButton').addEventListener('click', function() {

    var name = document.getElementById('nameInput').value;

    // サーバーサイド関数の呼び出し

    google.scripts.run

      .withSuccessHandler(function(grade) {

        document.getElementById('gradeDisplay').innerHTML = 

          name + 'さんの成績: ' + grade;

      })

      .withFailureHandler(function(error) {

        document.getElementById('gradeDisplay').innerHTML = 

          'エラーが発生しました: ' + error;

      })

      .getGrade(name);

  });

</script>

サーバーサイド関数（Code.gs）

function getGrade(name) {

  var sheet = SpreadsheetApp.getActiveSpreadsheet()

    .getSheetByName('Grades');

  var data = sheet.getDataRange().getValues();

  for (var i = 0; i < data.length; i++) {

    if (data[i][0] == name) {

      return data[i][1];  // 成績を返す

    }

  }

  return '成績が見つかりません';

}

前のパート: 開発の準備と基本次のパート: アプリ開発の実践