Uenishi.Web

実務歴半年ほどのバックエンドエンジニアです。 Reactの学習を進めている中で、現在のJavaScriptの基本的な理解が足りていないと感じたので、振り返りも兼ねて基本的な文法をまとめていきます。

文法に関してはこちらにもしっかり記載されていますが、まずはこれからJavaScriptに触れていくといった方に向けた内容となります。

ブラウザ上で動作するプログラミング言語。 もともと、発表当初は「LiveScript」という名称だったが、当時非常に人気のあった言語として「Java」がありました。その人気にあやかって「JavaScript」と名称を改めたとされています。 言語としては全く別の独立したものであり、現在は「ECMAScript」という言語仕様を持ち、2015年以降は1年ごとに言語仕様がアップデートされています。

ES6とは、2015年に発表された「ECMAScriptのバージョン」のことで、このES6が発表されたことによってこれまで世間で言われていたJavaScriptの評判が一気に変化したとされています。 このES6で新たに発表された言語仕様として、

クラス、モジュール、イテレータ、for/ofループ、Pythonスタイルのジェネレータ、アロー関数、2進数および8進数の整数リテラル、Map、Set、WeakMap、WeakSet、プロキシ、テンプレート文字列、let、const、型付き配列、デフォルト引数、Symbol、Promise、分割代入、可変長引数

以上があります。要するに、機能がモリモリ追加されて、JavaScriptが超進化したみたいです。

こうして、モダンなフロントエンドを実装するためにReact.js、Vue.js、Angularなどどいったライブラリの開発も盛り上がり、どんどん発展していきました。

「モダンなJavaScript」というと、ES6以降がニアリーイコールだと思います。

この記事では、ES6以降に追加された言語仕様を中心に記述していきます。

従来(ES6以前)の宣言方法。

上書き可能で、再宣言も可能なため、プロジェクトが大きくなってくると意図しない動きをしてしまうことがあった。

そのため現在は主に、後述する2つの変数宣言が使用されています。

上書きが可能な変数宣言です。

varと違い、再宣言は不可。

letで宣言された変数はブロックスコープを持ち、スコープ内でしか書き換えやアクセスができなくなります。

if (true){
	let foo = "bar";
}
console.log(foo); // スコープの外で呼び出しているため、エラーになる

上書き不可の変数宣言。厳密には変数ではなく定数。

現在、ほとんどの開発現場ではconstが使用されています。

オブジェクトを定義した場合は書き換え可能

const var4 = {
	name: "aaa",
	age: 29,
};

var4.name = "変更";

// var4.nameの中身は"変更" になる。

まずはオブジェクトの定義から

const myPlrofile = {
	name: "keita",
	age: 29,
};

通常のオブジェクトの展開をします。

オブジェクトのプロパティにアクセスするには、[オブジェクト名].[プロパティ名]を記述します。

const message = `名前は${myProfile.name}です。年齢は${myProfile.age}歳です。`。
console.log(message);

出力結果

名前はkeitaです。年齢は29歳です。

分割代入で表すと、以下のようになります。

「.」が不要になり、スマートなコードになりました。

const { name, age } = myProfile;
const message = `名前は${name}です。年齢は${age}歳です。`。
console.log(message);

出力結果

名前はkeitaです。年齢は29歳です。

配列の場合も、同様に分割代入が可能です。

const myProfile = ["keita", 29]

const [ name, age ] = myProfile;
const message = `名前は${name}です。年齢は${age}歳です。`。
console.log(message);

ES6以降に追加された機能。スプレッド構文ともいわれ、配列やオブジェクトの中身を展開していく構文です。

スプレッドは「広げる」や「拡散する」といった意味を持っており、その意味の示すとおり [] や {} でくくられたものを外してくれます。

const array = [1, 2, 3, 4, 5]
console.log(array);

// 出力
> 1, 2, 3, 4, 5

例えば、以下のような関数「sum」があった場合、スプレッド構文として引数を渡すと、値を(1, 2, 3)と展開して渡すことができます。

function sum(a, b, c) {
	return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log(result);

// 出力
> 6

JavaScriptの学習において、理解が進みづらかったのが様々な関数の宣言方法でした。

JavaScriptにおける関数は、他の言語と違って重要度が段違いに高く、他の言語でいえるような「ただの処理の集まり」ではないとされています。

関数そのものは「データ型の一種」であり、変数やオブジェクトと同等に扱うことができます。

基本的には関数の内部にreturn(戻り値)を記載しますが、returnの記述を省略すると、戻り値は「undefined」という値になります。

• function命令による定義

• Function()コンストラクタによる定義
  • 実際に使用するメリットはない

• 関数リテラルによる定義
  • 宣言した時点では名前を持たないので、匿名関数や無名関数とも呼ばれる

• アロー関数による定義
  • ES6より登場した新しい方法