Progateを使ってJavaScriptを学ぶコース２
プロゲートはプログラミングが学べるサービスになります。今回のコース２からはおそらく有料会員にならないと先に進めなくなると思います。もし全開の内容がどういうものかみたい人はこちらの記事をごらんだください↓
ProgateでJavaScriptを学ぶ【コース１は文字列、数値、変数、条件分岐】
本で学びたいっていう方はこちらの本をおすすめします。
サイ本という有名な本があるのですが、最初のうちは読んでもわからない可能性が高いので、「JavaScript Web開発パーフェクトマスター」のほうが図とかあってコードもみやすいですし、サンプルコードも結構のっているのでおすすめです。
それではコース２の内容をかいていきます。
繰り返し処理
繰り返し処理は何度も同じコードを書いているときついので同じような処理をさせたいときに繰り返しを行います。繰り返しの構文はwhileやfor文などがあります
while
javascriptのwhile文は条件式が真の間のときだけ繰り返しが実行されます。具体的には
【 while(条件式){} 】のように記述します。条件式が真のときだけ{}なみかっこブロックの処理がされるということです。while文を使うときはだいたいカウンターを最初に宣言することがおおいです↓。
let number = 1;
while(number <= 100){
console.log(number);
number++;
}
for文
javascriptのfor文も繰り返しをおこなうために使います。具体的には
【 for(let 変数名 = 1; 条件式; 変数の更新;){} 】のように記述して{}ブロックの中に処理を書いていきます。もしかすると最初は難しく感じるかもしれませんが。for文もwhile文も同じで条件式が真の間だけ繰り返しが実行されるということが重要です。letは変数宣言をおこなうための構文です。
for(let number = 1; number <= 100; number++){
number++
console.log(number);
}
配列
配列とは複数の値が入っている箱のようなものです。
Javascriptの配列はとくに{}なみかっこを使ったりすることはありません。javascriptの配列は[,,]中かっこを使って値をカンマ区切りで記述していきます。javascriptでは変数宣言のときにletもしくはvarをつけるようにするので書き方は
【 let animals = [“tanaka”, “suzuki”, “higuti”]; 】のような書き方になります。配列はインデックス番号といって最初の値が0番からはじまるようになっています。例えば”tanaka”は0番 “suzuki”は1番というようにはじめからきまっています。
const animals = ["dog", "cat", "sheep"]; console.log(animals[0]);//dog console.log(animals[2]);//sheep
配列へのアクセス
配列へのアクセスは
【 配列名[インデックス番号] 】というように書きます。さきほどもかいたとおりインデックス番号は先頭が0番ではじまるのでインデックス番号に対応した値が出力されるというわけですね。
配列の要素の更新
配列の要素を更新したいときはさきほどのように
【 配列名[インデックス番号] 】のように新たに値を代入します。
【 配列名[インデックス番号] = “rabit”; 】
const animals = ["dog", "cat", "sheep"]; animals[2] = "rabbit"; console.log(animals[2]);//rabbit
繰り返し構文を用いて配列の要素を取り出す
for文を使って配列を取り出すのはよくやる作業です。lengthプロパティは配列の要素数を返します。これを条件式で用いることによってあますことなく配列の要素を取り出すことができます。
let animals = ["ぞう", "きりん", "かば"];
for(let i = 0; i < animals.length; i++){
console.log(animals[i]);
}//ぞうきりんかば
animals[i]の部分はiの値が入っていますiの値は++のカウントが増えていくのであますことなく配列の要素を取り出せます。
オブジェクト
JavaScriptのオブジェクトは キーと値が複数のセットになっている箱のようなものです。書き方は
【 let オブジェクト名 = {キー名: 値}; 】のように書きます。{}なみかっこを使って書くのがポイントでキーには””ダブルクォーテーションは使いません。値は数値だったり文字列だったりとさまざまです。
const character = {name: "にんじゃわんこ", age: 14};
console.log(character);
オブジェクトの値にアクセスする
オブジェクトの値にアクセスする方法は２種類存在します。ピリオドを使ってアクセスする方法と、[“”]中かっことダブルクォーテーションを使ってアクセスする方法です。JavaScriptではピリオドを使ってオブジェクトの値へアクセスするのが主流なようなのでピリオドを使ったほうがいいかもしれません。具体的には下記のようにします。
【 オブジェクト名.オブジェクトのキー名 】
【 オブジェクト名[“オブジェクトのキー名”] 】
前者を使ったほうがよいでしょう。値の更新も配列と同じように値を再代入します。
const character = {name: "にんじゃわんこ", age: 14};
console.log(character["name"]);//にんじゃわんこ
console.log(character.name);//にんじゃわんこ
character.name = "にんじゃねこ";
console.log(character);//{ name: 'にんじゃねこ', age: 14 }
オブジェクトの宣言にconstを使っていますが必須ではりません。
オブジェクトをもった配列
配列の要素がオブジェクトというシーンもあります。この場合オブジェクトにアクセスするには下記のようにアクセスします。
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "ひつじ仙人", age: 1000}
];
console.log(characters[0]);//{ name: 'にんじゃわんこ', age: 14 }
console.log(characters[1].name);//ひつじ仙人
オブジェクトをもった配列からfor文で要素を取り出す
ちょっと難しいですが、for文でまわすと以下のようになります。出力結果はのせていません。
const characters = [
{name: "にんじゃわんこ", age: 14},
{name: "ひつじ仙人", age: 100},
{name: "ベイビーわんこ", age: 5},
];
for (let i = 0; i < characters.length; i++) {
console.log("--------------------");
const character = characters[i];
console.log("名前は" + character.name + "です");
console.log(character.age + "歳です");
}
undefined
JavaScriptは存在しない値にアクセスすると undefined を返します。
let obj = {name: "tanaka", age: 20}
console.log(obj.score);//undefined
undefinedを避ける方法
if文を使ってundefinedであるかどうかを判定して出力することでundefinedを避けることができるようです。下記の構文はあまり意味のない構文ですが例としてかきます。
let obj = {name: "tanaka", age: 20}
if(obj.score === undefined){
console.log("スコアはありません");//undefinedは表示されずこれが表示される
}else{
console.log("スコアは" + obj.score + "です");
}
オブジェクトの中にオブジェクト
複数のオブジェクトになると難しくなっているのですが キー名を.ピリオドでつないでいくことで値にアクセスできると覚えておけば結構わかりやすいかもしれません。キー名を意識することが重要ですね。どんどんキー名をつないでいくイメージです。
const cafe = {
name: "Progateカフェ",
businessHours: {
opening: "10:00(AM)",
closing: "8:00(PM)"
}
};
//店名:Progateカフェ
console.log("店名:" + cafe.name);
//営業時間:10:00(AM)から8:00(PM)
console.log("営業時間:" + cafe.businessHours.opening + "から" + cafe.businessHours.closing);
Progate JavaScriptコース2まとめ
JavaScriptnコース２結構長かったですね。今回学んだ内容は以下のようなものでしょうか
- 配列
- 繰り返し
- オブジェクト
気になるところはオブジェクトの部分でした。JavaScriptのオブジェクトはキー名にダブルクォーテーションをつけない。他の言語はキー名にダブルクォーテーションをつけるものもあります。オブジェクトの値へアクセスする方法は２つありますが絶対にピリオドを使ったほうがいいですね。とくにオブジェクトの中にオブジェクトがあるような例だとピリオドを使わないと大変そうです。
その他はundefinedが気になりましたがnullのかわりにあるものなのかというとそうでもないみたいです。あまり細かい話をしてもしょうがないのでこれで終わりにします。
コメント