2
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 コールバック関数/JSのES5/復習・練習【備忘録15】

Posted at

##11/12~11/14に勉強したこと
###コールバック関数
引数に渡される関数のことをコールバック関数という。

【例】


const petDog=()=>{
  console.log("ココちゃん");
};

const call=(callback)=>{
  console.log("コールバック関数を呼び出します");
 callback();
};
//コールバック関数を呼び出すときは「();」が必要。

call(petDog);
//コールバック関数を渡すときは「()」は付けない!

【出力】
コールバック関数を呼び出します。
ココちゃん

###直接、引数の中で関数を定義する場合
【例】


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

call(()=>{
  console.log("ココちゃん");
});

【出力】
ココちゃん

###JSのES5
jQueryに入る前に、ES6だけでなく元々使用されていたES5も学習
しておこうと思い、一巡した。

- 変数がletでなくvarで書かれていた。
- {name:"犬",color:"brown"};と表現していた分は、オブジェクトではなく
【連想配列】と呼ばれており表記についてもnameの部分にも[""]が付いていた。
- 上記をの名前のみを出力させる場合、ES6では【console.log(animal.name);】のみ
学習していたが、ES5では【console.log(animal["name"]);】とも書けるということを学習した。

###JSの復習において、学んだ点。
####BMIを求める記述
下記のような、BMIを求める例題でBMIを求める式を
コンソールの中でしてしまったので、気を付ける。
後にBMIの数値を使う際に面倒になるので、まず定義してから使用する。
【私の書いた例】⇒ここでは18.5未満:痩せ気味/25未満:普通/それ以上:肥満


var height = 1.7;
var weight = 60;

console.log("BMIは"+ weight/height/height +"です");

var bmi=20.761245674740486;

if(bmi<18.5){
  console.log("痩せ気味です");
}else if(bmi>=18.5 && bmi<25){
  console.log("普通です");
}else{
  console.log("肥満気味です");
}

※こうしてしまうと、BMIの数値を手打ちしなければならなくなり、手間・時間がかかった。

【先に数値を定義してから書いた例】


var height = 1.7;
var weight = 60;

var bmi = weight / height / height;
console.log("BMIは" + bmi + "です");

if (bmi < 18.5) {
  console.log("痩せ気味です");
} else if (bmi < 25) {
  console.log("普通です");
} else {
  console.log("肥満気味です");
}

※先にBMIの数値を出しておくことによって、「変数bmi」として他で書くときも
使えるので、まず数値を出しておくことを癖づける。

####FizzBuzz
1から100まで繰り返し出力する中で、「3で割り切れる際はFizz」
「5で割り切れる際はBuzz」「3でも5でも割り切れる際はFizzBuzz」
「それ以外の時は数字」を出力という問題。


for(var i = 0 ; i <= 100 ; i ++){
  if(i % 3 ===0 && i % 5 ===0){
    console.log("FizzBuzz");
  }else if(i % 5 ===0){
    console.log("Buzz");
  }else if(i % 3 ===0){
    console.log("Fizz");
  }else{
    console.log(i);
  }
}

※はじめに書いた際に、一番初めの条件式に(i % 3 ===0)と書いてしまったので
うまく出力ができなかった。「3かつ5で割り切れる」という一番
条件として細かいものを一番はじめに持ってくる。

####平均点
スコアがずらっと並べられており、その平均点を出す記述。
まず、全スコアの合計を繰り返しを使用して出力。
そのあと 合計 / スコア項目数で割り出す。


var scores=[88, 62, 65, 21, 47, 92, 57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];

var sum = 0;

for(var i = 0 ; i <scores.length ; i++){
  sum += scores[i];
// ↑ 0に繰り返しスコアの項目を追加していく。(sum= sum + scores[i];)
}

var average= sum / scores.length;
console.log(`平均点は${average}点です。`);

####最高点
先ほどの章で求めた平均点を求めた後、最高点を出す方法。

var scores = [88, 62, 65, 21, 47, 92, 57, 89, 79, 89, 54, 82, 69, 72, 74, 54, 66, 92, 64, 96, 47, 89, 95, 93, 70, 30, 84, 93, 81, 98, 78, 96, 32, 56, 64, 42, 67];

// この下にコードを書いてください
var bestScore = 0;

var sum = 0;

for(var i = 0 ; i <scores.length ; i++){
  sum += scores[i];

  if(scores[i]>bestScore){
    bestScore=scores[i];
//↑次々スコアを代入していくイメージ!
  }
}

var average= sum / scores.length;
console.log(`平均点は${average}点です`);
console.log(`最高点は${bestScore}点です`);

【気を付けること】
bestScore = scores[i];の代入部分が慣れない表記なのでしっかり覚える。

####情報を順に出力
連想配列の情報を順に出力していく書き方。


var users = [
  {
    name: '太郎',
    age: 21,
    nationality: '日本',
  },
  {
    name: 'リリー',
    age: 37,
    nationality: 'イギリス',
  },
  {
    name: 'ジョン',
    age: 16,
    nationality: 'アメリカ',
  },
];

// この下にコードを書いてください

for(var i =0;i<users.length;i++){
  var number=i+1;
  
  console.log(`${number}人目`);
  
  console.log(`名前:${users[i].name}`);
  console.log(`年齢:${users[i].age}`);
  console.log(`国籍:${users[i].nationality}`);
}

【出力】
1人目
名前:太郎
年齢:21
国籍:日本
2人目...という風に順に表示ができる。

【気を付ける】
numberの表示は「i」だけにしてしまうと「0人目」の表記から始まるので気を付ける。

##振り返り
実際練習問題で応用として考えると、少しずつ考えていかないとまだ
わからなかったり、bestScoreの最高点の書き方に関しては「代入!」という
イメージをしっかりできていなかった(=をイコールと捉えると頭がこんがらがる!)

ある程度型になっているものがあるので、そこはしっかり慣れていく。

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