JavaScriptの文法（変数・定数・リテラル・データ型）

「変数と定数」と「リテラル」

			リテラル
			数値リテラル (numeric literal)	文字列リテラル (string literal)
宣言(declaration)	let	変数(variable)	数値変数	文字列変数
	const	定数(constant)	数値定数	文字列定数

// 数値リテラル
    // 定数
    const a = 1;

    // 変数
    let b = 2;

// 文字列リテラル
    // 定数
    const c = "3";

    // 変数
    let d = "4";

プリミティブ型とオブジェクト

プリミティブ型	オブジェクト
・数値(Number) ・文字列(String) ・論理値(boolean) ・null ・undefined ・シンボル(Symbol)	・配列(Array) ・日時(Date) ・正規表現(RegExp) ・マップ(Map) ・ウィークマップ(WeakMap) ・セット(Set) ・ウィークセット(WeakSet)

数値

• JavaScriptは数値を表す型が一つしかない。
  • 数値型＝倍精度浮動小数点（64bit）【IEEE 754-2008】

• 数値リテラル：10進数（整数、小数、10を底とした指数表現）、2進数、8進数、16進数

• 特殊表現：Infiity、-Infinity、Nan

文字列

• 文字が連続したもの
• JavaScriptでの文字列はUnicodeのテキスト
• JavaScriptでは文字列リテラル、テンプレートリテラルを使用する
  • 文字列リテラルには”(ダブルクォート)、'(シングルクォート)がある

引用符

• 引用符には”(ダブルクォート)と'(シングルクォート)がある。

• 文字列リテラルとして”(ダブルクォート)を使用している場合、文字列の内部で'(シングルクォート)が利用できる。

consst message = "I'm happy!";

• 文字列リテラルとして'(シングルクォート)を使用している場合、文字列の内部で”(ダブルクォート)が利用できる。

consst message = '"Me too"';

エスケープ

• \(バックスラッシュ)を使用すると、引用符をエスケープすることができる。

consst message = "\"I'm happy!\" \"Me too\"";

テンプレートリテラル

\(バッククォート)`を使用することで、文字列の中に変数を埋め込むようなテンプレートを作ることができる。

let month = 7;
let day = 11;
console.log(`今日は${month}月${day}日です。`);  //今日は7月11日です。

複数行にわたる文字列

• ES2015から複数行にわたるコメントがサポートされるようになりました。

• 「文字列の改行部分に改行コードを挿入する」と「画面（エディター）上の改行をエスケープする」を実施する必要があります。

• 私が好きな方法は方法③です。

  • あえて複数行のコメントを使用する必要は無いと思います。

    // 方法①：3行のコメントを1行のコードにする場合
/*
閑さや
岩にしみ入
蝉の声
*/

    const comment1 = '閑さや\n岩にしみ入\n蝉の声';
    console.log(comment1);

    // 方法②：3行のコメントを3行のコードにする場合
    //        ->インデントがあるので、構造が分かりにくくなる)
/*
閑さや
岩にしみ入
蝉の声
*/

    const comment2 = '閑さや\n\
岩にしみ入\n\
蝉の声';
console.log(comment2);

    // 方法③：3行のコメントを1行のコード×3にする場合
/*
閑さや
岩にしみ入
蝉の声
*/

    const comment3 =  '閑さや\n' +
                      '岩にしみ入\n' +
                      '蝉の声';
    console.log(comment3);

文字列としての数値

• 数を含む文字列は、処理系が自動で数値へ変換することがある。
• 数は、処理系が自動で文字列へ変換することがある。

// ---------- 
// 文字列としての数値(足し算)
// ---------- 
const comment1 = 4+ '4';
console.log(comment1);        // '44'

const comment2 = 4+ '04';
console.log(comment2);        // '404'

const comment3 = '40'+4;
console.log(comment3);        // '404'

const comment4 = '4'+4;
console.log(comment4);        // '44'

// ---------- 
// 文字列としての数値(引き算)
// ---------- 
const comment5 = 4 - '04';
console.log(comment5);        // 0

const comment6 = '04' - 4;
console.log(comment6);        // 0

// ---------- 
// 文字列としての数値(かけ算)
// ---------- 
const comment7 = 4 * '04';
console.log(comment7);        // 16

const comment8 = '04' * 4;
console.log(comment8);        // 16

// ---------- 
// 文字列としての数値(わり算)
// ---------- 
const comment9 = 4 / '04';
console.log(comment9);        // 1

const comment10 = '04' / 4;
console.log(comment10);       // 1

論理値

• ture/falseのいずれか

シンボル

• 作成したシンボル(symbol)はユニークであり、他のシンボルと同じになることはない
• プリミティブであり、リテラルによる表現を持たない

nullとundefined

• null
  • データ型の一つ
• undefined
  • まだ値を指定していないことを表す

オブジェクト

オブジェクトのプロパティ(またはメンバー)にアクセスする方法

const profile = {};

profile.name = "taro";
profile['sex'] = 'male';
profile["age"] = 25;
console.log(profile);//{name: "taro", sex: "male", age: 25}

生成時に値を指定しする方法

• 最後のプロパティを追加した後にも,をつけることができます。
• Internet Exprorerの以前のバージョンでは、構文的に問題ないはずの上記表現がErrorになていたらしい。

• ブラウザの種類に依存しないコードを作成するために、昔は最後のプロパティに,をつけない慣例がありました。

• JSONとしては、最後のプロパティの後に,をつけることが禁止されています。

const profile = {
    name : 'taro',
    sex : 'male',
    age : 25,
};
console.log(profile);//{name: "taro", sex: "male", age: 25}

プロパティに関数を持たせる

const profile = {};
profile.name = function(){return 'taro';}
console.log(profile);         // {name: ƒ}
console.log(profile.name);    // ƒ (){return 'taro';}
console.log(profile.name());  // taro

プロパティを削除する

const profile = {
    name : 'taro',
    sex : 'male',
    age : 25,
};
console.log(profile);//{name: "taro", sex: "male", age: 25}

delete profile.sex;
console.log(profile);//{name: "taro", age: 25}

配列

• 固定長ではない
  • 追加、削除が可能
  • 個々の要素の型は同じである必要は無い
  • 添え字は0から始まる

const array =[1,'2','３','四'];
console.log(array[0]);    // 1
console.log(array[1]);    // 2
console.log(array[2]);    // ３
console.log(array[3]);    // 四
console.log(array[4]);    // undfined
console.log(array);       // [1, "2", "３", "四"]
array[6] = 'add';
console.log(array);       // [1, "2", "３", "四", empty × 2, "add"]

日時

• 日時を扱うオブジェクト
• JavaからJavaScriptへ引き継がれた機能の一つ
• 日時処理はmomentjsを使うことを進めます

const now = new Date();
console.log(now);                    //Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時)
console.log(date.getFullYear());     // 2020
console.log(date.getMonth());        // 6 (0から始まる)
console.log(date.getDate());         // 12 
console.log(date.getDay());          // 0 (0:日曜日～6:土曜日)
console.log(date.getHours());        // 16
console.log(date.getMinutes());      // 0
console.log(date.getSeconds());      // 10
console.log(date.getMilliseconds()); // 339

正規表現

• 文字列に対し、検索や置換を行うときに便利

MapとSet

名称	関係する型	(Weakなモノ)
Map	オブジェクト	WeakMap
Set	配列	WeakSet

データの型変換

数値への変換

Numberオブジェクトのコンストラクタを使用する

• 数値変換できない文字列を変換しようとした場合はNaNとなる

const input = '123.456';
console.log(input);        // '123.456'
const check = Number(input);
console.log(check);        // 123.456

const input2 = '１２３';
const check2 = Number(input2);
console.log(check2);    // NaN

parseInt(),parseFloat()を使用する。

• 数値以外が混ざっていても無視されます。
  • 無視のされ方は、確認しましょう。

const input1 = '7月';
console.log(parseInt(input1,10));    // 7
const input2 = '7月12日';
console.log(parseInt(input2,10));    // 7

文字列への変換

• toString()を使用する。

const now = new Date();
console.log(now);                    // Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時)
console.log(now.toString());         // Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時)

const array =[1,'2','３','四'];
console.log(array.toString());      // 1,2,３,四

論理値への変換

• Booleanコンストラクタを使う

const n = 1;
const flag = Boolean(n);
console.log(n);      // 1
console.log(flag);   // true

参考文献

VSCode おすすめ拡張機能（プラグイン）

私が追加したプラグインに関するメモです。

2020.7.7時点

基本中の基本

アイコン	名称	機能
	Japanese Language Pack for Visual Studio Code	日本語用言語パック拡張

コーディングアシスト

アイコン	名称	機能
	zenkaku	全角スペースを可視化する
	indent-rainbow	インデントを読みやすくする
	Highlight Matching Tag	一致する終了タグと開始タグを強調表示します
	Bracket Pair Colorizer	一致するブラケットをカラー化するためのカスタマイズ可能な拡張
	Auto Rename Tag	ペアになったHTML / XMLタグの自動名前変更
	Auto Close Tag	Visual Studio IDEまたはSublime Textと同じように、HTML / XML終了タグを自動的に追加します
	Path Intellisense	ファイル名を自動補完するVisual Studio Codeプラグイン
	Todo Tree	TODO、FIXMEなどのコメントタグをツリービューに表示する
	TODO Highlight	TODO、FIXME、および任意のキーワード、注釈を強調表示します...

その他ユーティリティ系

アイコン	名称	機能
	Live Share	お気に入りのツールの快適さからのリアルタイムの共同開発。
	Code Spell Checker	ソースコードのスペルチェッカー
	Rainbow CSV	CSVおよびTSVファイルを異なる色で強調表示し、SQLのようなクエリを実行する
	Git Graph	リポジトリのGitグラフを表示し、グラフからGitアクションを実行します。

目的特化

アイコン	名称	機能
	Json Editor	アクティブなJSONドキュメントのツリービューエディターを 生成する
	ESLint	ESLint JavaScriptをVSコードに統合します。
	Python	Linting、デバッグ（マルチスレッド、リモート）、 Intellisense、Jupyter Notebook、コードのフォーマット、 リファクタリング、ユニットテスト、スニペットなど
	Swagger Viewer	Swagger Viewerを使用すると、 Visual Studio Codeに入力するときにSwagger 2.0 およびOpenAPIファイルをプレビューして検証できます。
	YAML	組み込みのKubernetesおよびKedge構文サポートを備えた Red HatによるYAML言語サポート
	Docker	コンテナ化されたアプリケーションの作成、管理、デバッグを簡単にします。

JavaScriptの「スプレッド構文」の使い方

参考文献

• スプレッド構文(MDN web docs)

スプレッド構文とは

• 配列やオブジェクトのカッコ（[]とか{}）を外すことができる。

const items = ['a', 'b', 'c'];

console.log(items);           // ['a', 'b', 'c']
console.log(...items);         // a b c

配列での使い方

基本動作

const items = ['a', 'b', 'c'];

// 配列のコピー
const items2 = [...items];
console.log(items2);          // ["a", "b", "c"]

// 配列の結合
const items3 = [...items,...items2];      //items3 = items1.concat(items2) と同じ
console.log(items3);                      // ["a", "b", "c", "a", "b", "c"]

const items4 = [1,...items2,2];
console.log(items4);          // [1, "a", "b", "c", 2]

// 配列の分解
const [a,b,...other] = [1,2,3,4,5];
console.log(a);                 // 1
console.log(b);                 // 2
console.log(other);             // [3, 4, 5]

少し発展

// 文字列を配列に分解
const word = 'String型を配列に分解😀';
const stringArray = [...word];
console.log(stringArray);          // ["S", "t", "r", "i", "n", "g", "型", "を", "配", "列", "に", "分", "解", "😀"]

// 配列から重複を取り除く
const data = ['a', 'b', 'c', 'a', 'b', 'd', 'e', 'c', 'f'];
const list = [...(new Set(data))];

console.log(list);                // ["a", "b", "c", "d", "e", "f"]

オブジェクトでの使い方

基本動作

const name = {
  firstName : 'Taro',
  lastName : 'Yamada',
}
console.log(name);     // {firstName: "Taro", lastName: "Yamada"}

// オブジェクトのコピー
const name2 = {...name}

// オブジェクトの結合①
const profile = {
  ...name,
  age : 38,
}
console.log(profile);   // {firstName: "Taro", lastName: "Yamada", age: 38}

// オブジェクトの結合+更新
const profile = {
  ...name,
  age : 38,
  lastName : 'Suzuki',
}
console.log(profile);   // {firstName: "Taro", lastName: "Suzuki", age: 38}

// オブジェクトの結合②
const address = {
  country: 'Japan',
  region: 'Tokyo-to',
}
const profile2 = {
  ...name,
  ...address,
}
console.log(profile2);   // {firstName: "Taro", lastName: "Yamada", country: "Japan", region: "Tokyo-to"}

その他の記事について

overworker.hatenablog.jp

「JavaScript関連の記事」のまとめ

『JavaScriptはたまに使う』程度の筆者による、メモ書き程度の内容です。

基本的な文法

• JavaScriptの文法（変数・定数・リテラル・データ型）

• JavaScriptの文法（制御フロー）

• JavaScriptの文法（演算子）

• JavaScriptの文法（関数）

• JavaScriptの文法（スコープ）

• JavaScriptの文法（配列）

• JavaScriptの文法（オブジェクト）

• JavaScriptの文法（マップとセット）

• JavaScriptの文法（例外とエラー処理）

• JavaScriptの文法（オブジェクトの保護）

アップデート

• JavaScriptの追加機能メモ（ES2019（ES10））

• JavaScriptの追加機能メモ（ES2020（ES11））

• JavaScriptの追加機能メモ（ES2021（ES12））

• JavaScriptの追加機能メモ（ES2022（ES13））

目的別ピックアップ

文字列制御

• JavaScriptで文字数をカウントする

• JavaScriptで数値文字列を0で桁数をそろえる

配列制御

• JavaScriptで配列の要素数を調べる

• JavaScriptで配列から重複する要素を取り除く

オブジェクト制御

• JavaScriptで配列やオブジェクトをコピーする

条件分岐

• JavaScriptのコーディング（条件分岐）

使い方ピックアップ

• JavaScriptの「スプレッド構文」の使い方

• JavaScriptの「文字列制御」の使い方

• JavaScriptの「配列関連」の使い方

• JavaScriptのコーディング（Json）

moment.js関連

• moment.jsの使い方（日時のフォーマット）

• moment.jsの使い方（現在時刻の取得、登録、取得）

• moment.jsの使い方（日時の加算・減算）

• moment.jsの使い方（日時に関する判定）

• moment().isValid()がバグってる！？

開発環境の構築

• 「ESLint関連のノート」のまとめ

• 「Jest関連のノート」のまとめ

base64関連

• Base64についての事前学習

  • Base32ってのもあるらしい

• 文字列データ⇔Base64に変換する

• 画像データ⇔Base64に変換する

その他の記事へ

overworker.hatenablog.jp

moment.jsの使い方（日時に関する判定）

『JavaScriptはたまに使う』程度の筆者による、メモ書き程度の内容です。
moment.jsとはJavasSriptで日時計算を楽にしてくれるライブラリーです。

参考文献

公式サイトはmomentjs.comです。

日時に関する判定を実施する

日時の妥当性の確認

• isValid()で日時の妥当性を確認することができます。
  • 24:00:00がtrueになったのは予想外でした。

const d1 = moment(`2020-07-05 12:34:56`);  // true
console.log(d1.isValid());

const d2 = moment(`2020-07-32 12:34:56`);          // false
console.log(d2.isValid());

const d3 = moment(`2020-07-31 23:59:59`);  // true
console.log(d3.isValid());

const d4 = moment(`2020-07-31 23:59:60`);          // false
console.log(d4.isValid());

const d5 = moment(`2020-07-31 23:60:00`);          // false
console.log(d5.isValid());

const d6 = moment(`2020-07-31 23:60:60`);          // false
console.log(d6.isValid());

const d7 = moment(`2020-07-31 24:00:00`);  // true
console.log(d7.isValid());

const d8 = moment(`2020-07-31 24:00:01`);          // false
console.log(d8.isValid());

const d9 = moment(`2020-08-01 00:00:00`);  // true
console.log(d9.isValid());

二つの日時の前後関係を判定する

const d0 = moment(`2020-07-24`);
const d1 = moment(`2020-07-24`);
const d2 = moment(`2020-08-09`);
const d3 = moment(`2020-08-25`);

// d1がd2より前であるかを判定する
console.log(d1.isBefore(d0));  //false
console.log(d1.isBefore(d2));  //true

// d1がd2より後であるかを判定する 
console.log(d1.isAfter(d0));  //false
console.log(d1.isAfter(d2));  //false

// d1とd2が同じであるかを判定する 
console.log(d1.isSame(d0));  //true
console.log(d1.isSame(d2));  //false

// d1とd2が同じであるか、または前であることを判定する 
console.log(d1.isSameOrBefore(d0));  //true
console.log(d1.isSameOrBefore(d2));  //true

// d1とd2が同じであるか、または後であることを判定する 
console.log(d1.isSameOrAfter(d0));  //true
console.log(d1.isSameOrAfter(d2));  //false

// d2がd1とd3の間にあるかを判定する（「d1よりも後でd3よりも前」であるかの確認）
console.log(d2.isBetween(d1,d3));  //true

// d2がd1とd3の間にあるかを判定する（「d3よりも後でd1よりも前」であるかの確認） 
console.log(d2.isBetween(d3,d1));  //false

閏年を判定する

const d = moment(`2020-08-09`);
console.log(d.isLeapYear());  //true

モーメントオブジェクトであることを判断する

moment.isMoment() // false
moment.isMoment(new Date()) // false
moment.isMoment(moment()) // true

デイトオブジェクトであることを判断する

moment.isDate(); // false
moment.isDate(new Date()); // true
moment.isDate(moment()); // false

その他の記事について

overworker.hatenablog.jp

moment.jsの使い方（日時の加算・減算）

『JavaScriptはたまに使う』程度の筆者による、メモ書き程度の内容です。
moment.jsとはJavasSriptで日時計算を楽にしてくれるライブラリーです。

参考文献

公式サイトはmomentjs.comです。

日付の計算を実施する

• .clone()は元のオブジェクトの値を変更しない場合に使用する。

差分の日時を指定する

// 基準となる時間をセットする
const d = moment('2020-07-24 20:12:34');

// 3日後を取得する
console.log(d.clone().add(3,'day').format('LLLL'));

// 2年5か月後を取得する
console.log(d.clone().add(2,'year').add(5,'month').format('LLLL'));
console.log(d.clone().add({'year':2,'month':5}).format('LLLL'));
console.log(d.clone().add({'y':2,'M':5}).format('LLLL'));

二つの日時の差を取得する

const start = moment('2020-07-24 20:00:00');
const end = moment('2020-08-09 23:00:00');

// startからのendまでの時間を指定する
console.log(end.diff(start));  //defaultは「ミリ秒」で出力
console.log(end.diff(start,'hour'));  // 単位を「時」で指定
console.log(end.diff(start,'day));  // 単位を「日」で指定
console.log(end.diff(start,'day,true));  // 単位を「日」で指定（端数も求める）

// endからstartまでの経過時間を指定する（負の値で出力されます）
console.log(start.diff(end));  //defaultは「ミリ秒」で出力
console.log(start.diff(end,'hour'));  // 単位を「時」で指定
console.log(start.diff(end,'day'));  // 単位を「日」で指定
console.log(start.diff(end,'day',true));  // 単位を「日」で指定（端数も求める）

現在時刻との差を求める

const birthday = moment(`1977-07-05 12:34:56`);
console.log(birthday.fromNow());  // 差の大きさから適当にまるめた単位で出力する

その他の記事について

overworker.hatenablog.jp

moment.jsの使い方（現在時刻の取得、登録、取得）

『JavaScriptはたまに使う』程度の筆者による、メモ書き程度の内容です。
moment.jsとはJavasSriptで日時計算を楽にしてくれるライブラリーです。

参考文献

公式サイトはmomentjs.comです。

現在時刻を取得する

// モーメントオブジェクトで現在時刻を取得する
const d = moment();

// モーメントオブジェクトから日時を配列で読み出す
console.log(d.toArray());    // [2020, 6, 5, 15, 34, 24, 0]

// モーメントオブジェクトから日時をオブジェクトで読み出す
console.log(d.toObject());    // {years: 2020, months: 6, date: 5, hours: 15, minutes: 34, …}

日付の登録

// 日付をセットする①：デフォルト動作
const d = moment('2020-01-09');　// 2020年1月9日で入力される

// 日付をセットする②：入力フォーマットを指定する
// (※意表を突いたフォーマットですが、指定した通り認識されるはずです。)
const d = moment('2020-01-09','YYYY-DD-MM');　// 2020年9月1日で入力される

// 日付をセットする③：JavaScriptのDateObjectでセットする
// (※Dateオブジェクトの場合はMonthが`0`からスタートします。)
const d = moment(new Date(2020,0,9));

// 日付をセットする④：数値（配列）でセットする
// (※Dateオブジェクトの場合と同様で、Monthは`0`からスタートになります。)
const d = moment([2020,0,9]);

// 日付をセットする⑤：モーメントのメソッドを利用する
d.set('year',2020);
d.month(6);
d.date(24);
d.hour(20).minute(12).second(34);

日付の変更

• ひとつの要素を変更すると、他の要素も連動して変化します。
  • 例えば、モーメントオブジェクトの曜日を'Saturday'から'Sunday'に変更すると、連動して日付もその週の日曜日に変化します。

const d = moment('2020-07-24 15:34:24');


// その週の(日)曜日を取得する（月またぎ、年またぎも問題なく動作しました。）
d.day('Sunday');

日付の取得

const d = moment('2020-07-05 15:34:24');

// 年を取得
console.log(d.get('year'));
console.log(d.get('years'));
console.log(d.get('y'));
console.log(d.year());
console.log(d.years());    //Deprecation warning: years accessor is deprecated. Use year instead

// 月を取得（0～11）
console.log(d.get('month'));
console.log(d.get('months'));
console.log(d.get('M'));
console.log(d.month());
console.log(d.months());  //Deprecation warning: months accessor is deprecated. Use month instead

// 日を取得
console.log(d.get('date'));
console.log(d.get('dates'));
console.log(d.get('D'));
console.log(d.date());
console.log(d.dates());  //Deprecation warning: dates accessor is deprecated. Use date instead.

// 曜日を取得（0～6）
console.log(d.get('day'));
console.log(d.get('days'));
console.log(d.get('d'));
console.log(d.day());
console.log(d.days());

// 時を取得
console.log(d.get('hour'));
console.log(d.get('hours'));
console.log(d.get('h'));
console.log(d.hour());
console.log(d.hours());

// 分を取得
console.log(d.get('minute'));
console.log(d.get('minutes'));
console.log(d.get('m'));
console.log(d.minute());
console.log(d.minutes());

// 秒を取得
console.log(d.get('second'));
console.log(d.get('seconds'));
console.log(d.get('s'));
console.log(d.second());
console.log(d.seconds());

// ミリ秒を取得
console.log(d.get('millisecond'));
console.log(d.get('milliseconds'));
console.log(d.get('ms'));
console.log(d.millisecond());
console.log(d.milliseconds());

その他の記事について

overworker.hatenablog.jp