はじめに
この記事はプログラミング初学者の学習教材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 Ⅶ
↑↑↑↑↑↑↑ 編集リクエストの内容