はじめに

『JavaScript Primer』を読んだので、その感想をまとめていきます！

良かったところ

わかりやすい解説

基本的な知識から、少し進んだところまで説明がされていますが、どの解説もわかりやすいです。

ソースコード例が豊富

わかりやすい解説にも絡みますが、解説している文法を使用したコード例の種類が豊富です。
さらにオンラインだと、そのソースコード例についている『実行』のボタンを押すと、実行ができます。
実行後は、webコンソールに入力が可能なので、ここ少し変えてみたらどうなるかな？などを簡単に試せます。
解説を読むだけでなく、ソースコード例を参考にしつつ手を動かせるので、理解を深めることができるのがとても良いなと思いました。

学んだこと

ループと反復処理

基本的なループ(whileやfor)は知っていましたが、配列のsomeメソッドやfilterメソッドはこの本で知りました。

配列のsomeメソッド

マッチする要素があるならtrueを返し、存在しない場合はfalseを返すメソッド。

const colors = [
    { "color": "yellow" },
    { "color": "blue" },
    { "color": "pink" }
]

const isIncludePinkColor = colors.some((obj) => {
    // ccolors配列の中で、colorプロパティにpinkのオブジェクトがあるかどうか。ある場合はtrueを返す
    return obj.color === "pink";
});

// pinkがあるので、出力: true
console.log(isIncludePinkColor);

配列のfilterメソッド

配列の要素を順番にコールバック関数へ渡し、関数がtrueを返した要素だけで、新たに配列を返すメソッド。

const array = [1, 2, 3];

// filterメソッドの引数は要素、インデックス、配列
const newArray = array.filter((currentValue, index, array) => {
    // 奇数の場合trueのため奇数要素のみの配列が作成される
    return currentValue % 2 === 1;
});

console.log(newArray);  // 出力: [1, 3]

オブジェクト

オブジェクトとオブジェクトに対する様々な操作について学びました。

オブジェクトはプロパティの集合です。
プロパティとは名前(key)と値(value)が組みになったもののことです。

// キーは文字列またはSymbol、値は任意のデータを指定可能
const obj1 = {
    "key1": "value1",
    "key2": "value2"
};

const obj2 = {
    key1: "value1",
    key2: "value2"
};

プロパティの追加

プロパティを追加します。

// 空のオブジェクト
const obj = {};

// key1プロパティを追加して"値"を代入
obj.key1 = "ドット記法で追加";
console.log(obj.key1); // 出力: ドット記法で追加

obj["key2"] = "ブラケット記法で追加"
console.log(obj["key2"]);　// 出力: ブラケット記法で追加

プロパティの削除

プロパティを削除します。

const obj = { key1: 'ドット記法で追加', key2: 'ブラケット記法で追加' }

// key1プロパティを削除
delete obj.key1;

console.log(obj); // 出力: { key2: 'ブラケット記法で追加' }

プロパティの存在確認

指定したプロパティが存在するかを確認します。

const obj = {};

// 存在しないプロパティに対してアクセスした場合`undefined`を返す
console.log(obj.key1); // 出力: undefined

obj.key1 = "値";

// in演算子で存在確認
if ("key1" in obj) {
    // key1プロパティを持っているならtrueを返す
    console.log("key1プロパティが存在する");
}

// Object.hasOwn静的メソッドで存在確認 ※ES2022で導入されたメソッド
Object.hasOwn(obj, "key2"); // 出力: false(objはkey2プロパティを持たないため)

// Optional chaining演算子で損z内確認(?.)
console.log(obj?.key1); // objのkey1プロパティは存在するので、その値である`値`が出力
console.log(obj?.key2); // objのkey2プロパティは存在しないので`undefined`が出力

オブジェクトのマージ

Object.assignメソッドでオブジェクトを別のオブジェクトに代入できます。空のオブジェクトに代入することで、オブジェクトを複製もできます。

const objA = { key1: "value1" };
const objB = { key2: "value2" };
const merged = Object.assign({}, objA, objB);
console.log(merged); // 出力:  { key1: 'value1', key2: 'value2' }

HTTP通信

Fetch APIを使用したHTTP通信の方法を学びました。
Fetch APIはHTTP通信を行ってリソース取得するためのAPIで、このAPIを使用することで、ページ全体を再読み込みすることなく指定したURLからデータを取得できます。

fetch(url)
    .then(response => {
        console.log(response); // 出力: 指定したURLから返ってきた、内容を表示
        console.log(response.status); // 出力: 指定したURLから返ってきたstatusを表示
    });

エラーハンドリング

fetch(url)
    .then(response => {
        console.log(response.status);
    }).catch(error => {
        console.error(error); // ハンドリングしたエラーを表示
    });

難しかったこと

第二部: 応用編(ユースケース)のTodoアプリ作成

一通り読みながらTodoアプリ作成をしましたが、難しかったです……、、、
すべて理解できているわけではないので、何度か読み返して、理解をしていきたいと思います。

まとめ

内容が盛り沢山で学んだことをすべてまとめようとすると、量が多かったので一部をまとめてみました。
javascriptで困ったときは、該当箇所を読み返して、理解を深めていきたいと思います。

em's note

『JavaScript Primer』を読みました！