西向く侍！？
ishigami
あけましておめでとうございます。
年が明けると、皆さんの中で新しいカレンダーに変えられる方も多いと思います。
ということで、今回はカレンダーについて、JavaScriptでどんな実装方法があるかなどを一部紹介できたらと思います。
では、今回は2通りの実装方法をご紹介したいと思います。
1.「Datepickerプラグイン」のテンプレートを使って、素早く実装しよう
2.「dateオブジェクト」を使って、自分だけのカレンダーを作成しよう
Datepickerで実装したカレンダー
Dateオブジェクトを使って作成したカレンダー
1.「Datepickerプラグイン」のテンプレートを使って、素早く実装しよう
「Datepicker？プラグイン？それって何？」という疑問を皆さんは持たれたと思います。
まずプラグインとは、ソフトウェアの機能を拡張するためのプログラムで、「拡張機能」と呼ばれたりもします。
Datepickerとはそんなプラグインの一つで、JavaScriptにカレンダーを作れる機能を拡張してくれるプログラムのことを言います。
これを導入することでテンプレートのカレンダーを使うことができます。
2.「dateオブジェクト」使って、自分だけのカレンダーを作成しよう
こちらの方法では、関数を使った計算を行い、カレンダーを作成するというものです。
こちらはDatepickerとは違い、デザインを自分好みに変更しやすい利点があります。
「関数自体何かわからない」という人向けに例えると、自販機があるとします。
お金を1000円入れて、120円のジュースのボタンを押しました。
選んだジュースとお釣りの880円が返ってきました。
これを関数的に考えると、1000円の支払い金額という情報と120円のジュースという商品情報を計算するための値として設定し、
これらの情報を式にセットすると、選ばれたジュースとお釣りを返すという計算を行うのが関数です。
Dateオブジェクトとは何かも解説したいと思います。
Dateオブジェクトとは日付や時刻を扱うためのもので、「new Date()」とすることで現在の日付と時刻を取得することができます。
これには他にも使用方法があり、「new Date(year)」などとするとyearに指定した年の日付を取得できたりします。
今回は関数にDateオブジェクトを使用し、2025/1のカレンダーを作っていこうと思います。
では、複数のステップに分けて作成していきたいと思います。
1. カレンダー形式の多次元配列を返す関数を定義します。
多次元配列を作る際に、まずヘッダー部分となるものとして、
日曜日から始まり土曜日で終わる「週」を設定します。配列の横の部分として扱います。
2.カレンダー形式の多次元配列で使用する値は、すべてDateオブジェクトで取得します。
例えば、「new Date(2025,1)」で取得すると「2025-01-01 0:00:00.000」が取得できるため、
このオブジェクトを引数(今回はtodayを使用します。)に入れることで、
「today.getDate()」を使って日付を取得し、日付を再現させていきます。次の日だと+1などしていくことで 再現可能です。
3. 画面に表示するときは関数から受け取った配列をループで展開して画面に表示します。
意識することは以下となります。
1月の例では、一週目は30,31,1,2,3,4で、2週目は6,7,8,9,10,11のようにループさせていきます。
別の月のカレンダーを作成する場合は以下を参照してください。
1ヶ月が31日の配列：[1, 3, 5, 7, 8, 10, 12]
1ヶ月が30日の配列：[4, 6, 9, 11]
それ以外の配列 ：[2]
月の閏年に関して、西暦を4で割れる月は29を、割れない月は28まで作ります。
ここで更に気を付けたいのが、閏年は100年に一度29にならず、400年に一度29になるという点にも気を付けましょう。
他にも、月の日数が31までない月である2、4、6、9、11の覚え方として、”にしむく士”というワードがあります。
に(2)し(4)む(6)く(9)士(11)と語呂を合わせるらしく、士がなぜ11なのかは、11を漢字で書いた際に十一になるからだそうです。
以上が、JavaScriptで使えるカレンダーの紹介でした。
皆さんは普段どのようなカレンダーを使っていますか？私は日めくりカレンダーを使っています。
カレンダーだけでも色々な種類のものがあって面白いですよね。
実は、紹介したものでもアレンジを加えれば日めくりカレンダーのようなものにも出来ちゃいます。
皆さんも是非色んなカレンダー制作を試してみてください。
最後まで読んでくださりありがとうございます。
