JavaScript - engineerNaito

JavaScript

https://scrapbox.io/files/673e7789ca218ec7ef398950.svg

ローカルストレージ

#ローカルストレージ

ブラウザの #API

Window: localStorage プロパティ - Web API | MDN

code:javascript

// データ追加

localStorage.setItem("myCat", "Tom");

// アイテムの読み込み

const cat = localStorage.getItem("myCat");

// アイテムの削除

localStorage.removeItem("myCat");

// 全アイテムの削除

localStorage.clear();

プリミティブとオブジェクト

#プリミティブと #オブジェクト

#プリミティブは 7 種類

文字列

数値

BigInt

boolean

undefined

Symbol

null

#オブジェクトはそれ以外

プロパティとメソッドを持つ

クロージャ

関数が別の関数内で作成された場合、その外部関数のスコープにアクセスし続ける機能

code:closure.js

function init() {

var name = "Mozilla"; // name は、init が作成するローカル変数

function displayName() {

// displayName() は内部に閉じた関数

console.log(name); // 親関数で宣言された変数を使用

}

displayName();

}

init();

プロトタイプチェーン

#JavaScript のオブジェクト継承モデル

#JavaScript では別のオブジェクトに対するリンク、プロトタイプチェーンを持つ

それを辿ってプロパティやメソッドにアクセス

コールスタック

実行コンテキストを管理するスタックデータ構造

呼ばれるとスタックに積まれる

終了時に取り除かれる

タスクキュー

#非同期タスクの実行順序を管理するためのキュー

イベントループによりコールスタックが空になるとタスクキューから次の関数が実行される

Promise

Promise Promise_JavaScript

非同期操作を扱うためのオブジェクト

『イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理』

ガベージコレクション

#ガベージコレクション ( #GC )

オブジェクトを作成するときにメモリを確保

不要になったら削除

バンドラー

#バンドラー #bundler

#JavaScript #バンドルを行うツール

#Webpack や #Rollup など

no-bundle tool

#Vite とかのことらしい

検索してもあんまりピンと来なかった

Babel

#Babel

Babel is a JavaScript compiler.

次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするツール

ランタイム

JavaScript ランタイムランタイム

#JavaScript を実行する環境全般

#Node.js

#Deno

#Bun

ESModules と CommonJS

#ES_Module と #CommonJS ESM CJS

#ES_Module

#ES6 (ECMAScript 2015)で導入

文字列

文字列操作

String.prototype.includes()

String.prototype.match()

code:js

const paragraph = "The quick brown fox jumps over the lazy dog. It Barked.";

const regex = /A-Z/g;

const found = paragraph.match(regex);

console.log(found);

// Expected output: Array "T", "I"

正規表現に合致したものを配列に詰めて返す

配列

配列 Array

配列操作

Array.prototype.sort()

Array.prototype.splice()

in-place で既存の要素を取り除いたり、追加したりする

code:js

const months = "Jan", "March", "April", "June";

months.splice(1, 0, "Feb");

// Insert at index 1

console.log(months);

// Expected output: Array "Jan", "Feb", "March", "April", "June"

months.splice(4, 1, "May");

// Replaces 1 element at index 4

console.log(months);

// Expected output: Array "Jan", "Feb", "March", "April", "May"

Syntax

code:js

splice(start)

splice(start, deleteCount)

splice(start, deleteCount, item1)

splice(start, deleteCount, item1, item2)

splice(start, deleteCount, item1, item2, /* …, */ itemN)

オブジェクト

オブジェクト操作

Object.assign()

Object.assign() 静的メソッドは、すべての列挙可能な自身のプロパティの値を、 1 つ以上のコピー元オブジェクトからコピー先オブジェクトにコピーするために使用されます。変更されたコピー先オブジェクトを返します。

code:js

const target = { a: 1, b: 2 };

const source = { a: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);

// Expected output: Object { a: 4, b: 2, c: 5 }

console.log(returnedTarget === target);

スプレッド構文との違いは違いは target を破壊(変更)するかどうか

イテレータとジェネレータ

イテレータとジェネレータ · JavaScript Primer #jsprimer

Iterator と Generator

Iterator は for...of の背後で動く「順に値を取り出す」仕組み

Generator は順番に値を返せる関数を定義するための構文

配列とイテレータの違い

配列を使う場合は全ての要素をメモリに格納してから処理を開始する

それに対して Iterator は必要になったタイミングで値を生成する

code:js

// 配列：すべての数値を一度にメモリに作成

const nums = [];

for (let i = 0; i <= 5000; i++) {

nums.push(i);

}

// 配列のサイズ

console.log(numbers.length);

// すべてのデータがメモリに存在している

console.log(numbers.slice(0, 5));

// イテレータ: 必要な時に生成

function* numsGen() {

for (let i = 0; i <= 5000; i++) {

yield i; // 値を 1 つずつ生成

}

const iter = numsGen();

console.log(iter.next().value); // 1

console.log(iter.next().value); // 2

Iterator: 遅延評価(lazy evaluation)

配列: 先行評価(eager evaluation)

Iterable

Symbol.iterator は JavaScript の組み込み Symbol の 1 つ

オブジェクトが Iterrable であることを示す特殊なキー

code:js

const iterableObj = {

Symbol.iterator() {

return { /** Iterator の実装 */ }

};

Iterator プロトコル

Iterator プロトコルを実装するオブジェクトは next() メソッドを持つ必要がある

code:js

const { value, done } = iterator.next();

console.log(value); // valeu: 次の値

console.log(done); // done: 完了かどうか