Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

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

この記事は 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日なんですね。。。
微妙。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What are the problem?