JavaScript基礎

基礎

出力

console.log('hoge');
> hoge

コメントアウト

// console.log('hoge');

定数

const myName = 'Tom';
console.log(myName);
> Tom

変数

let age = 9;
console.log(age);
> 9

age += 1
console.log(age);
> 10

テンプレートリテラル

const selfIntro = `My name is ${myName}, ${age} years old.`;  // バッククォートで囲む
console.log(selfIntro);
> My name is Tom, 10 years old.

比較演算子

console.log(myName === 'Tom');
> True
console.log(myName !== 'Tom');
> False

and/or条件

console.log(myName === 'Tom' && age >= 10);
> True

console.log(myName !== 'Tom' || age >= 10);
> True

条件分岐

if文

if (age >= 20) {
  console.log('20歳以上です');
} else if(age >= 10) {
  console.log('10歳以上です');
} else {
  console.log('10歳未満です');
}
> 10歳以上です

switch文

switch(age) {
  case 9:
    console.log('9歳です');
    break;
  case 10:
    console.log('10歳です');
    break;
  case 11:
    console.log('11歳です');
    break;
  default:
    console.log('9歳未満か12歳以上です');
    break; 
}
> 10歳です

繰り返し処理

while

let number = 0;
while(number < 3) {
  console.log(number);
  number += 1;
}
> 0
> 1
> 2

for文

for(let i = 0; i < 3; i++) {
  console.log(i);
}
> 0
> 1
> 2

配列の処理

const fruits = ['apple', 'orange', 'banana'];
for(let i = 0; i < fruits.length; i++) {
  const fruit = fruits[i];
  console.log(fruit);
}
> apple
> orange
> banana

オブジェクトの処理

const items = [
  {name: 'apple', price: 100},
  {name: 'orange', price: 110},
  {name: 'banana'},
]

for(let i = 0; i < items.length; i++) {
  const price = items[i].price
  if(price !== undefined) {
    console.log(price);
  } else {
    console.log('unknown');
  }
}
> 100
> 110
> unknown

関数

rate = 110;

const convertToDollar = (priceYen) => {
  return priceYen / rate;
}

const info = (name, price) => {
  const priceDollar = convertToDollar(price);
  console.log(`${name}は${price}円、ドル換算では${priceDollar}ドルです`); 
}

for (let i = 0; i < items.length; i++) {
  const name = items[i].name;
  const price = items[i].price;

  if (price !== undefined) {
    info(name, price)
  } else {
    console.log(`${name}は価格不明です`)
  }
}

> appleは100円、ドル換算では0.90909090909ドルです
> orangeは110円、ドル換算では1ドルです
> bananaは価格不明です

Class

constructor, method

class Student {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  
  greet(){
    console.log('hello');
  }
  
  info(){
    const selfIntro = `My name is ${this.name}.`
    console.log(selfIntro)
  }
}

student = new Student('taro', 10);
student.greet()
student.info()

> hello
> My name is taro.

classの継承、オーバーライド、親classのコンストラクタ呼び出し

animal.js

class Animal {
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  
  info(){
    console.log(`This is ${this.name}, ${this.age} years old`);
  }
}

// Animalクラスを他ファイルから参照できるように
export default Animal;

cat.js

import Animal from './animal.js';
class Cat extends Animal{
  constructor(name, age, breed){
    // 親クラスのコンストラクタを継承
    super(name, age);
    this.breed = breed;
  }
  
  info() {
    console.log(`This is ${this.name}, ${this.age} years old. Breed is ${this.breed}`);
  }
}

export default Cat;

main.js

import Cat from './cat.js';

const cat = new Cat('betty', 3, 'scottish fold');
cat.info();
> This is betty, 3 years old. Breed is scottish fold