【JavaScript教材⑧】ES6の基本的な使い方を徹底解説

2023年7月1日2023年11月3日

ファド

こんにちは！
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します！

こちらの記事はJavaScript教材の第8回目の記事になります。

その他のJavaScript教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。

JavaScript ES6とは

プログラミング言語にはそれぞれバージョンというものが存在することがほとんどですが、現在JavaScriptそのものにはバージョンが存在しません。
その代わり、JavaScriptの言語仕様としてECMAScriptというものがあります。
このECMAScriptは定期的に改定が行われており、2015年に大きな改定がありました。
正式名称はECMAScript 2015(ES2015)ですが、エンジニア界隈ではES2015が第6世代のバージョンなので、ES6(イーエスシックス)と呼ばれることがほとんどです。

つまり、今回学習していただくJavaScript ES6教材では、ES6で追加された便利な機能や構文などを学んでいくこととなります。

実は皆さんが使っているletやconstはES6の記述方法です。
ES6以前はvarを使用していました。
varを使用しても問題ありませんが、letとvarはほとんど同じであり、近年はletとconstが主流になっているので、letとconstに関しては先取りして使っていただいていたということです。

また、近年のモダンな開発ではなるべくconstを使用し、constが使用できない場面ではletを使用するということがほとんどです。

そのため、JavaScript ES6教材では主に変数にはconstを使用していきます。

ES6がどのようなものかわかったところで、さっそくES6で新しく追加された便利機能や構文などを学んでいきましょう。

★検索ワード
・JavaScript ES6
・JavaScript ECMAScript 違い

テンプレート文字列

フォルダ名：「template」

テンプレート文字列は、文字列の中で変数を展開するための記法です。

どのようなものかイメージしにくいので、実際にコードを記述してみましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const name = "太郎";
const age = 28;
const message = `私の名前は${name}です。年齢は${age}歳です。`;

console.log(message);

HTMLファイルをブラウザで読み込み、コンソールに私の名前は太郎です。年齢は28歳です。が出力されていればOKです。

テンプレート文字列を使う場合は、文字列を``(バッククオート)で囲み、${変数名}と記述することで文字列内に変数を展開することができるようになります。
変数が展開されると文字列連結と同じ結果になるので、最終的に私の名前は太郎です。年齢は28歳です。が出力されました。

★検索ワード
・JavaScript テンプレート文字列
・javascript 変数展開

アロー関数

フォルダ名：「arrow」

アロー関数は無名関数を省略して記述できる関数のことです。
無名関数という概念が初めて登場したので、まずはそちらから紹介します。

無名関数

無名関数は名前そのままの意味で、関数名がない関数のことを言います。

実際に書き方を見てみましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const test = function (name) {
    return name;
}

console.log(test("太郎"));

HTMLファイルをブラウザで読み込み、コンソールに太郎が出力されていればOKです。

こちらのコードを見ていただいてもわかるように、関数には名前がありません。
その代わりに変数に関数が代入されています。
そのため、この無名関数を実行するにはtest("太郎")といったように、関数名の代わりに変数名と(引数)を記述して実行することになります。

このように、名前のない関数のことを無名関数と言います。

アロー関数の書き方

アロー関数は、この無名関数をより書きやすくしたものだと思ってください。

アロー関数は下記のように記述します。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const test = (name) => {
    return name;
}

console.log(test("太郎"));

HTMLファイルをブラウザで読み込み、コンソールに太郎が出力されていればOKです。
このようにfunctionと記述するのではなく、=>を使用して関数を作る方法がアロー関数です。

また、引数が1つの場合は下記の例のように( )を省略して記述することもできます。

const test = name => {
    return name;
}

console.log(test("太郎"));

また、関数内が単一式の場合は{ }やreturnを省略することができます。

const test = (num1, num2) => num1 + num2;

console.log(test(2, 5));

最初は慣れないかもしれませんが、現在では関数の代わりにアロー関数を使用するのがモダンJavaScript開発のスタンダードです。

少しずつ使っていき、アロー関数に慣れていきましょう。

★検索ワード
・JavaScript 無名関数
・JavaScript アロー関数

分割代入

フォルダ名：「destruct」

分割代入とは、オブジェクトや配列から値を抽出し、変数に値を代入することを指します。

オブジェクトの分割代入

まずはじめに、オブジェクトの分割代入から見ていきます。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const profile = {
    name: "太郎",
    age: 28
};

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

HTMLファイルをブラウザで読み込み、コンソールに私の名前は太郎です。年齢は28歳です。が出力されていればOKです。

それではコードを見ていきましょう。

const profile = {
    name: "太郎",
    age: 28
};

このコードでオブジェクトを変数profileに代入しています。

そして、const { name, age } = profile;のように記述していただくと、オブジェクトの中身を各変数に代入することができるようになります。

関数の引数とは違い、順番ではなく名称を一致させる必要があります。
むしろ、名称さえ合っていれば一部だけ取り出すことも可能です。

また、抽出した値(プロパティ)に別名をつけたい場合は、下記の例のように:コロンを使用することで任意の変数名で扱うことも可能です。

const profile = {
    name: "太郎",
    age: 28
};

const { name: newName, age: newAge } = profile;
const message = `私の名前は${newName}です。年齢は${newAge}歳です。`;
console.log(message);

配列の分割代入

次に、配列の分割代入を学習していきましょう。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const profile = ["太郎", "28"];

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

HTMLファイルをブラウザで読み込み、コンソールに私の名前は太郎です。年齢は28歳です。が出力されていればOKです。

それではコードを見ていきましょう。

const profile = ["太郎", "28"];

このコードで配列を変数profileに代入しています。

そして、const [ name, age ] = profile;のように記述していただくと、配列の中身を各変数に代入することができるようになります。

オブジェクトの分割代入とは違い、名称ではなく順番を一致させる必要があります。
順番さえ一致していれば、任意の変数名を設定することができます。
こちらは関数の引数と同じ考え方ですね。

このように分割代入を使用すると、複数の値を一度に複数の変数に代入できるので、一つひとつ設定する必要がなくなります。

たくさんの変数を用意しなければいけない場面などでは積極的に使ってみましょう。

★検索ワード
・JavaScript 分割代入
・JavaScript 分割代入オブジェクト
・JavaScript 分割代入配列

デフォルト値

フォルダ名：「default」

デフォルト値とは、関数の引数やオブジェクトの分割代入時に使用することができます。
具体的には、引数やオブジェクトの値が存在しない場合の初期値を設定することができる機能です。

引数のデフォルト値

まず初めに引数の場合を見てみましょう。
下記のようなコードがあったとします。

const sayHello = name => console.log(`${name}さん、こんにちは！`);

アロー関数を使用して、引数nameさん、こんにちは！という文字列を出力する関数です。

しかし、この関数を引数なしのsayHello();で実行したらどうなるでしょうか？
答えは、undefinedさん、こんにちは！となります。
もしこれをユーザーが見てしまった場合、undefinedなんて言葉はほとんどのユーザーはわからないので混乱してしまいます。

そこで、引数が設定されていなかったときのデフォルト値を設定してみます。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const sayHello = (name = "ゲスト") => console.log(`${name}さん、こんにちは！`);

sayHello();
sayHello("太郎")

HTMLファイルをブラウザで読み込み、コンソールにゲストさん、こんにちは！と太郎さん、こんにちは！が出力されていればOKです。

先ほどのデフォルト値を設定していないコードとの違いは、引数名の後ろに=でデフォルト値を設定しているところです。

今回は引数nameにゲストという文字列をデフォルト値に設定しているので、コンソールにはundefinedが出力されるのではなく、ゲストと表示されています。

もちろん、引数が正しく設定されている場合は、太郎と引数の値を出力しています。
※本来、引数が1つの場合は引数の()を省略できますが、デフォルト値を設定する場合は省略できないので気を付けましょう。

オブジェクト分割代入のデフォルト値

オブジェクトの分割代入にもデフォルト値を設定することができます。

index.htmlはそのままで、app.jsを下記の通り編集してください。

const profile = {
    age: 28,
}

const { name = "ゲスト" } = profile;
const message = `${name}さん、こんにちは！`;
console.log(message);

HTMLファイルをブラウザで読み込み、コンソールにゲストさん、こんにちは！が出力されていればOKです。

このようにデフォルト値を設定することで、思わぬバグを回避することができるようになります。

設定しておいて損はないので、積極的にデフォルト値は設定しておくといいですね！

★検索ワード
・JavaScript 分割代入

map関数

フォルダ名：「map」

map関数を使用すると、配列を順番に処理して、処理した結果を配列として受け取ることができます。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const arrayName = ["山田", "佐藤", "小林", "鈴木", "小田"];

const arrayResult = arrayName.map(name => {
    const message = `私の名前は${name}です。`;
    return message;
});

console.log(arrayResult);

HTMLファイルをブラウザで読み込み、コンソールに['私の名前は山田です。', '私の名前は佐藤です。', '私の名前は小林です。', '私の名前は鈴木です。', '私の名前は小田です。']が配列で出力されていればOKです。

それではコードを見ていきましょう。
const arrayName = ["山田", "佐藤", "小林", "鈴木", "小田"];で配列を変数arrayNameに代入しています。

次に、下記のコードでmap関数を使用しています。

const arrayResult = arrayName.map(name => {
    const message = `私の名前は${name}です。`;
    return message;
});

map関数の使い方は、配列名.map() という形で使用します。

そして( )の中にはアロー関数、もしくは無名関数を書きます。
関数は任意の名前を付けた引数を取ることができ、その引数に配列の中の値が一つひとつ入ってきます。

今回は名前を格納している配列なので、引数名をnameとしています。
そして各配列の要素を文字列の中で展開し、私の名前は引数nameです。という文字列を変数messageに代入します。
その変数messageを戻り値として返し、変数arrayResultに配列の要素として追加していきます。

そのため、変数arrayResultをコンソールに出力すると、['私の名前は山田です。', '私の名前は佐藤です。', '私の名前は小林です。', '私の名前は鈴木です。', '私の名前は小田です。']が配列で出力されます。

以上がmap関数の基礎ですが、map関数ではインデックス番号も引数にとることができます。

index.htmlはそのままで、app.jsを下記の通り編集してください。

const arrayName = ["山田", "佐藤", "小林", "鈴木", "小田"];

const arrayResult = arrayName.map((name, index) => {
    const message = `${index + 1}人目の名前は${name}です。`;
    return message;
});

console.log(arrayResult);

HTMLファイルをブラウザで読み込み、コンソールに['1人目の名前は山田です。', '2人目の名前は佐藤です。', '3人目の名前は小林です。', '4人目の名前は鈴木です。', '5人目の名前は小田です。']が配列で出力されていればOKです。

配列のインデックス番号を取得するためには、例のように第2引数を記述することで配列の要素の番号を取得することができます。
1つ注意点は、インデックス番号は配列なので0から始まるということです。
なので、今回はindex + 1とすることで、1番目や2番目などを出力しています。

★検索ワード
・JavaScript map 使い方

filter関数

フォルダ名：「filter」

filter関数はmap関数と使い方はほとんど同じですが、returnに条件式を記述して、一致するもののみを戻り値として返す関数です。

index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const arrayNum = [3, 19, 25, 32, 40, 49, 53, 55, 73, 90, 100];

const arrayResult = arrayNum.filter(num => {
    return num % 5 === 0
});

console.log(arrayResult);

HTMLファイルをブラウザで読み込み、コンソールに[25, 40, 55, 90, 100]が配列で出力されていればOKです。

配列の中から特定の条件に一致するものを取得したい場合はfilter関数を使いましょう。

★検索ワード
・JavaScript filter 使い方

条件演算子(三項演算子)

フォルダ名：「ternary」

条件演算子は「if文」を簡略的かつ効率よく記述する方法です。
3つの値・式を必要とする特殊な演算子です。

初めに「if文」で書いたパターンを見てください。

const num1 = 300;
const num2 = 200;

if (num1 > num2) {
    console.log("num1はnum2より大きい");
} else {
    console.log("num1はnum2より大きくない");
}

こちらのif文の場合、num1はnum2より大きいがコンソールに出力されます。

これを条件演算子で記述してみます。
index.htmlを下記の通り編集してください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの学習</title>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>

次に、app.jsを下記の通り編集してください。

const num1 = 300;
const num2 = 200;

num1 > num2 ? console.log("num1はnum2より大きい") : console.log("num1はnum2より大きくない");

HTMLファイルをブラウザで読み込み、num1はnum2より大きいとコンソールに出力されていればOKです。

条件演算子の使い方は下記の通りです。

条件式 ? Trueの場合の処理 : Falseの場合の処理

なので、今回の例のコードの場合、num1 > num2が条件式であり、その条件式がtrueだった場合はconsole.log("num1はnum2より大きい")が実行され、falseだった場合はconsole.log("num1はnum2より大きくない")が実行されます。

もちろん今回のコードの場合trueになるので、コンソールにはnum1はnum2より大きいが出力されます。

このように条件演算子はif文を1行で記述できるので、とてもコードがシンプルになります。
しかし、その反面if文よりも直観的ではなく読みにくいので、多用することは避けてください。
１文でも読みやすい条件式の場合は条件演算子を使ってみましょう！

★検索ワード
・JavaScript 条件演算子
・JavaScript 三項演算子

おめでとうございます！

JavaScriptの教材を最後までお読みいただき、ありがとうございました！

次は学習した内容の確認としてJavaScriptの課題に挑戦してみましょう！

JavaScript課題

さあ、これまでの学習の成果を存分に発揮させましょう！

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします！

サポート価格はなんと1日あたりたったの約300円！

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります！

なお、サポート内容の詳細は下記の通りです。

目標設定
マインドセット
オリジナル教材見放題
オリジナル課題見放題
オリジナル課題の解答見放題
課題コードレビュー
教材への無制限質問
課題への無制限質問
ポートフォリオ作成アドバイス
褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください！

この記事が気に入ったら
フォローしてね！

Follow @fadotechjp

よかったらシェアしてね！

URLをコピーしました！

【JavaScript教材⑧】ES6の基本的な使い方を徹底解説

【JavaScript教材①】JavaScriptとは？JSの基本からconsole.logの使い方、変数までを徹底解説

【JavaScript教材②】データ型の解説から各種演算子の使い方までを徹底解説

【JavaScript教材③】DOMの操作方法から要素の作成・削除、イベントハンドラやイベントリスナーまでを徹底解説

【JavaScript教材④】条件分岐(if文&switch文)の使い方から繰り返し処理(for文&while文)までを徹底解説

【JavaScript教材⑤】関数の使い方から引数、戻り値の使い方までを徹底解説

【JavaScript教材⑥】イベントハンドラで引数を使う方法からイベントオブジェクト、グローバル変数とローカル変数、data属性、thisの使い方までを徹底解説

【JavaScript教材⑦】コードリーディングの方法からAPI、JSON、非同期通信(Ajax)のやり方までを徹底解説

JavaScript ES6とは

テンプレート文字列

アロー関数

無名関数

アロー関数の書き方

分割代入

オブジェクトの分割代入

配列の分割代入

デフォルト値

引数のデフォルト値

オブジェクト分割代入のデフォルト値

map関数

filter関数

条件演算子(三項演算子)

おめでとうございます！

JavaScript課題

プログラミング学習サポートについて

サポート価格はなんと1日あたりたったの約300円！

コメント

コメント

コメントするコメントをキャンセル

【JavaScript教材⑧】ES6の基本的な使い方を徹底解説

【JavaScript教材①】JavaScriptとは？JSの基本からconsole.logの使い方、変数までを徹底解説

【JavaScript教材②】データ型の解説から各種演算子の使い方までを徹底解説

【JavaScript教材③】DOMの操作方法から要素の作成・削除、イベントハンドラやイベントリスナーまでを徹底解説

【JavaScript教材④】条件分岐(if文&switch文)の使い方から繰り返し処理(for文&while文)までを徹底解説

【JavaScript教材⑤】関数の使い方から引数、戻り値の使い方までを徹底解説

【JavaScript教材⑥】イベントハンドラで引数を使う方法からイベントオブジェクト、グローバル変数とローカル変数、data属性、thisの使い方までを徹底解説

【JavaScript教材⑦】コードリーディングの方法からAPI、JSON、非同期通信(Ajax)のやり方までを徹底解説

JavaScript ES6とは

テンプレート文字列

アロー関数

無名関数

アロー関数の書き方

分割代入

オブジェクトの分割代入

配列の分割代入

デフォルト値

引数のデフォルト値

オブジェクト分割代入のデフォルト値

map関数

filter関数

条件演算子(三項演算子)

おめでとうございます！

JavaScript課題

プログラミング学習サポートについて

サポート価格はなんと1日あたりたったの約300円！

コメント

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル