3
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.

JavaScript I 〜Ⅶ Progate まとめ

Last updated at Posted at 2019-11-05

#JavaScript I

console.log(" ");   //文字の出力
let name = "John";  //変数の定義
const name =        //定数の定義
console.log(`----${name}---`); //テンプレートリテラル +を使わないで良い

// if文の書き方
let a = 15;
if (a > 20) {
   console.log("20以上です");
} else {
   console.log("20以下です");
}

//switch文
let color = red;
switch(color) {
 case "red":
   console.log("STOP");
   break;
 case "green":
   console.log("GO");
   break;
 case "yellow":
   console.log("Be Careful");
   break;
// => STOP
}

#JavaScript II


//while文
let number = 1; //変数の定義
while (number <= 100 ) {
   console.log(number);
   number++ // 繰り返しの処理
}
// => 1,2,3,4,5,...100

//for文
for (let number = 1; number <= 100; number++){
  console.log(number);
}
//変数の定義、条件式、繰り返し処理を一行で書くことができる

//配列
let animals = ["dog","cat","sheep"];
for (let i = 0; i < animals.length; animals++ ){
  console.log(animals[i]); 
}
//配列の中身を取り出し一つずつ出力

//オブジェクト
let human = {name:"ya",age:20}; //プロパティ:値

#JavaScript Ⅲ

// 関数の定義
const introduce = function() {
 // まとめて処理したいこと
};

introduce(); //関数の呼び出し

//アロー関数で書くと定義を簡略化できる
const introduce = () => {

}

#JavaScript Ⅳ

class Animal{

} //クラスの宣言

const animal = new Animal(); //new class名でインスタンスを生成する
console.log(animal); // => Animal{}という空のオブジェクトが作成


class Animal{
  //設計図の中身を書いていく,
  //constructorには処理したいことを書く,インスタンス生成時に毎回実行される
  constructor() {
    console.log("Hello");
//this.プロパティ = 値 とすることで生成したインスタンスにプロパティと値を追加できる
    this.name = "bee"; 

  }
}
const animal = new Animal();
console.log(animal.name); 
// インスタンスもオブジェクトなのでオブジェクト.プロパティで => bee

class Animal{
 //インスタンスごとに値を自由に変えたい時は、引数に渡す
  constructor(name) {
    
    this.name = name; 
//this.プロパティ = 値 とすることで生成したインスタンスにプロパティと値を追加できる
  }
}
const animal = new Animal("hyakujuunoou");
console.log(animal.name); 


#JavaScript Ⅵ

//forEachメソッド
characters.forEach((character) => {
  console.log(character)
  
});
 //charactersという配列を繰り返し処理する

//findメソッド
const foundNumber = numbers.find((number) => {
  return number % 3 === 0;
});

console.log(foundNumber);
//配列の中から、コールバック関数の条件に合うもの一つだけを戻り値として返す

//mapメソッド
const doubledNumbers = numbers.map((number) => {
  return number*2;
});

console.log(doubledNumbers);
//配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成する

#JavaScript Ⅶ
JavaScriptでは引数に関数を渡すことができ,引数に渡される関数をコールバック関数という


const Hello = () => {
  console.log("Hello");
};

const call = (callback) => { // 2callbackにHelloを代入
  console.log("コールバック関数を呼び出します。");
  callback(); // 3関数callback()を呼び出す、つまりHello関数を呼び出す
};

call(Hello);
// 1引数にHello関数を渡し、関数callを呼び出す

// => コールバック関数を呼び出します。
// => Hello

コールバック関数を直接定義することもできる

const call = (callback) => { 
  console.log("コールバック関数を呼び出します。");
  callback(); 
};

call( () => {
 console.log("Hello");
});
3
3
1

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
3
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?