Javascript

【Javascript】DateのgetMonth()が1月ズレてしまう。原因と簡単な解消法。

JavascriptでDateを「xx月」表示に変換した時に1月前の数値が表示されてしまいました。

その原因と対策をメモしておきます。

const date = new Date('2022-08-09T13:00:15.604Z');

const month = date.getMonth();
console.log(month);

// 7  (データは8月なのに...)

解消法:getMonth()に「+1」する

getMonth()に「+1」をすることで解消できます。

const date = new Date('2022-08-09T13:00:15.604Z');

const month = date.getMonth() + 1;                // "+1"を追加
console.log(month);

// 8

年月日で表示したい場合

const date = new Date('2022-08-09T13:00:15.604Z');

const year = date.getFullYear() + '年';
const month = (date.getMonth() + 1) + '月';
const day = date.getDate() + '日';
console.log(year + month + day);

// 2022年8月9日

原因:getMonth()の返り値は「0〜11」

Javascriptの.getMonth()では、月の値を「0〜11」で返されます。

つまり1月は「0」で、12月は「11」で返ってくることになり、これが原因で1月ズレることになっています。

【Javascript】if文内で変数を定義する場合のコード。

まずif文内で変数定義する時考えること

if文内で定義した変数を「if文外で使用するかどうか」という点です。

if文中だけで使用する場合は、通常通り「const」で問題ありません。

一方で、if文外でも使用したい場合は次の2つの方法で処理します。

if文中にif文外でも利用可能な変数の書き方

方法1:if文外で「let」「var」で定義する【推奨】

constは再代入ができないので、「let」または「var」でif文外に変数定義します。

ただし、「var」は意図しないバグが起こりやすいため「let」

let b;      // 変数定義

if (〇〇) {
    b = 1;  // 再代入
};

console.log(b)
// 1

方法2:if文中に「var」で定義する

「var」はバグを起こしやすいので、

if (〇〇) {
    var a = 1;  // 変数定義
};

console.log(a);
// 1

おまけ:「var」はできるだけ使わないほうがいい

varは再宣言ができてしまったり、巻き上げによる影響を受けたりによって、意図しない挙動になってしまう場合があるのであまり使わない方がいいそうです。

varが良くないとされる理由は、おおむね以下の2点に集約されると思います。

1. 変数を簡単に書き換えられてしまうと、意図しないバグが発生するため
2. letやconstに比べて、varは巻き上げ時のバグを生み出しやすいため

参考:JavaScriptでvarが非推奨な理由を整理してみた

【Javascript】URLからドメイン部分のみを取得する。ほか

URLから「ドメイン部分のみ(ルートURL)」を切り出す方法を調べたのでまとめメモ。

正規表現でもできそうですが少しややこしそうだったので、簡単に実装できそうなものを選んでいます。

やりたいこと

https://craft-time.jp/http-request-http-response/からhttps://craft-time.jpの部分を切り取りたい。

「URLオブジェクト」を使う

const target_url = 'https://craft-time.jp/http-request-http-response/';

const url = new URL(target_url);
const domain = url.origin;
console.log(domein);


// https://craft-time.jp

「URLオブジェクト」で他に取得できるもの

URLオリジンの他にも、いろいろ取得することができます。

const target_url = 'https://example.com/tags/1?user_id=1&order_by=asc';

const url = new URL(target_url);
const result = url.〇〇;  // いろいろなプロパティがあります。

プロパティ内容出力例
.originURLのオリジン
(スキーム&ドメイン&ポート)
=> https://example.com
.hostnameURLのドメイン=> example.com
.pathname最初の’/’に続くURLパス=> /tags/1
.hash‘#’ に続くURLフラグメント識別子=> #heading2
.search先頭の?で始まるすべての引数
(クエリパラメータ)
=> ?user_id=1&order_by=asc
.searchParams.get(‘〇〇’).searchのー引数にアクセス.searchParams.get(‘user_id’)
=> 1