Progate（プロゲート）でJavaScript（ES6・ES2015）の学習メモ

こんにちは。Tomoyuki（@tomoyuki65）です。

Progateで久しぶりにJavaScriptの学習をしましたが、最近ではES6（ES2015）という新しいバージョンになり、以前のバージョンより効率的にコードを書けるようです。

ということで、JavaScriptについて学習メモを残しておきます。

JavaScript（ES6・ES2015）：ログ出力

JavaScriptのログ出力では、「console.log();」を使う。

例としては以下の通り。

console.log("こんにちは。");

JavaScript（ES6・ES2015）：コメントアウト

JavaScriptのコメントアウトには、「//」を使う。（macならショートカットキー「command + /」が使用可能）

例としては以下の通り。

// console.log("こんにちは。");

JavaScript（ES6・ES2015）：変数

JavaScriptの変数定義では「let」を使う。（letは変数定義時のみ必要で、値の更新時には不要）

例としては以下の通り。

let animal = "犬";
console.log(animal);

// animalの値を更新
animal = "猫";
console.log(animal);

JavaScript（ES6・ES2015）：定数

JavaScriptの定数定義では「const」を使う。

例としては次の通り。

const color = "赤";

JavaScript（ES6・ES2015）：テンプレートリテラル

JavaScriptではテンプレートリテラルでは「`（バッククォート）」を使います。

テンプレートリテラルにより、複数行文字列や文字列内挿機能を使うことが可能です。

例としては次の通り。

// 通常の文字列で改行する場合
console.log("私の名前は田中です。¥n年齢は20歳です。");

// 複数行文字列
console.log(`私の名前は田中です。
年齢は20歳です。`);

// 文字列内挿機能
const name = "田中";
const age = 20;

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

JavaScript（ES6・ES2015）：if文

JavaScriptのif文は次の通り。（文の終わりに「;」は不要）

if (条件式) {
  処理
}

// 条件に当てはまらない場合
if (条件式) {
  処理
} else if (条件式) {
  処理
} else {
  処理
}

JavaScript（ES6・ES2015）：switch文

JavaScriptのswitch文は次の通り。

let color = "赤";

switch (color) {
  case: "赤"
    console.log("赤色です。");
    break;

  case: "青" 
    console.log("青色です。");
    break;

  default:
    console.log("不明な色です。");
    break;
}

JavaScript（ES6・ES2015）：while文

JavaScriptのwhile文は次の通り。（無限ループに注意）

while (条件式) {
  処理
}

JavaScript（ES6・ES2015）：for文

JavaScriptのfor文は次の通り。

for (let i = 0; i < 3; i ++) {
  処理
}

JavaScript（ES6・ES2015）：配列

JavaScriptの配列は次の通り。（定数名は慣習として複数形にする。そして配列の要素に対するインデックス番号は0から。）

const animals = ["dog", "cat"];

// dogを出力する場合
console.log(animals[0]);

また、配列の要素数を取得するには「lengthプロパティ」が使えます。

const animals = ["dog", "cat"];

// 配列の要素数をログ出力
console.log(animals.length);

JavaScript（ES6・ES2015）：オブジェクト

JavaScriptではオブジェクト（Rubyでいうハッシュ）が使えます。

例としては次の通り。

const item = {name: "コップ", price: 200};

オブジェクトの値は更新可能です。

item.price = 300;

また、オブジェクトを要素にもつ配列の定義が可能です。

const items = [
  {name: "コップ", price: 200},
  {name: "皿", price: 300}
];

// 配列の一つ目の要素の名前をログ出力
console.log(items[0].name);

もし配列に存在しない要素を指定した場合は、「undefined」が出力される。

尚、オブジェクトを要素にもつオブジェクトの定義も可能。

JavaScript（ES6・ES2015）：関数

JavaScriptの関数は次の通り。

const 定数名 = function() {
  処理
}

// アロー関数で書き換え可能
const 定数名 = () => {
  処理
}

引数を指定する場合は次の通り。

const 定数名 = (name, age) => {
  console.log(`名前は${name}です。`);
  console.log(`年齢は${age}です。`);
}

関数の戻り値を定義する場合は「return」を使う。

const 定数名 = (number) => {
  // 2倍の値を返す。
  return number * 2;
}

JavaScript（ES6・ES2015）：クラス

JavaScriptではクラスが使えます。

class クラス名 {
  処理
}

インスタンス化するには次の通り。

// Animalsクラスを定義
class Animals { 
}

//Animalsクラスのインスタンス化
const animal = new Animals();

コンストラクタを定義すれば、インスタンス化のときに実行される。

// Animalsクラスを定義
class Animals {
  // コンストラクタを定義
  constructor(name) {
    this.name = name;
  }
}

//Animalsクラスのインスタンス化
const animal = new Animals("犬");

// 名前を出力
console.log(animal.name);

クラスのメソッド（関数のようなもの）を定義するには次の通り。

// Animalsクラスを定義
class Animals {
  // コンストラクタを定義
  constructor(name) {
    this.name = name;
  }

  //名前を出力するメソッド
  outputName() {
    console.log(this.name);
  }
}

//Animalsクラスのインスタンス化
const animal = new Animals("犬");

// メソッドを実行
animal.outputName();

尚、メソッド内でメソッドを呼び出すことも可能。

this.outputName();

JavaScript（ES6・ES2015）：クラスの継承

クラスの継承をするには次の通り。

class Dog extends Animal {
  処理
}

メソッドでも戻り値が使える。

class Dog extends Animal {
  getName() {
    return this.name;
  }
}

オーバーライドも可能。

class Dog extends Animal {
  outputName() {
    console.log(`名前は${this.name}です。`);
  }
}

子クラスのコンストラクタのオーバーライドでは「super()」を使う。

class Dog extends Animal {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

JavaScript（ES6・ES2015）：ファイル分割

コードが長くなる場合はファイル分割が有効。ファイル分割には「export」と「import」を使用する。

ファイル：animal.js

// Animalsクラスを定義
class Animals {
  // コンストラクタを定義
  constructor(name) {
    this.name = name;
  }

  //名前を出力するメソッド
  outputName() {
    console.log(this.name);
  }
}
export default Animals;

ファイル：dog.js

import Animals from "./animal";
class Dog extends Animal {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

「export default クラス名;」では1ファイルで出力できるのが1クラスだが、複数クラスを出力したい場合は次の通り。

class クラス1 {
}

class クラス2 {
}

export {クラス1, クラス2};

そして複数クラスを読み込む場合は次の通り。

import {クラス1, クラス2} from "./ファイル名";

尚、上記はファイルが全て同一のディレクトリに配置されている場合だが、異なるディレクトリのファイルを読み込むことも可能。

例1：同一ディレクトリにフォルダ「data」があり、フォルダ内のファイル名を指定

import {クラス1, クラス2} from "./data/ファイル名";

例2：上の階層にあるフォルダ「class」内のファイルを指定

import {クラス1, クラス2} from "../class/ファイル名";

JavaScript（ES6・ES2015）：パッケージ

JavaScriptではパッケージが使える。

例えば文字列の色を変更するパッケージ「chalk」を使う場合は次の通り。

// パッケージ「chalk」を読み込む
import chalk from "chalk";

// 文字列の色を黄色にして出力
console.log(chalk.yellow("こんにちは。"));

値を受け取るパッケージ「readline-sync」の場合は次の通り。（数値の場合はquestionintを使う）

import readlineSync from "readline-sync";

const name = readlineSync.question("名前を入力してください：");
const age = readlineSync.questionint("年齢を入力してください：");

JavaScript（ES6・ES2015）：配列のメソッド

配列には様々なメソッドがあり使用可能。

例えば配列に要素を追加するには「pushメソッド」が使える。

const items = ["コップ", "皿"]
items.push("箸");

配列の要素を一つずつ取り出してループ処理をするには「forEachメソッド」が使える。

const items = ["コップ", "皿", "箸"]

items.forEach ((item) => {
  console.log(item);
});

特定の要素を一つだけ見つけるには「findメソッド」が使える。

const numbers = [1, 3, 5, 10]

// 定数に最初に見つかる5が代入される
const foundNumber = numbers.find ((number) => {
  return number > 3;
});

尚、配列の要素にオブジェクトが指定されている場合、戻り値の条件に指定可能。

return character.id === 1;

複数の要素を取り出すには「filterメソッド」を使う。

const numbers = [1, 3, 5, 10]

// 定数に最初に見つかる5が代入される
const foundNumber = numbers.filter ((number) => {
  return number > 3;
});

「mapメソッド」を使えば、配列内の全ての要素に対して処理し、戻り値から新しい配列を作成可能。

// 配列の要素を2倍にする
const doubledNumbers = numbers.map( (number) => {
  return number * 2;
});

最後に

JavaScriptのES６は、Rubyのような他のオブジェクト指向のプログラミング言語と同じように、効率性が増しているなと感じました。

Web開発では今後もJavaScriptは主流の言語なので、興味がある人はぜひ一度学んでみて下さい！

合わせて読みたい👇

プログラミングスクールおすすめは？比較一覧まとめ

2019年4月28日

IT・Webエンジニア転職サイト・エージェントおすすめ比較一覧まとめ

2019年4月29日

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

Tomoyuki

SEを5年経験後、全くの未経験ながら思い切ってブロガーに転身し、月間13万PVを達成。その後コロナの影響も受け、以前から興味があったWeb系エンジニアへのキャリアチェンジを決意。現在はWeb系エンジニアとして働きながら、プロゲーマーとしても活躍できるように活動中。

最新記事 by Tomoyuki (全て見る)

• 【スト6】モダンキャミィの初心者向けコンボまとめ【STREET FIGHTER 6（ストリートファイター6）】 - 2024年11月10日
• モンハンワイルズでおすすめのオプション設定まとめ【Monster Hunter Wilds】 - 2024年11月4日
• モンハンワイルズでおすすめのグラフィック設定まとめ【Monster Hunter Wilds】 - 2024年11月2日