🦊

Javascript ”ES6 + and modular Javascript”

2023/10/15に公開

JavaScript

es6

tech

ES6とは？

JavaScript ES6 (ECMAScript 2015またはECMAScript 6)は2015年できた最新のjavascript バージョンです。

ECMAScriptとはなに？

ECMAScriptとは、国際的な標準化団体のEcma International（エクマ・インターナショナル）が策定しているJavaScriptの標準規格。ECMA-262として規格書が発行されており、同様のものがISO/IEC 16262やJIS X 3060としても標準化されている。

🎤const and let
constは変数宣言のためのES6の新しいキーワードです。 constはvarより強力で、一度使用されると変数を割り当てることができません。つまり、オブジェクトと一緒に使用する場合を除き、変更不可能な変数です。
この機能は、選択者を対象とするのに役立ちます。変数を再割り当てしない場合は、常に定数を使用することをお勧めします。

🎤Arrow functions
codeをより読みやすく、体系的にしてくれます。

// ES5
function myFunc(name) {
	return 'Hello' + name;
}

console.log(myFunc('sunny'));

// Output => Hello sunny

// ES6 arrow funtion
const myFunc = (name) => {
	return `Hello ${name}`;
}

console.log(myFunc('sunny')); // Output => Hello sunny

// 'return'を使わなくてもOKです。
const myFunc = (name) => `Hello ${name}`;

console.log(myFunc('sunny')); Output => Hello sunny

🎤Template Literals
文字列を接続するために足す(+)演算子を使用する必要はなく、バックティック(`)を使用して文字列内で変数を使用することもできます。

// ES6
const myFunc = (name, age) => {
	return `Hello ${name}, your age is ${age}`; 
};

console.log(myFunc1('sunny', 22));
// Output => Hello sunny, your age is 22

🎤Import and export
JavaScriptで import or export を利用すると performance が向上します。
exportを使用すると、他のJavaScriptコンポーネントに使用するモジュールをexportできます。そのモジュールをコンポーネントに使用するためにimportを使用します。

export

// ES6
detailComponent.js

export default function detail(name, age) {
	return `Hello ${name}, your age is ${age}`; 
}

import

import detail from './detailComponent';

console.log(detail('sunny', 20));
// Output => Hello sunny, your age is 20

🎤Promises
非同期コードの書き方です。例えば、APIからデータを取得または実行するのに時間がかかる関数を持っている場合に使用できます。 Promiseは問題をより簡単に解決できます。

const myPromise = () => {
	return new Promise((resolve, reject) => {
		resolve('Success!!');
	});
};

cosole.log(myPromise());
// Promise {<resolved>: "Success!!"}

コンソールを記録すると、Promiseが返されます。したがって、データを取得した後、関数を実行するにはPromiseを使用します。 Promiseは2つのパラメータを使用し、resolveおよびreject予想エラーを処理できます。

※fetch関数はPromise自体を返します。

const url = 'https://jsonplaceholder.typicode.com/posts';
const getData = (url) => {
	return fetch(url);
};

getData(url).then(data => data.json()).then(result => console.log(result));

🎧参考サイト
https://e-words.jp/w/ECMAScript.html

ES6とは？

ECMAScriptとはなに？

Discussion