JavaScriptの基本を理解しよう〜ES6(2015)以降のモダンな記法〜【RaiseTech フロントコース#4 Part1】

悩んでいる人

なんだかJavaScriptに新しい書き方があるらしい…

本記事では、ES2015(ES6)でJavaScriptが大規模アップグレードがされて追加された新機能について解説します。

僕が、プログラミングを学びだしたのは2020年なのでなにがアップグレードされたのかよくわからないのですが、とても大きな変化だったみたいです。

イマドキのJavaScriptの書き方を知って、モダンフロントエンジニアを目指していきましょう〜!

本記事は、Raise Techのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第4回の講義のまとめとなります。

スポンサーリンク

目次

変数(const, let)

こちら記事でまとめておりますので、見ていただけたらと思います

テンプレート文字列

文字列が簡単に書けるようになりました。

``バッククォートで囲み、中に変数を記述するときには${ hoge } のように書いてあげると、表示されます。

const user = {
  name: "オカ",
  age: 31
};
// 従来
const oldType = "僕は" + user.name + "です。年齢は" + user.age + "歳です。";
console.log(oldType);
//僕はオカです。年齢は31歳です。 

// イマドキ
const newType = `僕は${user.name}です。年齢は${user.age}歳です。`;
console.log(newType);
//僕はオカです。年齢は31歳です。 

あとは、補足的な感じで下記で説明しておきます。

改行が適用される

const message = 
`こんにちは!
JavaScriptの学習はかどっていますか?
一緒に頑張りましょう〜!`;

console.log(message);
//こんにちは!
//JavaScriptの学習はかどっていますか?
//一緒に頑張りましょう〜! 
CodeSandbox
テンプレート文字列 - CodeSandbox テンプレート文字列 by takahiro-okada using parcel-bundler

アロー関数

変数同様に、こちら記事でまとめておりますので、見ていただけたらと思います。

分割代入

分割代入とは、配列・オブジェクトの中身を複数の変数に代入できる特殊な構文となります。

分割代入〜配列編〜

まず、従来の配列の値を取り出す書き方をみてみます。

const list = ["a", "b"];
const item1 = list[0];
const item2 = list[1];
console.log(item1, item2); // a b

listという変数の配列に格納されている1つめを取り出すときには、 list[0]のように記述すると値を取り出すことができます。

では、分割代入で書くとどのように書くのを見ていきます。

const list2 = ["c", "d"];
const [item3, item4] = list2;
console.log(item3, item4); //c d

変数宣言をするときに、[]で囲んでいます。list2のn番目の値が左のn番目の変数に代入されます。

基本の書き方はわかったと思うので、もう少し見ていきます。

下記のように書くとコンソールにはどのように表示されるでしょうか?

const nameList = ["田中", "山田", "佐藤", "鈴木"];
const [name1, name2] = nameList;
console.log(name1);
console.log(name3);

nameListの1番目の値をname1、2番目の値をname2の変数に代入します。

console.log(name1);では、name1に田中が代入されているのでコンソールには田中と表示されます。

console.log(name3);では、なんとなく佐藤が入ってほしいのですが、name3といった変数はないのでエラーがでてしまいます。

分割代入〜オブジェクト編〜

従来のオブジェクトの値をの取り出し方をみていきます。

const myInfo = {
  name: "オカ",
  age: "31"
};
const userName = myInfo.name;
const userAge = myInfo.age;
console.log(userName, userAge); //オカ 31

オブジェクトから値を取り出すときには、オブジェクト名.プロパティ名(myInfo.namemyInfo.age)のように取得するとこができます。

では、分割代入による値の取り出し方をみてみます。

const myInfo2 = {
  name: "おか",
  age: "32"
};
const { name, age } = myInfo2;
console.log(name, age); //おか 32

オブジェクトのときには、変数宣言をするときに{}で囲む必要があります。

あとは、配列の同じ考え方で、myInfo2nameageを変数として定義しています。

また変数名を変更することもできちゃいます。

// 変数名の変更
const myInfo3 = {
  name: "OKA",
  age: "33"
};
const { name: myName, age: myAge } = myInfo3;
console.log(myName, myAge); // OKA 33
CodeSandbox
分割代入 - CodeSandbox 分割代入 by takahiro-okada using parcel-bundler

デフォルト値

関数に引数が渡されない場合やundefined が渡されるときにデフォルト値を設定してくれます。

const myInfo = {
  age: "32"
};
const { name = "ゲスト", age } = myInfo;
console.log(`こんにちは${name}さん。あなたは${age}歳です。`);

応用編

function showAddress({ country = "日本", prefecture, city }) {
  console.log(`住所:${country} ${prefecture}県 ${city}市`);
}
const address = {
  prefecture: "愛知",
  city: "半田"
};
showAddress(address);
// 住所:日本 愛知県 半田市 

スプレッド構文

...がスプレッド構文といいます。

基本の形

const list = ["a", "b"];
console.log(list); //["a", "b"]
console.log(...list); // a b

listの配列の中身をコンソールで確認すると、配列のまま表示されます。

そこに…のスプレッド構文を記述することで配列の中身が展開されて a b で表示されるようになります。

正直これ聞いても、「ふ〜ん、、、で?」状態だったので、どんなケースで使われるのかを考えてみました。

配列と配列を合体

// 配列の結合
const area1 = ["愛知県", "岐阜県"];
const area2 = ["大阪府", "京都府", "滋賀県"];
const newArea = [...area1, ...area2];
console.log(newArea); //["愛知県", "岐阜県", "大阪府", "京都府", "滋賀県"]

なんとなく、ありそうかなぁって。(適当)

オカ

このあたりはもう少し開発経験積んだら、解説していきますー!

配列のなかにオブジェクト

const obj3 = [
  {
    title: "ワンピース",
    content: "海賊"
  },
  {
    title: "ドラゴンボール",
    content: "格闘"
  },
  {
    title: "ハンターハンター",
    content: "格闘"
  },
  {
    title: "スラムダンク",
    content: "バスケ"
  }
];

コンソールでobj3の見てみます。

console.log(obj3);

//ログ結果
(4) [Object, Object, Object, Object]
0: Object
title: "ワンピース"
content: "海賊"
1: Object
title: "ドラゴンボール"
content: "格闘"
2: Object
title: "ハンターハンター"
content: "格闘"
3: Object
title: "スラムダンク"
content: "バスケ"

スプレッド構文obj3を展開したパターン。

console.log(...obj3);

//ログ結果
{title: "ワンピース", content: "海賊"}
{title: "ドラゴンボール", content: "格闘"}
{title: "ハンターハンター", content: "格闘"}
{title: "スラムダンク", content: "バスケ"}

こんなのもあった。

JSON.stringifyはJavaScriptのオブジェクトや値をJSON文字列に変更してくれます。(参考記事)
dir()メソッドはコンソール上で簡単にオブジェクトのプロパティを見ることができます。(参考記事

//同様の結果になります。
console.log(JSON.stringify(obj3));
console.dir(obj3);

//ログ結果
[{"title":"ワンピース","content":"海賊"},
{"title":"ドラゴンボール","content":"格闘"},
{"title":"ハンターハンター","content":"格闘"},
{"title":"スラムダンク","content":"バスケ"}] 

後述するfilterとかもやってみる。

const battle = obj3.filter((item) => item.content === "格闘");
console.log(...battle);

//ログ結果
{title: "ドラゴンボール", content: "格闘"}
{title: "ハンターハンター", content: "格闘"}
CodeSandbox
スプレッド構文 - CodeSandbox スプレッド構文 by takahiro-okada using parcel-bundler

オブジェクトの省略記法

こんな書き方もできるだぁっと知っていることが大切なのです。

引数の変数名がそのままオブジェクトのプロパティ名になる。

//基本形
const country = "日本";
const greeting = "こんにちは";
const info = {
  country: country,
  greeting: greeting
};
console.log(info);

//省略形
const country = "日本";
const greeting = "こんにちは";
const info = {
  country,
  greeting
};
console.log(info);

//ログ結果
{country: "日本", greeting: "こんにちは"}
CodeSandbox
オブジェクトの省略記法 - CodeSandbox オブジェクトの省略記法 by takahiro-okada using parcel-bundler

配列の処理

map関数

関数内に実行したい処理を記述しておくことで、配列の各要素に好きな操作をすることができるようになります。

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

基本の形

const fruits = ["りんご", "バナナ", "いちご"];
const newFruits = fruits.map((item, index) =>  
  //実行したい処理
  return `${index + 1}番目の人: ${item}を食べたい`;
});
console.log(newFruits);
// ["1番目の人: りんごを食べたい", "2番目の人: バナナを食べたい", "3番目の人: いちごを食べたい"]

fruitsという配列があり、fruitsをマップして新しい配列を作ります。

第一引数には現在処理中の要素の値が入ります。
第二引数には添字[0,1,2,3…]が入ります。
第三引数には現在実行されている配列が入ります。

オブジェクトの一覧を配列にまとめる

const animals = [
  { id: 1, category: "動物", kind: "犬" },
  { id: 2, category: "動物", kind: "猫" },
  { id: 3, category: "動物", kind: "鳥" }
];

const kinds = animals.map((item) => item.kind);
console.log(kinds); //["犬", "猫", "鳥"]
オカ

よくわからなくなるのですが、JavaScriptでは連想配列=オブジェクトという認識でよいみたいですねぇ。
配列・オブジェクト・連想配列・多次元配列とかよーわからんってなっていたので、少しスッキリしました。

filter関数

名前の通り、条件かけてフィルタリングして新しい配列を作ってくれます。

基本形

oddNumberには1〜60までに含まれる奇数が配列として格納されます。

const numbers = [...Array(60).keys()].map((i) => ++i);
// 1~60までの数字を作成
const oddNumber = numbers.filter((number) => {
  return number % 3 === 0;
});
console.log(oddNumber);

1行目でnumbers の配列に0〜60までの数字を入れています。

return number % 3 === 0;が演算子ですね。例えばnumberの値が6のときに3で割ると0なのでそのときの値だけをreturnさせている感じです。

CodeSandbox
配列の処理 - CodeSandbox 配列の処理 by takahiro-okada using axios, parcel-bundler

Null合体演算子(ES2020)

記号の「??」を使用します。

Null 合体演算子は左辺が null または undefined の場合に右辺の値を返します。

let text = "hello";
let errorMessage = null;
let message = errorMessage ?? text;
console.log(message); //hello

errorMessage = undefined;
message = errorMessage ?? text;
console.log(message); //hello

errorMessage = "エラー!!!!";
message = errorMessage ?? text;
console.log(message); //エラー!!!!

きっとこのあたりの記事を読めばいいと思う(他人任せ)

Qiita
【JavaScript】Null合体演算子と(??)とオプショナルチェイニング演算子(?.) - Qiita はじめに JavaScriptの言語使用は、Ecma Internationalによって定められており2015年からはECMAScriptとして毎年改定されています。 ECMAScript2020の仕様としてNull合...
CodeSandbox
null合体演算子 - CodeSandbox null合体演算子 by takahiro-okada using parcel-bundler

クラス

これは重要な気がするのでがんばります。

クラスとは設計図のようなもので、オブジェクトが所持する変数やメソッドなどを定義したものです。

クラスを作成しただけではまだこの世には存在していない状態で、オブジェクトを生成することで、はじめて実態ができます。

class User {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  greet() {
    console.log(`こんにちは!${this.name}です!`);
  }
}

ここでは、Userクラスを定義しております。

次にUserクラスに「コンストラクタ」を書き加えました。コンストラクタとは定義したクラスのオブジェクトを生成すると同時に、クラス変数を初期化する特別なメソッドのこと。

また、Userクラス内にgreet()という関数もしました。

ここまでで、クラスの定義は行いました、先程も説明したとおりこれは実態を持たない設計書のようなものなので実態をつくっていきましょー

オブジェクト生成

クラス定義時に作成した設計書をもとに、実態=インスタンスを作成します。

オブジェクト名 = new クラス名

上記が構文となります。実際にコードで書くと、

const oka = new User("オカ", 31);

これでokaオブジェクトが生成されました。Userクラスから生成されたインスタンスを変数okaに格納した感じです。

実際に値を確認します。

const oka = new User("オカ", 31, "男");
console.log(oka.name); //オカ
console.log(oka.age); //31
console.log(oka.gender); //男
oka.greet(); //こんにちは!オカです!
CodeSandbox
クラス構文 - CodeSandbox クラス構文 by takahiro-okada using parcel-bundler

補足
インスタンスに変数の値を渡さないとundefinedになります。

const child1 = new User("一郎");
console.log(child1.name); //一郎
console.log(child1.age); //undefined
console.log(child1.gender); //undefined

まとめ

プログラミングの世界はどんどん新しいことが増えていくので覚えることが大変ですねー。

でも、開発者がより便利に言語を使ってもらおうとしてくれており昔と比べると簡単に機能実装とかができるようになっているんだろうなぁっと思うとありがたいですね。

JavaScriptできることがたくさんあり、今また人気の言語でもあるので僕もキャッチアップできるように頑張っていきます〜!

スポンサーリンク

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

よかったらシェアしてね!
目次
閉じる