2ヶ月前に投稿

JSFiddle で Day.js を試してみた

2021年11月29日

この記事は約 8 分で読めます。

4.5

コードを記述して、
その動作を確認したいとき
どのようにして行っていますか?
JSFiddleは登録不要でコードの
動作確認ができます。

日付操作ライブラリ Day.js の
動作をJSFiddle にて
確認してみました。

JSFiddleとは

JSFiddle(ジェイエスフィドル)は
HTML、JavaScript、CSSコードを
一つのページで
編集および実行できるように
設計されたオンラインIDEです。

IDEとは統合開発環境のこと。
ソフトウェア開発のための統合的な
プログラミング開発環境。
開発においてよく使う機能が
最初からひとまとめにされており、
簡単に言うと
「何でもできるメモ帳の超すごいやつ」
という理解でOKなようです。

Day.jsとは

Day.jsは
JavaScriptの日付操作ライブラリ。
Moment.js と ほぼ互換性のある
APIを使用
しており、
2KBと軽量であるのが特徴。

Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API.
Day.jsは、Moment.jsとほぼ互換性のあるAPIを使用して、最新のブラウザーの日付と時刻を解析、検証、操作、および表示する最小限のJavaScript libraryです。

Day.js · 2kB JavaScript date utility library

Moment.js」って何だよ!
って事になるのですが、
こちらの方が
超有名な日付操作libraryです。
どうやら開発を
ストップしてしまった
らしく、
公式に代替として
推奨しているのが「Day.js」です。

詳しくは
公式の「Project Status」に
(英語) 記載されています。

Day.js is designed to be a minimalist replacement for Moment.js, using a similar API.
It is not a drop-in replacement, but if you are used to using Moment’s API and want to get moving quickly, consider using Day.js.
Day.jsは、同様のAPIを使用して、Moment.jsの最小限の代替となるように設計されています。これはドロップインの代替ではありませんが、MomentのAPIの使用に慣れていて、すばやく移動したい場合は、Day.jsの使用を検討してください。

Moment.js | Docs (momentjs.com)

drop-in replacement」って何だよ!
「当座の代替」って言う事らしいのですが、
ここでは「完全互換品」がふさわしい?
完全な互換性がある代替えではないけれど」
みたいな解釈でよいかな?

Drop-in replacement is a It refers to the ability to replace one hardware (or software) component with another one without any other code or configuration changes being required and resulting in no negative impacts.
ドロップイン置換は、コンピュータサイエンスやその他の分野で使用される用語です。これは、他のコードや構成の変更が必要で、悪影響を及ぼすことなく、あるハードウェア(またはソフトウェア) コンポーネントを別のコンポーネントに置き換える機能を指します。

Drop-in replacement – Wikipedia

JSFiddle のこんな使い方

ここでは
CSSやJavaScriptなどの
外部リソースを追加する方法と、
実行結果を記事等に埋め込む時の
埋め込みコードのカスタマイズを
ご紹介いたします。

以下は、
Moment.js を例に
紹介していきたいと思います。

Resources

  • URL from the web – 特定のURLの CSS/JS を埋め込む事ができます。
  • CDNJS – cdnjs にホストされているライブラリを選択できます。

左サイドメニューの Fiddle meta から
Resouces を開き、
「moment」と入力します。

すると
サジェストキーワードが出てくるので、
その中からmoment.jsを選択して
「+ボタン」を押します。

Embed (埋め込み)

埋め込みは、アクションメニューから利用できます。
埋め込みには、以下の視覚的なオプションがあります。

  • Tabs – 埋め込み先に含めるタブを選択します。
    js,css,html,results の順序をURLに変更することでタブの順序を変更できます。
  • Visual – Light か dark テーマの選択か特定の色のアクセント (hex code)
  • Embed snippet – 埋め込みは iframe か script を使用できます。

タブの順序の変更は、
最初のタブにresult を表示する場合の例では、
URLの最初にresult の順から追加します。

表示したくないタブがある場合、
/result,js,html/ みたいに
css を消すとcss のタブは表示されません。

結果

<iframe width="100%" height="300" src="//jsfiddle.net/pontv2yr/embedded/result,js/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>

Day.js を試してみる

Day.jsは、上記のように
「 Moment.jsとほぼ互換性のあるAPIを使用 」
なので書き方も同じ感じでよいみたいですが、

moment().format('YYYY年MM月DD日 dddd'); // Moment.js

dayjs().format('YYYY年MM月DD日 dddd'): // Day.js

Locale の取り扱いは注意が必要です。

Locale

Moment.js は本体のライブラリのみでOKですが、
Day.jsは別途Localeのライブラリを読み込むのと、
書き方が違います。

Moment.js

moment.locale('ja', {
   weekdays: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
   weekdaysShort: ['日','月','火','水','木','金','土']
});

Day.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/locale/ja.min.js"></script>
dayjs.locale('ja');

つまりこうなる

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/locale/ja.min.js"></script>

HTML

<div id="fmtdate"></div>

JavaScript

dayjs.locale('ja');
const formatdate = dayjs().format('YYYY年MM月DD日 HH時mm分ss秒 (dddd)');
document.getElementById("fmtdate").innerHTML = formatdate;

結果

参考文献

最後に

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

JSFiddle で Day.js を試してみた