突然の依頼に、.netは止めて、とりあえずJAVA（JS）

前回までは、.netでしたが、突然に、JAVA開発の依頼が・・・。

勿論、無視は出来ないので、Java+TomCatの作業になりました。

前回の内容は、こちらから参照願います。
実用的なカスタムコントロールの作り方（初級）（TextBox編）

まずは、要件を整理。

1. 基本的には、日付入力の補助である。
2. 日付のデフォルトは、本日日付の月でカレンダーを表示。
   1. ということは、パラメータも必要と思われる。
      1. パラメータ
         1. 初期表示年月
3. 本日日付は、何がいいかと聞くと！
   1. 聞いた日付は、下記でした。
      1. クライアント日付
      2. Javaサーバ日付
      3. Sqlサーバ日付
   2. 結論は、JAVAサーバの日付。
4. その他の要件を聞いてみると！
   1. お任せでお願いしますとの事！
      1. これって、一番むずかしいのよね～(笑)

とりあぜず、要件は把握したので、さて、どこから持ってくるか！

あっ！

このサイトのカレンダープラグイン（私が作成しました(笑)）から持ってくるかな！(笑)

よく考えたら、解ること！

よく考えなくても、解るのですが、これって、PHPでの開発でした(笑)

HTMLや日付のループ処理の方法は解るので、一から作りますかね！

• それより、面倒なのが、日付をサーブレット経由で取ってくるということですね～www^^;

ブラウザ（Ajax等）の推奨なのが、非同期なのですwww^^;

皆さんは、非同期道のようにやっているのでしょうね～！

個人的に非同期は、その部分のロジックについて、1.5倍は、工数かかるのではないかと思います。

表示だけなら、非同期の意味も負荷を考えて解らないでもないのですが、入力系になると！下記のようなことがあるので、結局、サーバーからデータが返ってくるまで、待たなければいけないことになってしまうのです。

1. 初回のいくつかのコンボーデータを取りに行く。
   1. まだ、データは返っていない状態
2. 非同期なので、JS側は、そのまま処理が流れてしまう。
3. そこで、コンボに初期値などを送ってしますと・・・www^^;

なので、全てのサーバ要求処理が終わるまで、待機処理を行っています。(笑)
（これって、非同期処理をしていますが、同期みたいなものですね(笑)）

ぶつぶつ言っても始まらないので、とりあえず、サーバー日付を取ってくるクラスを作成しました♪
これで、どこからでも、このメソッドを呼ぶことで、取得が出来ると思います。

さて、カレンダー作成に入ります。

カレンダーの作成

問題は、どちらでカレンダーのHTMLを作成すべきか！

本来は、JAVAでHTML作成して、それを返却し、表示すべきと思えますが、翌月や当月の表示を行うたびに問合せをしなければなりません^^;

それもバカらしいので、JS（JavaScript）で作成する方法と決定しました♪

それはいいのですが、よく考えたら、JSでカレンダー作ったことがない！？

• .netは、そのまま、カレンダーコントロール
• PHPは、自作のプラグイン。

やはり、ないかも！　まっ！いいか！

まずは、ベース年月（New Date()）を元に！

やはり問題が発生！

えっ！Jsの日付オブジェクトほとんど使ったことないかもwww^^;

とりあえず、Google先生に聞きながら！フムフムフム！
でも、なんか、めんどくさいかもwww^^;

Google先生に聞いていると！

えっ！面白いのがあるではないか！！

jQueryのDatepicker！！

見れば見るほど、これでいいのでは？って、思ってしまうwww^^;

どうしよう・・・？

悩みながら、導き出した答えは、Datepickerを使わないことでした(笑)

1. jQueryの中での開発になってしまうので、制限があるかも知れない。
2. 又、今後予想拡張性を考えた場合、その制限にかかるかも知れない。
   1. 予想される拡張機能
      1. 年月の指定
      2. 祝日の対応
      3. 稼働日の対応
      4. その他、日付以外の情報を元に、色分けなど
3. 自作していたものは、自由に拡張出来る。

ということで、Datepickerは、今回は見送りとなりました。

さて、JSの日付系の命令をまとめると！

1. 日付オブジェクトを使用
2. 本日日付は、New Date();
3. 月換算は、dt.setMonth(dt.getMonth() + 2);（２ヵ月プラス）
4. 日換算は、dt.setDate(dt.getDate() + 10);（10日プラス）
5. 曜日は、dt.gatDay():
6. 内部数値は、dt.Time();

まっ！これだけわかれば出来るかかな！
後は、クラスメドッドにした方がいいのは、メッソドにして！

とりあえず、ロジック完成！

テストですね♪

テストで、そんなにすぐには動きませんよ(笑)

まぁ、作成したばかりで、直ぐに動くことはありませんね！やはり、いきなり落ちます(笑)

いきなり落ちる原因は、内部数値が返ってくる？

• ブラウザで、new Date()の値を確認すると！変数には、下記が入っています。
  • let dat = new Date();
    • Mon Mar 08 2021 16:49:53 GMT+0900 (東京 (標準時))
    • これが、日付Objectなんですね♪
• 日付を月初にしたいので、dat.setDate(1)を行うと、結果は！
  • let datS = dat.setDate(1);
    • 1614584904000
    • これって、内部数値ですね！
• 月末を求めたいので、datS.setMonth(datS.getMonth + 1)を行うと
  • let datE = datS.setMonth(datS.getMonth + 1);
  • おちました～www^^;
  • ちなみに、これでも落ちます(笑)
    • dat.setDate(1).getMonth();
      • Object doesn’t support property or method ‘getMonth’だそうです！

というのが原因です。

どうも、setの戻り値、日付の内部値になっていて、日付Objectではないようです。

回避策は！こんな感じで、さらにNew Dateをつけて、日付Objectに変換が必要ということになるます。

new Date(dat.setDate(1)).getMonth();

あれ？月初のロジックが動いたタイミングで、datの変数が変わってしまう。

これった、実は、ハマりました(笑)

• ブラウザで、new Date()の値を確認すると！変数には、下記が入っています。
  • let dat = new Date();
    • Mon Mar 08 2021 16:49:53 GMT+0900 (東京 (標準時))
• 日付を月初にしたいので、dat.setDate(1)を行うと、結果は！
  • let datS = new Date(dat.setDate(1));
    • 先程件で、勉強しました(笑)
  • あれ？datの内容が、datSと同じになっているwww^^;
  • 考え中～www^^;
    • ブラウザ（MS）が悪い？
      • Chromeでも同じwww
      • 当たり前か！

で、よく考えたら！日付Objectの型ということに気が付きました！！

そうです、日付Objectは、Objectと書いていました(笑)。

オブジェクト型は、参照変数なので、dat変数とdatS変数は、同じ変数ということになりますwww^^;
このことを、完全に忘れていましたwww^^;

ということで、回避策はこちらになります。

let datS = new Date(new Date(dat).setDate(1));

なんか、New Dateの嵐～www^^;
正直言って、使いにくいです～(笑)(笑)(笑)。

仕方ないので、この辺りは、クラスメソッドを作成して、参照変数を断ち切ることにしました。(笑)

あれ？きちんと動いているのに、月が一つ前の月を表示している？

なぜだ？ループも処理もきちんとしているのに、月の表示が前月？になっている？

• ブラウザで、new Date()の値を確認すると！変数には、下記が入っています。
  • let dat = new Date();
    • Mon Mar 08 2021 16:49:53 GMT+0900 (東京 (標準時))
• 月を表示したいので、dat.getMonth()を行うと、結果は！
  • let month = dat.Month();
    • 2
    • え、今は、３月よwwｗ^^;

これは、だだ、よくJS(JavaScript)の仕様を確認していなかったからです。

知っている人は、知っていますが、Month()はゼロから始まるということです。

勿論回避策は！

let month = dat.Month()+1;

となります。

よく、読むことが必要ですね！！

これで完成しました♪

実際に納品を行ったものを違いますが、こんな感じになります。

お客様も、これでOKとの事なので、これで、いいかな！
（拡張性もきちんとありますしね♪）

参考サイト

【JavaScript入門】日付の加算・減算方法まとめ(月またぎ/うるう年)

【jQuery入門】Datepickerの使い方とオプション設定まとめ！

ありがとうございました♪

残っている懸案

分類	懸案	結論	完了
－	現在なし	－	－

今回のまとめ

JavaScriptでカレンダーを作成しましたが、
JSの日付オブケジュトは、個人的には、よくないですね(笑)
ただ、これで少しは、勉強になったかな(笑)