
今まであまりrequireとimportなどの違いを意識できていない人間。
Next.jsをプロジェクトに導入するのは賛成をとるが、個人のプロジェクトにはあまり使いたくないなーと思う程度の距離感を保っていた人間だった。現在無職。

しかし、新たな職場を探すにあたってReactは使うのにNext.jsを触ったことがないというのは自分の選択肢を狭めるだけだと考え、無職期間に作り直そうとしていたRuby(Jekyll)製ブログを、Next.jsのSSGの仕組みを用いて作ることにした。（本当はメジャーバージョンがリリースされたばかりのeleventy.jsを使って作りたかった。フレームワークに求めているもの的にもeleventyの方が合っていたと今も感じる。1週間ほどはeleventy.js製のブログだった時期もある。）

同リポジトリ内にマークダウンでブログ記事を上げるため、ビルド時に色々なものを生成したい要件が出てくる。Next.jsは内部でwebpackを使っていて`next.config.js`ではその一端を見ることができる。

```javascript
module.exports = {
  reactStrictMode: true,
  webpack(config, { isServer }) {
    if (isServer) {
      require('./scripts/generate-sitemap.js')
    }
  }
}
```

webpackはCommonJSで書かれていることは事前知識として知っていた。

とは言ってもimportやexportが使いたい。`package.json`に`"type": "module"`を追加する方法などを試してみるが、最終的にproduction buildの際のfsモジュールが解決できないとか`Import trace for requested module:
./pages/_app.js`などのエラーメッセージを残して終了していくプログラムを見るとイライラしてくる。

勉強のためとはいえ、今度からNode.jsではなくDenoを使おうかなという気持ちになった。



### 周辺用語
- commonJS
- ESModules
- ES6(ES2015)

### 参考文献
- [Build a sitemap generator in Next.js - LogRocket Blog](https://blog.logrocket.com/build-sitemap-generator-nextjs/)
- [Support ES module format (ESM) in next.config.js #9607](https://github.com/vercel/next.js/issues/9607)
- [Support ES module format (ESM) in next.config.js #32239](https://github.com/vercel/next.js/discussions/32239)

Next.jsがWebpackを使うから嫌いという話


### JavaScriptの値をリアルタイムに監視する
![watch](https://i.gyazo.com/6672149b7ec1d9594b135a95b466d3df.png)　　
目のマークをクリック、監視したい対象を記述する。  

Next.jsのpropsなどもこのように指定することで見れる。  
![__NEXT_DATA](https://i.gyazo.com/c0aea2fc27e14a4e81581efbdf7accc3.png)

### minifyされたJSファイルを見やすくする
巷でいうpritty printは「{}」と表示された箇所をクリック
![minified](https://i.gyazo.com/6dc5d5259c2116dd0be1580eae2da93b.png)
![prittyprint](https://i.gyazo.com/5f7cc0e5ce0a3abed4685a13992fd689.png)

### ブレークポイント

| ブレークポイントの設定できるもの | 説明 |
|:-----------|:------------|
| Line-of-code|	On an exact region of code. |
| DOM|	On the code that changes or removes a specific DOM node, or its children.|
| XHR	|When an XHR URL contains a string pattern.|
| Event listener|	On the code that runs after an event, such as click, is fired.|
| Exception|	On the line of code that is throwing a caught or uncaught exception.|
| Function	| Whenever a specific function is called.|

詳しくは[ここ](https://developer.chrome.com/docs/devtools/javascript/breakpoints/)を見てくれ

DOMを右クリックして「BreakOn」から設定したり、Sourceタブの右側からXHR(Fetch)をリクエスト先を指定して設定したりできる。

### console
Node.jsで使うことの方が多いが、一応紹介
#### console.dir
HTML Elementを見るときなどにconsole.logだと出力してくれない情報などがあって便利
```js
const obj = getElementById('hoge')
console.dir(obj)
```

#### console.time
実行時間を調べたいとき
```js
console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();
```

![console.time実行結果](https://i.gyazo.com/1e32408254a932443cfc9763d5ad213e.png)

### その他一言
#### performanceタブ
ボトルネックになっている箇所を調べるときに。パフォーマンス改善したいならとりあえず見るとこ。

#### networkタブ
APIとのやりとりを見ようね。  

飽きた。

### 参考文献
- [Watch JavaScript values in real-time with Live Expressions - Chrome Developers](https://developer.chrome.com/docs/devtools/console/live-expressions/)
- [Pause your code with breakpoints - Chrome Developers](https://developer.chrome.com/docs/devtools/javascript/breakpoints/)
- [Console API reference - Chrome Developers](https://developer.chrome.com/docs/devtools/console/api/)

ちょっと目に止まったディベロッパーツールの機能を紹介

Chromeディベロッパーツールを使おう


### 疑問
console.logの上書きで本番環境はデバッグメッセージを表示させないという技を知ったが、これがメモリに影響ないのかどうか知りたい。
```javascript
console.log = () => {}
```
ちなみに最近ディベロッパーツールでメモリーのスナップショットを撮るという技を知った。

Create React Appで適当に作ったプロジェクトで適当にconsole.logを出力してみた。
![ソース](https://i.gyazo.com/f55499b3db011a5c81d04c58d71b089b.png)

`console.log`の呼び出しを増やしてブラウザを更新->HEAP Snapshot取得すると`console.log`の呼び出し回数に応じてメモリ使用量が一見増えるように見えたが、しばらく放置して再びHEAP Snapshotを取得するとメモリ使用量が低水準にまで戻る。GCに回収されたのかな？と想像したが、よくわからない。
![メモリ](https://i.gyazo.com/1ef68f7e017d8ed2309a6ff90d9036ad.png)

### 結論
ほぼ影響はない


cosole.logをソースコードに残しておくことのメモリへの影響について

## 概要
[オフライン環境でも使えるブラウザベースの簡易マークダウンエディタ](https://github.com/ikmnjrd/browser-local-md-editor)を作成した際に知ったことなど、
箇条書きな内容です。　　

## Tips
- `<pre>`と`<div>`の違い。contenteditable属性と合わせて使う場合、preは改行やスペースなど入力を入力したまま保持（入出力）してくれる が、divだと改行など特にエスケープされてしまうので、
contenteditableと使う場合はpreを使う方がベター
- `<head>`に`<style>`タグでcssを書くとパースがシビアになりすぐ変な挙動になるので、個々のhtmlタグのstyle属性に直書きする。今回作成した簡易的なマークダウンエディタなど、
htmlが少ないなら有効。
- dataURIでhtml、特にマークダウン書式を書くならマークダウンんで多用する「#」をURLエンコードに合わせることを意識しておく。#は「%23」で表現される。
- tabキーなど、文字入力は色々気を使わなくちゃいけない。onkeydownで処理するよりonkeyupで処理した方が都合が良いことが多い。
- contenteditableなhtmlで参考にすべきはTwitter。Twitterすごい。
- dataURLではWebStorageが使えない。
- dataURLではlocationAPIが使えない(Not allowed to navigate top frame to data URL)


### 参考文献
- [How To Add New Line In Markdown? – WiseTut](https://wisetut.com/how-to-add-new-line-in-markdown/)
- [Data URLs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
- [jQueryでIME入力確定時にイベントを発行する - Qiita](https://qiita.com/hrdaya/items/6488d8dd3962cf35c0a0)

オフライン環境でも使えるブラウザベースの簡易マークダウンエディタを作った時に知ったことのまとめ

contenteditable（HTML）とdataURIを使う際のTips


Viteを使った方が楽だけど、できるだけシンプルな環境を作りたい気持ちでesbuildを触っています。


### configファイルを作成する場合
watchオプションを有効にした時、ビルド情報を出力するため[logLevel](https://esbuild.github.io/api/#log-level)をinfoにすると良い。
```javascript
// esbuild.config.js
const esbuild = require('esbuild');

esbuild.build({
  logLevel: 'info',
})
```
```json
// package.json
{
  ...
  "scripts": {
    "build": "node esbuild.config.js",
  }
  ...
}
```



### CSS Module + TypeScriptで利用したい場合
`esbuild-css-modules-plugin`をインストールしPluginとして読み込む([GitHubリポジトリ](https://github.com/indooorsman/esbuild-css-modules-plugin))


declareファイルを`src/`以下に置いておく。
```typescript
// index.d.ts
declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}
```


### 周辺用語
- CSS modules
- PostCSS


### 参考文献
- [GitHubリポジトリ - esbuild](https://github.com/evanw/esbuild)
- [How to set up CSS Modules with esbuild](https://how-to.dev/how-to-set-up-css-modules-with-esbuild)
- [GitHubリポジトリ - esbuild-css-modules-plugin](https://github.com/indooorsman/esbuild-css-modules-plugin))
- [esbuild の機能が足りないならプラグインを自作すればいいじゃない](https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin)

esbuildを触った際の雑記

Reactはあまり関係ないです。

筆者はReactからWebの世界に入ったため、Reactの世界観からWeb標準技術を見ることが多いですが、Reactのドキュメントを読んでいるとWeb標準なのかReactの世界の話なのかがよくわからないまま進んでしまいます。そんな状況だったので、JavaScriptの勉強を改めてしていたところに「Reactをやっていて出てきた言葉だけど、なんかよくわからないからスルーしたやつだ！」と再会を果たしたので記念にこの記事を書いています。

### 例題

```tsx
function Hoge() {
  return (
    <div onClick={() => console.log("test")}>
      <p onClick={() => console.log("p")} >pだよ</p>
    </div>
  );
}
```
作成した`<p/>`をクリックすると次のようになります。これが何気なく目にしている挙動と書き方だと思います。

![実行結果1](https://i.gyazo.com/63f658d09ff5f2711823f9e01fc1c2a1.png)


次に`onClickCapture`という属性からconsole.logで結果を出力してみましょう。

```tsx
function Hoge() {
  return (
    <div onClickCapture={() => console.log("test")}>
      <p onClick={() => console.log("p")} >pだよ</p>
    </div>
  );
}
```

console.logで出力される順序が変わりました。

![実行結果2](https://i.gyazo.com/3fb88bf4ba65dbc23410e35d38cf89d9.png)

これはWEBの標準仕様、DOMのイベントフローに基づいた仕様なのでvanillaJSであろうが、Reactであろうが元の考え方は一緒です。


### イベントフロー
`キャプチャリングフェーズ` 親から子へイベントを見ていく処理
|
`ターゲットフェーズ` 発生源の要素に到達した後、その要素自体の処理
|
`バブリングフェーズ` 発生源から親へイベントを見ていく段階
参考: [https://www.w3.org/TR/DOM-Level-3-Events/#event-flow](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)

### JavaScriptとReact
JavaScriptではaddEventListenrで初心者的に何も意識せずにイベントを追加すると、バブリングフェーズでイベントが発火します。

Reactでも通常、ほとんどのイベントでバブリングフェーズで発火します。
> 以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に Capture を追加します。たとえば、キャプチャフェーズでクリックイベントを処理するには onClick の代わりに onClickCapture を使用します。


### addEventListenerの第3引数（オプション）
第3引数にあたるものは`options`、もしくは`useCapture`のプロパティです。構造上、第3引数に急にBoolean(true/false)が現れたら、useCapture属性のことです。
以下に引用したMDNの小難しく感じる文章もそこそこ理解できるようになったのではないでしょうか。


- options
  - capture
    - Boolean値で、この型のイベントがDOMツリーで下に位置するEventTargetに配信dispatchされる前に、登録されたlistenerに配信されることを示します。
  - once
    - Boolean値で、listenerの呼び出しを一回のみのとしたいかどうかを値で指定します。trueを指定すると、listenerは一度実行された時に自動的に削除されます。
- useCapture
  - Boolean値で、この型のイベントが、DOMツリー内の下のEventTargetに配信される前に、登録されたlistenerに配信されるかどうかを示します。ツリーを上方向にバブリングしているイベントは、キャプチャーを使用するように指定されたリスナーを起動しません。イベントのバブリングとキャプチャーは、両方の要素がそのイベントのハンドラーを登録している場合に、別の要素内に入れ子になっている要素で発生するイベントを伝播する2つの方法です。イベント伝播モードは、要素がイベントを受け取る順番を決定します。詳細な説明は DOM Level 3 Events と JavaScript Event order を参照してください。指定されていない場合、useCaptureは既定でfalseとなります。


### 参考
- [https://uhyohyo.net/javascript/3_4.html](https://uhyohyo.net/javascript/3_4.html)
- [https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)
- [https://ja.reactjs.org/docs/events.html](https://ja.reactjs.org/docs/events.html)
- [https://ja.reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling](https://ja.reactjs.org/blog/2020/08/10/react-v17-rc.html#no-event-pooling)


イベントキャプチャリングとバブリング（React）


ハマったポイントとその解決策を書く。

### ハマったポイント

なぜ②の箇所で変数`audio`にアクセスできてしまうの？？？？

```javascript
const init = () => {

  const upload_file = document.getElementById('uploadedFile');
  const audio = document.getElementById('audio');

  upload_file.addEventListener('change', (e) => {
    audio.src = URL.createObjectURL(e.target.files[0]);

    console.log(audio); // ①
    audio.load();
    audio.play();
    draw();
  });
}

const draw = () => {
  console.log(audio); // ②
}

window.onload = init();

```

output例
```html
<audio id="audio" controls="" src="blob:http://localhost:8080/b691c70c-4570-4659-97d3-45577d80ec21"></audio>
<audio id="audio" controls="" src="blob:http://localhost:8080/b691c70c-4570-4659-97d3-45577d80ec21"></audio>
```


### 起こっていたこと
ググったらすぐに出てきた。
> タイトルの通りなんですが, HTML の DOM に指定した id はすべて同じ変数名としてグローバル変数に格納されます.
参考: [https://zenn.dev/phi/articles/javascript-tips-dom-id-global](https://zenn.dev/phi/articles/javascript-tips-dom-id-global)


```javascript
const init = () => {

  const upload_file = document.getElementById('uploadedFile');
  const audio2 = document.getElementById('audio');

  upload_file.addEventListener('change', (e) => {
    audio2.src = URL.createObjectURL(e.target.files[0]);

    console.log(audio); // ①
    audio2.load();
    audio2.play();
    draw();
  });
}

const draw = () => {
  console.log(audio);
  console.log(audio2); // ②
}

window.onload = init();
```
output例
```jsstacktrace
script.js:40 <audio id=​"audio" controls src=​"blob:​http:​/​/​localhost:​8080/​b337de48-6ba2-459b-a022-d56dae3da9d3">​…​</audio>​
script.js:41 Uncaught ReferenceError: audio2 is not defined
    at draw (script.js:41)
    at HTMLInputElement.<anonymous> (script.js:30)
draw @ script.js:41
```



### 解決案

idは慎重に名付けしよう。


### 周辺用語
- グローバル変数
- DOM


### 参考文献
- [https://zenn.dev/phi/articles/javascript-tips-dom-id-global](https://zenn.dev/phi/articles/javascript-tips-dom-id-global)


JavaScript名前空間でハマった話

### 前提
Node.jsで開発するとき、`fs`はかなりよく使う。
そして私はまだwebpackの呪縛から逃れられていないので、CommonJSで書きたい場面が多い。
そして現在で使うときは大抵`Promise型`で使う。

### 結論
そんなときには次のように書くとスマート
```javascript
const { promises: fs } = require('fs')
```

こういう書き方でもいい。
```javascript
const fs = require('fs').promises;
```


### 参考文献
- [https://github.com/vercel/next.js/blob/canary/examples/blog/scripts/gen-rss.js](https://github.com/vercel/next.js/blob/canary/examples/blog/scripts/gen-rss.js)
- [[Node.js]fs.promises APIの使い方](https://tech.chakapoko.com/nodejs/file/promises.html)


CommonJSでもスマートにfsモジュールを読み込む


### まとめ
ここを見ろ
- [https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources](https://developer.mozilla.org/ja/docs/Web/JavaScript/Language_Resources)

GitHubリポジトリや公式ページは過去の仕様が見辛い
- [https://github.com/tc39/ecma262](https://github.com/tc39/ecma262)
- [https://tc39.es/](https://tc39.es/)


歴代ECMAScript仕様情報のまとめ


### WeakMapとは
ES2015で追加された仕様。ハッシュテーブルの一種。
MDNには以下のように書かれています。
>The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced.

`weakly referenced keys`(弱い参照) という概念がキモ。


似たオブジェクトとの一番わかりやすい違いが、キーにすることができるデータ型です。
| オブジェクト | プロパティキーにできるもの | 値にできるもの |
|:-----------|:------------|:------------|
| WeakMap   | Object      | 任意            |
| Object    | 文字列, Symbol    | 任意       |
| Map       | 関数、オブジェクト、あらゆるプリミティブなど    | 任意      |

ちなみにArray型（配列）は、キーバリューのかたち（キー付きコレクション）ではないです。逆にArrayやInt8Arrayなどは索引付きコレクションと呼ばれています。[参考:「標準組み込みオブジェクト」](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)

上の表を見た個人的感想はWeakMapはObjectと似ているな、と思うので今回の比較に用いていきたいと思います。

### Objectとの違い、使い分け

雑な説明ですが、JavaScriptではプロトタイプチェーンの仕組みにより、新しいオブジェクトを作ると元にしたオブジェクトを参照しながらメモリに保持されます。

> キーによるオブジェクト参照は弱く保持され、そのオブジェクトへの参照が他に存在しないときはガベージコレクション (GC) の対象になります
> <cite>出典: [MDN-キー付きコレクション](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object)</cite>

これが"弱い参照"とされる理由の一つです。
> Map オブジェクトとの違いの１つは、WeakMap のキーは列挙可能ではないことです（すなわち、キーのリストを取得するメソッドがありません）。もしも列挙可能であれば、リストは非決定性をもたらす、ガベージコレクションの状態に依存することになってしまいます。
> <cite>出典: [MDN-キー付きコレクション](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Keyed_collections#weakmap_object)</cite>



### 使い方の例

```javascript
  // HTMLMediaElement用
  var audioEle;
  var wm = new WeakMap();

  /* 〜中略〜 */

  // WeakMapでHTMLMediaElementを保持する
  if (wm.has(audioEle)) {
    audioSourceNode = wm.get(audioEle);
  } else {
    audioSourceNode = audioCtx.createMediaElementSource(audioEle);
    wm.set(audioEle, audioSourceNode);
  }
```
出典:[https://github.com/TakeshiOkamoto/waveform-spectrum/blob/master/waveform-spectrum.js](https://github.com/TakeshiOkamoto/waveform-spectrum/blob/master/waveform-spectrum.js)

### 参考
- [WeakMap Objects-sec](https://262.ecma-international.org/#sec-weakmap-objects)
- [tc39-GitHub](https://github.com/tc39/ecma262-6-src)
- [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)
- [https://uhyohyo.net/javascript/16_1.html](https://uhyohyo.net/javascript/16_1.html)
- [https://github.com/TakeshiOkamoto/waveform-spectrum/blob/master/waveform-spectrum.js](https://github.com/TakeshiOkamoto/waveform-spectrum/blob/master/waveform-spectrum.js)


WeakMapの使い所


### 疑問
なんでWebpack?esbuild?などでトランスパイルしたjsファイルにeval(withも?みたことはないけど)が頻出するの？
MDNを見たけど、危険ってことしかわからなかった。
自分なりに考えた理由としてはevalは機械語(ネイティブコード)に近いからコンパイルが楽になると予想した。

### 自分なりの回答
`eval`は[標準組み込みオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)として実装されているから、と言う説

### 周辺用語
- 


### 参考文献
- [標準組み込みオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)


疑問メモ_evalが頻出するのはなぜ

### 疑問に遭遇した状況
Next.jsで`$ next export`が気になり、`~/node_modules/next/dist/cli/next-export.js`を見ていた。

### 疑問
グローバル宣言している`var`とES2015(ES6)から追加された`const`と`let`が共存している。なぜ？？

```javascript
#!/usr/bin/env node
"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.nextExport = void 0;
var _path = require("path");
var _fs = require("fs");
var _indexJs = _interopRequireDefault(require("next/dist/compiled/arg/index.js"));
var _export = _interopRequireDefault(require("../export"));
var _utils = require("../server/lib/utils");
var _trace = require("../trace");
var _isError = _interopRequireDefault(require("../lib/is-error"));
var _getProjectDir = require("../lib/get-project-dir");
function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const nextExport = (argv)=>{
    const nextExportCliSpan = (0, _trace).trace('next-export-cli');
    const validArgs = {
        // Types
        '--help': Boolean,
        '--silent': Boolean,
        '--outdir': String,
        '--threads': Number,
        // Aliases
        '-h': '--help',
        '-s': '--silent',
        '-o': '--outdir'
    };
    let args;
    try {
        args = (0, _indexJs).default(validArgs, {
            argv
        });
    } catch (error) {
        if ((0, _isError).default(error) && error.code === 'ARG_UNKNOWN_OPTION') {
            return (0, _utils).printAndExit(error.message, 1);
        }
        throw error;
    }
    if (args['--help']) {
        console.log(`
      Description
        Exports the application for production deployment

      Usage
        $ next export [options] <dir>

      <dir> represents the directory of the Next.js application.
      If no directory is provided, the current directory will be used.

      Options
        -h - list this help
        -o - set the output dir (defaults to 'out')
        -s - do not print any messages to console
    `);
        process.exit(0);
    }
    const dir = (0, _getProjectDir).getProjectDir(args._[0]);
    // Check if pages dir exists and warn if not
    if (!(0, _fs).existsSync(dir)) {
        (0, _utils).printAndExit(`> No such directory exists as the project root: ${dir}`);
    }
    const options = {
        silent: args['--silent'] || false,
        threads: args['--threads'],
        outdir: args['--outdir'] ? (0, _path).resolve(args['--outdir']) : (0, _path).join(dir, 'out')
    };
    (0, _export).default(dir, options, nextExportCliSpan).then(()=>{
        nextExportCliSpan.stop();
        (0, _utils).printAndExit(`Export successful. Files written to ${options.outdir}`, 0);
    }).catch((err)=>{
        nextExportCliSpan.stop();
        (0, _utils).printAndExit(err);
    });
};
exports.nextExport = nextExport;

//# sourceMappingURL=next-export.js.map
```

### 周辺用語
- Next.js
- ESModules
- CommonJS


### 参考文献
- [MDN - Object.defineProperty()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
- [javascript.info - モジュール, 導入](https://ja.javascript.info/modules-intro)


疑問_なぜvarとconstが共存しているのか


### 疑問
JestでECMAScriptを使う方法が[公式](https://jestjs.io/ja/docs/ecmascript-modules)に書いてある。
やってみたけどなぜかできなかったというメモ。

公式通りにやってみた結果以下のエラー。

### エラー全文
```bash
% node --experimental-vm-modules node_modules/jest/bin/jest.js
(node:92238) ExperimentalWarning: VM Modules is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 FAIL  ./index.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/ike/workspace/no-degradation-image-converter/index.test.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import sum from './index';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.222 s
```

### わからないことを辿る
そもそも実行時に付与してるオプションは、[Node.js]((https://nodejs.org/api/cli.html#--experimental-vm-modules))のサイトでこのように説明されている。
>--experimental-vm-module
>Enable experimental ES Module support in the vm module.

とてもあっさり！

`vm module`とはなんぞ？
要はV8エンジンらしい。以下公式での[Node.jsのサイト](https://nodejs.org/api/vm.html#vm-executing-javascript)での説明
>The vm module enables compiling and running code within V8 Virtual Machine contexts. The vm module is not a security mechanism. Do not use it to run untrusted code.

そして迷宮入り。Nodeを16の最新安定版にしてみたけどダメでしたね。
大人しくCommonJSでrequireします。


### 周辺用語
- Node.js
- V8
- VM moduel
- CommonJS
- ECMAScript


### 参考文献
- [--experimental-vm-module](https://nodejs.org/api/cli.html#--experimental-vm-modules)
- [(https://nodejs.org/api/vm.html#vm-executing-javascript)](https://nodejs.org/api/vm.html#vm-executing-javascript)
- [https://nodejs.org/api/vm.html#vm-executing-javascript](https://nodejs.org/api/vm.html#vm-executing-javascript)


疑問メモ_JestでECMAScriptを使う

失敗したけど、悔しいので調べたことのメモとそのプラグインの[リポジトリ](https://github.com/ikmnjrd/markdown-it-bqcite)
作ろうとした機能は、`<blockquote/>` 内の特定prefixから始まる箇所を`<cite/>`で囲もうとういうもの。

```md
> 内容はこれ
> --- 出典はこれ
```
こんなのを

> 内容はこれ
> <cite>出典はこれ</cite>

こんな風に出力したかった

### markdown-itの処理の大きな流れ
1. ソース(.md)をToken単位にまずparse。この際、inlineやblockといった固まりで放置されるものがある。
2. 1.でparseしたものをStringとして出力しながらinlineやblockで放置されたものをそれぞれのルールに従いながらパース。パースしながら出力


### 流れ
MarkdownIt#render(src)

MarkdownIt#parse(src)

state = new this.core.State(src, this, env);
// Tokenクラスの読み込み初期化など

this.core.process(state)
// coreルールを順にstateを引き回しながら実行
// stateをToken[]にparse終了


MarkdownIt#renderer#renderを実行。token.typeがinlineならRenderer#renderInlineを実行。独自ルールのあるtoken.typeならそのルールを実行。どちらにも当てはまらないならRenderer#renderTokenを実行
```js
Renderer.prototype.render = function (tokens, options, env) {
  var i, len, type,
      result = '',
      rules = this.rules;

  for (i = 0, len = tokens.length; i < len; i++) {
    type = tokens[i].type;

    if (type === 'inline') {
      result += this.renderInline(tokens[i].children, options, env);
    } else if (typeof rules[type] !== 'undefined') {
      result += rules[type](tokens, i, options, env, this);
    } else {
      result += this.renderToken(tokens, i, options, env);
    }
  }

  return result;
};
```

Renderer#renderInlinの処理例


Renderer#renderTokenの処理例
Token.hiddenなら空文字を返す


ouTokensに追加?意味わからん



### テストに使ってた.md
```md
> this
> is
> test
> --- in-cite






> `hoge`
> hoge

> link in cite
> --- [link](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js)
```

markdown-itのプラグイン開発に失敗したのでメモ

### 結論
s3-clientでMinIOに繋げる！

### 状況
ローカルで完結する開発環境でもS3にできるだけ近い形をとりたかった。  
[MinIO](https://min.io/)というS3互換のオブジェクトストレージが無料らしいので使ってみる。


### MinIO導入
以下のようなディレクトリ構造とする。
```sh
.
├── docker
│   └── minio
│       └── data
├── docker-compose.yml
```
```yml
version: '3.8'
services:
  minio:
    image: minio/minio:RELEASE.2022-11-29T23-40-49Z
    ports:
      - 9000:9000
      - 9090:9090
    environment:
      - MINIO_ROOT_USER=minio
      - MINIO_ROOT_PASSWORD=miniopass
      - MINIO_VOLUMES=/data
    entrypoint: sh
    command: -c "
      minio server --console-address ':9090'"
    volumes:
      - ./docker/minio/data:/data
```

コンテナを起動するとlocalhost:9090でminioの管理画面が表示される。


### aws-sdkでMinIOに接続する
`s3.js`
```js
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'

const IS_DEV = process.env.IS_DEV
const AWS_S3_REGION = process.env.AWS_S3_REGION
const AWS_ACCESS_KEY_ID = process.env.AWS_ACCESS_KEY_ID
const AWS_SECRET_ACCESS_KEY = process.env.AWS_SECRET_ACCESS_KEY
const AWS_S3_BUCKET_NAME = process.env.AWS_S3_BUCKET_NAME


const s3client = new S3Client(
  IS_DEV
    ? {
        region: AWS_S3_REGION,
        credentials: {
          accessKeyId: 'minio', // MINIO_ROOT_USER
          secretAccessKey: 'miniopass' // MINIO_ROOT_PASSWORD
        },
        endpoint: 'http://localhost:9000/',
        forcePathStyle: true
      }
    : {
        region: AWS_S3_REGION,
        credentials: {
          accessKeyId: AWS_ACCESS_KEY_ID,
          secretAccessKey: AWS_SECRET_ACCESS_KEY
        }
      }
)
export const uploadToS3 = async (body) => {
  try {
    const data = await s3client.send(
      new PutObjectCommand({
        Bucket: AWS_S3_BUCKET_NAME,
        Key: 'test/key.png',
        Body: body,
      })
    )
    console.debug('Success', data)
    return
  } catch (err) {
    console.error('Error', err)
    throw err
  }
}

```

`index.js`
```js
import express, { Router } from 'express'
import { uploadToS3 } from './s3'

const app = express()
const router = Router()

router.post('/image/upload', async (req, res) => {
    // 最小のpng
    const reqBodyMock = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQIHWP4DwABAQEANl9ngAAAAABJRU5ErkJggg=='

    await uploadToS3(reqBodyMock)

    return res.status(201)
  }
)

app.use(router)
app.listen('3000')
```

### multerS3でクライアントのフォームから送信された画像を保存する

`multer.js`
```js
import multer from 'multer'
import multerS3 from 'multer-s3'
import { s3client } from './s3'

export const multerUpload = multer({
  storage: multerS3({
    s3: s3client,
    bucket: AWS_S3_BUCKET_NAME,
    metadata: (_req, file, cb) => {
      cb(null, { fieldName: file.fieldname })
    },
    key: (_req, file, cb) => {
      cb(null, file.originalname)
    }
  })
})
```

`index.js`
```js
import express, { Router } from 'express'
import { uploadToS3 } from './s3'
import { multerUpload } from './multer'

const app = express()
const router = Router()

router.post(
  '/image/upload',
  multerUpload.single(),
  async (req, res) => {
    const file = req.file // 色々都合のいいファイル（本例だとimage/pngだったり的な）

    // s3multerでポート番号が削られてしまうので無理やりつける。
    const fileLocation = IS_DEV
      ? file.location.replace(
          /^http:\/\/localhost/,
          'http://localhost:9000'
        )
      : file.location

    return res.status(200).json({location: fileLocation})
  }
)

app.use(router)
app.listen('3000')
```

### 参考文献
- [ローカルS3環境(minio)を構築する - Qiita](https://qiita.com/reflet/items/3e0f07bc9d64314515c1)
- [最小のpng画像](https://yosiopp.net/archives/225/)

### 関連用語
- busboy
- multer
- multerS3


@aws-sdk/client-s3を利用したMinIOへの接続例のサンプルコード

AWS S3互換のMinIOにaws-sdk(client-s3)から接続する


## 環境

| 関連ソフトウェア | バージョン |
|:--------------|:---------|
| macOS         | 12.6     |
| NodeJS        | 16.17.0  |
| volta         | 1.0.8    |
| NeoVim        | 8.0      |


## 結論
voltaを使うなら[voltaのIssue](https://github.com/volta-cli/volta/issues/866)にあるようにinit.vimに以下のような記述をしておく。

```vim
if executable('volta')
  let g:node_host_prog = trim(system("volta which neovim-node-host"))
endif
```

## 経緯とシューティングタイムライン
仕事でNeoVimは一切使っていないのですが、休日趣味的に開いてみたらなんか様子がおかしい。

NeoVimを開いて`:checkhealth provider`を入力すると、以下のようなメッセージ。

```markdown
provider: health#provider#check
========================================================================

## Node.js provider (optional)
  - INFO: Node.js: v16.17.0
  - WARNING: Missing "neovim" npm (or yarn, pnpm) package.
    - ADVICE:
      - Run in shell: npm install -g neovim
      - Run in shell (if you use yarn): yarn global add neovim
      - Run in shell (if you use pnpm): pnpm install -g neovim
      - You may disable this provider (and warning) by adding `let g:loaded_node_provider = 0` to your init.vim

```

`npm install -g neovim`もしくは`volta install neovim`をしても変わらない。  
ここで[公式のHelp](https://neovim.io/doc/user/provider.html)を読むと、  

> By default, Nvim searches for "neovim-node-host" using "npm root -g", which can be slow. To avoid this, set g:node_host_prog to the host path: <cite>[Provider - Neovim docs](https://neovim.io/doc/user/provider.html)</cite>

自分のvoltaを使ってる環境で`npm root -g`を実行すると以下のような結果に。
```sh
/Users/ike/.volta/tools/image/node/16.17.0/lib/node_modules
```

ということで、`g:node_host_prog`オプションを設定したいが、うまくいかん。  
そもそもvoltaを使ってグローバルインストールしたパッケージは`/Users/ike/.volta/bin/volta-shim`にshimとしてインストールされ、シンボリックリンクが貼られる形をとっている。  
こんな感じ  
```sh
% ls -al ~/.volta/bin
drwxr-xr-x  12 ike  staff      384 Oct 13 16:45 .
drwxr-xr-x   9 ike  staff      288 Sep 10 23:29 ..
lrwxr-xr-x   1 ike  staff       32 Sep 21 21:34 http-server -> /Users/ike/.volta/bin/volta-shim
lrwxr-xr-x   1 ike  staff       32 Sep 15 23:36 memlab -> /Users/ike/.volta/bin/volta-shim
lrwxr-xr-x   1 ike  staff       32 Oct 13 16:45 neovim-node-host -> /Users/ike/.volta/bin/volta-shim
lrwxr-xr-x   1 ike  staff       32 Sep 10 23:29 node -> /Users/ike/.volta/bin/volta-shim
lrwxr-xr-x   1 ike  staff       32 Sep 10 23:29 npm -> /Users/ike/.volta/bin/volta-shim
lrwxr-xr-x   1 ike  staff       32 Sep 10 23:29 npx -> /Users/ike/.volta/bin/volta-shim
-rwxr-xr-x   1 ike  staff  6522504 Jun  2 09:14 volta
-rwxr-xr-x   1 ike  staff  4771376 Jun  2 09:14 volta-migrate
-rwxr-xr-x   1 ike  staff  5522480 Jun  2 09:14 volta-shim
lrwxr-xr-x   1 ike  staff       32 Sep 10 23:29 yarn -> /Users/ike/.volta/bin/volta-shim
```

わからん状態だったため、GitHubを探し、[結論](#結論)部分でも貼ったコードをコピペして終了。  
Vim(NeoVim)わからん。  

### 周辺用語
- Shim

### 参考文献
- [volta + neovim compatibility issues · Issue #866 · volta-cli/volta](https://github.com/volta-cli/volta/issues/866)
- [Understanding Volta | Volta](https://docs.volta.sh/guide/understanding#managing-your-toolchain)
- [Provider - Neovim docs](https://neovim.io/doc/user/provider.html)
- [Shim と Polyfill](https://qiita.com/ybiquitous/items/3104beb84b78ca15f407)

NeoVimとvoltaを使うと必ずこの問題にぶち当たるのでは？

NeoVimとvoltaを併用するとNodeを見つけてくれない問題


### TL;DR
Nest.jsのインストールを公式ドキュメントに何も考えずに沿っていくと、TypeScriptユーザーが怒りそうな設定が放り込まれたtsconfigができあがってる。


### 疑問に遭遇した状況
APIサーバーにNest.jsを採用したプロジェクトに途中参加した時、「型からnullが落ちるなー」と思っていた。  
私はNest.jsも初めてで、TypeORMなど他にも初めてのフレームワークだらけだったので、ここら辺の設計思想かな？と逡巡したが、普通にtsconfigでstrictNullChecksがfalseになっていて愕然とした。

### なんでstrictNullChecksがfalseになるの？
[公式のGetting Started](https://docs.nestjs.com/)をただなぞっていくと、以下のような`tsconfig.json`ができる...
```json
{
  "compilerOptions": {
    ...
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}
```

この件に不服を唱えたユーザーがいたが、Nest.js開発メンバー(@kamilmysliwiec)は以下のように返答を寄せている。(DeepL翻訳)

> 物事を可能な限り型安全にすることが一般的に望ましいということには同意しますが、strictNullCheck/noImplictAnyをtrueに設定すると学習曲線が険しくなることを念頭に置かなければなりません。適切なバランスを追求するのは常に難しい(中略)
> 幸い、これは差し迫った問題ではないように思える。誰かがこのオプションを使いたいのであれば、オンにすればいい。今のところ、このオプションをデフォルトにする予定はないが、時間の経過とともに変更されるかもしれない。
> <cite>出典: [Please turn on `strictNullChecks` option to be `true` · Issue #2057 · nestjs/nest-cli](https://github.com/nestjs/nest-cli/issues/2057#issuecomment-1549083356)</cite>


`--strict`オプションを使うと次のようにTSユーザーが慣れ親しんでるような設定になる。

```json
{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "strictBindCallApply": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true
  }
}

```

`--strict`オプションを使ったり、開発初期にしっかりとtsconfigを見直そう。私と同じ状況になった人はブチギレながらtsconfigを設定し直した後に修正を入れまくろう。


### 参考文献
- [Please turn on `strictNullChecks` option to be `true` · Issue #2057 · nestjs/nest-cli](https://github.com/nestjs/nest-cli/issues/2057#issuecomment-1549083356)
- [Documentation | NestJS - A progressive Node.js framework](https://docs.nestjs.com/)

Nest.jsが採用された炎上案件に放り込まれた時の疑問の備忘録

Nest.jsってなんでstrictNullChecksがデフォルトでfalseなの？

エラーに遭遇しました。

### 環境
- Node: v16.13.2
- Next.js: 12.0.10
- globby: 13.1.1

[公式のサンプル集の「with-sitemap」](https://github.com/vercel/next.js/tree/canary/examples/with-sitemap)では以下のようなスクリプトをサーバー実行時に（`next.config.js`のisServerオブションをフラグにして）実行している。


./scripts/generate-sitemap.js
```javascript
const fs = require('fs')
const globby = require('globby')

function addPage(page) {
  const path = page.replace('pages', '').replace('.js', '').replace('.mdx', '')
  const route = path === '/index' ? '' : path

  return `  <url>
    <loc>${`${process.env.WEBSITE_URL}${route}`}</loc>
    <changefreq>hourly</changefreq>
  </url>`
}

async function generateSitemap() {
  // Ignore Next.js specific files (e.g., _app.js) and API routes.
  const pages = await globby([
    'pages/**/*{.js,.mdx}',
    '!pages/_*.js',
    '!pages/api',
  ])
  const sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${pages.map(addPage).join('\n')}
</urlset>`

  fs.writeFileSync('public/sitemap.xml', sitemap)
}

generateSitemap()

```


遭遇したエラーは以下

```bash
Error [ERR_REQUIRE_ESM]: require() of ES Module ./node_modules/globby/index.js from ./scripts/generate-sitemap.js not supported.
Instead change the require of index.js in ./scripts/generate-sitemap.js to a dynamic import() which is available in all CommonJS modules.
```

最新のglobbyからはCommonJSが省かれたらしい。


### 解決策
package.jsonを以下のように書き換え、`$npm i`を実行
```json
"globby": "^13.1.1",
```
↓
```json
"globby": "^11.0.1",
```

インストール後、ビルド時に`./public/sitemap.xml`が無事出力された。


### 周辺用語
- commonJS
- ESModules


### 参考文献
- [Build a sitemap generator in Next.js - LogRocket Blog](https://blog.logrocket.com/build-sitemap-generator-nextjs/)

Next.jsのサンプル集を参考にサイトマップを作成しようとしたらエラー


### 楽ができるNodeのバージョン
Node.js`v17.5~`もしくは`v16`の`--experimental-json-modules`オブションを使えば利用できます。

```js
/* index.js */
// An import assertion in a static import
import info from `./package.json` assert { type: `json` };

// An import assertion in a dynamic import
const { default: info } = await import("./package.json", {
  assert: {
    type: "json",
  },
});
```
`v16`でオプション付きで実行する場合は`$ node --experimental-json-modules index.js`と実行します。
ちなみに`--experimental-wasm-modules`というオプションで`wasm`も読み込めます。

### 対象のバージョン以外でやる方法
1. JSONを読み込み自力でパースする
```js
import { readFile } from 'fs/promises';
const json = JSON.parse(
  await readFile(
    new URL('./some-file.json', import.meta.url)
  )
);
```
2. [createRequire](https://nodejs.org/api/module.html#module_module_createrequire_filename)を使う
```js
import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");
```


### 参考
本記事のソースコードおよび内容は以下のリンク先から引用しています。
- [How to import JSON files in ES modules (Node.js)](https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/)


ESモジュール内でJSONを読み込む方法


### TL;DR
- CookieとBrowser Storage(Local Storage)を使ってる
- Cookieが消失することを踏まえ、expires/max-ageは本来的な意味で使っていない

### 時勢の愚痴
Nuxt3.5のリリースが発表された最近ですが、nuxt-communityで開発されているAuthモジュールがいまだに3系に対応できておらず、よくわからん会社がNextAuth(Authentication for Next.js)をラップして作ってるものがNuxt3系をサポートしているよ！なんてことをREADMEに書く始末。  
そんなNuxtのAuthモジュールの、2系で動いてるものを見た時に理解した一部を説明します。

### 本解説の前提
ローカルスキーマを拡張した[リフレッシュスキーマ](https://auth.nuxtjs.org/schemes/refresh)をもとに解説しています。  
設定値の例としては以下です。
```js
auth: {
    cookie: {
      options: {
        secure: true,
        sameSite: 'lax',
        maxAge: 60 * 60 * 24 * 90
      }
    },
    strategies: {
      local: {
        scheme: 'refresh',
        token: {
          property: 'access_token',
          maxAge: 60 * 60 * 24
        },
        refreshToken: {
          property: 'refresh_token',
          data: 'refresh_token',
          maxAge: 60 * 60 * 24 * 30
        },
      }
    }
}
```


### @nuxtjs/auth-nextの仕組み
認証に関わる情報が置かれる場所は主に以下の4つです。
- Local State(ライブラリ定義)
- Universal Storage(ライブラリ定義)
- Cookie(Web標準)
- Browser Storage(Local Storage)(Web標準)

Local Stateはローカルな変数やrefオブジェクトだと理解してもらうとして、CookieもBrowser Storageも情報の保存場所としては馴染み深いと思います。  
残るUniversal Storageは、gitでいうところのstagingエリアで、Local Stateに値を入れることをgit commitだと考えると良いかもです。

<img alt="手書き概要" src="https://i.gyazo.com/6f4ce193bc7158ddbc396e3743ebe384.png" height="250">

Universal Storageの必要性がないかと思われるかもしれませんが、次のような用途があります。  

Webサイトに初回のGETリクエストしたユーザーのブラウザに保存されてる認証情報から取り出せるのは基本的にCookieからのみです。  
そのため、期限が切れておらず正しい認証情報であれば、SSRをするのに必要な認証情報をLocal Stateに保存すればSSRした結果をユーザーが受け取れてハッピーですが、認証情報が切れている場合は最後までSSRさせてあげることができません。そんな時に役立つのがUniversal StateとBrowser Storageです。  

一般的にCookieよりもBrowser Storageに保存したデータの方が長くユーザーのブラウザ内で生き残ります。  
そのため、`@nuxtjs/auth-next`では、Cookieに保存する項目(key)が以下のようになっています。
- アクセストークン
- リフレッシュトークン
- アクセストークンの有効期限
- リフレッシュトークンの有効期限

Cookieには`expires/Max-Age`という項目がありますが、`@nuxtjs/auth-next`においてはデフォルトで2週間となっており、ドキュメント内で説明される有効期限とは`別物`となっています。そのため、
> アクセストークンの有効期限のvalue > `expires/Max-Age`
>
といった状況が生まれます。こうなった場合に`@nuxtjs/auth-next`では特に設定をしなくても使用することになっているBrowser Storageに保存していたアクセストークンやリフレッシュトークンの値を取り出し、認証チャレンジに使用することになっています。

<img alt="手書き概要2" src="https://i.gyazo.com/5ab80a9ae3b8ce6e8375aff6015ef72f.jpg" height="300">

ここまで読んでくれた人には申し訳ありませんが、私の理解はここまでです。

### CookieとBrowser Storageに分かれているメリット/デメリット
- メリット
  - Cookieのドメイン属性の変更をしてデプロイをしたとき、すでにユーザーが持ってるアクセストークン等が引き続き利用され、期限が切れたタイミングで新規Cookieに切り替わる
- デメリット
  - 複雑度が増す

### Nuxt3サポートがされない理由の考察
SPA/SSR/SSGモード、認証方式、fetchライブラリ、ストアなどの問題が一番絡み合い、当ライブラリとしても色々な認証方法をサポートしてきた歴史からも互換が切り切れず身動きが取れてない状態だと推測してます。  

超雑にようやくすると、「自分でやってくれ」というコメントが好意的なリアクションが多く、受け入れられているようです。
> It would be best if you had released this with at least some basic necessity modules (like auth). There are lots of people using Nuxt. Not all will get understand this thing they will have to do it on their own. It's good that you released it but its also affects people with extra burdens. Keep this in mind.
> 
> I am seeing many peoples not shifting to Nuxt 3 because of these basic things.
>
>People are just stuck in between because now you can't even install Nuxt 2 freshly. It throughs a Fatal error while running.
>
>Anyways, it's great to see you guys work so hard on so many things! I really appreciate your contributions to the world. No hard feelings! :)
> <cite>[Compatibility with Nuxt 3?
#1805](https://github.com/nuxt-community/auth-module/issues/1805#issuecomment-1328877117)</cite>

### 参考文献
- [GitHub - nuxt-community/auth-module: Zero-boilerplate authentication support for Nuxt.js!](https://github.com/nuxt-community/auth-module)


SPA・SSRの認証ライブラリらしい動きに焦点を当てて説明をする

Nuxt.jsのAuthモジュール(@nuxtjs/auth-next)をわからないなりにざっくり解説する


### PrismJSでサポートされている言語を抜粋
`language-xxxx`の`xxxx`部分に当てはめればいいのがformatに書いてるやつ。

使う機会がありそうで忘れがちなやつをまとめた。jsstacktraceなんてよく使う機会あるはずなのに存在を知らなかった.
基本的には拡張子を指定すればいける。


| lang | format |
|:-----------|:------------|
| CSV| csv|
| Docker| docker|
| JSON5| json5|
| JSONP| jsonp|
| JS stack trace| jsstacktrace|
| JS Templates| js-templates|
| JS Extras| js-extras|
| Markdown| md|
| React TSX| tsx|
| React JSX| jsx|
| JSDoc| jsdoc|
| GraphQl| graphql|
| Go module| go-mod|
| Git| git|
| ignore| ignore, gitignore, hgignore, npmignore|
| Log file| log|
| SQL| sql|

### その他感想
nginxやapplescriptなどもサポートされてるみたいで懐が深い。

### 参考文献
- [prism - Supported Laungages](https://prismjs.com/#supported-languages)

忘れがちなPrismJSがサポートしている言語

### 結論
ts-jest?esmで書いてるから？とりあえずでimportするのやめよう。

### 状況
Jestの右も左もわからないがfetcをmockしてゴニョゴニョしていた。  
[公式の例](https://jestjs.io/docs/mock-function-api/#jestmockedsource)にもnode-fetchを使った例が載ってるぐらいなので、コピペして動かそうとしていたら問題発生。


以下のエラーが発生した。
```jsstacktrace
TypeError: mockGetImageFromWeb.mockClear is not a function
  23 |
  24 |   afterEach(() => {
> 25 |     mockGetImageFromWeb.mockClear()
     |                         ^
  26 |   })
  27 |   test('should be defined', () => {
  28 |     expect(getImageFromWeb).toBeDefined()
```

コピペしたコードはこれ
```js
import {expect, jest, test} from '@jest/globals';
import type {fetch} from 'node-fetch';

jest.mock('node-fetch');

let mockedFetch: jest.Mocked<typeof fetch>;

afterEach(() => {
  mockedFetch.mockClear();
});

test('makes correct call', () => {
  mockedFetch = getMockedFetch();
  // ...
});

test('returns correct data', () => {
  mockedFetch = getMockedFetch();
  // ...
});
```


### 対応
コピペしてきたtestファイルで以下のインポート文を削除したら動いた。
```js
import { expect, jest, test } from '@jest/globals'
```

### 参考文献
- [Mock Functions · Jest](https://jestjs.io/docs/mock-function-api/#jestmockedsource)
- [How To Mock Fetch in Jest | Leigh Halliday](https://www.leighhalliday.com/mock-fetch-jest)




Jest(ts-jest)で作ったはずのmockがundefinedになるエラー


## はじめに
私はTypeORMについてかなりネガティブ寄り
な意見を持っています。  
これはTypeScript環境でのORMは[Prisma](https://www.prisma.io/)が1強とされる2023年、そんな時期に”Tier2以下”とされるORMを使うことを強いられたからにほかならないと思いますが、その”Tier2以下”から見える景色というのは貴重だという思いで、自分から見えた景色を書いていきます。  
ORMの厳密な定義はわかりませんが、ORMかそうじゃないかという論争をたまに見かけます。自分には判断がつかないのでTypeORMやPrismaによき期待される層のことを総称してORMとこの記事の中では呼びます。  

## ここがだめだよTypeORM
### 型が取り出しづらい
まずTypeORMのテーブル定義はClassとデコレータで行われます。
```ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm"

@Entity({ database: "secondDB" })
export class User {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    firstName: string

    @Column()
    lastName: string
}
```

リレーションの記述もこれに従います。  

```ts
@Entity({ database: "secondDB" })
export class User {
    @PrimaryGeneratedColumn()
    id: number

    @Column()
    firstName: string

    @Column()
    lastName: string

    @OneToMany(() => Photo, (photo) => photo.user)
    photos: Photo[]
}
```

次にUserテーブルから条件に一致するデータを取り出すときはこう書きます。
```ts
userRepository.find({
      where: {
        firstName: "Timber",
        lastName: "Saw",
    },
})
```
ここにもうTypeORMの嫌なところが顔を出します。  
上のコードの返り値からPromiseを解決させると`Userインスタンス`が現れます。  
つまり、この型には`{ photos: Photo[] }`が含まれています。もちろん実行結果にはphotosは含まれず、relation先も含めて取得する場合はそれ用のオプションがあります。  
最悪ですね。  
  
対応作はもちろんあって、元のUserからOmitしたものをベースに使用し、オプション次第で自分たちで型を組み立てるということもできるわけですが、二度手間です。Prismaならここらもうまくやってくれます。  

ちなみに[クエリビルダ](https://typeorm.io/update-query-builder)として使っても一緒です。（Prismaは最近クエリビルダでSQLを書いたらそのSQLに応じた型を提供してくれるようになったというニュースを最近みました。実際にまだ使ってないのでどの程度のものなにかは知りません。）  

### いまだにメジャーバージョンがリリースされてない

TypeORMの名前はよく聞くかと思いますが、実はまだv0.3あたりで、数年前にでました。それまでv0.1やv0.2です。  
0.2から0.3で破壊的な変更も入っています。  

## 個人的な所感
TypeORMはTypeScriptバックエンドの初期を担ったツールという印象で、今ではもう時代遅れだと感じます。  
その理由は自分の中で明確で、テーブル定義もTypeScriptで行おうとした点にあると思っています。  
リレーショナルデータベースでよく使う機能に限って言っても、デコレータは使わないシンプルなTypeScriptの表現力でカバーしきれていません。そこを近道的にクラスとデコレータで表現をしたため行き詰まり、Prismaにその座を奪われたという印象です。PrismaはDSLですしね。  
ソフトウェアの栄枯盛衰のサイクルについて学びがあったような、なかったような気がします。  
素直に時代にあった選択肢を選択しよう。  


### 参考文献
- [Prisma | Simplify working and interacting with databases ](https://www.prisma.io/)
- [Update using Query Builder | TypeORM](https://typeorm.io/update-query-builder)


私が知ってるTypeORMについて、またはPrismaとの比較


アセンブリを読みたい願望がある。
nodeでもV8エンジンの`--print-code`オプションが使える。
```bash
$ node --print-code sample.js
$ d8 --print-code sample.js
```

実際に出力してみたけど、自分で書いたコード部分すら見つからず、わけわからんかった。
（Raw Codeとして出力されると紹介されていたが、見当たらなかった。）


### 参考
- [v8でjsとwasmのアセンブリを取る方法](https://zenn.dev/umashiba/articles/d64fb62a09fb4f)
- [GitHubの公式ミラーリポジトリ](https://github.com/v8/v8)
- [公式Gitリポジトリ](https://chromium.googlesource.com/v8/v8.git)
- [https://v8.dev/docs](https://v8.dev/docs)


ikmnjrd.github.io

JavaScriptの投稿記事一覧