今回は「カレンダーを月曜始まりで表示する方法」ではなく、AIを利用した修正方法について紹介します。
なお、ここで紹介する内容は ChatGPT無料版で実行した結果 となります。

まず、Monacaの「Onsen UI V2 JS Minimum」テンプレートを使用し、index.html、「js」フォルダに「app.js」、「css」フォルダに「style.css」を用意します。
別途、「moment-with-locales.min.js」を下記リンクよりダウンロードしてください。

index.html
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <meta http-equiv="Content-Security-Policy"
    content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'" />
  <script src="cordova.js"></script>
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="js/moment-with-locales.min.js"></script>
  <script src="js/app.js"></script>

  <link rel="stylesheet" href="components/loader.css" />
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" />
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="showCalendar(-1)">
          <i class="fas fa-angle-left"></i>
        </ons-toolbar-button>
      </div>
      <div class="center"></div>
      <div class="right">
        <ons-toolbar-button onclick="showCalendar(1)">
          <i class="fas fa-angle-right"></i>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>
    <div class="div-calendar"></div>
  </ons-page>
</body>

</html>
app.js
"use strict";
moment.locale("ja");
var ymd = moment();
// 初期描画
ons.ready(function () {
  makeCalendar(ymd);
});
// 月移動
var showCalendar = function (month) {
  ymd.add(month, "month");
  makeCalendar(ymd);
};
// カレンダー描画
var makeCalendar = function (date) {
  var title = document.querySelector(".toolbar .center");
  var cal = document.querySelector(".div-calendar");
  var html = "";
  var fd = date.clone().startOf("month");         // 月初
  var day = fd.clone().subtract(fd.day(), "day"); // 1週目の日曜
  // タイトル
  if (title) title.innerHTML = date.format("YYYY年M月");
  // 曜日ヘッダ
  html = "<div class=\"div-week\">";
  for (var i = 0; i < 7; i++) {
    html +=
      "<div class=\"div-dayofweek\">" +
      day.clone().add(i, "day").format("ddd") +
      "</div>";
  }
  html += "</div>";
  // 日付
  for (var i = 0; i < 6; i++) {
    html += "<div class=\"div-week\">";
    for (var j = 0; j < 7; j++) {
      // 今月以外は薄く
      var clss = !day.isSame(date, "month") ? " div-none" : "";
      // 土日色
      if (day.day() === 0) clss += " div-sunday";     // 日
      else if (day.day() === 6) clss += " div-saturday"; // 土
      html +=
        "<div class=\"div-day" + clss + "\">" +
        day.format("D") +
        "</div>";
      day.add(1, "day");
    }
    html += "</div>";
    if (i > 0 && !day.isSame(date, "month")) break;
  }
  if (cal) cal.innerHTML = html;
};
style.css
.div-calendar {
    display: table;
    border-collapse: separate;
    border-spacing: 4px;
    width: 90%;
    table-layout: fixed;
    margin: 15px auto;
    font-size: 20px;
}
.div-week {
    display: table-row;
}
.div-dayofweek {
    display: table-cell;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: #000;
    height: 24px;
}
.div-day {
    display: table-cell;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: #000;
    height: 24px;
}
.div-none {
    opacity: 0.2;
}
.div-sunday {
    color: #E91E63;
}
.div-saturday {
    color: #2196F3;
}

結果、以下のように日曜始まりのカレンダーが表示されます。

ChatGPTに、

「以下のJavaScriptはカレンダー表示を行っていますが、曜日の始まりを月曜日から表示するように改造したい。」

と入力し、そのあとにJavaScriptのコードを添付します。

実行すると、どこをどのように修正するのかという説明と、修正後のコードが返ってきます。

以下のコードは、ChatGPTによって修正されたコードです。

"use strict";
moment.locale("ja");
var ymd = moment();
// 初期描画
ons.ready(function () {
  makeCalendar(ymd);
});
// 月移動
var showCalendar = function (month) {
  ymd.add(month, "month");
  makeCalendar(ymd);
};
// カレンダー描画(月曜始まり)
var makeCalendar = function (date) {
  var title = document.querySelector(".toolbar .center");
  var cal = document.querySelector(".div-calendar");
  var html = "";
  // 月初
  var fd = date.clone().startOf("month");
  // 月曜 = 1, ..., 日曜 = 7
  var wd = fd.isoWeekday();
  // カレンダーの最初の週の月曜日に合わせる
  var day = fd.clone().subtract(wd - 1, "day");
  // タイトル
  if (title) title.innerHTML = date.format("YYYY年M月");
  // 曜日ヘッダ(月曜始まり)
  var weekdays = ["月", "火", "水", "木", "金", "土", "日"];
  html = "<div class=\"div-week\">";
  for (var i = 0; i < 7; i++) {
    html += "<div class=\"div-dayofweek\">" + weekdays[i] + "</div>";
  }
  html += "</div>";
  // 日付部分
  for (var i = 0; i < 6; i++) {
    html += "<div class=\"div-week\">";
    for (var j = 0; j < 7; j++) {
      var clss = !day.isSame(date, "month") ? " div-none" : "";
      // 土日(日曜=7)
      var iso = day.isoWeekday(); // 月=1 ... 日=7
      if (iso === 6) clss += " div-saturday"; // 土
      else if (iso === 7) clss += " div-sunday"; // 日
      html += "<div class=\"div-day" + clss + "\">" +
              day.format("D") +
              "</div>";
      day.add(1, "day");
    }
    html += "</div>";
    if (i > 0 && !day.isSame(date, "month")) break;
  }
  if (cal) cal.innerHTML = html;
};

結果、以下のように月曜始まりのカレンダーが表示されます。

ChatGPTなどのAIを利用すると簡単に修正を行うことができますが、いくつか問題点もあります。
例えば、コードの生成を一から依頼した場合、実際にAPIには存在しない架空のファンクションを呼び出していることがあります。
自分が使ったことのないAPIだと、テストでエラーが発生しても原因がわからず、ChatGPTに何度も質問してはテストし、またエラーが出て・・・という繰り返しになり、詳しく調査した結果、実はAPIには存在しないファンクションだったということがあり、ただただ時間だけが費やされてしまいます。

設計・コード入力・テストなど時間を短縮できる一方で、すべてを外注に任せるのと同じように、成果物の理解に時間がかかってしまいます。
そのため、最終的には理解できたとしても、次に同じことをしようとしたときには、結局身についていないという状況になりかねません。

実際、私自身も身についていませんでした。

最近、Wixが買収したノーコードプラットフォーム「Base44」というサービスが話題になっています。
経験のない非エンジニアでも簡単にアプリを作成できる点が売りのようですが、複雑な機能を持つアプリを作るのは難しいようです。

私自身は利用したことがないため判断が難しいのですが、システム設計や運用に携わるエンジニアの意見を見ると、「使える」と「使えない」で評価が分かれている印象です。
今後、低品質なアプリや模倣アプリが乱発される可能性も予想されます。

とはいえ、知識がないために開発ができなかった方々でも、自分のアイデアを形にする手段として活用できる可能性はあります。

人それぞれと思いますが、AIは使い方次第では最大の武器になります。
そのため、まずは自分に合った活用方法を見つけることが先決と思います。

Recommended Posts