未分類

GASでWebアプリ開発！Date.getFullYear()でフォームの年度表示を自動化

GASでWebアプリ開発！Date.getFullYear()でフォームの年度表示を自動化

Webアプリ開発において、フォームの年度表示は頻繁に必要となる機能です。例えば、アンケートフォームや申請フォームなどで、現在の年度を自動的に表示したいという要望は多いでしょう。この問題を解決するために、Google Apps Script (GAS) の Date.getFullYear() 関数が非常に役立ちます。本記事では、Date.getFullYear() の基本的な使い方から、Webアプリ開発における実践的な応用例、さらにはよくある問題とその解決策までを詳しく解説します。

Date.getFullYear()関数の基本

Date.getFullYear() は、日付オブジェクトから年を取得するためのJavaScriptの組み込み関数です。GASはJavaScriptをベースにしているため、この関数をそのまま利用できます。

構文

date.getFullYear()

date はDateオブジェクトです。この関数は、Dateオブジェクトが表す日付の年を返します。

例

// 現在の年を取得する
const now = new Date();
const year = now.getFullYear();
console.log(year); // 例：2024

Webアプリ開発での利用シチュエーション

Webアプリ開発、特にフォーム作成、API連携、ダッシュボードなどで Date.getFullYear() は非常に便利です。例えば、以下のようなケースで活用できます。

  • 申請フォームの自動年度表示

  • APIから取得した日付データの年表示

  • ダッシュボードでの年度別データ表示

フォームの年度表示を自動化する実装例

ここでは、GASを使ってフォームの年度表示を自動化する具体的なコード例を紹介します。

例1：HTMLフォームに現在の年度を表示する

HTMLフォームのテキストフィールドに、GASを使って現在の年度を自動的に表示する例です。




  年度表示フォーム

このHTMLをGASの HtmlService で配信し、setYear() 関数がページ読み込み時に実行されるようにします。

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index'); // index.htmlが上記のHTMLファイル名と一致すること
}

例2：スプレッドシートに年度を自動入力する

フォーム送信時に、スプレッドシートに現在の年度を自動的に入力する例です。

function doPost(e) {
  const now = new Date();
  const year = now.getFullYear();

  // スプレッドシートを開く（IDはご自身のスプレッドシートIDに置き換えてください）
  const ss = SpreadsheetApp.openById("YOUR_SPREADSHEET_ID");
  const sheet = ss.getSheetByName("シート1");

  // データをスプレッドシートに書き込む
  sheet.appendRow([year, e.parameter.name, e.parameter.email]); // 例：年度、名前、メールアドレス

  // フォームにリダイレクト
  return HtmlService.createHtmlOutput("
送信完了
");
}

この例では、フォームから送信されたデータに加えて、Date.getFullYear() で取得した年度をスプレッドシートに書き込んでいます。

例3：API連携で取得した日付データの年度表示

APIから日付データを取得し、その年度を表示する例です。

function getYearFromApiDate(dateString) {
  // APIから取得した日付文字列をDateオブジェクトに変換
  const date = new Date(dateString);
  // 年度を取得
  const year = date.getFullYear();
  return year;
}

// APIからデータを取得する例（実際にはAPIのエンドポイントに合わせて変更してください）
function fetchDataFromApi() {
  const apiUrl = "https://example.com/api/data"; // 例：APIのエンドポイント
  const response = UrlFetchApp.fetch(apiUrl);
  const data = JSON.parse(response.getContentText());

  // データから日付を取得し、年度を表示
  const apiDate = data.date; // 例：APIのレスポンスに含まれる日付データ
  const year = getYearFromApiDate(apiDate);
  console.log("年度：" + year);
}

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

  • 年度が正しく表示されない：
    原因として、タイムゾーンの設定が間違っている可能性があります。GASのスクリプトプロパティでタイムゾーンを正しく設定してください。

  • フォームが正常に動作しない：
    原因として、HTMLとGASの連携がうまくいっていない可能性があります。doGet() 関数や doPost() 関数が正しく実装されているか確認してください。

  • スプレッドシートへの書き込みがうまくいかない：
    原因として、スプレッドシートIDが間違っている、またはスプレッドシートへの書き込み権限がない可能性があります。スプレッドシートIDを確認し、スクリプトに編集権限を与えてください。

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

  • 年度の範囲を指定する：
    例えば、今年度から5年前までの年度を選択肢として表示することができます。

  • 和暦表示に対応する：
    Date.getFullYear() で取得した西暦を和暦に変換して表示することができます。

  • 年度ごとのデータを集計する：
    スプレッドシートのデータを年度ごとに集計し、ダッシュボードに表示することができます。

まとめ

Date.getFullYear() は、GASを使ったWebアプリ開発において、年度表示を自動化するための非常に強力なツールです。フォーム作成、API連携、ダッシュボードなど、さまざまなシチュエーションで活用できます。本記事で紹介したコード例やトラブルシューティングを参考に、ぜひ Date.getFullYear() を活用して、より便利で使いやすいWebアプリを開発してください。

特にフォームにおける年度表示の自動化は、ユーザーの入力の手間を省き、入力ミスを防ぐ効果があります。業務効率化に大きく貢献できるでしょう。さまざまなカスタマイズや応用例を試して、あなたのWebアプリに最適な実装を見つけてください。

PR

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

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