slice()

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

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

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

replace()

replace(”from” , “to”)

• 新しい文字列を返す（更新するわけではない）

• グローバルに置換（ = 文中のすべての一致部分を置換）する場合は gを使う

  • replace(/a/g , "b")：文中の「a」を「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(callbackFn)は条件が一致した「最初の要素」を返す

• includes()：

  • true / falseを返す。

  • filter()と違いcallbackFnを引数に取れず、検索したい「値」を受け取る。

HTMLCollectionとNodeList

const postTitles = document.getElementsByClassName("post-title");

for (const titleEl of postTitles) {
  console.log(titleEl.textContent);
}

• getElementsByClassName()で要素を取得した場合「HTMLCollection」という配列っぽいものがとれる

  • HTMLCollectionは配列ではないのでmapやforEachが使えないのでfor ofを使う

• querySelectorAll()で取得できる「NodeList」も配列ではないのでmapは使えないため、for ofを使う

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

const postTitles = document.getElementsByClassName("post-title");

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

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

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()] でラップする

配列の結合

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

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

concat()：

let arrC = arrA.concat(arrB)

push：

arrA.push(...arrB)

スプレッド構文：

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

node_moduels

node_modulesはpackage.jsonに書かれた依存パッケージが置かれるフォルダ

• ライブラリ本体 + そのライブラリの依存パッケージが入る。

• import z from "zod"はnode_modules内のコードを参照している。

クライアントサイドのコード：

• node_modules から import している依存関係はビルド時にまとめてバンドルされる。

• デプロイ後にブラウザで動くのは バンドルされたJSファイルなので本番環境で node_modulesフォルダは不要

サーバーサイドのコード：

• Node.js上で直接ライブラリを実行するので、デプロイ後もnode_modules が必要

res.ok

• HTTP ステータスコードが 200〜299 の場合は true、それ以外は false

• try/catch：fetch()でHTTPエラーがあったとしてもでcatchには流れないので、res.ok で流す必要がある。CORSやネットワークエラーはcatchに行く。

previewURL

URL.createObjectURLでpreviewURLを作成すると一時的なURLとして画像を表示できる。これを使わない場合はstorageに画像をuploadしてURLを取得するプロセスが必要になる。

  const [file, setFile] = useState<File | null>(null);
  const [createUrl, setCreateUrl] = useState<string | null>(null);

  useEffect(() => {
    return () => {
      if (createUrl) {
        URL.revokeObjectURL(createUrl); 
      }
    };
  }, [createUrl]); 

---
      <input
        type="file"
        multiple={false}
        onChange={(e) => {
          setFile(e.target.files[0]);
          setCreateUrl(URL.createObjectURL(e.target.files[0]));
        }}
      />

      <Image
        src={createUrl || "/test.png"}
        width={200}
        height={200}
        alt="Uploaded Image"
        className="rounded-lg shadow-lg"
      />