Google Apps Scriptを使って簡単に変更できるものを作ってみた

初めまして。（初の記事なので）ほんこんです。
早速ですが、紹介していこうと思います。
あ、初の記事ということで、いろいろ書き方がおかしいところがあるかもしれませんが、ご了承ください。
## できること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581732/eabc2301-516c-349b-fb67-9a8f1a1e8509.png)
（ https://docs.google.com/spreadsheets/d/16vJEgLsNeU_q-Bfpe5vOTYhSUGIyoP0C3ufLiEQdmwM/edit?usp=sharing にて試すことができます。）
約5時間かけて作りました。慣れていないせいかとても遅いと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581732/54a9644f-cc89-42ec-5a16-1f85588cd939.png)
上のバーのメイン設定から設定をするをクリックすると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581732/55857941-80e9-0209-36e3-5d6046a0e8cc.png)
このようなダイアログが出ます。'2023'（現在の年が初期値）と'11'（現在の月が初期値）のところを変更して'変更'をクリックすると...（2030年5月にしました。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3581732/2918ebbf-7df2-310a-33fc-ee13aadfa6cf.png)
このように、曜日等が変更されます。
## コード
まずはメインから。
```Main.js
const weeks = ["日", "月", "火", "水", "木", "金", "土"];
function onInstall(e) {
  onOpen(e);
}

function onOpen(e) {
  let ui = SpreadsheetApp.getUi();
  ui.createMenu("メイン設定")
    .addItem('設定をする', 'showDialog')
    .addToUi();
}

function showDialog() {
  let html = HtmlService.createHtmlOutputFromFile('Dialog')
    .setWidth(400)
    .setHeight(100);
  SpreadsheetApp.getUi()
    .showModalDialog(html, '設定用ダイアログ');
}

function changesData(year, month) {
  const last_date = new Date(year, month, 0).getDate();
  let day = new Date(year, month - 1, 1).getDay();
  let ss = SpreadsheetApp.getActive().getSheetByName("メイン");

  ss.getRange("E3").setValue(`${year}年${month}月`);

  for (let i = 0; i < 31; i++) {
    if (i >= last_date) {
      ss.getRange(`B${i + 5}`).setValue("");
      ss.getRange(`C${i + 5}`).setValue("");
    } else {
      ss.getRange(`B${i + 5}`).setValue(i + 1);
      ss.getRange(`C${i + 5}`).setValue(weeks[day]);
    }
    day++;
    day %= 7;
  }

  ss.getRange(`B4:AA35`).setBorder(false, false, false, false, false, false);
  ss.getRange(`B4:AA${last_date + 4}`).setBorder(true, true, true, true, null, true, '#000000', SpreadsheetApp.BorderStyle.SOLID);
  ss.getRange(`D5:AA${last_date + 4}`).setBorder(null, null, null, null, true, null, '#000000', SpreadsheetApp.BorderStyle.DASHED)
  ss.getRange(`B4:D${last_date + 4}`).setBorder(null, null, null, null, true, null, '#000000', SpreadsheetApp.BorderStyle.SOLID);
}
```
当然ですがchangesDataを作るのが最も時間がかかりました。
一つ一つ説明していきます。
```Main.js
function onInstall(e) {
  onOpen(e);
}

function onOpen(e) {
  let ui = SpreadsheetApp.getUi();
  ui.createMenu("メイン設定")            //メニュー作成
    .addItem('設定をする', 'showDialog') //「設定をする」というラベルでクリックするとshowDialogという関数が実行されるボタンを作成
    .addToUi();                          //作成したボタンやメニューを実際に追加
}
```
onInstallは、スプレッドシートが読み込まれたときに実行されるものです。
onInstallは見たまんま、onOpenを実行するだけの関数です。
onOpenは、SpreadsheetApp.getUi()でユーザー インターフェースの情報を取得して、そのあとのコードでコメントに書いてある通りのことをします。
```Main.js
function showDialog() {
  let html = HtmlService.createHtmlOutputFromFile('Dialog')//Dialogというhtmlファイルを読み込む
    .setWidth(400)  //横幅指定
    .setHeight(100);//縦幅指定
  SpreadsheetApp.getUi()
    .showModalDialog(html, '設定用ダイアログ');//ダイアログを作成
}
```
これは...まあ、ドキュメントに書いてあるように書いただけですね。
```Main.js
const weeks = ["日", "月", "火", "水", "木", "金", "土"];//日～土まで入れる

function changesData(year, month) {
  const last_date = new Date(year, month, 0).getDate(); //ある月の最終日を入れる
  let day = new Date(year, month - 1, 1).getDay();      //ある月の最初の曜日を入れる
  let ss = SpreadsheetApp.getActive().getSheetByName("メイン");//メインという名前のシートを読み込んでssでいう変数に入れる

  ss.getRange("E3").setValue(`${year}年${month}月`);//E3のセルに年と月を表示

  for (let i = 0; i < 31; i++) {
    if (i >= last_date) {//最終日を過ぎていたら
      ss.getRange(`B${i + 5}`).setValue("");//日付を削除
      ss.getRange(`C${i + 5}`).setValue("");//曜日を削除
    } else {//でなければ
      ss.getRange(`B${i + 5}`).setValue(i + 1);     //日付を表示
      ss.getRange(`C${i + 5}`).setValue(weeks[day]);//曜日を表示
    }
    day++;   //曜日を進める
    day %= 7;//7になったら0に戻す
  }

  ss.getRange(`B4:AA35`).setBorder(false, false, false, false, false, false);                                                       //枠線を削除
  ss.getRange(`B4:AA${last_date + 4}`).setBorder(true, true, true, true, null, true, '#000000', SpreadsheetApp.BorderStyle.SOLID);  //枠線を追加1
  ss.getRange(`D5:AA${last_date + 4}`).setBorder(null, null, null, null, true, null, '#000000', SpreadsheetApp.BorderStyle.DASHED); //時間帯をわかりやすくするため破線を追加
  ss.getRange(`B4:D${last_date + 4}`).setBorder(null, null, null, null, true, null, '#000000', SpreadsheetApp.BorderStyle.SOLID);   //枠線を追加2
}
```
結構長ったらしいです。もう書く気力がないのでコメントを見てください。
次はダイアログのhtmlです。
```Dialog.html
<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
    </script>
  <div id="app">
    <button @click="close_sidebar">閉じる</button>
    <br>
    <label>
        <input type="number" v-model="year" size="4" :min="toyear">年
      </label>
    <label>
        <input type="number" v-model="month" size="2" min="1" max="12">月
      </label>
    <br>
    <button id="show_message" @click="change">変更</button>
  </div>
  <script type="module">
    import { createApp } from 'vue'

      createApp({
        data() {
          return {
            year: (new Date()).getFullYear(),
            month: (new Date()).getMonth() + 1,
            toyear: (new Date()).getFullYear()
          }
        },
        methods: {
          close_sidebar() {
            google.script.host.close();//ダイアログを閉じる
          },
          change() {
            google.script.run.changesData(this.year,this.month);//GASを実行
          }
        }
      }).mount('#app')
  </script>
</body>

</html>
```
Vueはあまり使ったことはありませんが、使ってみようと思って使ってみました。何を書けばいいのかわからないです。コメント求む
## 作ってみて思ったこと
5時間かけて作るものではなかったですね。作りたいから作ったのですが。
あと、閉じるのボタンいらないと思っています。（だったら消したらいい話）