ProgateでJavaScriptを学習

この記事は9分で読めます

自分用メモ

随時追記していく

※参考:Progateとは?魅力や欠点、学習の順序や心得など
※参考:JavaScriptとは?出来る事やライブラリについて

学習コース JavaScript Ⅰ



①文字列と数値

console.log()
計算してみよう
文字列の連結



「console.log」と入力する


変数の更新




Let name=“join”;
consle.log(name);

name=“Kate”;

console.log(name);





Let number = 2;
Consoke.log(number);

Number = number + 3;
Console.log(number);



Let number = 2;


Number = number + 3;



②変数・定数

変数の役割
変数の値の更新
定数とは
テンプレートリテラル



定数はletの代わりにconstを用いて定義します


Const name = “join”;

変数(let)は1度代入した値を更新することが出来るが、
定数(const)は値を更新することが出来ない


Let name = “join”;
console.log(name);

name= “Kate”;
console.log(name);

Const name = “join”;
Consoke,log(name);



Conso



Console.log(language+“◯◯を話せます”);



★テンプレートリテラル
文字列や定数の連結には「+」記号を用いる
ES6では、これ以外の方法として「テンプレートリテラル」という方法がある
テンプレートリテラルを用いると、文字列の中に定数(変数)を埋め込む事が可能

Const name = “にんじゃわんこ”;
Console.log(‘こんにちは、${name}さん’);


Const name = “にんじゃわんこ”;
Const age = 14;
Console,log(‘${name}は${age]歳です’);





シングルクォート:’
バッククォート:





③条件分岐

if文
真偽値と比較演算子
else
else if
複数の条件式
switch文




Const number = 12;
If (number > 10){
console.log(“numberは10より大きいです”);
}

If文を書く時は、インデント(字下げ)をするように気をつkる
インデントを入れることで、ifの処理がどこからか一目でわかる




Const number = 12;
if(number > 10){
console.log(“numberは10より大きいです”);
}



console.log(number > 10);





a !==b:aとbが異なる




Const number = 12;
Console.log(number === 12);

Const name = “John”;
Console.log(name !== “John”)




条件が成り立たない場合の処理(else)


Const number = 7;
if(number > 10){
console.log(“numberは10より大きいです”);
}else{
console.log(“numberは10以下です”};
}



さらに条件を追加したい場合(else if)
Ifとelseの間に「else if(条件)」を追加することで
If文に条件分岐を追加することが出来る




Const number = 7;
if(number > 10){
console.log(“numberは10より大きいです”);
}else if(number>5){
console.log(“numberは5より大きいです”};
}else{
console.log(“numberは5以下です”};
}




複数の条件式①「かつ」(&&)
複数の条件がすべてtruneならtruneになる

X>10 && X<30
X>10 && X<30

複数の条件式②「または」(||:or)
複数のが条件のうち1つでもtrueならtrunbeになる

X<10 || X>30
X<10 || X>30



Const number = 31;
If(number >= 10 && number < 100){
console.log(“numberは2桁です”);
}





Switch文:ある値によって処理を分岐する場合に用いる
「switch(条件の値){処理}」とする事でswitch文を書くことが出来る

Const color = “赤”;
Switch(color){
case “赤”;
console.log(“ストップ!”);
break;
}


Const color = “赤”;
Switch (color){
case “赤”;
console.log(“ストップ!):
break;
case”黄”;
console.log(“要注意”);
break;
}

breakはswitch文を終了する命令
Breakがないと、合致したcaseの処理を行った後、その次のcaseの処理も実行してしまう
なので、switch文を使う際は、breakを忘れないようにする



★switch文のdefault
Switch文は、条件の値がcaseの値と一致したとき、その部分の処理が実行される
Caseのどれにも一致しなかった時、dafaultのブロックが実行される
defaultはif文のelseに似たようなもの

Const color = “黒”;
switch(color){
case”赤”;
case”黄”;
case”緑”;
default:
console.log(“colorの値が正しくありません”);
break;
}

学習コース JavaScript Ⅱ



①繰り返し処理

変数の復習
while文
for文


Let number = 1;
Console.log(number);

Number += 1;
Console.log(number);



繰り返し処理①(while文)



Let number = 1;
While (条件式) {
console.log(number);
number += 1;
}


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



繰り返し処理②(for)
For文は出来ることはwhile文と同じだが、
While文に比べてシンプルに書けるという特徴がある

Let number = 1;

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





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



For文では「変数の定義」「条件式」「変数の更新」の3つを括弧の中に書く
括弧の中ではそれぞれをセミコロン(;)で区切る


While文だと下に並んでるけど、
For文だと1つの括弧の中に全てが入っている


Number = number +1

Number +=1

number++


number=number-1
Number-=1
Number--


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


足し算の場合「number +=1」は、「number ++」のように省略して書ける
引き算の場合「number -=1]は、「number---」のよう省略して書ける
While文やfor文では、こうした省略した書き方を使ってコードを短くする事ができる




「3の倍数である」ということは、
“3で割った余りが0と等しい”という条件と同じ
なので3の倍数の式は「number % 3 ===0」となる





★これは間違い
// for文を完成させてください
for (let number =1;number <=100; number +=1) {

// if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力してください
if(number %3 = 0){
console.log("3の倍数です");
}else{
console.log(number);
}




★これは正解
// for文を完成させてください
for (let number = 1; number <= 100; number +=1) {
console.log(number);

// if文を用いて、numberが3の倍数の時に「3の倍数です」、そうでないときは数字を出力してください
if(number %3 ===0){
console.log("3の倍数です");
}else{
console.log(number);
}
}

②配列

配列とは
配列の要素の取得
配列の要素の更新
配列と繰り返し

★配列:複数の値をまとめて扱う方法について

Const fruit1 = “apple”;
Const fruit2 = “banana”;
Const fruit3 = “orange”;

「果物の名前」についての値がいくつもある時、
それぞれを定数(変数)として定義するより、
「果物の名前一覧」といったように関連する値を
まとめて管理すると便利


[“apple”, ”banana”, ”orange”]

[21, 43, 12]


配列に入っているそれぞれの値を「要素」と呼ぶ
配列を使うと、複数の文字列や数値をまとめて書くことが出来る



Const fruits = [“apple”, ”banana”, ”orange”]:

Console.log(fruits);

配列も1つの値なので、定数に代入する事ができる
配列を代入する定数名は、複数形にする事が多い(慣習上そうなっている)



★インデックス番号
配列の要素には、それぞれ「インデックス番号」がついてる
インデックス番号は、0から始まるので注意する


Const fruits = [“apple”, ”banana”, ”orange”]:

Console.log(fruits[0]);

Console.log(fruits[2]);


配列[インデックス番号]とすることで、配列の要素を取得できる



Const fruits = [“apple”, ”banana”, ”orange”];

Console.log(fruits[0]);

fruits[0] = “grape”;

console.log(fruits[0]);


配列は、要素に値を代入することで、その要素を上書きすることが出来る
(配列の要素の更新)




Const fruits = [“apple”, ”banana”, ”orange”];

配列に対して、繰り返し処理を行うことがしばしばある
For文を使って、配列の要素を順に取り出す方法を解説



Const fruits = [“apple”, ”banana”, ”orange”];

Console.log(fruits[0]);
Console.log(fruits[1]);
Console.log(fruits[2]);



Const fruits =[“apple”, ”banana”, ”orange”];

for(let i = 0; i < 3; i++){
console.log(fruits[Ii);
}


「変数i」がポイント
Forの()内は「iが0-2の間ループする」という意味
(Fruits[I])は、変数Iを用いて要素を取得している





Const fruits = [“apple”, “banana”, “orange”];
Console.log(fruits.length);



Const fruits = [“apple”, “banana”, “orange”];
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}




「配列.length」とすることで、配列の要素数を取得できる
また、lengthを用いれば、for文の条件式を書き換える事が可能となる
(これは配列の繰り返し処理でよく使うので、覚えておくこと )


【これを】
Const fruits = [“apple”, “banana”, “orange”];
for(let i = 0, i < 3; I++) {
console.log(fruits[I]);
}


【lengthを使う事で】

   ↓

【このように書き換える】
Const fruits = [“apple”, “banana”, “orange”];
for(let i = 0; i < fruits.length; i++){
console.log(fruits[i]);
}


③オブジェクト

オブジェクトとは
オブジェクトの値の取得・更新
オブジェクトを要素に持つ配列


★オブジェクト
オブジェクトは、配列と同じく複数のデータをまとめて管理するのに用いられる
配列は複数の値を並べて管理するのに対し、
オブジェクトはそれぞれの値に「プロパティ」と呼ばれる名前を付けて管理する


//配列
[値1, 値2, 値3]


//オブジェクト
{プロパティ1:値1, プロパティ2:値2}


{name:: ”手裏剣”, price: 300}


配列は[ ]で囲むが、オブジェクトは{ }で囲む:微妙な違いに注意
プロパティと値の間はコロン(:)でカオム
配列と同様、要素と要素はコンマ(,)で区切る



Const item = {name: “手裏剣”, price: 300};
Console.log(item);


オブジェクトも定数に代入する事ができる


★オブジェクトの値を取り出す


Const item = {name: “手裏剣”, price: 300};
Console.log(item.name);


オブジェクトの値を取り出すには、対応するプロパティ名を用いて
「オブジェクト.プロパティ名」のようにする



Const item = {name: “手裏剣”, price: 300};
item.price = 500;
Console.log(item.price);


「オブジェクト.プロパティ=新しい値」とすることで、オブジェクトの値を更新できる




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


[{プロパティ1:値1…},{プロパティ2:値2…}]



Const items = [
{name: “手裏剣”, price: 300},
{name: “忍者刀”, price: 1200}
];



配列は要素ごとに縦に書くことも出来る



配列の要素には、文字列や数値だけでなく、オブジェクトも使う事ができる
その際、コードが横に長くなることを防ぐために、
要素ごとに改行することがよくあるので、覚えておく



★配列の中のオブジェクトを取り出す


Const items = [
{name: “手裏剣”, price: 300},
{name: “忍者刀”, price: 1200}
];
Console.log(items[1].price);


配列の中のオブジェクトのプロパティの値を取り出すには
「配列[インデックス番号].プロパティ名」と書く

コンソールで出力する時は、セミコロン(;)を忘れずに!




Const characeters = [
{name: “にんじゃわんこ”, age: 14},
{name: “ひつじ仙人”, age: 1000},
{name: “ベイビーわんこ”, age: 5}
];




④undefined

undefinedとは
undefinedの対応


★undefinedを避ける

const characters = [
{name: "にんじゃわんこ", age: 14},

{name: "とりずきん"}
]

for(let i = 0; i < characters.length; i++){
const character = characters[i];
console.log('${character.age}歳です')
}



★undefinedとif文

const characters = […];
for(let i = 0; i < characters.length; i++){
const character = characters[i];
if(character.age === undefined){
//ageの値がundefined(定義されてない)時の処理
}else{
//ageの値が定義されてるときの処理
}
}

「character.age」の値が「undefined」と等しいかで処理を分岐する
テンプレートリテラルで囲む場合、文字列全体をバッククォート(
)で囲む必要がある

「テンプレートリテラル」の意味は以下を参照
※参考:クリエイティブ、プログラミング用語まとめ

⑤総合演習

★オブジェクトの値にオブジェクトを用いる

const character = {
name: "にんじゃわんこ".
age: 14,
favorite: {

food: "ラーメン",
sports: "卓球",
color: "若草色",
},
};

オブジェクトの値の部分には、文字列や数値だけでなく
オブジェクトを用いる事もできる
上記では「character」というオブジェクトの
「favorite」プロパティに対応する値に、オブジェクトを用いている

★オブジェクトを呼び出す

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

「オブジェクト名.プロパティ.プロパティ」のように呼び出す


const character = {
name: "にんじゃわんこ",
age: 1 4,
foods: ["ラーメン", "うどん", "焼きそば"]
};

「1つのプロパティ」に「複数の値」を当てはめる時、
配列も使うことが出来る



学習コース JavaScript Ⅲ



①関数とは



関数:「いくつかの処理をまとめたもの」

Const introduce = function() {
console.log(“こんにちは”);
console.log(“私はにんじゃわんこです”);
};

書き方としては「function()」と書き、その後ろの中括弧「{ }」の中に
まとめたい処理を書くことで関数を用意することができる
このように関数を用意することを「関数を定義する」と呼ぶ


★関数の呼び出し
Const introduce = function() {
console.log(“こんにちは”):
console.log(“私はにんじゃわんこです”);
};

//「2つのconsole.logを「introduce」という関数にまとめてるのか

introduce();

関数を定義した際に仕様した定数名を用いて
「定数名()」と書くことで関数の中の処理を実行できる
これを「関数を呼び出す」と言う


「関数の呼び出し」が分かったら、
「関数の定義」から書いてみる


Const introduce = function(){
console.log(“こんにちは”);
console.log(“私はにんじゃわんこです”);
};

②アロー関数



const introduce = function(){
console.log("こんにちは");
console.log("私はにんじゃわんこです");
}

→functionを用いた関数

const introduce = () => {
console.log("こんにちは");
console.log("私はにんじゃわんこです");
}

→アロー関数


「function()」の部分を「()=>」としても、
これまでと同じように関数を定義できる
これはES6から導入された新しい書き方で、
「function 」を用いるよりもシンプルに書ける
この関数の書き方を「アロー関数」と言う


const introduce = () => {
console.log("こんにちは");
console.log("私はにんじゃわんこです");
};

introduce();

アロー関数では、これまでの「function()」の部分を
「()=>」と書くこと以外は、定義方法は変わらない
呼び出し方も、これまで学習してきた関数と変わらない

ここからの演習問題では、
基本的にアロー関数の書き方を用いる

「=>」というのが矢(アロー)っぽいから
「アロー関数」と呼ばれてるのかな

「console.log()」の最後にはセミコロン(;)を忘れない
「console.log();」これが正しい書き方


③引数とは



★引数とは、関数に与える追加情報のようなもの
関数を呼び出すときに一緒に値を渡すことで、
関数の中でその値を利用することが出来る



const 定数名 = (引数名) => {
//処理
};


const introduce = (name) => {
//処理
};


「(引数名)=>」と括弧の中に引数名を書くことで、
引数を受け取る事ができる



const introduce = (name) => {
・・・
};
introduce("にんじゃわんこ");


引数を受け取る関数を呼び出すには「定数名(値)」と書く
関数は指定した値を受け取り、その値は引数に代入される
introduceの呼び出し時に「"にんじゃわんこ"」という値が渡され、
引数nameに代入される


const introduce = (name) => {
console.log("こんにちは");
console.log('私は ${name}です');
};
introduce("にんじゃわんこ");
introduce("ひつじ仙人");

引数は、関数内では定数や変数と同じように使用することが出来る



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

⑤戻り値とは

★様々な戻り値

const check = (number) => {
return number % 2 === 0;
}

console.log(check(6));
console.log(check(7));

戻り値も引数と同様、様々な値を用いる事ができる
if文で使うような条件式をreturnすると、
その条件式の結果として得られる真偽値(trueまたはfalse)を返す事ができる


★returnによる処理の終了

const add = (a,b) => {
return a + b;
console.log("計算しました");
}

returnは、戻り値を返すだけでなく、
関数の処理を終了させる性質も持っている
returnの後にある関数内の処理は実行されないので注意

⑥戻り値の活用

⑦スコープ

★関数の中の定数
関数の引数や、関数内で定義した定数や関数は、その関数の中ですか使う事ができない

const introduce = () => {
const name = "にんじゃわんこ"; //このnameは関数introduceの中で定義されてる
//ここでは定数nameは使える
}
//ここでは定数nameは使えない

上記のように、introduceの中で定義されている定数nameは、
関数introduceの中でしか使う事ができない
こうした、それぞれの定数や変数の使用できる範囲を「スコープ」と呼ぶ

const name = "にんじゃわんこ"; //このnameは関数introduceの外で定義されてる
const introduce = () => {
//定数nameが使えるスコープ
};
//定数nameが使えるスコープ

関数の外で定義した定数や変数は、関数の中でも使う事ができる
上の図では、定義nameは関数の外で定義されてるので、関数の中でも外でも使える


★関数以外のスコープ
→条件式の中でしか使えない?

if (条件式) {
const name = "にんじゃわんこ";
//定数nameが使えるスコープ
}
//定義nameが使えないスコープ

while (条件式) {
const name = "にんじゃわんこ";
//定数nameが使えるスコープ
}
//定数nameが使えないスコープ

関数だけでなく、ifやswitchなどの条件文、
forやwhileなどの繰り返し文などの、
中括弧「{}」を使う構文でもスコープを作る

⑧総合演習


学習コース JavaScript Ⅳ


①クラスの基本

クラスとは
インスタンスの生成
コンストラクタ
メソッド
メソッド内でのメソッド呼び出し

・オブジェクトの復習
★クラスを学ぼう
クラスはES6から新しく導入された文法
JavaScriptのライブラリ(React, Vueなど)を学習する上での必須知識

const user = {name: "にんじゃわんこ", age: 14};
console.log(user.age);

オブジェクトは上記のように、複数の値を
「プロパティ」という名前を付けて管理できるもの

★オブジェクトと関数

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

オブジェクトの「値」の部分には、関数を用いる事もできる
上記のように、プロパティの値として関数を記述する
また、この関数を読み出すには「定数名.プロパティ名()」とする
プロパティ名の後ろの()を忘れないようにする

const user = {
name: "にんじゃわんこ",
greet: () => {
console.log("こんにちは!");
}
};
user.greet();

上記の図では、オブジェクトの「greet」プロパティに対応する値に
関数(アロー関数)を用いている
そして、「user.greet()」とすることで関数が実行され、
コンソールに表示されている


オブジェクトと関数

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

オブジェクトの「値」の部分には、関数を用いる事もできる
その関数を呼び出すには「定数名.プロパティ名()」とする

const user = {
name. "にんじゃわんこ",
greet: () => {
console.log("こんにちは!");
}
};
user.greet();

上記の図では、オブジェクトの「greet」プロパティに対応する値に
関数(アロー関数)を用いている
そして「user.greet()」とすることで関数が実行され、
コンソールに表示される。

★オブジェクトを量産する
Webサービスでは、上記のオブジェクトをいくつも扱っている
こうしたデータは、毎回ゼロから作成していては大変なので、
似たようなデータを効率よく生成する方法を覚えていく必要がある。

★クラスとは
オブジェクトの設計図のこと。
この設計図をもとに、ユーザーのデータを生成していく。

class User {

}

「class クラス名」とすることで、新しくクラスを用意できる
クラス名は、基本的に大文字から始めるようにする。

ーーーーーーーーーーーーーーーーーー

★インスタンスの生成

class Animal {

}

const animal = new Animal();

クラスから生成したオブジェクトを「インスタンス」と呼ぶ
クラスからオブジェクト(インスタンス)を生成するには、
「new クラス名()」とする


★インスタンスの確認

class Animal {

}
const animal = new Animal();
console.log(animal);

ーーーーーーーーーーーーーーーーーー

★コンストラクタ
クラスには「コンストラクタ(constructor)」という機能が用意されている

class Animal {
constructor(){

}
}

コンストラクタは、インスタンスを生成する時に
実行したい処理や設定を追加するための昨日
クラスの中括弧{}内に「constructor(){}」と記述する


★コンストラクタの処理

class Animal {
constructor(){
console.log("こんにちは!");
}
}

const animal1 = new Animal();
const animal2 = new Animal();

コンストラクタの中には処理を記述できる
ここに書いた処理は、インスタンスが生成された直後に実行される
「インスタンスごとに毎回実行される」のが重要

class Animal {
constructor(){
this.name = "レオ";
}
}

const animal = new Animal();
console.log(animal.name);

コンストラクタの中で「this.プロパティ = 値」とすることで、
生成されたインスタンスにプロパティと値を追加できる

ーーーーーーーーーーーーーーーーーー

★インスタンスごとに値を変える

class Animal {
constructor(name, age){
this.name = name;
this.age = age;
}
}
const animal = new Animal("レオ", 3);

コンストラクタでは引数を受け取る事が可能
「constructor」の後のカッコ「()」内に引数名を記述する事で
その引数をコンストラクタの処理内で使用できる

コンストラクタに引数として値を渡すには
「new クラス名()」のカッコ「()」内に値を追加する
上記の図では、文字列「"レオ"」という値が引きストして渡され、
コンストラクタ内では「name」として使う事ができる

ーーーーーーーーーーーーーーーーーー

★メソッド
メソッドはクラスの重要な機能の1つ
インスタンスの「動作」のようなもの
プロパティでは、「名前」や「年齢」などの情報を追加するが、
メソッドでは「挨拶をする」「値を計算する」といった、処理のまとまりを表す

class クラス名 {
constructor() {
・・・
}
メソッド名(){
//行いたい処理
}
}

メソッドはクラスの中で定義する
「メソッド名(){}」とすることでメソッドを定義できる
メソッドは関数と似たようなもので、
中括弧「{}」の中に、そのメソッドで行いたい処理を記述する

class Animal {
info
}


②クラスの継承

継承とは
継承したクラスを使う
メソッドの追加
オーバーライド


備忘録メモ


プロジェクトマネージャー
ITコンサルなるには
IT派遣について

英語が出来ると外資系企業の案件も出来る
子供の教育のためにも大人が英語を身に付ける必要がある
※参考:英語学習まとめ

フリーランスで独立するためのプラン
→マナブログやピークスの記事
※参考:プログラミングの学習方法

まずは何でもいいので書いてみる
続いて背景を考えてみる:アウトプット先行の勉強法
※参考:本の読み方や抽象と具体の区別。対話とアウトプットの重要性など


迷ったら一度リセットして再度コード書いてみるといける時がある

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。