【GAS】スプレッドシートをJSONデータ化して予約状況管理ツールを作る（Part1）

GASでスプレッドシートをJSONデータ化して予約状況管理ツールを作ってみます。HTML、JavaScript（jQuery）、そしてAjaxを使用してデータを取得し、テーブルに表示する機能を実装し、予約システムのウェブページを作ります。

HTML構造
JavaScript機能
日付・時間のフォーマット関数
メイン処理（$(document).ready()内）
CSS
CSSの詳細解説
特筆すべき点
まとめ

HTML構造

<div class="container mt-5">
    <table id="carTable" class="table table-striped table-bordered">
        <colgroup>
            <col style="width: 160px;">
            <col style="width: 100px;">
            <col style="width: 100px;">
        </colgroup>
        <thead>
            <tr>
                <th>日</th>
                <th>時間</th>
                <th>予約状況</th>
            </tr>
        </thead>
        <tbody id="loadingSpinner" class="spinner">
            <tr>
                <td colspan="3">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">読み込み中...</span>
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody id="dataBody" style="display: none;">
        </tbody>
    </table>
</div>

テーブルの基本構造を定義します。

<colgroup>タグを使用して、各列の幅を指定しています。
テーブルヘッダー（<thead>）には「日」「時間」「予約状況」の3列があります。
2つの<tbody>要素があります：
1. loadingSpinner: データ読み込み中に表示されるスピナー
2. dataBody: 実際のデータが表示される場所（初期状態では非表示）

JavaScript機能

function formatDate(dateString) {
    const date = new Date(dateString);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}/${month}/${day}`;
}

function formatTime(timeString) {
    const date = new Date(timeString);
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${hours}:${minutes}`;
}
$(document).ready(function() {
    const apiUrl = 'https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXX/exec';

    $.ajax({
        url: apiUrl,
        method: 'GET',
        dataType: 'json',
        success: function(jsonData) {
            const tbody = $('#dataBody');
            jsonData.forEach(item => {
                const dateKey = Object.keys(item).find(key => key.startsWith('Tue Oct'));
                const timeKey = Object.keys(item).find(key => key.startsWith('Sat Dec'));
                const statusKey = '予約済';

                if (dateKey && timeKey && statusKey in item) {
                    const row = $('<tr></tr>');
                    
                    // 日付列の追加
                    row.append($('<td></td>').text(formatDate(item[dateKey])));
                    
                    // 時間列の追加
                    row.append($('<td></td>').text(formatTime(item[timeKey])));
                    
                    // 予約状況列の追加
                    const statusCell = $('<td></td>').text(item[statusKey]);
                    if (item[statusKey] === '予約済') {
                        statusCell.addClass('reserved');
                    }
                    row.append(statusCell);
                    
                    tbody.append(row);
                }
            });
            
            $('#loadingSpinner').hide();
            $('#dataBody').show();
            $('#carTable').show();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('データ取得エラー:', textStatus, errorThrown);
            alert('データの取得中にエラーが発生しました。');
        }
    });
});

日付・時間のフォーマット関数

formatDate(dateString):
- 日付文字列を受け取り、「YYYY/MM/DD」形式に変換します。
formatTime(timeString):
- 時間文字列を受け取り、「HH:MM」形式に変換します。

メイン処理（$(document).ready()内）

APIエンドポイントの設定:
- Google Apps ScriptのウェブアプリケーションURLが使用されています。
Ajaxリクエスト:
- $.ajax()を使用してAPIからJSONデータを取得します。
データ処理と表示:
- 成功時の処理:
  - 各データ項目に対して、日付、時間、予約状況を抽出します。
  - テーブル行を生成し、フォーマットされた日付と時間を挿入します。
  - 予約状況が「予約済」の場合、セルにクラスを追加します。
  - 生成した行をテーブルに追加します。
- 処理完了後:
  - ローディングスピナーを非表示にし、データを表示します。
エラー処理:
- データ取得に失敗した場合、コンソールにエラーを出力し、ユーザーにアラートを表示します。

CSS

.reserved {
    background-color: #808080 !important; /* グレーの背景色 */
    color: white; /* テキストを白色に */
}
#carTable {
    table-layout: fixed;
    width: auto; /* テーブルの幅を内容に合わせる */
    margin: 0 auto;
}
#carTable th,
#carTable td {
    width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #000;
}

CSSの詳細解説

予約済みセルのスタイル

.reserved {
    background-color: #808080 !important;
    color: white;
}

.reservedクラスは、予約済みのセルに適用されます。
background-color: #808080 !important;
- セルの背景色をグレー（#808080）に設定します。
- !importantは、このスタイルを他のスタイルよりも優先させるために使用されています。
color: white;
- テキストの色を白に設定し、グレーの背景色とコントラストをつけています。

テーブル全体のレイアウト

#carTable {
    table-layout: fixed;
    width: auto;
    margin: 0 auto;
}

#carTableは、テーブル全体に適用されるスタイルです。
table-layout: fixed;
- テーブルのレイアウトを固定幅に設定します。これにより、列幅の計算が簡素化され、レンダリングが高速化されます。
width: auto;
- テーブルの幅を内容に合わせて自動調整します。
margin: 0 auto;
- テーブルを水平方向の中央に配置します。

テーブルのセルとヘッダーのスタイル

#carTable th,
#carTable td {
    width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #000;
}

この規則は、テーブルのヘッダー（th）とデータセル（td）の両方に適用されます。
width: 100px; と max-width: 100px;
- セルの幅を100ピクセルに固定します。
overflow: hidden;
- セルの内容が100ピクセルを超える場合、はみ出た部分を非表示にします。
text-overflow: ellipsis;
- テキストがはみ出す場合、末尾に省略記号（…）を表示します。
white-space: nowrap;
- テキストを折り返さず、1行で表示します。
border: 1px solid #000;
- 各セルの周りに1ピクセルの黒い実線の枠を追加します。