alternacrow/javascript-api.md

## javascript-api.md

      
    Raw
  

              javascript-api.md
            
          
    JavaScript API

Crypto

randomUUID

https://developer.mozilla.org/ja/docs/Web/API/Crypto/randomUUID
uuid の生成に使用できる。

  
## javascript-module-system.md

      
    Raw
  

              javascript-module-system.md
            
          
    JavaScript Module System

TL;DR

ES Modules がデファクトスタンダードになりつつある。

最近の環境なら基本的には ES Moduels で問題ない。

一部 CommonJS じゃないと実行できない環境や、ライブラリ開発の場合は対応が必要になることもあるかもしれない。
モジュールシステムとは

元々 JavaScript はウェブページに動きをつけたりするための言語で、ブラウザー上で動作する言語として生まれた。

JavaScript の実行にはインラインスクリプトとして記述するか、スクリプトタグで JavaScript ファイルを読み込む方法があるが、これには以下のような問題があった。

グローバルスコープが汚染される
script タグの順序が読み込みに影響し、依存関係が複雑になる
複数の JavaScript ファイルの読み込みを JavaScript のみで完結出来ず、HTML と密結合になる

IIFE (即時実行関数式) によってグローバル汚染は防ぐことが出来るが、JQuery のように$というグローバル変数の定義は必要になる。
また、依存関係の問題は解決出来ない。
モジュールシステムとは、JavaScript で他の JavaScript ファイルを読み込むためのシステムのことであり、いくつかの仕様がある。

CommonJS

ウェブブラウザ以外の環境で実行するために作られたプロジェクト
ServerJS → CommonJS
Node.js のデフォルト


AMD

Asynchronous Module Definition

非同期モジュールの仕様


CommonJS の仕様の一部だったが独立した

実装はRequireJS


WebPack や Browserify で良いやんってなった


UMD

Universal Module Definition
環境関係なく動作するモジュール仕様

if 文で頑張る


ES Modules（ECMA Script）

European Computer Manufacturers Association

欧州電子計算機工業会
TC39 で仕様策定してる


Node.js でも v16 からサポート


Node.js の ES Modules サポート


8.5.0 でサポート開始

https://nodejs.org/en/blog/release/v8.5.0


12.17.0 で experimental フラグを削除

https://nodejs.org/en/blog/release/v12.17.0


12.22.0 で stable 判断

https://nodejs.org/en/blog/release/v12.22.0


ES Modules と CommonJS の違いと互換性

CommonJS と ES Modules の大きな違いは Top-level await が可能かどうかである。
そのため CommonJS は同期的に、ES Modules は非同期的に読み込まれる。
ES Modules から CommonJS を読み込む

import や require を使って読み込むことが可能。
CommonJS から ES Modules を読み込む

ES Modules は非同期で読み込まれるため、dynamic import を使う。

もちろん、CommonJS は Top-level await に対応していないので、非同期関数内で読み込む必要がある。
const moduleOfES = await import("./module.mjs");
モジュールシステムの指定

package.json に"type": "module"を指定することで.jsファイルは ES Modules として扱われる
デフォルトを ES Modules にした場合は、CommonJS は.cjsの拡張子を使う必要がある。

また、import path は下記のようにファイル名と拡張子を省略出来なくなる。
import add from "./esm/libs/calc.js";
TypeScript で書いている場合も、.tsや.tsxではなく.jsや.jsxで記述する。
デフォルトは"type": "commonjs"で、この場合は ES Modules の拡張子を.mjsにする必要がある。
余談

調べてる途中で面白かったやつ
Top-level await と dynamic import でデッドロックを作る

https://qiita.com/uhyo/items/0e2e9eaa30ec2ff05260#循環参照がある場合-4-dynamic-importでデッドロックを作る
<script type="importmap">
https://developer.mozilla.org/ja/docs/Web/HTML/Element/script/type/importmap
Rails 7.0 で標準になった importmap-rails とは何なのか？

https://zenn.dev/takeyuwebinc/articles/996adfac0d58fb
参考

MDN JavaScript モジュール

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules
ECMA Script

https://ja.wikipedia.org/wiki/ECMAScript
JavaScript History

https://www.w3schools.com/js/js_history.asp
IIFE (即時実行関数式)

https://developer.mozilla.org/ja/docs/Glossary/IIFE
JavaScript の Module System の歴史

https://scrapbox.io/tasuwo/JavaScript_%E3%81%AE_Module_System_%E3%81%AE%E6%AD%B4%E5%8F%B2
CommonJS

https://ja.wikipedia.org/wiki/CommonJS
v8 JavaScript モジュール
https://v8.dev/features/modules
JavaScript の Module System の歴史
https://scrapbox.io/tasuwo/JavaScript_%E3%81%AE_Module_System_%E3%81%AE%E6%AD%B4%E5%8F%B2
CommonJS と ES Modules についてまとめる
https://zenn.dev/yodaka/articles/596f441acf1cf3

  
## pnpm.md

      
    Raw
  

              pnpm.md
            
          
    pnpm

https://pnpm.io/ja/
Performant npmの略。
モチベーション


ディスク容量の節約
インストール速度の向上
フラットでないnode_modulesディレクトリの作成

pnpm は全てのインストールするファイルをContent-addressable store（コンテンツ探索可能なストア）と呼ばれるディレクトリに保存し、Virtual storeであるnode_modules/.pnpmにハードリンクを作成する。

プロジェクトの依存関係にあるパッケージはnode_modulesにシンボリックリンクを作成し、各パッケージの依存関係はnode_modules/.pnpmでシンボリックリンクを作成する。
node_modules
├── foo -> ./.pnpm/foo@1.0.0/node_modules/foo
└── .pnpm
    ├── bar@1.0.0
    │   └── node_modules
    │       ├── bar -> <store>/bar
    │       └── qar -> ../../qar@2.0.0/node_modules/qar
    ├── foo@1.0.0
    │   └── node_modules
    │       ├── foo -> <store>/foo
    │       ├── bar -> ../../bar@1.0.0/node_modules/bar
    │       └── qar -> ../../qar@2.0.0/node_modules/qar
    └── qar@2.0.0
        └── node_modules
            └── qar -> <store>/qar

これよって、プロジェクトの依存関係にないパッケージを import 出来る問題も解消されている。
インストールは、依存関係の解決 → ディレクトリ構造の計算 → 依存関係をリンクするという 3 つのステップで行われ、各パッケージで並列に行うことで高速化されている。
参考

フラットな node_modules が唯一の方法ではありません

https://pnpm.io/ja/blog/2020/05/27/flat-node-modules-is-not-the-only-way
シンボリックリンクを使用した node_modules の構造

https://pnpm.io/ja/symlinked-node-modules-structure
コマンド

scripts の並列実行

https://pnpm.io/ja/cli/run#running-multiple-scripts
デフォルトで scripts 並列実行に対応している。
pnpm run "/<regex>/"
pre/post スクリプト

https://pnpm.io/ja/cli/run#npm-run-%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84
デフォルトでは ユーザー定義の pre/post スクリプトはフックされない。
フックさせたい場合は下記の設定が必要。
# .npmrc
enable-pre-post-scripts=true
設定

engine のバージョン指定

https://pnpm.io/ja/package_json#engines
Node.js や pnpm のバージョンを指定できる。
{
  "engines": {
    "node": ">=10",
    "pnpm": ">=3",
    "npm": "forbidden, use pnpm",
    "yarn": "forbidden, use pnpm"
  }
}
上記だけだと警告が出るだけなので、下記の設定でエラーにすることが出来る。
# .npmrc
engine-strict=true

  
## tsconfig.md

      
    Raw
  

              tsconfig.md
            
          
    TSConfig

https://www.typescriptlang.org/ja/tsconfig
skipLibCheck

全ての*.d.tsファイルの型チェックを行わない。

代わりに、コンパイル時間を短縮できる。