Progate内のコンテンツ「はじめてのWeb開発コース」で、mosyaサイトを使ってJavaScriptの演習問題を13問解きました。
今回はその中で新しく学んだことや、得た気づきをまとめていきます。
mosyaで実際に自分で考えながらコーディングすることで、あいまいな理解で終わっていた点があぶりだされて非常に良かったです…！
mosya演習サイト：https://prog-8.com/courses/feature/web-dev-intro
基礎知識
1. アロー関数の書き方
function を用いて書くよりすっきり記述することができる。
let 変数名 = (引数1, 引数2, ...) => {
処理
...
return 戻り値
}
2. if文条件式の論理演算子の種類
- 論理和は A || B 論理積は A && B 否定は !A
- 条件式にtrue/falseのboolean型変数を設定したときは、変数を入れるだけで勝手に条件分岐する（変数 === true / false と書く必要が無い）
3. for文の便利な書き方
let 変数 of 配列 で配列から1要素ずつ取り出して変数Aに格納し、処理を行うことができる
const array = [1, 2, 3];
for (let A of array) {
A = A * 2;
console.log(A);
}; // 2, 4, 6
4. コールバック関数とは？
親関数に引数として渡され、特定のタイミングで実行される関数のこと。
「おなかを満たす」という関数の中に「料理する」「Uberする」「実家に行く」などの選択肢があって、その時々に使うのがコールバック関数というイメージ。
const cooking = () => {
return "料理する";
}
const uber = () => {
return "Uberする";
}
const zikka = () => {
return "実家に帰る";
}
const onakaippai = (options) => {
return options();
}
console.log(onakaippai(cooking)); //料理する
console.log(onakaippai(uber)); //Uberする
console.log(onakaippai(zikka)); //実家に帰る
親関数で用いる引数は自分で定義する必要はなく、好きな名前を付けられる。
5. テンプレートリテラル
文字列を`（バッククォート）で囲むと改行もそのまま取り込むことができる
let greeting = `おはようございます。
今日のあなたの運勢は 大吉 です。
今日も一日がんばりましょう！`
console.log(greeting);
// おはようございます。
// 今日のあなたの運勢は 大吉 です。
// 今日も一日がんばりましょう！
${}で式を囲めば文字列内でも変数や式を使うことができる
let name = `ユーザー`;
let greeting = `おはようございます、${name}さん。
今日も一日がんばりましょう！`
console.log(greeting);
//おはようございます、ユーザーさん。
//今日も一日がんばりましょう！
6. 配列とオブジェクトの違い
//配列
const array = ["apple", 21, "banana", "甘栗"];
//オブジェクト
const person = {name: "Hanako", age: 18, favorite: "甘栗"};
console.log(array[2]); //banana
console.log(person.favorite); //甘栗
ChatGPT先生がわかりやすくまとめてくれたのでそれも載せます👇
| 配列（Array） | オブジェクト（Object） | |
|---|---|---|
| データの管理方法 | 順番（インデックス） | 名前（キー） |
| アクセス方法 | array[0] | object.key or object["key"] |
| 適した用途 | リスト・コレクション | データの属性管理 |
| 順番の保証 | あり | なし（順番に依存しない） |
7. 再帰関数について
関数の中で自分自身を指定することで処理を省略できるケースがある。
const recursion = (x) => {
if (x > 0) {
console.log(x);
recursion(x - 1);
}
}
recursion(10);
// 10, 9, 8, 7, 6, 5, 4, 3, 2, 1
メソッドの知識
1. findメソッド
配列の中から条件に合致する最初の値を返却する。
const array = [12, 25, 46, 90];
const 偶数 = array.find((youso) => youso % 2 === 0);
console.log(偶数); //12
最初の当てはまる要素を返すという点に注意。
2. pushメソッド
配列の最後尾に要素を追加する。
const array = [12, 25, 46, 90];
array.push(123);
console.log(array); //[12, 25, 46, 90, 123]
3. foreach / mapメソッド
配列の各要素を取り出して処理を行うことができる。
foreachメソッドは処理を行うだけ、なのがポイント。
処理後の新しい配列を返したいならmapを使うのが良い。
const array = [1, 2, 3];
const double = array.map((element) => {
element = element * 2;
return element;
}
)
console.log(double); //[2, 4, 6]
4. includesメソッド
配列の中から特定の文字や値を含むかどうか調べ、含むならtrue、含まないならfalseを返す。
const array = ["ハズレ", "ハズレ", "ハズレ", "あたり", "ハズレ"];
const 判定 = array.includes("あたり");
console.log(判定); //true
5. repeatメソッド
文字列を指定した回数だけ繰り返すことができる。
const str = "repeat / ";
console.log(str.repeat(3)); // repeat / repeat / repeat /
まとめ
Progateが「JavaScriptでこんなことができるんだ！」というのを知るのに最適なコンテンツだとしたら、mosyaではそれを実際に使えるレベルまで持っていける、という感じでした。
いろいろな演習問題に触れていくうちに、学んだことが少しずつ繋がってきて理解が深まったように思います。
引き続き、JavaScriptの勉強を続けていきます！