Javascript 備忘録（Progate）

・console.log("hello, world");
→
丸括弧内に入力された文字をコンソールに出力
コンソールとはWebコンソールのこと
文字列はシングルクオート or ダブルクオート
文章の最後はセミコロン;で終了

・コメントは//

・コンソールログは数字もOK
→
console.log(4+5);
* 掛け算
/ 割算
% 余り

・文字列の連結
→
console.log("文字列の" + "連結")

・変数
→
let 変数名 = 値; で定義

let name = "Jone";  
console.log(name);  
#=> Jone  

・式の中で変数を使う

let name = "Jone";
console.log( name + "Michel" );

let number = 5;
console.log( number + 6 );

・望ましい変数 nubmer
oddNumber

・変数の再定義
→ letはいらない

let name = Jone;
name = Michael;

・変数の中身の数値へ足し算し、変数を書き換える

let number = 5;
number = number + 5;
number += 5;

・定数
→
const 定数名 = 値 定数は値を更新することができない

const name = Jone;

・テンプレートリテラル（式展開みたいな）
→ 文字列の中に定数や変数を埋め込める
${定数 or 変数}
テンプレートリテラルを使うときはバッグクオートで囲む

const name = "ともあき";
console.log(`こんにちは。${name}さん`);

・条件式
if (条件式) { 処理; }

if (条件式) { 条件がtrueの処理; } else { 　条件がfalseの処理; }

if (条件式A) { 条件Aがtrueの処理; } else if(条件式B) { 　条件Bがtrueの処理; } else { AもBもfalseの処理; }

・比較演算子

console.log(number > 10)
#=> true

・等価演算子

=== 等しい
!== 等しくない

・かつ &&

number > 10 && number < 5

・または ||

x < 10 || x< 5

・switch文

switch (条件の値) {
   case 値1 :
   条件の値が値1と等しい場合の処理;
   break;
   case 値2 :
   条件の値が値2と等しい場合の処理;
   break;
   default:
   caseのどれにも一致しなかった場合の処理;
   break;
}

breakが重要。これがないと次のcaseも評価してしまう。
defaultはelseみたいなもの。
条件が多いときはswitch文の方が読みやすくなる。

・繰り返し処理 while

while(条件) {
   処理+
}

let number = 1;

while(number <= 100){
   console.log(number);
   number += 1
}

・繰り返し処理 for（whileよりシンプル）

for(変数の定義 ; 条件式 ; 変数の更新{
   処理;
}

for(let number = 1 ; number <= 100 ; number ++){
  console.log(number);
}

・number += 1 と number ++　は同じ

・number -= 1 と number -- は同じ

・配列 []

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

console.log(animals);
console.log(animals[0]);

・配列の要素の上書き

animals[0] = "mouse"

・配列の要素数の取得
→ anmimals.length

・オブジェクト（rubyのハッシュ）

{ プロパティ1 : 値1, プロパティ2: 値1 }
{ name: "手裏剣",  price: 300}

・オブジェクトの値の取り出し方

console.log(anminals.name);

・オブジェクトを要素を持つ配列

[{プロパティ1: 値1, プロパティ2: 値2}]
const = items [
{name: "手裏剣", price: 300},
{name: "忍者刀", price :1200}
];

console.log(items[0]);
console.log(items[1].price);

・存在しないインデックス番号やプロパティを指定した場合
→
undefinedと出力される。
undefinedは値が定義されていない、という意味。

・undefinedと出力したくない場合、ifを使って回避する

for (let i = 0; i < characters.length; i++) {
  console.log("--------------------");
  
  const character = characters[i];
  
  console.log(`名前は${character.name}です`);

  if(character.age === undefined) {
    console.log("年齢は秘密です");
  } else {
    console.log(`${character.age}歳です`);
  }
  
}

・オブジェクトの値には、オブジェクトを用いることもできる
→オブジェクト名.プロパティ.プロパティで呼び出す

const character = {
 name: "にんじゃわんこ",
 favatrite: { food: "ラーメン"
 },
};
console.log(character.favarite);
console.log(character.favarite.food);

・関数
→いくつかの処理をまとめたもの

const introduce = function() {
  console.log("hello");
  console.log("goodbye");
}

introduce(); ⇦これが関数の呼び出し方法

・アロー関数 →関数をシンプルに記載する(ES6から導入)

const introduce = () => {
処理
}

・引数 →関数に与える追加情報
→引数は複数個設定できる、第一引数, 第二引数といった感じ

const introduce = (name) => {
  console.log(name);
}

introduce("にんじゃわんこ");

・戻り値
→returnを使うことで関数の処理結果を呼び出し元で受け取れる
→定数や変数に代入して使う
→比較演算子など使うと、戻り値にtrueやfalseを返せる
→returnの後の処理は実行されない（returnは関数を終わらせる）

・引数と関数の中の定数や変数
→その関数の中でしか使えない
→定数や変数を使える範囲のことをスコープという
→関数の外で定義した定数や変数は冠すの中でも使える

・オブジェクトの値には関数を用いることができる

const 定数名 = {
 プロパティ名: () => {
  処理;
 }
};

定数名.プロパティ名(); 　⇦ オブジェクトの値が関数の場合の呼び出し方

・クラス

class クラス名　{

}

class Animal {

}

const animal = new Animal(); ⇦インスタンス作成

・コンストラクタ
→インスタンスが生成された時に実行したい処理

class Animal {
 constructor() {
 
 }
}

・インスタンスにプロパティと値を持たせる
→コンストラクタに設定 →インスタンス.プロパティでクラスの外で呼び出せる

・コンストラクタに引数を渡す

class Animal [

  constructor(name, age) {

   this.name = name;
   this.age = age;
  }
}

→new Animal()の()はコンストラクタの()やな

・メソッド
→ メソッドはdefとか不要。
クラウスの中にgreet(){}とか書き出せが良い。

class Animal {

 constructor(){

  {

  greet)0{

  }
}

・メソッド内でインスタンスの値を使う
→this.nameはどthis.プロパティ名でOK

・メソッド内で他のメソッドを呼び出す
→this.メソッド名

・継承の仕方

class Dog extends Animal {

}

→サブクラスはスーパークラスの全ての機能を引き継ぐ

・サブクラスでスーパークラスと同名のメソッドを定義した場合、オーバーライドされる。

・コンストラクタのオーバーライド

constructor(name, age, greet) {

  super(name, age);

 this.greet = greet

}

→super()でスーパークラスのコンストラクタを呼び出す

・クラスを他のファイルで使えるようにする

class Animal {

}
export defaule Animal;

clas Dog {

}
import Animal from "./Animal.js";

・エクスポートはクラスだけでなく、値や関数もエクスポートできる

・デフォルトエクスポート
→export default 値; →importするときは、値の名前が違っても問題ない
→デフォルトエクスポートでは、必ずdefault 値の値が読み込まれるから
→デフォルトエクスポートは１つのファイルで１回まで使える

・名前つきエクスポート

export (値, 値};

→インポートするときも{}で囲む

・パッケージをインポートする

import 定数名 form "パッケージ名";

→世にあるパッケージを使えば、色んなことができる

・pushメソッド
→配列の最後に新しい要素を追加する

const numbers = [1, 2, 3];
numbers.push(4);

・forEachメソッド
→配列の要素を１つ１つ取り出して、同じ処理を行う

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

→() => {} はアロー関数
→引数に入っている関数のことをコールバック関数と呼ぶ

・findメソッド →コールバックメソッドの処理部分に記述した条件に合う、一つ目の要素を取り出す

const numbers = [1, 3, 5, 7, 9];

const foundNumber = numbers.find((number) => {
  return number % 3 === 0;
});

const characters = [
  {id: 1, name: "にんじゃわんこ", age: 6},
  {id: 2, name: "ベイビーわんこ", age: 2},
  {id: 3, name: "ひつじ仙人", age: 100},
  {id: 4, name: "とりずきん", age: 21}
];

const foundCharacter = characters.find((character) => {
  return character.id === 3;
});

・filterメソッド
→条件に合った全ての要素を取り出す →使い方はfindと同じ

・mapメソッド
→配列の全ての要素に同じ処理を行い、新しい配列を作り直す

・コールバック関数
→ある関数の引数に渡される関数のこと
→とある関数に処理を加えて、新しい関数を作ることができる

const printWanko = () => {
  console.log("にんじゃわんこ");
};

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

call(printWanko);

→さらには、callback引数に関数を書くこともできる

const printWanko = () => {
  console.log("にんじゃわんこ");
};

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

call(printWanko);

call(() => {
  console.log("ひつじ仙人");
});

・コールバック関数に引数を持たせる

const call = (callback) => {
  callback("にんじゃわんこ", 14);
};

call((name, age) => {
  console.log(`${name}は${age}歳です。`);
});