Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@sogu(z cf)

Javascript ES6 まとめ①

Last updated at Posted at 2019-04-14

変数定義

let 変数名;

注意点

  • 英単語を使用
  • 複数単語を使用する場合は大文字で区切る
  • 開始文字に数字は使えない
  • ローマ字表記は使用可能だが望ましくない
  • 日本語表記は可能だが望ましくない

例

○ let name;      // ローマ字使用
○ let firstName; // 大文字で区切る
△ let namae;     // ローマ字表記はよくない
△ let 名前;     　// 日本語表記はよくない 
× let 1name;     // 先頭数字は使用不可

定数

const 定数名;

注意点

  • 変数と違い代入した値を変更できない。更新しようとした場合エラーは発生。

例

○ const PI = 3.14;
○ const philippineIslands = 3.14;
△ const enshuritu = 3.14;
△ const 円周率 = 3.14;
× const 1PI = 3.14;

テンプレートリテラル

テンプレートリテラルを用いない連結

let age = 30;
const name = "Qiita";
console.log(name + "さんは" + age + "歳です"); // => Qiitaさんは30歳です

テンプレートリテラルを用いた連結

let age = 30;
const name = "Qiita";
console.log(`${name}さんは${age}歳です`); // => Qiitaさんは30歳です

※出力対象をバッククォートを使う

if文

if (条件1 && 条件２) {
  処理;
} else if (条件3 || 条件４) {
  処理;
} else {
  処理;
}

switch文

let rank = 1;

switch (rank) {
  case 1:
    console.log("ランクはSです");
    break;

  case 2:
    console.log("ランクはAです");
    break;

  case 3:
     console.log("ランクはBです");
   break;

  case 4:
     console.log("ランクはCです");
   break;

  default:
    console.log("ランクはありません");
  break;
}

注意

  • case定義行の末尾は:コロン
  • breakを指定することでswitch文を抜ける
  • defaultを指定することでどのcaseにも当てはまらなかった場合の処理を記述する

while文

書式

while (条件;) {
  処理;
}

例

let num = 0;
const limit = 100;

while (num <= limit) {
  num += 1;
}
console.log(num); // => 101

while文の末尾には;セミコロンを付けない

for文

書式

for (変数の定義; 条件; 処理) {
  処理;
}

例

for (let num = 0; num <= 10; num++) {
  処理;
}

while文の末尾には;セミコロンを付けない

配列を作る

let prefecture = ["大阪", "京都", "兵庫", "和歌山", "滋賀", "奈良"];
const fruits = ["りんご", "ばなな", "ぶどう", "レモン", "オレンジ"];

ループで配列を回す

let prefecture = ["大阪", "京都", "兵庫", "和歌山", "滋賀", "奈良"];
for (let i = 0; i < prefecture.length; i++){
  console.log(prefecture[i]);
}
/*
== 出力結果 ==
大阪
京都
兵庫
和歌山
滋賀
奈良
*/

オブジェクト

let user = {name: "taro", age: "15"}
const company = {name: "qiita", address: "〇〇〇〇"}

console.log(user.name); // => taro

オブジェクトを持つ配列

const users = [
  {name: "ichiro", age: "20"},
  {name: "jiro", age: "25"},
  {name: "taro", age: "35"}
];
console.log(users[1].name); // => jiro

関数

const greet = function() {
  console.log("こんにちわ");
}

// 呼び出し
greet(); // => こんにちわ

アロー関数/引数/戻り値/スコープ

const greet = () => {
  console.log("おはよう");
}

//呼び出し
greet(); // => おはよう

// -------- 引数 ----------

const introduce = (name, age) => {
  console.log(`私の名前は${name}、${age}歳です`);
}

// 呼び出し
introduce("佐藤", 30); // => 私の名前は佐藤、30歳です

// -------- 戻り値 ----------

const double = (number) => {
  return number * 2 
}
const result = double(5);

console.log(result); // => 10

// 真偽値
const check = (number) => {
  return number % 3 === 0;
}

if (check(30)) {
  console.log("3の倍数です");
} else {
  console.log("3の倍数ではない");
}

// -------- スコープ ----------

const name = "佐藤";

const greet = (name) => {
  console.log(私は`${name}です`);
}

greet("田中"); // 私は田中です

greet(name); // 私は佐藤です

クラス/定義/オブジェクト/インスタンス


// -------- 例 ----------
const person = {
  name: "佐藤",
  age: 30,
  greet: () => {
    console.log("こんにちは！");
  }
};

// 呼び出し
console.log(person.name); // => 佐藤
console.log(person.age); // => ３０
person.greet // => こんにちは！


// -------- 定義/オブジェクト/インスタンス ----------

// Userクラス定義
class User {
}

// userオブジェクトにUserクラスのインスタンスを代入
const user = new User();

// Userクラスのインスタンスが格納されている
console.log(user); // => User {}

クラス/constructor(コンストラクタ)

class User {
  // constructor内の処理はUserクラスのインスタンスが生成された直後に実行される
  constructor() {
    console.log("Userクラスのインスタンス生成");
  }
}

const user1 = new User(); // => Userクラスのインスタンス生成
const user2 = new User(); // => Userクラスのインスタンス生成

クラス/this

class User {
  constructor() {
    this.name = "user1";
    this.age = 25;
  }
}

const user = new User();

console.log(user.name); // => user1
console.log(user.age); // => 25

クラス/this(引数)

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

const user = new User("ユーザー1", 20);

console.log(user.name); // => ユーザー1
console.log(user.age); // => 20

クラス/メソッド

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

  greet() {
    console.log(`私は${this.name}、${this.age}です`);
  }
}

const user = new User("ユーザー1", 20);

user.greet();

クラス/メソッド内でメソッド呼び出し

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

  greet () {
    console.log("こんにちは");
  }

  info() {
    this.greet();
    console.log(`私は${this.name}、${this.age}です`);
  }
}

const user = new User("ユーザー1", 20);

user.info();

クラス/継承


//Animalクラス定義
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("こんにちは！");
  }

  info() {
    this.greet();
    console.log(`私は${this.name}、${this.age}歳です`);
  }
}

// Animalクラスを継承したDogクラスを定義
class Dog extends Animal {
  getHumanAge() {
    return this.age * 7;
  }
}

const dog = new Dog("ドッグ", 4);
dog.info();

const humanAge = dog.getHumanAge();
console.log(`人間年齢で${humanAge}です`); // => 人間年齢で28歳です

クラス/constructorオーバーライド super();

class Item {
  constructor(name) {
    this.name = name;
  }
  info() {
    console.log(`${this.name}です`);
  }
}

class Pc extends Item {
  constructor(name, type) {
    super(name); // super();で親クラスのconstructorを呼び出し
    this.type = type;
  }
 
  info() {
    console.log(`商品${this.name}は${this.type}商品です`);
  }
}

const pc = new Pc("MacPC", "家電");

pc.info(); // => 商品MacPCは家電商品です

ファイルのimport(インポート)/export(エクスポート)

user.js
class User {
}
export default User;
// Userクラスを他のファイルでも使用可能にする設定
script.js
import User from "./user";
// ファイルuser.jsを読み込みUserクラスを使えるようにする設定

【注意点】

  • パス指定の拡張子.jsは省略
  • importするだけでは読み込めない。
  • 呼び出し元でexportをする必要がある。

値のimport(インポート)/export(エクスポート)

data.js
const data1 = "data1";

export default data1; // 定数data1を他のファイルでも使えるようにする設定
script.js
import data1 from "./data" // data.jsで定義された定数data1を使えるようにする設定

【注意点】

  • export defaultは1ファイル1つの値のみ
  • export defaultを２つ定義した場合SyntaxErrorが発生
const data1 = "data1";
const data2 = "data2";

export default data1;
export default data2; // SyntaxError: data.js: Only one default export allowed per module.

名前付きimport(インポート)/export(エクスポート)

data.js
const data1 = "data1";
const data2 = "data2";

export {data1, data2}; // 定数`data1`と`data2`を他のファイルで使えるようにする設定
script.js
import {data1, data2} from "./data"; // data.jsの定数data1とdata2をscript.jsで使えるようにする設定

パッケージのimport

//import 定数名 from "パッケージ名";
import chalk from "chalk"; // chalkは出力する文字の色を変更できる

console.log(chalk.yellow("黄色")) // => 出力された文字の色が黄色で表示される
console.log(chalk.bgYellow("黄色")) // => 出力された文字の背景色が黄色で表示される

メソッド:配列

forEach

const numbers = [1, 2, 3];
numbers.forEach((number) => {console.log(number)});

// 長いコードを書く時
numbers.forEach((number) => {
  console.log(number)
});

//出力結果どちらも
1
2
3

find

const numbers = [2, 9, 6, 5];

const foundNumber = numbers.find((number) => {
  return number > 6;
});
console.log(foundNumber); // => 9

const notFoundNumber = numbers.find((number) => {
  return number === 1;
});
console.log(notFoundNumber); // => undefined

// -------------------- オブジェクト --------------------
const users = [
  {name: "user1", age: 10},
  {name: "user2", age: 20},
  {name: "user3", age: 30}
]

const foundUser = users.find((user) => {
  return user.name === "user2";
});

console.log(foundUser); // => {name: "user2", age: 20}

filter

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const addNumbers = numbers.filter((number) => {
  return number % 3 === 0;
});

console.log(addNumbers); // => [ 3, 6, 9 ]

// -------------------- オブジェクト --------------------
const users = [
  {name: "user1", age: 10},
  {name: "user2", age: 20},
  {name: "user3", age: 30}
]

const underThirty = users.filter((user) => {
  return user.age < 30;
});

console.log(underThirty);
// => [ { name: 'user1', age: 10 }, { name: 'user2', age: 20 } ]

map

const numbers = [1, 2, 3, 4];

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); //=> [ 2, 4, 6, 8 ]

// -------------------- オブジェクト --------------------
const names = [
  {firstName: "first1", lastName: "last1"},
  {firstName: "first2", lastName: "last2"},
  {firstName: "first3", lastName: "last3"},
  {firstName: "first4", lastName: "last4"}
];

const fullNames = names.map((name) => {
  return `${name.firstName} ${name.lastName}`;
});

console.log(fullNames); // => [ 'first1 last1', 'first2 last2', 'first3 last3', 'first4 last4' ]

map: 配列の全ての要素に同じ処理をして、処理結果を集めた新しい配列を作る

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?