モダンJavaScriptとは？
明確な基準があるわけではないが、現状は以下のような特徴がある場合、モダンJavaScriptと言える。
- React、Vue、Angular等の仮想DOMを用いるライブラリ/フレームワークを使用している。
- パッケージマネージャ(npm,yarnなど)を使用している。
- 主にES2015(ES6)以降の記法を使用している。
- モジュールバンドラー(Webpack等)を使用している。
- トランスパイラ(Babel等)を使用している。
- SPA(Single Page Application)で開発を行なっている。
(今回は文法に焦点を当てるため3以外の項目の詳細は省かせていただきます。)
ES2015とは？
2015年6月にリリースされた、現在のモダンJavaScript開発に使用される多くの文法の機能が追加されたECMAScriptの標準仕様のこと。
ECMAScriptとは？
1990年代後半当時、それぞれ似たような役割を持ちながら互換性に乏しかった「JavaScript(NetScape社が開発)」や「JScript(Microsoft社が開発)」の仕様を標準化する目的でEcma Internationalによって策定された標準仕様。毎年改定が行われている。
エクマスクリプトと読む。
参考にした書籍
こちらの書籍の内容にそって学習しました。とてもわかりやすい。
モダンJavaScript 代表的な文法
代表的な文法は以下。
- const,letでの変数宣言
- テンプレート文字列
- アロー関数
- 分割代入
- スプレッド構文
- map関数
順番に解説していきます。
const,letでの変数宣言
従来のvarによる変数の宣言に加えて、以下2つの宣言が可能になった。
let
const
それぞれの宣言方法で言うと以下のような感じ。
//var
var var_test = “var変数”;
console.log(“var変数”);
//let
let let_test = “let変数”;
console.log(“let変数”);
//const
const const_test = “const変数”;
console.log(“const変数”);それぞれの違いは大きくは以下。
var
変数の上書き、再宣言ができる
let
変数の上書きはできるが、再宣言ができない
const
変数の上書き、再宣言どちらもできない
例
//var
var var_test = "var変数";
console.log(var_test);
//変数の上書き
var_test = "var変数_上書き";
console.log(var_test);
//再宣言
var var_test = "var変数_再宣言";
console.log(var_test);
//let
let let_test = "let変数";
console.log(let_test);
//変数の上書き
let_test = "let変数_上書き";
console.log(let_test);
//再宣言
let let_test = "let変数_再宣言"; //エラー発生！！！！！
//const
const const_test = "const変数";
console.log(const_test);
//変数の上書き
const_test = "const変数_上書き"; //エラー発生！！！！！
//再宣言
const const_test = "const変数_再宣言"; //エラー発生！！！！！テンプレート文字列
テンプレート文字列とは、文字列内で変数を展開するための記法。
例えば、以下のような文字列内に変数nameを入れる場合、従来は
//変数nameを宣言
const name = 'app crafts';
//私の名前は〜です と出力
console.log('私の名前は'+ name + 'です');と言うふうに記述していたところを、
//変数nameを宣言
const name = 'app crafts';
//私の名前は〜です と出力 ES2015版
console.log(`私の名前は${name}です`);と記述できるようになる。少しだが記述量を少なくすることができるようになる。
ポイントは以下。
・文字列自体をバッククウォート(`)で囲む
・${}(ドルマークと波括弧)内にJavaScriptの変数名を記述する
アロー関数
ES2015で追加された新たな関数の記法。従来の関数の書き方よりもシンプルに記述することが可能。
例えば以下の関数があったとして
//従来の関数記法
//関数を定義して変数に格納
const test1 = function funcTest1(value){
return value;
}
console.log(test1("従来の関数結果を出力"));これをアロー関数で記述すると以下のようになる。
//アロー関数の記法
//関数を定義して変数に格納
const test2 = (value) => {
return value;
}
console.log(test2("アロー関数結果を出力"));実行結果
・functionと言う記述はなくなる
・いきなり()を記述し、中に引数を指定する
・=> {}という記述の波括弧内で関数処理を記述していく
また、アロー関数はさらに省略できるパターンもあり、
①引数が1つの場合は引数を覆う括弧を省略できる
//アロー関数 括弧省略パターン
//関数を定義して変数に格納
const test2 = value => {
return value;
}
console.log(test2("アロー関数結果を出力"));②処理を単一行で返却する場合は波括弧とreturnを省略できる
//アロー関数 波括弧とreturn省略パターン
//関数を定義して変数に格納
const test2 = (value) => value;
console.log(test2("アロー関数結果を出力"));ここまで省略することが可能。
分割代入
分割代入はオブジェクトや配列から値を楽に取り出すための方法。
例えば以下のようなオブジェクトの値をそれぞれ出力したい時、従来は
//分割代入
const Profile_testuser_1 = {
name:'test_user',
age:25,
};
const message = `私は${Profile_testuser_1.name}です。年齢は${Profile_testuser_1.age}歳です`;
console.log(message);と記述できましたが、これだとオブジェクト名(Profile_testuser_1)を毎回記述しなければいけず少し面倒。
分割代入だと以下のように書くことができる。
//分割代入
const Profile_testuser_1 = {
name:'test_user',
age:25,
};
//分割代入
const {name,age} = Profile_testuser_1;
const message = `私は${name}です。年齢は${age}歳です`;
console.log(message);{}(波括弧)を変数名部分に持ってくることで、オブジェクト内から名称が一致する値を取得することができる。
配列構造のデータに対しても同様の記述が可能。
スプレッド構文(…)
スプレッド構文とは、配列はオブジェクトの中のデータ(要素)を展開したり、コピーしたりできる。
個人的によく使われているのを見る記法。
要素の展開の例
//配列を宣言
const arr1 =[10,20,30,40,50];
console.log(arr1);
console.log(...arr1);それぞれの出力結果はこのような感じ。スプレッド構文(…)を追加することで要素内の値のみを順番に出力できていることがわかる。
要素のコピーの例
const arr2 =[10,20,30,40];
//arr2の配列をarr3にコピー
const arr3 =[...arr2];
console.log(arr2);
console.log(arr3);出力結果
…arr2 でarr2の要素内の値を取ってきて、それを配列括弧([])に入れてarr3に格納している。こんなこともできる。
map関数
mapは従来のfor文をよりシンプルに記述できる方法。
例えば以下のようなfor文があったとき、
//配列を定義
const arr_name = ['test1','test2','test3','test4','test5'];
//for文処理
for (let index = 0; index < arr_name.length; index++){
console.log(arr_name[index]);
}map関数を使用すると、
//配列を定義
const arr_name = ['test1','test2','test3','test4','test5'];
//map使用
arr_name.map((name) => console.log(name));なんとこれでOK。とてもシンプルに記述することができる。
以下実行結果。
配列.map()が基本の形
()内に引数と関数の処理を記述する。もちろんアロー関数も使える。
終わりに
他にもfilter関数とかデフォルト値の記載とか、紹介したもので全てではないですが慣れればどれも効率良くコーディングができるものばかりでした！
読んでいただきありがとうございました！
コメント