サイト検索
検索
サイトメニュー
Menu
RTB SoftLab ラテベ ソフトラボ (ラテベラボ)
私の知っているソフトの操作を解りやすく、解説していきます。
サイト検索
検索
サイトメニュー
Menu

投稿日:2021年3月9日

更新日:2021年3月8日

突然の依頼に、.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);(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
      • え、今は、3月よwww^^;

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

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

勿論回避策は!

let month = dat.Month()+1;

となります。

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

これで完成しました♪

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

JavaScriptで作成したカレンダー
JavaScriptで作成したカレンダー

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

参考サイト

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

残っている懸案

分類懸案結論完了
現在なし
これからの懸案一覧

今回のまとめ

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

RTB カレンダー

27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

リンク

通販サイト(ECサイト)デモへ
ラテベラボブログへ
ナノシスへ

RTBアーカイブ

RTB 本日のランキング

google検索