LoginSignup
3
3

More than 3 years have passed since last update.

【JavaScript修行】初めてのライブラリ:Moment.jsを使う環境を整えたい

Posted at

日付指定で取得できるAPIを使ってあれこれやってたら
Dateオブジェクトの面倒さにぶつかりました。

moment.jsを使うと簡単に日付加工ができる!
と聞いたのでやってみます。

package.jsonってファイルがあった

人から頂いた環境で作業をしてて、まだまだ環境についてはからきしです。
https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847
これをみてpackage.jsonファイルについてだいたい掴んでおきました。
--saveコマンドを打つとpackage.jsonにバージョンを記述してくれると。ふむふむ

moment.jsインストール

 npm install --save moment

このコマンドでインストールできました。
でも。。
「package.json」「package-lock.json」の2つのファイルができてしまいました。

https://tsuyopon.xyz/2019/02/11/what-is-the-package-lock-json/
ここでpackage-lock.jsonについて学習。
なるほど、バージョンがガチッと固定されるんですね。

ところで日付といえば、お国によって色々dですよね。
分から書き始めるとことか、表記が特殊な物とかとかとか....
moment.jsには全部がマルっと入ってる。ということは、ファイルがめちゃくちゃ重いらしいです。
日本のだけでいいのにー
ということで、日本語以外の表記の排除に挑戦してみます。

moment.jsの軽量化作戦

https://qiita.com/ksk1015/items/9ca85ec09dd74f70548e
これを見ると、プラグインで無視すればいいとか。プラグインって?
https://qiita.com/R-Yoshi/items/30282dee7b6d5ddd6622#ignoreplugin
ここのIgnorePluginの項目がちょうどいい感じです。
そんなこともできるんですね。

webpack.configって何だろうか。。
というかそもそもwebpackについてよく知らないなあ。
ということで、昨日ざっと勉強しました。

IgnorePluginの構文
new webpack.IgnorePlugin(requestRegExp, [contextRegExp])

requestPlugin・・・作成したくないモジュール名を正規表現で記述
contextRegExp・・・対象とするディレクトリ(オプション)

plugins: [
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],

ロケールのファイルをこれで除外できます。

moment.js使ってみよう

https://www.yoheim.net/blog.php?q=20180201
ここをみつつ学習。

momentjsの準備
const moment = require('moment');
//or
import moment from 'moment'

これをjsファイル内に記述することで使えるようになります。また、
日本のロケールを有効にするには

import moment from 'moment'
import 'moment/locale/ja'

moment.locale('ja')

をjsファイル内に記述します。

const moment = require('moment');
const thisYear = moment().year();
console.log(thisYear);   //2019

ちゃんと使えてますね!

3
3
0

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
3
3