PleasanterでDay.jsを使って日付操作してみよう
Pleasanterでスクリプトを書いているときに日付や時刻を思い通りに操作したい時があります。そんな時にJavaScript標準で用意されているDateがあるのですが、やりたいことを実現するために少し長いコードを書かなければいけなかったりするため、やや使いにくさを感じています。
Pleasanterでも普段使い慣れているものを使いたいので、備忘録も兼ねて使い方をまとめてみました。
Day.jsとは
軽量で使いやすいJavaScriptの日付操作ライブラリです。Dateと同じような役割ですが、よくやるようなユースケースが関数化されているため、短いコードで簡単に使うことできます。
例: 日付のフォーマット
先に実際にDay.jsを使うとどれくらい日付の操作が楽になるのか見てみましょう。
Dateを使って実際にYYYY/MM/DD形式の日付を取得しようとするとこれくらいのコードを書く必要があります。
const date = new Date(); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, ‘0’); const day = String(date.getDate()).padStart(2, ‘0’);
const formattedDate = `${year}/${month}/${day}`; console.log(formattedDate);
Day.jsを使うとこれくらい短くできます。
const date = dayjs(); const formattedDate = date.format(“YYYY/MM/DD”); console.log(formattedDate);
便利ではあるのですが、使えるようにするためには一手間準備が必要になります。
使い方
Node.jsなどで使用する時にはNPMを使ってインストールします。今回はブラウザで直接呼び出して使用する必要があります。使用するツールによっては、ぶらうざーからの呼び出しに対応しているか事前に確認が必要です。Day.jsはサポートされているので使えます。
Day.jsスクリプトの読み込み
最初にPleasanterでDay.jsのスクリプトファイルを読み込む必要があります。通常このスクリプトはHTMLファイルのHeader領域に記述されます。
Pleasanterでは、管理 > テーブルの管理 > HTMLから新規作成画面を開き、タイトルは適当に入力しつつ、挿入位置はHead bottomを選択して次のスクリプトを貼り付けます。最後に作成ボタンを押して反映します。
それぞれのスクリプトで次のコードを最初に1回だけ呼び出してください。
dayjs.locale(‘ja’);
これで日本語化対応もできて自由な形式で日付を作ることができるようになりました。
おわりに
外部ファイルをうまく活用しながらスクリプトを書くことでより楽に実装することができるようになります。しかし、今回のようにURLから外部スクリプトを呼び出しすぎると全体的にUIが重くなってしまうこともあるので注意してください。
今回はURLで呼び出していましたが、キャッシュするようにファイルを取得してWebサーバーに直接腹持ちする方法もあります。Pleasanterで静的なリソースファイルをアップロードして保持する方法があれば、そちらを活用した方がパフォーマンス的にはいいかもしれませんね。まだ、この辺りは勉強不足でそういった仕組みがあるのかないのか分からず適当なことと言ってますが、もしあれば、別記事でまとめようと思います。