Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

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 1 year has passed since last update.

@yg0_my3

JavaScript備忘録

Last updated at Posted at 2022-04-12

はじめに

この記事はプログラミング初学者の学習教材Progate-JavaScriptコース備忘録です。

スペシャルサンクス
siracamus様　https://qiita.com/shiracamus

補足

記号の読み方
[]	角括弧(かく – )	bracket ブラケット
{}	波括弧(なみ – )	brace ブレース
<>	山括弧(やま – )	小なり／大なり	less-than sign

Progate JavaScript Ⅰ

出力: console.log(); 

console.log("Hello World");
//「()」に出力する文字を入力。文字列は""で囲む。数字はそのまま

変数: let ○○ = ~~;

例①
let name ="こんにちわ";
console.log("name");
//結果：こんにちわ
例②
let number = 0;
console.log(number);
//結果：0
number += 1;
console.log(number);
//結果：1

定数: const ○○ = ~~;

例
const hello ="こんばんわ";
console.log("hello");
//結果：こんばんわ

テンプレートリテラル: バッククォーテーションで囲む

例
const hello = "にんじゃわんこ";
console.log(`こんにちは、${name}さん`);
//結果：こんにちは、にんじゃわんこさん

条件分岐: if ※見やすくするために、Tabでインデント（字下げ）をつける

例
const number = 12;
if (number > 10) {
  console.log("numberは10より大きいです");
}
//結果：numberは10より大きいです

真偽値と比較演算子: <, <=, >, >= 

a < b   //aはbより小さい
a <= b  //aの方が小さいまたは等しい
a > b   //aはbより大きい
a >= b  //aの方が大きいまたは等しい
例
const age = 24;
// 「age >= 20」を出力
console.log(age >= 20);
//結果：true

// 「age < 20」を出力
console.log(age < 20);
//結果：false

// ageの値が20以上の場合に、「私は20歳以上です」と出力
if (age >= 20) {
  console.log("私は20歳以上です");
}
//結果：私は20歳以上です

等価演算子: ==, != 

a == b  //aとbは等しい
a != b  //aとbは異なる

const number = 10;

console.log(number = 10);
//結果：true

console.log(number = "10");
//結果：false

厳密等価演算子: ===, !== 

a === b  //aとbが厳密に等しい
a !== b  //aとbが厳密に異なる

条件分岐: if(), else

例
const number = 7;
if (number > 10) {
  console.log("numberは10より大きいです");
} else {
  console.log("numberは10より小さいです");
}
//結果：numberは10より小さいです

条件分岐: else if()

例
const number = 7;
if (number > 10) {
  console.log("numberは10より大きいです");
} else if (number > 5) {
  console.log("numberは5より大きいです");
} else {
  console.log("numberは5より小さいです")
}
結果
numberは5より大きいです  //条件式2がtrueなので「else if」の中の処理が実行された

かつ: &&, または || NG例 10 < x < 30

例
const number = 31;
if (number >= 10 && number < 100) {
  console.log("numberは2桁です");
}
//結果:numberは2桁です

switch文①: case, break

例１
const n = 2;

switch (n) {
  case 1:  //❌セミコロン ⭕️コロン
    console.log("大吉です");
    break;

  case 2:
    console.log("吉です");
    break;

  case 3:
   console.log("小吉です");
   break;
}
//結果:吉です
例2
// break;がない場合 (break;を忘れないように注意)
const color = "赤";

switch (color) {
  case "赤":  //コロン
    console.log("ストップ！");
    //←ここに「break;」記述なし
  case "黄":
    console.log("要注意");
    break;
}

//結果: //その次のcaseの処理も実行されてしまっているケース
ストップ！
要注意

switch文②: default

caseのどれにも一致しなかった時、defaultのブロックが実行される。
defaultはif文のelseに似たようなもの。
if, elseifによる分岐が多く複雑な場合、switch文で書き換えると
シンプルで読みやすいコードにできる。

例
const n = 4;
switch (n) {
  case 1:
    console.log("大吉です");
    break;
  case 2:
    console.log("吉です");
    break;
  case 3:
    console.log("小吉です");
    break;
  // どのcaseにも合致しなかったときの処理を追加してください
  default:
    console.log("凶です");
    break;
}
//結果:凶です

Progate JavaScript Ⅱ

繰り返し処理①: while

例
let number = 1;
while (number <= 100) {
console.log(number);
number += 1;
}
//結果:1.2.3...100
失敗例
let number = 1;
while (number <= 100) {
  console.log(number);
  //「number += 1;」を入力し忘れているケース
}

//結果：1.1.1...（無限ループが発生）

繰り返し処理②: for

できることはwhile文と同じ。while文に比べてシンプルに書くことができるのが特徴。
for文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書く。
括弧の中ではそれぞれをセミコロン（;）で区切る。※,（カンマ）で区切らないように注意

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

最後の number += 1の後に;（セミコロン）は必要なし。
「number += 1」を「number++」のように省略可。
「number -= 1」→「number--」も同様。

例②
for (let number = 1; number <= 100; number++) {
  // if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力
  // 「3の倍数である」ということは、「3で割った余りが0と等しい (number % 3 === 0)」という条件と同じ
  if (number % 3 === 0) {
    console.log("3の倍数です");
  } else {
    console.log(number);
  }
}
結果
1
2
3の倍数です
4
5
3の倍数です...

配列: 配列の要素の取得（インデックス番号）

例①
const fruits = ["apple","banana","orange"];  //const:定数
console.log(fruits);
//結果:['apple', 'banana', 'orange']
例②
//※要素の1つ目は[０]（ゼロ）から始まることに注意
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);
//結果:['apple']

console.log(fruits[2]);
//結果:['orange']
例③
//※要素の1つ目は[０]（ゼロ）から始まることに注意
const fruits = ["apple","banana","orange"];
console.log(fruits[0]);    // 更新前
fruits[0] = "grape";
console.log(fruits[0]);    //更新後
結果
apple
grape

要素に値を代入することで、要素が更新された。

配列と繰り返し①: for文

下記の文をfor文へ書き換えられる

const fruits = ["apple","banana","orange"];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
結果
apple
grape
orange
例
const fruits = ["apple","banana","orange"];
//①iが0~2のあいだループする  ②for()の後に;セミコロンいらない
③,（カンマ）で区切らないように注意
for (let i = 0; i < 3; i++) {
  //変数iを用いて要素を取得
  console.log(fruits[i]);
}
結果
apple
grape
orange

配列と繰り返し②: 配列.length

例
const fruits = ["apple","banana","orange","lemon","peach"];
//「.length」は定数fruitsの中にある5つのことを示している。
for (let i = 0; i < fruits.length; i++) {
  //変数iを用いて要素を取得
  console.log(fruits[i]);
}
結果
5
apple
grape
orange
lemon
peach

オブジェクト

比較
//さっきまでの配列の場合 []角括弧で囲む
[値1, 値2, 値3]
//オブジェクトの場合 {}波括弧で囲む
{プロパティ１: 値1, プロパティ2: 値2}
例
{name: "手裏剣", price: 300}

//①プロパティと値は「:コロン」でつなぐ
//②「プロパティ1：値1」で一つの要素となる。要素同士は「,コンマ」で区切る
{プロパティ1: 値1, プロパティ2: 値2}
例
const item = {name："手裏剣",price:300};
console.log(item);
//結果:{name: '手裏剣', price: 300};

オブジェクトの値の取得・更新

例①
const item = {name: "手裏剣", price: 300};
//「.name（プロパティ名）」で、nameプロパティの値を習得
console.log(item.name);
//結果:手裏剣
例②
const item = {name: "手裏剣", price: 300};
//priceプロパティの値を更新
item.price = 500;
console.log(item.price);
//結果:500

オブジェクトを要素に持つ配列（1）: オブジェクトの値を取り出す

①角括弧[]内は配列。
②「プロパティ1：値1」で一つのオブジェクトとなる。オブジェク同士は「,（コンマ）」で区切る
[{プロパティ1：値1},{プロパティ2:値2}]

例
//※インデックスの先頭は[０]（ゼロ）から始まることに注意。配列の要素の取得（インデックス番号）と同じ。
const item = [
  {name："手裏剣", price:300},
  {name："忍者刀", price:1200}
];
console.log(item[1]);
//結果:{name："忍者刀",price:1200}

console.log(item[1].price);
//結果:1200

オブジェクトを要素に持つ配列（2）: 配列と繰り返し処理

const items = [
  {name: "手裏剣", price: 300},
  {name: "忍者刀", price: 1200},
  {name: "爆竹", price: 200}
];

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  console.log("この武器は" + item.name+ "です");
  console.log(item.price + "円です");
}
結果
この武器は手裏剣です
300円です
この武器は忍者刀です
1200円です
この武器は爆竹です
200円です

存在しない要素を取得する: undefined

例①
const animals = ["dog","cat","sheep"];
console.log(animals[5]);
//結果:undefined
例②
const items = [
  {name："手裏剣",price:300},
  {name："忍者刀",price:1200},
  {name："爆竹",price:200},
  {name："ドラゴンボール"}
];

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  console.log("この武器は" + item.name+ "です");
  console.log(item.price + "円です");
}
結果
この武器は手裏剣です
300円です
この武器は忍者刀です
1200円です
この武器は爆竹です
200円です
この武器はドラゴンボールです
undefinedです

undefinedを避ける

ドラゴンボールの値段の値が指定されていなかった場合「値段は秘密です」にする。

例
const items = [
  {name: "手裏剣", price: 300},
  {name: "忍者刀", price: 1200},
  {name: "爆竹", price: 200},
  {name: "ドラゴンボール"}
];

for (let i = 0; i < items.length; i++) {
  const item = items[i];
  if (item.price === undefined) {
    //priceの値がundefined（定義なし）の場合
    console.log("値段は秘密です");
  } else {
    //priceの値はitem.priceの値となるようにする
    console.log(item.price + "円です");
  }
  console.log("この武器は" + item.name+ "です");
  console.log(item.price + "円です");
}
結果
この武器は手裏剣です
300円です
この武器は忍者刀です
1200円です
この武器は爆竹です
200円です
この武器はドラゴンボールです
値段は秘密です  ←非売品

総合演習①: 複雑なオブジェクト

例①
const character = {
  name: "にんじゃわんこ",
  favorite: {
    food: "ラーメン"
  }
};
console.log(character.favorite);
console.log(character.favorite.food);
結果
{food: "ラーメン"}
ラーメン
例②
const cafe = {
  name: "Progateカフェ",
  businessHours: {
    opening: "10:00(AM)",
    closing: "8:00(PM)"
  }
};

// 「店名:〇〇」を出力
console.log("店名：" + cafe.name);

// 「営業時間:〇〇から△△」を出力
console.log("営業時間: " + cafe.businessHours.opening + "から" + cafe.businessHours.closing);
結果
店名：Progateカフェ
営業時間: 10:00(AM)から8:00(PM)

総合演習②: オブジェクトの値に配列を用いる

例
const cafe = {
  name: "Progateカフェ",
  businessHours: {
    opening: "10:00(AM)",
    closing: "8:00(PM)"
  },
  // menusプロパティに配列を代入
  menus: ["コーヒー", "紅茶", "チョコレートケーキ"]
};

console.log(`店名: ${cafe.name}`);
console.log(`営業時間:${cafe.businessHours.opening}から  ${cafe.businessHours.closing}`);
console.log("おすすめメニューはこちら");

// for文を用いて配列menusの中身を表示
for (let i = 0; i < cafe.menus.length; i++) {
  console.log(cafe.menus[i]) ;
}
結果
店名: Progateカフェ
営業時間:10:00(AM)から8:00(PM)
おすすめメニューはこちら
コーヒー
紅茶
チョコレートケーキ

Progate JavaScript Ⅲ

関数 function と、関数を定義する

例
const introduce = function() {
  console.log("こんにちは");
  console.log("私はにんじゃわんこです");
}
//関数の呼びだし「定数名();」
introduce();
結果
こんにちは
私はにんじゃわんこです

アロー関数: =>

例
//「function()」を「() =>」に変える（同じ意味＆同じ使い方なので、結果も同じ）
const introduce = () => {
  console.log("こんにちは");
  console.log("私はにんじゃわんこです");
};
//関数の呼びだし「定数名();」
introduce();
結果
こんにちは
私はにんじゃわんこです

引数（ひきすう）

例①
const 定数名 = (引数名) => {

};
定数名(値);
例②
const introduce = (name) => {
  console.log("こんにちは");
  //「`（グレイブアクセント）」を使用。
  console.log(`私は${name}です`);
};
introduce("にんじゃわんこ");
introduce("ひつじ仙人");
結果
こんにちは
私はにんじゃわんこです
こんにちは
私はひつじ仙人です

複数の引数を受け取る関数

例①
const 定数名 = (第1引数, 第2引数, ...) => {

};
定数名(値1, 値2, ...);
例②
const introduce = (name,age) => {
  //「`（グレイブアクセント）」を使用。
  console.log(`私は${name}です`);
  console.log(`私は${age}歳です`);
};
//値は「,（コンマ）」で区切る
introduce("にんじゃわんこ",14);
結果
私はにんじゃわんこです
私は14歳です
例③文字列ではなく数字を値とする場合
const add = (number1, number2) => {
//number1とnumber2を足した値をコンソールに出力
  console.log(number1 + number2);
};
// 引数に5と7を渡して関数を呼び出し
add(5, 7);
結果
12

戻り値（もどりち）〜関数が戻り値を返す〜

例①
const 定数名 = () => {
  return 値;
};
例②
const add = (a,b) => {
  return a + b;
};
//aとbを足した値が戻り値として呼び出し元に帰る
例③
const add = (a,b) => {
  return a + b;
};
const sum =add(1,3);
console.log(sum);
//結果:4
例④
const half = (number) => {
  // numberを2で割った値を戻り値として返す
  return number / 2;
};

// 定数resultを定義する
const result = half(130);

// 「130の半分は〇〇です」となるように出力。「`（グレイブアクセント）」に注意。
console.log(`130の半分は${result}です`);

//結果:130の半分は65です

戻り値の活用

例
const check = (number) => {
// numberが3の倍数かどうかを戻り値として返す。3で割ったあまりが０。
return number % 3 === 0;

};

// if文の条件式で、checkを呼び出す
if (check(123)) {
console.log("3の倍数です");
} else {
console.log("3の倍数ではありません");
}
//結果:3の倍数です

スコープ

Progate JavaScript Ⅳ

クラス (1)

JavaScriptのライブラリ（React,Vue.js）を学ぶ上で重要
　まずはJavaScript Ⅱコースのオブジェクトを復習

例
const user = {name:"にんじゃわんこ",age:14}
console.log(user.age);
//結果:１４

オブジェクトの値の部分には関数を用いることもできる。

例
const 定数名 = {
  プロパティ名:() => {
  処理
  }
};
例
const user = {
  name:"にんじゃわんこ",
//アロー関数
  greet:() => {
  console.log("こんにちは！");
  }
};
//関数の呼び出し
user.greet();
//結果:こんにちは！
例
// 定数animalを定義する
const animal = {
  name:"レオ",
  age:3,
  greet:() => {
  console.log("こんにちは");
  }
};

// animalのnameプロパティの値を出力する
console.log(animal.name);
//結果:レオ

// animalのgreetプロパティの関数を実行する
animal.greet();
//結果:こんにちは

クラス (2)

//効率よくオブジェクトを作成していくための方法として、最初に「設計図」を用意する方法があります。
//例えばユーザーのデータをいくつも作成する場合、最初に「ユーザーを生成するための設計図」を用意し、
//その設計図をもとにユーザーのデータを生成（量産）していく、といったことができます。
//「設計図」のことをJavaScriptでは「クラス」と呼びます。
//図のように「class クラス名」とすることで新しくクラスを用意できます。なお、クラス名は基本的に大文字から始めるようにしましょう。
例
クラス名「Animal」を定義する。クラス名は大文字から始める。
class Animal { 
}

インスタンスの生成

//クラスから生成したオブジェクトをインスタンスと呼ぶ。


例：クラスからオブジェクトを生成する「new クラス名()」
class Animal { 
}
const animal = new Animal();
//Animalクラスのインスタンス「new Animal();」部分をAnimalインスタンスと呼ぶ。
console.log(animal);
//結果:Animal{}

コンストラクタ(1)コンストラクタについて

class Animal { 
　　constructor() {
　　　　console.log("こんにちわ！");
　　}
}
const animal1 = new Animal();
const animal2 = new Animal();
結果
こんにちわ！
こんにちわ！

コンストラクタ(2)プロパティと値を追加する

//例①
class Animal { 
　　constructor() {
　　this.name = "レオ";
　　}
}
const animal = new Animal();
console.log(animal.name);
結果
レオ

//例②
class Animal {
　　　constructor() {
　　　　　// nameの値に文字列「レオ」を代入
　　　　　this.name = "レオ";
    
　　　　　// ageの値に数値の「3」を代入
　　　　　this.age = 3;
　　　}
}

const animal = new Animal();

// 「名前: 〇〇」となるように出力
console.log(`名前: ${animal.name}`);

// 「年齢: 〇〇」となるように出力
console.log(`年齢: ${animal.age}`);
結果
名前：レオ
年齢：３

コンストラクタ(3)インスタンスごとに値を変える

コンストラクタ(2)例②の「レオ」や「３」は毎回同じ値になってしまう
→インスタンスごとに値を設定したい。
コンストラクタでは、「Javascript コースⅢ」で学んだ関数と同じように、引数を受け取ることが可能です。

//例
class Animal {
　//引数を受け取る
　　　constructor(name,age) {
　　　　　this.name = name;    
　　　　　this.age = age;
　　}
}
const animal = new Animal("レオ", 3);
console.log(`名前: ${animal.name}`);
console.log(`年齢: ${animal.age}`);
結果
名前： レオ
年齢： ３

メソッド(1)

メソッドとはそのインスタンスの「動作」のようなものです。名前や年齢などの「情報」はプロパティで追加したのに対して、メソッドは「挨拶をする」「値を計算する」などの処理のまとまりを表します。
情報・・・名前：レオ、年齢：３
動作・・・歩く、挨拶をする

```js:
//例①
class Animal { 
  constructor(name,age) {

　　}
　　greet() {
　　console.log("こんにちわ");
　　}
}
const animal = new Animal();
console.log(animal.name);
結果
レオ

メソッド(2)

//例
class Animal {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    console.log("こんにちは");
  }
  
  // infoメソッドを追加
  info() {
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

const animal = new Animal("レオ", 3);
animal.greet();

// animalに対してinfoメソッドを呼び出す
animal.info();
結果
こんにちは
名前はレオです
3歳です

Progate JavaScript Ⅴ
Progate JavaScript Ⅵ
Progate JavaScript Ⅶ
───────

Progate JavaScript Ⅳ

Progate JavaScript Ⅴ

Progate JavaScript Ⅵ

Progate JavaScript Ⅶ

↑↑↑↑↑↑↑ 編集リクエストの内容

0
0
2

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
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?