変数の定義
let name =”john”;
console.log(name);
変数の特徴
文字列や数値と同じように扱える。
let number=11;
console.log(number+5);
なぜ変数を使うのか
１、同じ値を繰り返し使える
２、変更に対応しやすい
３、値の意味がわかりやすい
変数の更新
let name =”John”;
console.log(name);
name=”Kate”;
console.log(name);
//John
//Kate
変数自身を変更する
let number =2;
console.log(number);
number= number + 3;
console.log(number);
//2
//5
省略した書き方
x = x +10 →x += 10
x = x - 10 →x -=10
x = x * 10 →x *= 10
x = x %10 →x %= 10
定数と変数の違い
変数は一度代入した値を更新することができるのに対し、定数は1度代入した値を変更することができない。
const name -”John”;
console.log(name);
name= “Kate”; →エラー（一度代入された値を変更することはできない）
console.log(name);
if文の書き方
if(条件式） {
処理
}セミコロンは不要
const number -12;
if(number > 10) {
console.log(“numberは10より大きいです”);
}
//“numberは10より大きいです
if文と真偽値
比較演算子
a === b aとbが等しい
a !== b aとbが異なる
elseのコード
const number= 7;
if(number >10) {
console.log (“numberは10より大きいです”);
}else(
console.log(“numberは10以下です”);
}
elseifのコード
const number =7;
if(number >10) {
console.log(“numberは10より大きいです”);
}else if(number >5){
console.log(“numberは5より大きいです”);
}else{
console.log(“numberは5以下です”);
}
switch文
if文以外の条件分岐の方法。
値によって処理を分岐することができる。
const color =”赤”;
switch (color) {
case “赤”;
console.log(“ストップ！”);
break;
case “黄”;
console.log(“要注意”);
break;
}
switchの条件の値がcaseの値と一致したとき、その部分の処理が実行される。
caseのどれにも一致しなかったとき、defaultのブロックが実行される。
defaultはif文のelseに似ている。
while文（繰り返し処理）
変数numberが100以下のとき処理を繰り返したい
let number = 1;
while (number <= 100) {
console.log(number);
number += 1;
}
while文の注意点
while文を使う時は、条件式の部分がいつかはfalseになり、繰り返し処理が終わる必要がある。
条件がtrueのままであると、永遠に繰り返し処理が行われてしまう。
for文
繰り返し処理の方法には、while文以外にもfor文というものがある。
for(変数の定義 ; 条件式 ; 変数の更新) {
処理
}
for文の書き方
let number =1;
while (number <= 100) {
console.log(number);
number += 1;
}
これをfor文で表すと、
for(let number = 1 ; number <= 100 ; number += 1) {
console.log(number);
}
配列
配列も1つの値であるため、定数に代入することっができる。
const fruits = [“apple”,”banana”,”orange”];
console.log(fruits);
//[“apple”,”banana”,”orange”]
配列とfor文
const fruits = [“apple” , “banana” , “orange”];
for(let i =0; i< 3 ; i++){
console.log(fruits[i]);
}
length
配列.lengthとすることで、配列の要素数を取得できる。
const fruits = [“apple” , “banana” , “orange”];
for(let i =0; i< fruits.length ; i++){
console.log(fruits[i]);
}
オブジェクトとは
配列と同じく複数のデータをまとめて管理するのに用いられる。
配列は複数の値を並べて管理するのに対して、オブジェクトはそれぞれの値にプロパティと呼ばれる名前を付けて管理します。
オブジェクトを定数に代入
const item = [name:”手裏剣”, price: 300];
console.log(item);
オブジェクトの値を取り出す
const item = [name:”手裏剣”, price: 300];
console.log(item.name);
オブジェクトの値を更新
const item = [name:”手裏剣”, price: 300];
item.price = 500;
console.log(item.price);
配列の中のオブジェクトを取り出す
const item = [
[name:”手裏剣”, price:300],
[name:”忍者刀” , price:1200]
];
console.log(items[1]);
//[name:”忍者刀” , price:1200]
関数の定義
const introduce = function() {
console.log(“こんにちは”);
console.log(‘私はにんじゃわんこです”);
};
introduce();
アロー関数
const introduce = () => {
console.log(“こんにちは”);
console.log(‘私はにんじゃわんこです”);
};
引数を受け取る関数の定義
const introduce = (name) => {
console.log(“こんにちは”);
console.log(私は${name}です);
};
introduce(“にんじゃわんこ”);
introduce(“ひつじ仙人”);
//こんいちは
//私はにんじゃわんこです
//こんにちは
//私はひつじ仙人です
複数の引数を受け取る関数
const introduce = (name, age) => {
console,log(私は${name}です);
console,log(私は${age}歳です);
};
introduce(“にんじゃわんこ”, 14);
//私はにんじゃわんこです
//私は14歳です
戻り値
関数の処理結果を呼び出し元で受け取る方法
const add = (a,b) => {
return a+b ;
];
const sum = add (1,3);
console.log(sum);
・条件式をreturnすると条件式の結果として導出される真偽値を返すことができる。
・returnは戻り値を返すだけでなく、関数の処理を終了させる性質を持っている。
そのため、returnの後にある関数内の処理は実行されない
関数の中の定数
関数の引数や、関数内で定義した定数は、その関数の中でしか使うことができない。
一方、関数の外で定義した定数は関数の中でも使うことができる。
それぞれの変数の使用できる範囲のことをスコープと呼ぶ。
オブジェクト
const user = {
name:”にんじゃわんこ”,
greet:() => {
console.log(“こんにちは”);
}
};
user.greet();→関数の呼び出し
クラス
効率的にオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法がある。
これをJavaScriptではクラスと呼ぶ。（クラス名の頭文字は大文字）
class Animal {
}
const animal = new Animal();
console.log(animal);
//Animal{}(空のオブジェクト）
コンストラクタとは
クラスには、コンストラクタと呼ばれる機能が用意されている。
コンストラクタは、インスタンスを生成するときに実行したい処理や設定を追加するための機能。
class Animal {
constructor() {
console.log(“こんにちは!”);
}
}
const animal1 = new Animal();
const animal2 = new Animal();
//こんにちは!
//こんにちは!
コンストラクタの中には処理を記述できる。
ここに書いた処理はインスタンスが生成された直後に実行される。
インスタンスごとに毎回実行されるため、以上の例では２回処理が実行される。
プロパティと値を追加する
コンストラクタの中で、「this.プロパティ = 値」とすることで、生成されたインスタンスにプロパティと値を追加することができる。
class Animal {
constructor() {
this.name = “レオ”;
}
}
const animal = new Animal();
console.log(animal.name);
インスタンスごとに値を変える
コンストラクタごとに引数を受け取ることが可能。
class Animal {
constructor(name,age) {
this.name = name ;
this.age = age;
}
}
const animal = new Animal(“レオ”,3);→引数に値を渡す
メソッド
メソッドとは、インスタンスの動作のようなもの。
名前や年齢などの情報はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表す。
classs Animal {
constructor(name,age) {
・・・
}
greet() {
console.log(“こんにちは！”);
}
}
const animal = new Animal(“レオ”,3);
animal.greet();→メソッドの呼び出し
メソッド内で値を使う
class Animal {
・
・
・
info() {
console.log(名前は${this.name}です);
}
}
const animal = new Animal(“レオ”,3);
animal.info();
//名前はレオです
ファイルの分割
animal.js内のAnimalクラスを他のファイルでも使用できるようにするためには、クラスの定義の後で、「export default クラス名」とすることが必要になる。
また、他のファイルに定義されているクラスを使用するには、使用するファイルの先頭で「import クラス名 from “ファイル名”」とする。
なお、拡張子の「.js」は省略することができる。
継承
既にあるクラスをもとに、新しくクラスを作成する方法のことを言う。
たとえば、AnimalクラスからDogクラスを継承すると、Animalクラスのすべての機能を引き継いで、Dogクラスを作成することができる。
継承の書き方
import Animal from “./animal.js”;
class Dog extends Animal {
}
DogクラスにはAnimalクラスの全てを引き継いでいるため、Dogクラス内には何もメソッドが定義されていないが、Animalクラスに定義されているinfoメソッドなどを使用することができる。
const dog = new Dog(“レオ”,4);
dog,info();
メソッドの戻り値
class Dog extends Animal {
getHumanAge() {
return this.age*7;
}
}
const dog = new Dog(“レオ”,4);
const humanAge = dog.getHumanAge();
console.log(humanAge);
//出力結果：28
オーバーライド
親クラスの同じ名前のメソッドを子クラスに定義すると、子クラスのメソッドが優先して使用される。
これは子クラスのメソッドが親クラスのメソッドを上書きしていることから、オーバーライドと呼ばれる。