可変長引数の関数はレストパラメータを使って書ける

アロー関数は

• thisの挙動が違う
• 短く書ける
• arguments引数を参照できない

オブジェクトのキー名にハイフンを使いたい場合は""で囲む

Object.prototypeに定義されているメソッドをプロトタイプメソッドと呼ぶ。
Objectのインスタンスは、このプロトタイプメソッドをを継承する。
このように、オブジェクトなどからプロトタイプメソッドを参照できることをプロトタイプチェーンと呼ぶ

バッククォートを使うことで文字列の中に改行をそのまま書ける

for文の実行順序は

1. 初期化式 で変数の宣言
2. 条件式 の評価結果がtrueなら次のステップへ、falseなら終了
3. 実行する文 を実行
4. 増分式 で変数を更新
5. ステップ2へ戻る

for...in文はオブジェクトのプロパティに対して、反復処理を行う。
for...in文は、親オブジェクトまで列挙可能なものがあるかを探索して列挙する。
そのため、意図しない結果になる場合がある。

iterableオブジェクトは、for...of文で反復処理ができる。

即時実行関数はvarによるグローバルスコープの汚染を防ぐために必要だった。
なので、今は必要ない。

undefined はリテラルじゃなく、プリミティブ値 undefined が格納されている『undefined』という名前のグローバルな定数

BigInt 型は扱える環境がまだ限定的だったり、Symbol 型は JSON でのパースができ
なかったりと取り扱いが不便なのであまり活用できる場面がない。

null と undefined を除くすべてのプリミティブ型には、それらの値を抱合する『ラ
ッパーオブジェクト』というものが存在してる。
string 型なら String、number型なら Numberがそれに相当する。

そして JavaScript には、プリミティブ型の値に対してアクセスするとき、その対応するラッパーオ
ブジェクトに自動変換するという仕様がある。

関数を他のオブジェクト型の値と同様に、変数へ代入したり、配列の要素やオブジェクトのプロパティ
値にしたり、他の関数に引数として渡したり、別の関数の戻り値として設定できたりする。

関数を第一級オブジェクトとして扱うことができるプログラミング言語の性質を『第一級関数』ともいう

アロー関数式では引数がひとつだけの場合はカッコが省略できるのと、本文が return 文だけのときは、return 文をブロックごと省略できる

関数式による関数の定義っていうのは、無名関数をいったん生成した上でそれを変数に代入することによってメモリ上に残してる

new 演算子が何をやっているかというと、その関数の prototype オブジェクトをコピ
ーして新規にオブジェクトを作り、次にそれを関数に暗黙の引数 this として渡し、最後にその関
数が return this で終わってない場合は代わりにそれを実行してあげてる

strict モードではグローバル汚染を防ぐため、関数がメソッドでない、つまり任意のオブジ
ェクトのコンテキストになかった場合、this には undefined が入るようになる。

JavaScriptのthisは挙動がわかりづらいので、
・this はクラス構文内でしか使わない
・クラス構文内では、メソッドを含めたあらゆる関数の定義をアロー関数式で行う
を意識すると良い

値を返さないfor...ofやforEachを使う目的は、主にその中で外部のミュータブルな変数を書き換えるといった副作用を起こす処理だろう。なので、関数型プログラミングの文脈ではあまり使うべきではない。

関数型プログラミングの特徴
・参照透過的な関数を組み合わせ ることで解決するべき問題に対処していく
・ 『式』を組み合わせてプログラムを構成する。
・イミュータブルな変数にを使う

JavaScript には、『暗黙の型変換』という機能があり、文字列データを算
術演算しようとしたりすると、勝手にその変数の型を数値型に変換してしまう。

ブラウザにデータを保存する方法は主に次の3つがある。

1. local storage
2. indexedDB
3. cookie

cookieはブラウザを閉じると消えてしまうが、それ以外の2つは残り続ける。
local storageは文字列しか保存できないが、扱いが簡単。
indexedDBは扱いが難しいが、JavaScriptの全てのデータ型を扱える。

また、session storageというタブを消したら消えてしまうものもある

blobやarraybufferはバイナリデータを扱うためのオブジェクト。

URL.createObjectURL(blob)で、URLを作成してimgタグなどで使用可能に。

ファイルを読み込む時などは一般的にはreadFileSyncなどを使う。

けれど、でかいファイルを読み込みたい場合などは、その分処理が止まってしまう。

また、readFileという非同期の処理もあるがメモリ効率的に微妙。

そんな時に役立つのがstreamである。

streamはファイルの中身を少しづつ読みとって非同期に処理をするので、長時間処理を止めることがなく、メモリも効率的に使うことができる。

メソッドの戻り値をthisにすることで、チェーンメソッドを実現することができる

npm script

shellスクリプトをワンラインで実装可能。

ワンラインのshell scriptを記述する際は、dependenciesやdevDependenciesに入っているモジュールの bin は、自動的に PATH に入る。

また、pre/postの接頭辞がついてるコマンドを自動で実行してくれる。

Webpackとは

モジュールバンドラー。

ファイルをブラウザで動く形にビルドしてくれる。

また、さまざまなファイルの依存関係を解決してくれ、1つのファイルにまとめることもできる。

それ以外の用途は次の通り。

• モジュールバンドリング: アプリケーションの依存関係を解決し、複数の JavaScript ファイルを 1 つまたは複数のバンドルにまとめます。
• コード分割: 重要でないコードを遅延ロードするために、アプリケーションを複数のチャンクに分割します。
• ローダー: CSS、画像、フォントなどの非 JavaScript ファイルをモジュールとしてインポートし、バンドルに含めることができます。
• プラグイン: ビルドプロセスの異なる段階でカスタムタスクを実行できるようにする拡張機能です。
• 開発サーバー: ローカル開発環境でアプリケーションをホストし、リアルタイムで変更を反映できるホットリローディング機能を提供します。
• 最適化: パフォーマンスを向上させるために、バンドルのサイズを最小限にするツリーシェイキングや minification（圧縮）などの最適化を行います。
• ソースマップ: 開発者がデバッグを簡単に行えるように、圧縮されたバンドルファイルと元のソースコードをマッピングするファイルを生成します。
• 環境変数: ビルド環境ごとに異なる設定を使用できるように、環境変数を注入します。
• Babel インテグレーション: 最新の JavaScript 構文を使用してコードを記述し、古いブラウザでも実行できるようにトランスパイルします。

ReactやNextではデフォルトでこれらの設定がされているので、自分で設定ファイルをいじることはあまりない。

Node.js入門

概要

PCなどのマシン上でJavaScriptを実行するための環境

主な用途は次のとおり

• Webサーバーとして利用
• フロントエンドのビルドの実行環境として利用
• デスクトップアプリやスマホアプリの開発環境などにも利用

ブラウザとの差異

ブラウザ

• ブラウザはDOM APIなどが利用可能
• globalオブジェクトがwindowオブジェクト
• モジュールシステムにESMが利用される

Node

• Nodeはfsモジュール、pathモジュールなどが利用可能
• デフォルトではcommonjsが使用される

よく使う機能

fs

ファイルの読み書きが可能

_dirname,__filename

カレントディレクトリやファイルの絶対パスを取得可能

buffer

主にバイナリデータを扱うために利用される

具体的には、画像のアップロードや、ファイルの圧縮、暗号化処理など

その他

パッケージのimportなどもnodeが良しなにやっている。
npmもnode上で動いている