GASとVueを使った開発でChatGPT初心者が活用したお話 #Vue.js

重い腰を上げて

AI活用しようという流れがありました。「乗るしかない、このビッグウェーブに」。食わず嫌いなところもあったけど、置いていかれるのも問題だと感じました。

使い始め

最初のプロンプトはこんな感じでした：

GoogleサイトでHTML形式の登録フォームを作成する方法を教えてください。
入力項目は以下の内容です。
・休暇の取得日を日付カレンダー形式の入力
・休暇の取得数をセレクトボックスの入力

GoogleサイトはHTMLコードの直接埋め込みが制約があり、
Gmailアドレスの自動入力などの高度な機能はサポートしていません。
しかし、以下は、Google Formsを使用して簡単にフォームを作成し、、、(略)

あー、、、すごい。けどもうちょっとカスタマイズしたいから。

コードが具体的になってきた

その後、色々やってきて作りたいのはGoogleサイトじゃ制限あって実現できないなとなり：

GoogleAppScriptでHTML形式の登録フォームを作成する方法を具体的なソースコードを添えて教えてください。
入力項目は以下の内容です。
(内容は同上のため割愛)

返ってきたのはGoogle Formsでフォームを作成する・・・

うーんそうじゃなくて、もっとHTML使いたい。
入力元をスプレッドシートに変更したい。
そこで以下のプロンプトを：

そうじゃなくて、GoogleAppScriptでHTML形式の登録フォームを作成する方法を具体的なソースコードを添えて教えてください。
休暇の取得数をセレクトボックス形式の入力で選択項目をスプレッドシートから取得する。 取得理由をラジオボタン形式の入力で、選択項目をスプレッドシートから取得する。
その他を選択した場合はテキストボックスを表示する``

すると。。。

function doGet() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('Form')
    .setTitle('休暇申請フォーム')
    .setWidth(400);
  return htmlOutput;
}

function getOptions(column) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Options');
  var values = sheet.getRange(column + '2:' + column + sheet.getLastRow()).getValues();
  return values.flat();
}

function submitForm(form) {
  var userEmail = Session.getActiveUser().getEmail();
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = [userEmail, form.startDate, form.endDate, form.duration, form.reason, form.otherReason, form.notes];
  sheet.appendRow(data);
  return 'フォームが送信されました！';
}

HTMLソースは割愛しますがちゃんとGAS側のソースができた！

感想：なんかこれはまるで、攻略本見ながらゲームしている感覚

想定と違う時の軌道修正

「そうじゃなくて、(修正内容)」というフレーズをよく使います。

やはり元の言語の知識は必要（あたりまえか）

Vueは自学で勉強していたり、実務でも少し使っていました。しかし、最近触っておらず、Vue3は未経験でした。
ただ、ChatGPTさんに分からないことを

vue3のrefの概念がわからないのでおしえて

とかお願いしてみたり。
むしろ、積極的に質問しました。

もちろん公式ドキュメントや他のサイトもググって裏取ったり、知識の補完はしていましたし
個人的にはまだまだ必要かなと感じています。

ただ、今更人に聞きにくい事とかをストレートに聞けるのは精神衛生的にも非常に良く
もっと早く活用しておけばよかった
と感じています。

ちなみに先月よりお布施(課金)始めました。