/#PURE/`アノテーションとは
BabelによるJavaScriptの変換において、関数が純粋関数であることを示す。
純粋関数
入力値が同じなら、必ず出力値が同じになる関数。条件は次のとおり。
- 入力値に依存しない
- 入力値を変更しない
- 外部の状態を変更しない
Babel
JavaScriptのコンパイラであり、主に以下の目的で使用される。
最新のJavaScript機能のトランスパイル
最新のJavaScript（ES6以降）の機能を、古いブラウザでも動作するようにトランスパイル（変換）する。これにより、開発者は最新のJavaScript機能を使用しながら、古いブラウザとの互換性を保つことができる。
JavaScriptの構文変換
JSXやTypeScriptなど、JavaScriptの拡張構文を標準のJavaScriptに変換する。
プラグインとプリセットの利用
Babelはプラグインとプリセットを使用して、特定の変換を行う。
例えば、@babel/preset-envは、指定した特定の環境に応じて必要な変換を自動的に適用する。
Babelの主な機能
トランスパイル: 最新のJavaScriptコードを古いバージョンのJavaScriptに変換します。
プラグイン: 特定の変換を行うためのプラグインを使用できます。
プリセット: 一連のプラグインをまとめて適用するためのプリセットを使用できます。
/#PURE/`アノテーションのメリット
このアノテーションを付けることで、Babelは関数の呼び出しを最適化してくれる。
最適化に関数具体的な内容は次のとおり。
コードの軽量化
Babelは不要なコード（デッドコード）を削除したり、コードを短縮したりすることで、トランスパイル後のファイルサイズを軽量化することができる。これにより、ページの読み込み時間が短縮され、UXが向上する。
パフォーマンスの向上
純粋な関数の結果をキャッシュできるようになる。これにより、同じ計算を繰り返す必要がなくなり、パフォーマンスが向上する。
純粋関数の結果の再利用
複数の箇所で純粋関数を使用している場合、Babelは同じ出力結果を再利用してくれる。
モジュールの最適化
BabelはES6モジュールをCommonJSモジュールに変換できる。これにより、モジュールのロードが効率化され、パフォーマンスが向上します。
純粋でない関数に対して/#PURE/アノテーションを付けると、キャッシュや出力結果の再利用による予想外の動作になるので注意。