LoginSignup
8

More than 5 years have passed since last update.

日付処理ライブラリ「date-fns」でプレミアムフライデー!

Posted at

この記事は J2complexed Advent Calendar 2017 の1日目の記事です。

プレミアムフライデー!

今年の流行語大賞に「プレミアムフライデー」が受賞したという話を聞きました。
http://singo.jiyu.co.jp/award/award2017.html#prize08

ところで月末金曜日って微妙じゃないですか?
なにが微妙かというと、JavaScriptで月末金曜日が何日か出すのが微妙。

やり方はいろいろあるかと思いますが、今回は日付を処理をするときに便利なライブラリ「date-fns」を使ってやってみたいと思います。

date-fns

日付処理をするときは大体の人がmoment.jsを使っていたかと思います。
公式でもmoment.jsとの違いを書いていました。
https://github.com/date-fns/date-fns/issues/275#issuecomment-264934189
要約すると、以下でしょうか。(英語も日本語も苦手です。編集リクエストお待ちしてます)

  • moment.jsはmutableなので、バグが起こりやすい
  • moment.jsはパフォーマンスよくない
  • moment.jsはでかい

それに対してdate-fns.jsは以下だと言っています。

  • date-fns.jsはImmutableだ。
  • date-fns.jsは純粋な関数だから、必要なものだけ使えばいい。
    (つまり、オーバーヘッドが少ないし、サイズも小さい)

いい感じですね。関数も130種類以上あるそうですよ。
興味があれば、公式を見てください。
では、実際に使ってプレミアムフライデーを出してみましょう。

準備

公式にあるように準備します。ここらへんは普通なので、コマンドと用意したファイルだけご紹介します。
※ date-fnsとは関係ないのですが、babelを入れてます。

~ $ mkdir premium-friday
~ $ premium-friday
~/premium-friday $ npm init
~/premium-friday $ npm i -D date-fns
~/premium-friday $ npm i -D babel-cli babel-preset-es2015
~/premium-friday $ vi package.json
~/premium-friday $ vi .babelrc
~/premium-friday $ mkdir src
package.json
{
  "name": "premium-friday",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d dest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "date-fns": "^1.29.0"
  }
}
{
  "presets": ["es2015"]
}

できましたか?

プレミアムフライデー

で、書いてみました。

src/index.js
import endOfMonth from 'date-fns/end_of_month'
import isFriday from 'date-fns/is_friday'
import addWeeks from 'date-fns/add_weeks'
import lastDayOfWeek from 'date-fns/last_day_of_week'
import format from 'date-fns/format'
import isToday from 'date-fns/is_today'

const today = new Date ()
// 月末を取得
const EndOfMonth = endOfMonth (today)

let premiumFriday

// 金曜日かどうか
if (isFriday (EndOfMonth)) {
  premiumFriday = EndOfMonth
} else {
  // 前の週を取得
  const previousWeek = addWeeks (EndOfMonth, -1)
  // その周の終わりを取得(週の始まりを土曜日にする)
  premiumFriday = lastDayOfWeek (previousWeek, {weekStartsOn: 6})
}
// フォーマット
const month = format (premiumFriday, 'MMMM')
const day   = format (premiumFriday, 'D')

console.log (`${month} Premium Friday is ${day}!`)

// もし今日がプレミアムフライデーなら
if (isToday(premiumFriday)) {
  console.log (`Today is Premium Friday! Yeah!`)
}

以下のようにコマンドを叩けば実行できます

~/premium-friday $ npm run build
> babel src -d dest

src/index.js -> dest/index.js
~/premium-friday $ node dest
December Premium Friday is 29!

Premium Friday! Yeah!

プレミアムフライデーできましたでしょうか?
ちなみにdest/index.jsのファイルサイズは2KBでした。小さい。

まとめ

date-fnsを使って、複雑な日付の処理を簡単に書けました。
もし機会があれば、いつものmoment.jsではなくdate-fns.jsを使ってみてはいかがでしょうか。

ところで、今月のプレミアムフライデーって29日なんですね。。。
微妙。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8