覚えておいたほうが良いことを追加

slice()

slice(開始インデックス , 終了インデックス)

引数１つ：引数以降のものを抽出

const images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
const newImages = images.slice(1)

// newImages：["image2.jpg", "image3.jpg", "image4.jpg"]

引数２つ：１つ目のインデックスから２つ目のインデックス −1まで

const images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
const newImages = images.slice(1, 3);

// newImages：['image2.jpg', 'image3.jpg']

replace()

replace(”これを” , “こっちに置換”)

新しい文字列を返す（更新するわけではない）
グローバルに置換（ = 文中のすべての一致部分を置換）する場合は gを使う
- 例：文中の「a」を「b」に変更
  replace(/a/g , "b")

push() / pop()

push()：末尾へ追加 <--> pop()：末尾から削除

unshift <--> shift は「先頭」版

filter(callbackFn)

条件に当てはまるものを全て含んだ「配列」として返す

const articles = [
  { title: "aaa", cat: "html" },
  { title: "bbb", cat: "css" },
  { title: "ccc", cat: "js" },
  { title: "ddd", cat: "html" },
];

const htmlArticles = articles.filter((article) => {
  return article.cat === "html";
});

console.log(htmlArticles);
// [ { title: 'aaa', cat: 'html' }, { title: 'ddd', cat: 'html' } ]

<--> find(callback)は条件が一致した「最初のもの」を要素として返す

includes()

「true/false」を返す
引数は検索したい「値」なので、filter()と違いcallbackFnを引数に取れない

const categories = articles.map(article => article.cat);

const result = categories.includes("html");
console.log(result); // true

分割代入

オブジェクト

 const person = {
  name: 'Alice',
  age: 30,
  city: 'Tokyo'
};

// オブジェクトから値を取り出す
const { name, age, city } = person;

Reactのprops：

const UserProfile = ({ user }) => {
  const { name, age , email } = user;
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
};

プロパティに新しい変数名をつけて取り出す：

const product = { price: 122, name: "hog" };

const { price, name: item } = product;

配列

const arr = [1, 2, 3];
const [hog, fas] = arr;

console.log(hog, fas); //1 2

オブジェクトと違いプロパティ名は適当で良く、インデックス順に表示される

ネストされた配列：

const arr = [
  [3, 412],
  [342, 321],
];
const [[num1], [num3]] = arr;

console.log(num1, num3); // 3 342

残余引数：残りのすべてをまとめて1つの配列として受け取る

const arr = [1, 2, 3, 4, 5];

const [num1, ...numOther] = arr;

console.log(num1) // 1
console.log(numOther) // [ 2, 3, 4, 5 ]

for...of

for (const variable of iterable)

iterable：反復可能オブジェクト（ = 文字列や配列）

配列の反復：

const arr = [1, 2, 3, 4, 5, 6];

for (const num of arr) {
  console.log(num); // 1 2 3 4 5 6
}

文字列の反復：

const str = 'Hello';

for (const char of str) {
  console.log(char); // 'H', 'e', 'l', 'l', 'o'
}

HTMLCollection と NodeList

const text = document.getElementsByClassName("text");

for(const txt of text) {
  console.log(txt.textContent);
}

getElementsByClassName()等で要素を取得した場合「HTMLCollection」という配列っぽいものがとれる
- --> HTMLCollectionは配列ではないのでmapやforEachが使えないのでfor ofを使う
querySelectorAll()等で取得できる「NodeList」も配列ではないのでmapは使えずfor ofを使う（*NodeListの場合はforEachが使える）

HTMLCollectionやNodeListにmapを使いたい場合： Array.from()やスプレッド演算子で配列にしてから行う

const texts = document.getElementsByClassName("text"); // textsはHTMLCollection


// Array.from()で配列に
const array1 = Array.from(texts);
array1.map((text) => {
  console.log(text.textContent);
});


// スプレッド演算子で配列に
const array2 = [...texts];
array2.map((text) => {
  console.log(text.textContent);
});

JSON.stringify() / parse()

JSON.stringify()

JavaScriptのオブジェクトや配列をJSON形式の文字列に変換

JSON.parse()

JSON形式の文字列をJavaScriptのオブジェクトや配列に変換

fetch()のres.json()：

fetch("https://api.example.com/data")
  .then((response) => response.json()) // response.json() が内部で JSON.parse() を使用
  .then((data) => {
    console.log(data); 
  })

レスポンスボディの読み取り:
response.json() を呼び出すと、まずレスポンスボディが読み取られ、テキスト形式のJSON文字列が得られます。
JSON文字列の解析:
次に、その文字列が JSON.parse() を使ってJavaScriptオブジェクトに変換されます。これにより、文字列で表現されたJSONデータがオブジェクトとして操作できるようになります。

response.json() はレスポンスのテキストを読み取ってJSON文字列を取得し、その後 JSON.parse() を使用してオブジェクトに変換するという二段階のプロセスを経ている

flatMap(callbackFn)

配列をmapしたときにmapする要素が配列だった場合、配列を（最大１つまで）外して出力する。

const posts = [
  { id: 1, tags: ['JavaScript', 'React'] },
  { id: 2, tags: ['JavaScript', 'Node.js'] },
  { id: 3, tags: ['React', 'CSS'] }
];

const allTags = posts.flatMap(post => post.tags);
console.log(allTags); // ['JavaScript', 'React', 'JavaScript', 'Node.js', 'React', 'CSS']

*flatMapは重複は取り除かないので、被り無しにしたいなら [...new Set()] でラップする

Object.keys(obj) / Object.values(obj)

Object.keys() と Object.values() は、JavaScript のオブジェクトからキーや値を抽出するためのメソッド
objectのkey/valueが配列で出力される

const obj = { a: 1, b: 2, c: 3 };


const keys = Object.keys(obj);
console.log(keys); // ['a', 'b', 'c']

const values = Object.values(obj);
console.log(values); // [1, 2, 3]

Object.entries(obj)：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]

key/valueのセットで配列を取得

配列の結合

let arrA = [1, 2, 3];
let arrB = [4, 5, 6];

以下すべて[ 1, 2, 3, 4, 5, 6 ] になる

1 . concat()

let arrC = arrA.concat(arrB)

2 . push

arrA.push(...arrB)

3. スプレッド構文

let arrC = [...arrA , ...arrB]

スプレッド構文（...）を使うと、配列の要素を「展開」することができる

let arrA = [1, 2, 3];
let arrB = [4, 5, 6];

console.log(...arrB);
// 4 5 6

配列のコピー

const arr = [1, 2, 3, 4, 5, 6];
const arr2 = [7, 8];

const arr3 = [...arr, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

[...array] だと新しい配列としてコピーできるので元の配列に影響を与えない

const arr = [1, 2, 3, 4, 5, 6];

const arr2 = arr
arr2.push(7,8)
console.log(arr);　// [1, 2, 3, 4, 5, 6, 7, 8]

push()だと元の配列が変更される

オブジェクト

オブジェクトにスプレッド構文を使うと、元のオブジェクトを変更せずに値を操作できる

デフォルト/ 名前付きexport

export default：デフォルトexport

インポートする際に任意の名前を使える
１つのファイル内でデフォルトexport を複数宣言することは出来ない

export const：名前付きexport

モジュールから複数のエクスポートが可能
インポートする際にはエクスポートされた名前を正確に使う
名前を変える場合は as を使う
- import { component as comp } from

export default と export const は１つのファイルに同時に存在していても問題はない

node_moduels

クライアントサイド

node_modules から import している大量の依存関係がビルド時にまとめてバンドルされる
デプロイ後にブラウザで動くのはバンドルされたJSファイルなので本番環境で node_modules は不要

サーバーサイド

Node.js 上で直接ライブラリを require / import して実行するので、デプロイ後も node_modules にあるライブラリを参照する為、本番でも node_modules が必要

res.ok

  const res = await fetch("/api/data");
  
  if (res.ok)

HTTP ステータスコードが 200〜299 の場合は true、それ以外は false なので、簡単に成功/失敗を判定できる

then()とtry/catch

fetch("url")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => console.log("done"));

then() を使うと関数を定義・実行する部分を書かなくて済む

try {
  const res = await fetch("url");
  const data = await res.json();
  console.log(data);
} catch (err) {
  console.error(err);
} finally {
  console.log("done");
}

await で値が返るまで待つので、変数に代入してその後の処理に使いやすい

JavaScript :