date-fns

t-wada.hatenablog.jp qiita.com そもそもの書き方 sbfl.net Date.now = jest.fn(() => 1000000000) みたいにするとDate.now()をテストの際に固定出来る（じゃないと意図通りのテスト出来ないからね）

www.npmjs.com qiita.com これ。date-fnsとはまた別のものを入れる必要があります。 utcToZonedTimeでUTCで入っている時刻をどこかのタイムゾーンの時刻に変換できます。 とある時間データの日本時間当日24時を知りたいとき、utcToZonedTimeでAsia/Tokyoにしてdate-fnsでsetHoursで24をセットすると日本時間の24時になります。UTCの時刻で24時をセットすると日本時間ではなくなってしまうので…（UTC時刻基準で全て決めればいい説もありますが）

まず、正規表現でreplaceします。 lab.syncer.jp 数字以外を/にした上で最後の1文字（日が/になっている）をとります。 '2020年11月14日'.replace(/[^0-9]/g, '/').slice(0, -1) これで返ってくるのが2020/11/14です。 これをformattedDateとかに入れておくとしましょう。 次、Date型に変換します。 web.plus-idea.net formattedDate = Date.parse(formattedDate) これでDate型になったものがformattedDateに入りました。 次にdate-fnsという…

■ はじめに https://dk521123.hatenablog.com/entry/2021/01/29/231952 の続き。 Date に関するライブラリの内に気になった date-fns について 実際に使ってみた。（若干のハマりポイントあり） 目次 【１】date-fns 【２】公式サイト 【３】使用上の注意 【４】環境設定 【５】サンプル 例１：Hello world 例２：先月の月初・月末日 【１】date-fns * JavaScript/TypeScriptで Date を扱う際の便利ツール => 特徴としたら、標準の Date() を元に ユーティリティ関数を用意してく…

moment.jsが今後の変更はセキュリティサポートとバグ修正に留まることを公式に発表している https://momentjs.com/docs/#/-project-status/ なので、今まで使用していた箇所を他のライブラリで置き換えたい moment.jsが推奨する代替案のうちdate-fnsを試してみる 必要な関数だけの import も可能ということなのでバンドルした時のサイズが少なくなりそう date-fns.org 置き換える関数 moment.jsを使用している箇所を置き換えてみる 日付の差分 // moment.js moment(targetDate).diff(now…

評価時期で自分のアウトプットの様子を出す必要があり、この機会にTypeScript + puppeteerでシュッとスクレイピングするの試してみるかと思い、やってみた。 完成したもの https://github.com/shibayu36/tools/blob/a7156bc03620700105cc52e54d69cac38b13f40e/script/blog-ranking.ts スクリプト内でurls, start, endを定義しておくと、特定期間の総記事数や総ブックマーク数、記事の情報を出してくれるようになった。 使い方は git clone https://github.com…

www.npmjs.com qiita.com これ。date-fnsとはまた別のものを入れる必要があります。 utcToZonedTimeでUTCで入っている時刻をどこかのタイムゾーンの時刻に変換できます。 とある時間データの日本時間当日24時を知りたいとき、utcToZonedTimeでAsia/Tokyoにしてdate-fnsでsetHoursで24をセットすると日本時間の24時になります。UTCの時刻で24時をセットすると日本時間ではなくなってしまうので…（UTC時刻基準で全て決めればいい説もありますが）

まず、正規表現でreplaceします。 lab.syncer.jp 数字以外を/にした上で最後の1文字（日が/になっている）をとります。 '2020年11月14日'.replace(/[^0-9]/g, '/').slice(0, -1) これで返ってくるのが2020/11/14です。 これをformattedDateとかに入れておくとしましょう。 次、Date型に変換します。 web.plus-idea.net formattedDate = Date.parse(formattedDate) これでDate型になったものがformattedDateに入りました。 次にdate-fnsという…

自己紹介 こんにちは。BASE株式会社のフロントエンドチームの谷口です。 本日は、BASEのフロントエンドで使用している日付ライブラリについてお話しします。 BASEの日付ライブラリについて BASEでは、frontendという領域が出来始めた当初、最もメジャーな日付ライブラリであるmoment.jsを使用していました。 その後、デザインコンポーネントの開発など、frontend領域が成長していく中で より使い勝手の良い別の日付ライブラリが検討され、date-fnsが採用されました。 現時点で、ほぼ全てのコードがdate-fnsに移行済みです。 date-fnsについて date-fnsについ…

Material-UI Pickersの日本語化について Material UIを使用することにしたので色々と試している。そんな中で、日付を扱うための設定が必要になりMaterial-UI Pickersを使用することにした。 使うことはできるけれども設定を変更したいと思い調べた内容についてメモする。 前提 ReactとMaterial UIを使用している。また、日付の扱いはdate-fnsを使用している。 日本語にしたい Material-UI Pickersのローカライズについて、公式ドキュメントでは以下の説明がある。 Date-fns localization - @material-u…

こんにちは、関西支店で新規事業開発室に所属するソフトウェアエンジニアの加藤です。Bill Oneという新規サービスの開発に携わっています。 バックエンド編の続きとして、フロントエンドで私たちが使用している技術やライブラリを振り返って、どんな意志と意図があるかを確認していきます。 Bill Oneは今年の1月ごろにピボットし、それまで開発してきたフロントエンドを全て捨て、1から作り直しました。ピボットの際に改めて技術選定を行い、それまで使っていたライブラリ等を見直したので、本稿ではピボット前後で変化した箇所を中心にフロントエンドの技術選定を紹介します。

一時的に取っておいた URL 一覧を見やすい Markdown の形に変換したいというニーズが生じたため、サクッと行いました。 基本的には References に挙げた Gist を参考にさせていただきました。 ただ、元コードが CORS 制限回避のため crossorigin.me という proxy ツールを使っていたんですが、こちらのサービスサイト (https://crossorigin.me/) がドメイン切れを起こしていたため、代替として CORS Anywhere というツールを使うように変更しました。 モダンブラウザで新規 blank タブを開いた状態で DevTools を…

集計系だとデフォルトで先月1ヶ月分のってのをよくやる。結局使わなくなったけどメモ。日付でだいたい必要なものはdate-fnsで足りてます。TypeScriptでも問題なく使えます。date-fns.org実行時の日にちになるように関数。 import { format, startOfMonth, endOfMonth, subMonths } from 'date-fns' const DATE_FORMAT = 'yyyy-MM-dd' const lastMonth = (): Date => subMonths(new Date(), 1) const defaultDateStrin…

こんにちは、フロントエンドエンジニアの池田です。 弊社のサービスであるWistantのv5.0が4月にリリースされました。 簡単にその経緯と技術選定理由を共有させて頂きます。 技術刷新に至った経緯 v5.0の情報アーキテクチャ（レイアウト）変更 新しいデザイナーさんにJOINして頂き、プロダクトのUI・UXの大胆な改善を行うことになりました。 具体的には、プロダクトのコンセプト・ターゲットの変更に伴って、既存のすべてのページにおいてデザインの変更を行うことになりました。 当たり前ですが、全ページの改修は簡単にできることではありません。 モーダルなどを含め約100のページが存在しており、それらを…