大昔のjavascriptとは違う、現代的なJSであるES2015(ES6)を理解する

admin

1年前

参考URL
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b

変数

var a; // グローバル変数になるからダメ！再定義も出来てしまう
let a; // ローカル変数(ブロック内のみ有効)
const a; // 定数

var a; // グローバル変数になるからダメ！再定義も出来てしまう

let a; // ローカル変数(ブロック内のみ有効)

const a; // 定数

テンプレート文字列（テンプレートリテラル）は、ヒアドキュメントみたいな感じ
バッククオートで囲んだ文字列を使って、変数を挿入したり、改行を入れたり出来る仕組み
イメージ的には　＜？ｐｈｐ　？＞　っぽい。

// 文字列内で、変数が使える。${変数名}
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

// 計算など式も使える
const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."

// 改行もOK
const multiLine = `This is a string
that spans across
multiple lines.`;
console.log(multiLine);

// 関数すら埋め込める！！
function getGreeting(name) {
    return `Hello, ${name}!`;
}

const name = 'Bob';
const greeting = `${getGreeting(name)} How are you?`;
console.log(greeting); // "Hello, Bob! How are you?"

// 文字列内で、変数が使える。${変数名}

const name = 'Alice';

const greeting = `Hello, ${name}!`;

console.log(greeting); // "Hello, Alice!"

// 計算など式も使える

const a = 5;

const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result); // "The sum of 5 and 10 is 15."

// 改行もOK

const multiLine = `This is a string

that spans across

multiple lines.`;

console.log(multiLine);

// 関数すら埋め込める！！

function getGreeting(name) {

return `Hello, ${name}!`;

}

const name = 'Bob';

const greeting = `${getGreeting(name)} How are you?`;

console.log(greeting); // "Hello, Bob! How are you?"

アロー関数。書き方が違うだけで、基本的に同じ

// 基本の関数
function fn(a,b){
  return a + b;
}
// アロー関数
const fn = (a, b) => {
  return a + b;
};

// 単一式の場合は、カーリーブラケットやreturnを省略できる
const fn = (a, b) => a + b;

// 引数の初期値も設定できる
const fn = (a=1, b=2) => a + b;
console.log(fn())

// 基本の関数

function fn(a,b){

return a + b;

}

// アロー関数

const fn = (a, b) => {

return a + b;

};

// 単一式の場合は、カーリーブラケットやreturnを省略できる

const fn = (a, b) => a + b;

// 引数の初期値も設定できる

const fn = (a=1, b=2) => a + b;

console.log(fn())

モジュール(関数を別のファイルでも使えるようにする仕組み)
exportで外部で使います宣言
importで、モジュールファイルの、この関数を使います宣言

// モジュールA
export const name = 'John';
export function sayHello() {
  console.log('Hello');
}

// モジュールB
import { name, sayHello } from './moduleA';
sayHello(); // Hello

// モジュールA

export const name = 'John';

export function sayHello() {

console.log('Hello');

}

// モジュールB

import { name, sayHello } from './moduleA';

sayHello(); // Hello

たぶん、これがJSで一番むずかしい。
非同期処理(時間がかかる処理が終わるのを待たない)
https://qiita.com/cheez921/items/41b744e4e002b966391a

昔ながらのJS非同期。setTimeoutが非同期処理な事を利用する

console.log("1番目");

// 1秒後に実行する処理
setTimeout(() => {
  console.log("2番目(1秒後に実行)");
}, 1000);

console.log("3番目");

// 1番目
// 3番目
// 2番目(1秒後に実行)

console.log("1番目");

// 1秒後に実行する処理

setTimeout(() => {

console.log("2番目(1秒後に実行)");

}, 1000);

console.log("3番目");

// 1番目

// 3番目

// 2番目(1秒後に実行)

ES6のPromiseのJS非同期
Promise()内で、resolve()実行すると、then()が実行される

console.log("1番目");

// お約束を取り付けたい処理にPromise
new Promise((resolve) => {
  //1秒後に実行する処理
  setTimeout(() => {
    console.log("2番目(1秒後に実行)");
    //無事処理が終わったことを伝える
    resolve();
  }, 1000);
}).then(() => {
  // 処理が無事終わったことを受けとって実行される処理
  console.log("3番目");
});
// 1番目
// 2番目(1秒後に実行)
// 3番目

console.log("1番目");

// お約束を取り付けたい処理にPromise

new Promise((resolve) => {

//1秒後に実行する処理

setTimeout(() => {

console.log("2番目(1秒後に実行)");

//無事処理が終わったことを伝える

resolve();

}, 1000);

}).then(() => {

// 処理が無事終わったことを受けとって実行される処理

console.log("3番目");

});

// 1番目

// 2番目(1秒後に実行)

// 3番目

ES6のasync/awaitのJS非同期
1, 関数定義の前にasyncで非同期関数であることを宣言
2, 実行する関数名の前にawaitで、非同期実行を宣言
3, 非同期関数内でPromise()実行
4, その中で、resolveを実行したら非同期処理が完了
5, 呼び出し元のcatch以降が実行される

// データを取得（取得に時間がかかる）
async function fetchData() {
  // fetch()はpromiseを返す非同期処理だけど、awaitを使うことで完了するまで、次の行の処理を実行しないで待つ(await)
  const response = await fetch('https://api.example.com/data');
  // response.json()もpromiseを返す非同期処理なので、awaitを使うことで完了するまで、次の行の処理を実行しないで待つ(await)
  const data = await response.json();
  return data;
}

async function run() {
  try {
    // awaitを使うことでfetchData()が完了するまで次の行の処理を待つ
    const data = await fetchData(); 
    console.log('取得したデータ:', data);
  } catch (error) {
    console.error('エラーが発生しました:', error.message);
  }
}

run();

// データを取得（取得に時間がかかる）

async function fetchData() {

// fetch()はpromiseを返す非同期処理だけど、awaitを使うことで完了するまで、次の行の処理を実行しないで待つ(await)

const response = await fetch('https://api.example.com/data');

// response.json()もpromiseを返す非同期処理なので、awaitを使うことで完了するまで、次の行の処理を実行しないで待つ(await)

const data = await response.json();

return data;

}

async function run() {

try {

// awaitを使うことでfetchData()が完了するまで次の行の処理を待つ

const data = await fetchData();

console.log('取得したデータ:', data);

} catch (error) {

console.error('エラーが発生しました:', error.message);

}

run();

クラスと継承が利用可能

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age); // 親クラスのコンストラクタを呼び出し
        this.jobTitle = jobTitle;
    }

    work() {
        console.log(`${this.name} is working as a ${this.jobTitle}`);
    }
}

const person2 = new Person('Alice', 30);
person2.greet(); // "Hello, my name is Alice"

const employee2 = new Employee('Bob', 25, 'Software Engineer');
employee2.greet(); // "Hello, my name is Bob"
employee2.work();  // "Bob is working as a Software Engineer"

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

greet() {

console.log(`Hello, my name is ${this.name}`);

}

class Employee extends Person {

constructor(name, age, jobTitle) {

super(name, age); // 親クラスのコンストラクタを呼び出し

this.jobTitle = jobTitle;

}

work() {

console.log(`${this.name} is working as a ${this.jobTitle}`);

}

const person2 = new Person('Alice', 30);

person2.greet(); // "Hello, my name is Alice"

const employee2 = new Employee('Bob', 25, 'Software Engineer');

employee2.greet(); // "Hello, my name is Bob"

employee2.work(); // "Bob is working as a Software Engineer"

pythonにもある分割代入。連想配列みたい。

変数名や定数名を、｛要素名｝で値を取得できる

const params = {
  id: 123,
  name: 'John Doe',
  age: 30
};

const { id } = params;
console.log(id); // 123

変数名や定数名を、｛要素名｝で値を取得できる

const params = {

id: 123,

name: 'John Doe',

age: 30

};

const { id } = params;

console.log(id); // 123

スプレッド構文(配列名の前にピリオド３つをつけると、配列を展開する)

// 配列の展開で、配列同士の結合が簡単！
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6]; // [1,2,3,4,5,6]
const arr3 = [arr1, arr2]; // これだと２次元配列になる。[[1,2,3],[4,5,6]]


// スプレッド構文による配列のコピー(別メモリに同じ値を確保)
const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]

// 参照コピー(同じメモリを指しているので、arr1かarr3のどちらかで値を操作すると、もう片方も変わる)
const arr3 = arr1;
console.log(arr3); // [1, 2, 3]

// 配列の展開で、配列同士の結合が簡単！

const arr1 = [1, 2, 3];

const arr2 = [...arr1, 4, 5, 6]; // [1,2,3,4,5,6]

const arr3 = [arr1, arr2]; // これだと２次元配列になる。[[1,2,3],[4,5,6]]

// スプレッド構文による配列のコピー(別メモリに同じ値を確保)

const arr1 = [1, 2, 3];

const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]

// 参照コピー(同じメモリを指しているので、arr1かarr3のどちらかで値を操作すると、もう片方も変わる)

const arr3 = arr1;

console.log(arr3); // [1, 2, 3]

for…of インデックス不要な場合のfor文(全要素アクセス)

const array = [10, 20, 30];

for (const value of array) {
  console.log(value);
}
// 出力: 10, 20, 30, 40, 50

const array = [10, 20, 30];

for (const value of array) {

console.log(value);

}

// 出力: 10, 20, 30, 40, 50

関連記事