
```bash
$ git remote -v
ターミナルを開いてください。
ワーキングディレクトリをローカルプロジェクトに変更します。
変更したいリモートの名前を取得するため、既存のリモート一覧を表示します。
$ git remote -v
> origin  https://github.com/USERNAME/REPOSITORY.git (fetch)
> origin  https://github.com/USERNAME/REPOSITORY.git (push)
git remote set-url コマンドでリモートの URL を HTTPS から SSH に変更します。
$ git remote set-url origin git@github.com:USERNAME/REPOSITORY.git
リモート URL が変更されたことを検証します。
$ git remote -v
# Verify new remote URL
> origin  git@github.com:USERNAME/REPOSITORY.git (fetch)
> origin  git@github.com:USERNAME/REPOSITORY.git (push)
```

参考：[公式サイト](https://docs.github.com/ja/get-started/getting-started-with-git/managing-remote-repositories)


GitHubのhttpsからSSH通信への切り替え


今まであまり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を使うから嫌いという話

2021年12月21日、YouTubeで行われたLIVE配信でおすすめのアパレルブランドor古着屋として語っていたもののまとめ（語る部分は聞いていないが気付いたら配信映像の固定背景にあったもの）

- DAIRIKU
  - ダイリク
  - [https://www.acrmtsm.jp/brands/63](https://www.acrmtsm.jp/brands/63)

- stein
  - シュタイン
  - [https://www.acrmtsm.jp/brands/28](https://www.acrmtsm.jp/brands/28)

- taupe
  - トープ
  - [https://www.taupe-japan.com/](https://www.taupe-japan.com/)

- yoke
  - ヨーク
  - [https://www.yoketokyo.com/](https://www.yoketokyo.com/)
  - [https://www.acrmtsm.jp/brands/65](https://www.acrmtsm.jp/brands/65)

- AURALEE
  - オーラリー
  - [https://auralee.jp/](https://auralee.jp/)
  - 自社ドメインに販売サイト持ってる。えらい。

- JUMPIN' JAP FLASH
  - 古着屋
  - [https://jumpinjap.thebase.in/](https://jumpinjap.thebase.in/)
  - [https://www.instagram.com/jumpinjapflash](https://www.instagram.com/jumpinjapflash)

- Un Old Joke
  - 古着屋
  - [https://unoldjoke.thebase.in/](https://unoldjoke.thebase.in/)
  - [https://www.instagram.com/unoldjoke](https://www.instagram.com/unoldjoke)


本田翼コレクション（メンズおすすめ服）


### 結論
```bash
$ docker volume ls | sed -e 's/local[[:space:]]*//g' | grep -E '.{64,64}' | xargs docker volume rm
```

Driverの部分(localとスペース)を削除。
64文字の（ハッシュで自動生成された）ものをリストアップ。
削除（使用中のボリュームは削除されない）。

### 説明
気づいたら溜まってしまったdocker volumeたち。。
ふと確認してみたらえらいことになってしまっていた。
`$ docker volume ls
```txt
DRIVER    VOLUME NAME
local     1d516cb7225f448d8bb634875487b5eaa35d329696f77f3ae2347a3abb6aa94a
local     1fbaf3b6210ce64906fffdc1ecf9d711f2d25ebe99dfc2ca3ad3f3aca1a33801
local     3b4da7efd093305d43c40a004c22669f0b8ae8ac5f933c582a4168c9dff51763
local     4aada75a0a85dc48abf02fdff03aab5c3fafeaf096567b6517fc6faf62511749
local     5aa299e15cfeb3a5e3b41c1ab53a17382a11c64101918d916ee9d1e95b0e4672
local     5cd2395082c05f3acb1f910cf77fb5a1ba1c0e845f8522912a5a82a37e0946ce
local     5d76f9a14aa7462eedd428b33c6473125ecc9e442e88fcaabf06e946e20b19d9
local     5f4ba17454db26acce81f3b4ce02d31e270e3c585238db4019b3a2a8482e2238
local     6b4605498282f9b00b367551dfb3d121e7dcaa89626a3785d5dd2914d6138712
```

これらをまとめて消したい。（ハッシュ値ではなく名前をきちっとつけてたものは消したくない。）

`$ sed -e 's/local[[:space:]]*//g'`で加工して、
`$ grep -E '.{64,64}'`で加工して、
docker volume rmコマンドの引数に渡す

### ハマったポイント

`$ sed -e "s/'local[[:space:]]+'//g` とやってみたが
`+`を1文字以上のマッチでズバッといけると思ったが`local`の部分もまとめて残ってしまった。

`sed -e 's/local[[:space:]]*//g`これだとうまくいった。0文字以上だからなんか不具合起きそうとしたが...shecllscriptの正規表現はこれだから...

スペースやタブを`\s`や`\t`で検出しようとしてたが、色々みてたら`[[:space"]]`の方が確実っぽいような書き方してるのがちらちらと見えた気がする




### 参考文献
- [Regex Space character in Sed - Stack Overflow](https://stackoverflow.com/questions/15509536/regex-space-character-in-sed)
- [正しく理解できる！シェルスクリプトとPOSIXの正規表現（令和最新版）〜 基本正規表現BREと拡張正規表現EREについて - Qiita](https://qiita.com/ko1nksm/items/53abc144558b9bb5629f)

docker volumeをshellscriptでまとめて削除する方法

ネーミングを忘れて大量にできたdocker volumeをまとめて削除する方法


### 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をソースコードに残しておくことのメモリへの影響について


## 色関数とは
rgb(255,255,255)はもろに色関数。色関数にも種類があり、rgbのRGBAやHSLはCSS Color Module 3(2011年)のもの。次世代のCSS Color Module 4ではHWBやOklchなどがある。  


## HSLとOKLCHの比較

| 特性          | HSL                    | OKLCH                          |
|--------------|------------------------|--------------------------------|
| **CSSでの指定** | hsl(H S L[ / A])      |  oklch(L C H[ / A])             |
| **色相 (H)** | 0から360度の範囲        | 0から360度の範囲                |
| **彩度 (S/C)** | 0%から100% (パーセンテージ) | 数値で表され、最大値は色空間に依存 |
| **明度 (L)** | 0%から100% (パーセンテージ) | 0から100の範囲の数値             |
| **色の表現** | 直感的で使いやすい      | 色の知覚的均一性に優れる         |
| **用途**     | 一般的なWebデザインやアプリケーション | 専門的なデザインや色の一貫性が重要な用途 |
| **色の調整** | 色相を変えるだけで簡単に色のバリエーションを生成 | 明度や彩度を変えても色相が保持されるため、異なる明度での色の調和が容易 |

### 説明:

- **色相 (Hue)**: 両モデルともに色相は度数で表され、色の種類（赤、緑、青など）を定義します。
- **彩度 (Saturation/Chroma)**: HSLではパーセンテージで彩度を表し、色の鮮やかさを示す。OKLCHでは彩度が数値で表され、色の純度を示すため、より精密な色調整が可能
- **明度 (Lightness)**: HSLでは明度もパーセンテージで表され、0%が黒、100%が白。OKLCHでは明度が数値で表され、より広範な色調整が可能
- **色の表現と用途**: HSLは直感的で、誰でも簡単に色を選ぶことができるが、OKLCHは色の均一性を重視しており、専門的な用途に使われるらしい。

どちらにも基準の色から色を足し引き等で指定できる。  
hsl(from rgb(200 0 0) calc(h + 30) s calc(l + 30))  
oklch(from hsl(180 100% 50%) calc(l - 0.1) c h)  

## 感想
使うのは実際骨が折れそう。特にデザイナーは慣れない色指定方法になるだろうし。  
エンジニア視点だと基準を決めればそれに応じた色を出せるようになるというのは夢があるが。



### 参考文献
- [Xユーザーのjhey ▲🐻🎈さん: 「Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥](https://x.com/jh3yy/status/1770948509933445269)
- [Theming with CSS color functions 🤙](https://codepen.io/jh3y/pen/rNbmBrE)
- [oklch() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch)
- [hsl() - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl)
- [CSS の 色関数 について #CSS3 - Qiita](https://qiita.com/pon_u/items/0c216ee81f3b7aa04f98)


色関数について調べたことと感想

CSSの色関数について調べたこと



## stickyを使ったフッターの実装
よく見る残念な実装に、コンテンツ量が少なくフッターが画面下に貼り付かないことがありますが、以下の例はコンテンツ量が少なくても大丈夫でこのコード量なので現時点でもっとも優れた実装だと思います。

```html
<html>
  <body>
    <main>
      ここには色々。100vhを超えるものも入ったり。
    </main>
    <footer>
      これはフッターです
    </footer>
  </body>
</html>
```

```css
body { min-height: 100%;}

body > footer {
  position: sticky;
  top: 100vh; // もしくはbottom: 0
}
```

## stickyの解説
そもそも、position: sticky とはMDNによれば

> `sticky`
> 要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック（直近のブロックレベル祖先、表関連要素を含む）に対して top, right, bottom, left の値に基づいて相対配置されます。このオフセットは他の要素の配置には影響を与えません。
> この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先（overflow が hidden, scroll, auto, overlay として作成されたもの）に「粘着」します。
> <cite>引用元: [position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position#sticky)</cite>

難しい言葉がでてきますが、私なりに簡単に要約するなら「スクロールの機能を持つ直近の包含ブロックにくっつく」ことだと言ってみます。  

包含ブロックというのは「widthやheightを%指定したとき、その元となる要素（ブロック）」という理解でまずは大丈夫です。詳しくはMDNの[こちら](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#%E5%8C%85%E5%90%AB%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E8%AD%98%E5%88%A5)のページで。



### stickyの理解のためのデモ

`try-change-height`クラスのheight指定部分を色々と触ってみてください。
<iframe src="https://codesandbox.io/p/devbox/position-sticky-ycj8mq?file=%2Fstyles.css&embed=1"
     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
     title="position-sticky"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>





### 参考文献
- [この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック | コリス](https://coliss.com/articles/build-websites/operation/css/clever-sticky-footer-technique.html)
- [position - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/position#sticky)
- [レイアウトと包含ブロック - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#%E5%8C%85%E5%90%AB%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%81%AE%E8%AD%98%E5%88%A5)


最優のフッター固定CSSからposition=stickyを動かして理解する

フッター固定のCSSトリックから学ぶsticky

## 概要
[オフライン環境でも使えるブラウザベースの簡易マークダウンエディタ](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


detailstタグのテスト

<details>
  <summary>summary</summary>
content
</details>


details-test


## 都合のいいdockerイメージをダウンロード
`$ docker pull andreysenov/firebase-tools`

`$ mkdir docker-firebase-test`

参考: [https://hub.docker.com/r/andreysenov/firebase-tools](https://hub.docker.com/r/andreysenov/firebase-tools)

## Docker関連ファイルを作成

`$ vi docker-compose.yml`

```yml
version: "3.8"
services:
  web:
    build: .
    volumes:
      - ./:/app 
    ports:
      - "8000:3000"
      - "4000:4000" #Emulator Suite UI
      - "5000:5000" #Firebase Hosting
      - "5001:5001" #Cloud Functions
      - "8080:8080" #Cloud Firestore
      - "8085:8085" #Cloud Pub/Sub
      - "9000:9000" #Realtime Database
      - "9005:9005" #Firebase Login
      - "9099:9099" #Authentication
    
    tty: true
    stdin_open: true
```

`$ vi Dcokerfile`

```docker
FROM andreysenov/firebase-tools
WORKDIR /app
```

## ホスティングするファイルを用意
今回はReactをcreate-react-appで用意
コンテナに入ってreactをインストール

`$ docker-compose build`

`$ docker-compose up -d`

`$ docker exec -it docker-firebase-test_web_1 sh`

`$ cd /app`

`$ npx create-react-app sample-app --template typescript`

`$ exit`

## docker-compose.ymlを編集
`$ vi docker-compose.yml`

```yml
version: "3.8"
services:
  web:
    build: .
    volumes:
      - ./:/app 
    command: sh -c "cd /app/sample-app && yarn start"
    ports:
      - "8000:3000"
      - "4000:4000" #Emulator Suite UI
      - "5000:5000" #Firebase Hosting
      - "5001:5001" #Cloud Functions
      - "8080:8080" #Cloud Firestore
      - "8085:8085" #Cloud Pub/Sub
      - "9000:9000" #Realtime Database
      - "9005:9005" #Firebase Login
      - "9099:9099" #Authentication
    
    tty: true
    stdin_open: true
```

## firebaseへデプロイ
`$ docker-compose up -d`

`$ docker exec -it docker-firebase-test_web_1 sh`

`$ cd /app/react-ts-app`

`$ firebase login --no-localhost`

`$ firebase init hosting`

firebase.jsonを編集してfirebaseが公開ディレクトリをpublicディレクトリではなく、buildディレクトリを参照するように変更

`$ vi firebase.json`
```json
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

```

`$ firebase deploy`


DockerとFirebaseで作るReact環境構築


### 単体コンテナ用
`docker logs -f --tail=100 <container-name>`

### docker compose用
`docker compose logs -f --tail=10`

### 参考
- [Dockerのログが大きくなりすぎたから最新のだけ見たい](https://qiita.com/nitaking/items/4ca215b95cef2ad5e958)
- [docker-compose logs](https://docs.docker.com/compose/reference/logs/)


Dockerにおけるログ表示


そもそも11tyを使ったのは、Next.jsのexport(静的)

### Google Anarytics
cache.jsをオリジナルのコードに直す（）

プロキシ設定の解除


### docsディレクトリに静的ファイルを吐き出す設定
```javascript
// eleventy.js
    dir: {
      input: ".",
      includes: "_includes",
      data: "_data",
      output: "docs",
    },
```

### git push時のビルド設定を削除
以下の記述を削除
```json
// package.json
  "pre-push": [
    "build"
  ],
```

### 周辺用語
- 


### 参考文献
- []()

Googles製のテンプレート「eleventy-high-performance-blog」をGithub Pagesで使う


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）



### 疑問
Node.jsはnodeコマンドでWebサーバーとして立ち上がるみたいだけど、一方expressもある。
nodeコマンドで立ち上がるWebサーバーとexpressは何が違うんだ！！！！


### 参考文献
- [https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction](https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction)


疑問メモ_NodejsとExpressの違い


### 対処前の状況
EndeavourOSにfcitxとmozcをインストールした。
入力確定までは、入力補助ポップアップが表示されるが、カーソルが点滅してる位置には何も表示されない。

[ググって出てくる方法](https://dev.to/nabbisen/fcitx--1n59)も試すがGUIの「設定」を開いてもコンフィグファイルが開かれるだけでXIMの設定が見つからない
GUIの「設定」を開くと現れる設定ファイルは `~/.config/fcitx/config`である。

### 対処方法
`~/.config/fcitx/conf/fcitx-xim.config` を開く

```bash
vi ~/.config/fcitx/conf/fcitx-xim.config
```

開くといかのようになっていると思う
```text
[Xim]
# XIMで On The Spot スタイルを使う(起動中は変更できません)
# 可能な値:
# True False
# UseOnTheSpotStyle=False
```
コメントアウトを外すとともに、`UseOnTheSpotStyle=True`にする。
```text
[Xim]
# XIMで On The Spot スタイルを使う(起動中は変更できません)
# 可能な値:
# True False
UseOnTheSpotStyle=True
```

fcitxを再起動すればインライン表示されるようになってるはず。以上。


### 参考文献
- [Fcitx: リアルタイム入力（インライン入力）のための設定 - DEV Community](https://dev.to/nabbisen/fcitx--1n59)


fcitxで日本語がインライン表示されないし、設定からximが見つからない

### フォント
デジタルデータとしてフォントを表示するには切っても切り離せない。
これはもちろんWebの世界でも、ネイティブアプリの世界でも一緒。

フォントがない世界はありえない。

### 歴史？
Adobeはフォントという存在を意識できる人なら誰でも知ってる。
「Adobe Illustrator」「Adobe Photoshop」などに始まり、印刷用に開発されたPostScriptなどを開発したりしていた。

truetype(.ttf)
woff(.wof)
woff2(.woff2)
などの拡張子がある。

### フォントをユーザーにどう届けるか
* クライアントにプリインストールされているフォントを使う
* 自サーバーから配信
* Webフォントを使う（配信されているものにタダ乗り）

#### ライアントにプリインストールされているフォントを使う

- macOS Big Sur
  - [https://support.apple.com/ja-jp/HT211240](https://support.apple.com/ja-jp/HT211240)
- Windows 11
  -  [https://docs.microsoft.com/en-us/typography/fonts/windows_11_font_list](https://docs.microsoft.com/en-us/typography/fonts/windows_11_font_list)
- iOS
  - [https://developer.apple.com/fonts/system-fonts/](https://developer.apple.com/fonts/system-fonts/)
- Android
  - 端末メーカーによる場合があり

#### 自サーバーから配信
主要ブラウザはwoff2に対応しているので、woff2で用意するば十分。

[対応ブラウザ](https://caniuse.com/woff2)

#### Webフォントを使う
有名なものとして
- [Google Fonts](https://googlefonts.github.io/japanese/)
- [REALTYPE](https://www.realtype.jp/)


### 参考文献
- [各OSの標準搭載フォント一覧へのリンク集  |  Rriver](https://parashuto.com/rriver/development/preinstalled-font-list-by-operating-system)



フォントについて


### 対処前の状況
EndeavourOSにfzfをインストールしたが、fzfの履歴検索が機能しない
![対処前イメージ](https://i.gyazo.com/d3febdcaec7dd79a7c5f2d69a0fe3719.png)

### 対処方法
環境によって異なるが私の環境の場合は`/usr/share/fzf`にあった。人によっては`/usr/loxal/share/docs/fzf`などにある場合もあるらしい。
```
$ls /usr/share/fzf/
合計 52
drwxr-xr-x   2 root  4096  2月 15 22:54 .
drwxr-xr-x 177 root  4096  2月 15 22:55 ..
-rw-r--r--   1 root 14523  2月  4 00:41 completion.bash
-rw-r--r--   1 root 11766  2月  4 00:41 completion.zsh
-rw-r--r--   1 root  5524  2月  4 00:41 key-bindings.bash
-rw-r--r--   1 root  4115  2月  4 00:41 key-bindings.zsh
```


私はzshを使っているので.zshrcなどに以下を追記した
```bash
source /usr/share/fzf/key-bindings.zsh
```

### 参考文献
- [fzf bash history CTRL+R not working · Issue #1190 · junegunn/fzf](https://github.com/junegunn/fzf/issues/1190)


fzfの履歴検索（Ctrl + r）が動いてないときに確認すること

### 疑問に遭遇した状況
最近 Cloud Run にハマってる。Cloud SDK こと gcloud コマンドで Artifact Registry(Container Registry)にアップロードしてほいっと `gcloud run deploy` ですぐにサービスが公開できて気持ちがいい。

じゃあそろそろGithub ActionsでCI/CDの設定でもしようかと思ったら、サービスの概念が自分の中で咀嚼できていなかったことに気がついた。そこでの疑問は以下だ。

### 疑問
**Cloud Build なんやねんこいつ** である。

`google-github-actions/setup-gcloud` を使ってワークフローを使っていると、次のような形になる。

```yaml
name: Build and Push Image

on:
  push:
    tags:
    - "*"

jobs:
  build-and-publish:
    name: Build and Push docker image
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: ${{ github.ref }}

    - name: Setup Google Cloud
      uses: google-github-actions/setup-gcloud@v0
      with:
        service_account_key: ${{ secrets.GCLOUD_AUTH }}
        project_id: node-datastore-test-111

    - name: Configure docker for artifact registry
      run: |
        gcloud auth configure-docker asia-northeast1-docker.pkg.dev

    - name: set TAG
      run: |
        echo "TAG=$(echo $GITHUB_REF | awk -F/ '{print $NF}')" >> $GITHUB_ENV

    - name: Build
      run: |
        docker build -t asia-northeast1-docker.pkg.dev/node-datastore-test-111/node-datastore-test-repo/node-datastore-test-image:${{ env.TAG }} ./

    - name: Push
      run: |
        docker push asia-northeast1-docker.pkg.dev/node-datastore-test-111/node-datastore-test-repo/node-datastore-test-image:${{ env.TAG }}

    - name: Deploy
      run: |
        gcloud run deploy test-service --image asia-northeast1-docker.pkg.dev/node-datastore-test-111/node-datastore-test-repo/node-datastore-test-image:${{ env.TAG }} --region asia-northeast1 --platform managed --allow-unauthenticated

```

せっかくdockerコマンドの羅列で気持ちよくなれてたのに、deployはgcloudコマンドに戻ってくる。

...?
Cloud Buildを挟まないとArtifact RegistryからCloud Runへデプロイできないと思い込んでいたけど、Cloud RunにデプロイするためにArtifact RegistryにビルドしたDocker Imageをアップロードしてるだけで、Cloud Buildいらんやん。。。

なんやねん Cloud Build こいつは、でした。


### 周辺用語
- Github Actions
- Cloud SDK
- Cloud Build


### 参考文献
- [Cloud Run へのデプロイ](https://cloud.google.com/artifact-registry/docs/integrate-cloud-run#command-line)


GCPのCloudBuildなんやねんこいつ


Googleが提供してくれているCloud Runは便利ですよね。私は普段Reactでクライアント側を触っていてFirebaseで済ませることが多いのですが、Cloud Runの便利さに感化されてRDBも使いたくなりました。（FirebaseはNoSQLしか提供してくれていないので...）

しかしへっぽこアプリに使うにはいかんせん料金が気になったところで、予想よりも今回の用途には高級すぎました。今回の判断の元になった部分をまとめます。

自称へっぽこアプリへの、想定されるトラフィックとしては1日に1件リクエストがあるかといったレベルのものを想定して話を進めます。

まず第一にCloud Runを使用する。そこにクラウドサービスを利用してRDBを接続したい。
そうなった時の候補は、次の2つで、こちらの料金を概算していきます。
1. Cloud Run と Cloud SQL
2. Cloud RunにホストしたAPIサーバーをVPS上のDBサーバーに繋ぐ




### 注意事項
1$=100円で計算しています。

料金は全て東京リージョンで計算しています。


## **1. Cloud SQLの料金**
1ヶ月あたり800円。

#### 内訳
1. ストレージとネットワークの料金
  * SSD ストレージ容量: 1 GB あたり $0.221/月
  * HDD ストレージ容量: 1 GB あたり $0.117/月
2. ネットワーク下り（外向き）の料金
  * 送信先 Google プロダクトであれば大陸内は無料
  * インターネット下り（外向き、Cloud Interconnect を使用する場合）は$0.05/GB
  * インターネット下り（外向き、Cloud Interconnect を使用しない場合）は$0.19/GB
3. インスタンスの料金

| 共有コア マシンタイプ | 仮想 CPU 数 |RAM（GB） |最大ストレージ容量|1ヶ月あたりの料金（米ドル）
|:-----------|:------------|:------------|:------------|:------------|
| db-f1-micro | 共有  | 0.6 | 3,062 GB | $7.67 |
| db-g1-small | 共有  | 1.7 | 3,062 GB | $25.55 |



CloudFunctionsで停止と起動をスケジューリングしてことを解説している[Google Cloudのブログ](https://cloud.google.com/blog/ja/topics/developers-practitioners/lower-development-costs-schedule-cloud-sql-instances-start-and-stop)もあります。


## **2. 他社VPSにDBサーバを建て接続**
必要なもの(料金計算対象)
* VPS(今回はConoHa)
* Cloud NAT
* 静的IPアドレス


### **ConoHaのVPSの料金**
1ヶ月あたり682円

メモリ: 512MB、
CPU: 1コア、
SSD: 30GB


### **Cloud NATの料金**
1ヶ月あたり数円

| 割り当てられている VM インスタンスの数 | 1 時間あたりの料金 | 処理された 1 GB あたりの料金（下りと上り（外向きと内向き）の両方） |
|:-----------|:------------|:------------|
| 32 VM インスタンスまで | $0.0014 × ゲートウェイを使用している VM インスタンスの数 | $0.045   |
|32 VM インスタンスを超える場合|$0.044|	$0.045

参考：[https://cloud.google.com/nat/pricing?hl=ja](https://cloud.google.com/nat/pricing?hl=ja)


### **静的IPアドレス**
1ヶ月あたり1,080円

静的IPアドレス（割り当て済み、未使用）	1時間あたり$0.015

参考:[https://cloud.google.com/compute/all-pricing#ipaddress](https://cloud.google.com/compute/all-pricing#ipaddress)


### その他参考
- [https://cloud.google.com/run/docs/configuring/static-outbound-ip](https://cloud.google.com/run/docs/configuring/static-outbound-ip?hl=ja)


Google Cloud Runで動かすアプリをRDBに接続した際の料金を考える


主にCloudRun周辺の。すごく個人的なまとめです。

## コマンド
### 一般枠
- `gcloud --help`
- `gcloud config --help`
- `gcloud config configurations list`
- `gcloud config configurations create <configuration-name>`
- `gcloud config configurations activate <configuration-name>`
- `gcloud projects list`
- `gcloud config set project <your-project-id>`
- `gcloud config set project <project-name>`
- `gcloud projects create <you-project-id> --name <your-project-name>`


### Cloud BuildとArtifact RegistryとCloud Run
- `gcloud services enable  artifactregistry.googleapis.com cloudbuild.googleapis.com`
- `gcloud artifacts repositories list`
- ` gcloud artifacts repositories create <repository-name> --repository-format=docker --location=asia-northeast1 --description="Docker repository hoge"`
- `gcloud builds submit --tag asia-northeast1-docker.pkg.dev/<you-project-id>/<repository-name>/<image-name>:tag1`
- `gcloud run deploy <service-name> --image asia-northeast1-docker.pkg.dev/<you-project-id>/<repository-name>/<image-name>:tag1 --region asia-northeast1 --platform managed --allow-unauthenticated`


### その他メモ
- `gcloud builds submit`時にカレントディレクトリのDockerfileがアップロードされてビルドされるものだと思ってたけど、[公式ドキュメント](https://cloud.google.com/sdk/gcloud/reference/builds/submit)を見てもそうは書いてない？とりあえずカレントディレクトリの
- Cloud Runがデフォルトで外部接続に使うポートは8080ってまじ？



Google Cloud Platform（gcloud）の個人的によく使うコマンドを備忘録的にまとめています。

よく使うgcloudコマンド


## 前提
私はGitHub Pagesで[Jekyll/minima](https://github.com/jekyll/minima)を利用しているので、同様な構成な方に向けた記事です。

## サイトマップを作成
jekyllのプラグインを利用してサイトマップを作成するため `_config.yml` に以下を記述。
```yml
plugins:
- jekyll-sitemap
```

作成されたサイトマップは以下のURLで確認できる。

`https://{ユーザー名}.github.io/sitemap.xml`


## gtag(Google analytics)を埋め込む
Google analyticsを仕込んでいることが前提になっているようなので、事前に設定を済ます。

私のようにGitHub Pagesで[Jekyll/minima](https://github.com/jekyll/minima)を利用している場合
`_config.yml` に以下のような記述をする。
```yml
google_analytics: G-WXXXXXXXXX
```

## Google Search Consoleにアクセス
[https://search.google.com/search-console](https://search.google.com/search-console)にアクセスする。



サーチコンソールのロゴ下のメニューをクリックし、開いたメニューの中から「プロパティ追加」をクリック。
![俯瞰図](https://i.gyazo.com/dce2b95d46361ad38e873d5e5e9e9291.png)



URLプレフィックスで自身のページ（`https://{ユーザー名}.github.io`）を入力。続行をクリック。
![追加画面](https://i.gyazo.com/2d834c38eedd04d1d42663f7dcc4a1c0.png)



登録直後の画面
![登録直後](https://i.gyazo.com/c3ccc8921cac92ce03d4964cc6a78e84.png)



### サイトマップを登録
左側のメニューから、「インデックス」->「サイトマップ」をクリックする
サイトマップを送信する。
![サイトマップ登録](https://i.gyazo.com/e987cfaa2328b58a5b42d9d070929f48.png)



サイトマップ送信直後は以下のようになる。
![サイトマップ送信直後](https://i.gyazo.com/eaf2aa36d0e725c9f4a01da5ef6c833f.png)



あとは処理が完了するまで数日待ちます。

## 確認（数日後）

サマリー（検索パフォーマンス）
![数日後サマリー](https://i.gyazo.com/70fde43f72dc84263a0f662eb5c8e4af.png)

サイトマップ
![数日後サイトマップ](https://i.gyazo.com/175db4f4b7552d5169601a659b7ece4a.png)

## 注意
Google Analyticsタグの埋め込みなどは利用しているJeykllテーマによって異なる場合があります。自身の利用しているリモートテーマをしっかりと確認しましょう。

### 参考文献
- [https://netchira.github.io/blog/githubpages/SEOsono1.html](https://netchira.github.io/blog/githubpages/SEOsono1.html)
- [https://developers.google.com/search/docs/beginner/seo-starter-guide](https://developers.google.com/search/docs/beginner/seo-starter-guide)


GitHub Pages(Jeykyll)をGoogle Search Consoleに登録


大好きなWebサービス「Gyazo」の紹介です。

簡単にこのサービスを説明すると、Gyazoを使ってスクリーンショットを撮ると無料のクラウドサーバーにアップロード&URLが発行され、共有が簡単にできるサービスです。

`https://gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8`
![例](https://i.gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png)


このようにすると、画像を直接指定できる。

`https://i.https://gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png`

以下のようにするとサイズを指定できる

`https://i.gyazo.com/thumb/300/37f2d7be5ea5964c6aa339f0aa95c9f8.png`

これを応用すると、画像を自前でホストせずに、最適化した画像によるレスポンシブ対応がhtmlだけでできる。

```html
  <img
    src="https://i.gyazo.com/37f2d7be5ea5964c6aa339f0aa95c9f8.png"
    srcset="https://i.gyazo.com/thumb/320/37f2d7be5ea5964c6aa339f0aa95c9f8.png 320w,
            https://i.gyazo.com/thumb/640/37f2d7be5ea5964c6aa339f0aa95c9f8.png 640w,
            https://i.gyazo.com/thumb/1280/37f2d7be5ea5964c6aa339f0aa95c9f8.png 1280w"
    sizes="(max-width:1280px) 100vw, 1280px"
  >
```

`<picture/>`と`<source/>`を使えばより柔軟に設定できる。


### 周辺用語
- レスポンシブデザイン
- srcset
- ポリフィル「picturefill」

### 参考文献
- [レスポンシブ画像 - ウェブ開発を学ぶ | MDN](https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [HTML 5.1のsrcset・sizes属性とpicture要素の使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA](https://ics.media/entry/13324/)


Gyazoをブログ用の画像ホストとして使い倒す


## サンプルコード

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwLeEOj" data-user="ikmnjrd" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ikmnjrd/pen/RwLeEOj">
  CSS-hamburger</a> by ike (<a href="https://codepen.io/ikmnjrd">@ikmnjrd</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



### 重要なポイント

#### CSSプロパティ
```css
background: currentColor;
```
参考:[https://zenn.dev/phi/articles/css-tips-currentcolor](https://zenn.dev/phi/articles/css-tips-currentcolor)

#### アニメーションのイージング
- `cubic-bezier`
  - [cubic-bezier を知る。](https://qiita.com/96usa_koi/items/6f313f1d664806a77313)

#### アニメーション
座標変換の原点を設定する`transform-origin`

#### WAI-ARIA
aria-expanded="false"



CSSアニメーションで作るハンバーガーメニュー


まずはこちらをご覧ください。毒々しいCSSが施されたselect要素です。
![chrome-normal](https://i.gyazo.com/a3079d8e10a42eb46b9d55d1f99e6c97.png)

上の画像のようなちょっと変わったデザインのselect要素を作った時、ChromeやOperaではfocus状態の時は次のようになります。  
![chrome-focus-default](https://i.gyazo.com/15638460feada9a82dfb8df92a5ccc7b.png)

毒々しくしたいのですがデフォルトの青い枠線が中途半端にかかり、邪魔になっています。
そんな時、borderとかなり似ている[outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)というプロパティを使います。
```css
.poison-select:focus {
  outline: 1px solid #ff0;
  /* Chromeなどでのデフォルトの色味を設定したい場合は「-webkit-focus-ring-color」を設定する */
  /* outline: 1px solid -webkit-focus-ring-color; */
}
```

![chrome-focus-custom](https://i.gyazo.com/81d1875832d0538bdded5a56d7af5895.png)

いい感じにすることができました。  
safariでも見てみましょう。

![safari-focus-without-offset](https://i.gyazo.com/151a452bffb8191e2c8949781dc14769.png)

違和感がありますよね？  
大きく2点で違いがあります。
* safariではselect要素の内側にfocus時の枠線ができる
* safariではoutline要素にradiusが効かない(※2023年3月27日リリースの[Safari V16.4](https://webkit.org/blog/13966/webkit-features-in-safari-16-4/)から解消)

主に1点目の「select要素の内側にfocus時の枠線ができる」時の対策に[outline-offset](https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset)を明示的に設定(0pxで)してあげます。

```css
.poison-select:focus {
  outline: 1px solid #ff0;
  outline-offset: 0px;
}
```
すると綺麗になります。  
![safari-focus-without-offset](https://i.gyazo.com/65572abbec5eaf9876f7e66ceef26857.png)


### Reproduction
<iframe src="https://codesandbox.io/embed/affectionate-surf-e2w97d?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="affectionate-surf-e2w97d"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

### 参考文献
- [outlineプロパティで作った枠線は角丸にすることができない - dskd](https://dskd.jp/archives/73.html)
- [css - What is the default style of the blue focus outline in Chrome? - Stack Overflow](https://stackoverflow.com/questions/20609485/what-is-the-default-style-of-the-blue-focus-outline-in-chrome)

やっぱりsafariはおかしいね。select要素を少しカスタマイズしようとしたところにも地雷がある。

select要素をCSSでカスタマイズする際に気をつけるべきブラウザごとの差



### 状況
VSCodeからGitHub CopilotのためにGitHubログインすると次のようなメッセージが表示される。  
![error message](https://i.gyazo.com/eb85146b137d3908359fab61c3952e95.png)
「Open troubleshooting guide」をクリックするとこれが開く[https://code.visualstudio.com/docs/editor/settings-sync#_troubleshooting-keychain-issues](https://code.visualstudio.com/docs/editor/settings-sync#_troubleshooting-keychain-issues)




### 参考文献
- [Automatically unlock gnome keyring at boot - Desktop Environments / All WMs - EndeavourOS](https://forum.endeavouros.com/t/automatically-unlock-gnome-keyring-at-boot/24216)
- [Troubleshooting keychain issues - Settings Sync in Visual Studio Code](https://code.visualstudio.com/docs/editor/settings-sync#_troubleshooting-keychain-issues)


i3wmデスクトップでVSCodeのGitHubログインが保持できなかったメモ


### まずは検索
検索してみる。
![draw.io検索](https://i.gyazo.com/d68e020225a55e471084351f8512ad1c.png)

draw.ioで`https://~`を参照する形で読み込んでしまうとエクスポート時に画像が表示されないので注意。

### 検索してないなら
[いい感じにまとめてくれているQiita記事](https://qiita.com/tkit/items/932316c5f5f7b162b61e)


### 何がなんでもアイコンを使いたい
[https://vecta.io/symbols](https://vecta.io/symbols)

### svgでもいいなら
[https://devicon.dev/](https://devicon.dev/)


draw.ioで作る技術資料に使うツールアイコン

### 前提

terminal操作で`ctrl+a`を押せば行頭へ戻る  
`ctrl+e`を押せば行末へ移動  
`ctrl+u`を押せばカーソル位置から行頭まで削除  
ここまではいい。  

しかし、  
`option + b`や`option + f`を使って1単語分の移動をしようとすると筆記体のfやルート記号が入力され移動できない  
(MacのoptionはしばしばAltと同等)  

### 結論

iTerm側の設定を変更する。  
画像のLeft Option keyがNormalがデフォルトの設定のはずなので、Esc+に変更する
![iTerm](https://i.gyazo.com/89dddef08769a9f3f3e3c59408a83ce9.png)

### 参考文献

- [macos - Bash keyboard shortcuts in iTerm like Alt+d and Alt+f - Stack Overflow](https://stackoverflow.com/questions/18923765/bash-keyboard-shortcuts-in-iterm-like-altd-and-altf)


僕の疑問に追記する形で更新しています。

iTermで1単語分の移動をできるようにする


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

### ハマったポイント

なぜ②の箇所で変数`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が共存しているのか


## 前提
私はGitHub Pagesで[Jekyll/minima](https://github.com/jekyll/minima)を利用しているので、同様な構成な方に向けた記事です。


## favicon設定
./includes/custom-head.htmlに以下のコードを追記

```html
<link rel="icon" href="/favicon.ico">
```

用意したfaviconをルートディレクトリに配置。
![リポジトリ](https://i.gyazo.com/f1dd722b4abdecd1fa61907db9601047.png)


## 参考にしたもの
- [https://zenn.dev/pacchiy/articles/e4dcd7bd29d387](https://zenn.dev/pacchiy/articles/e4dcd7bd29d387)


jekyllでfaviconを設定


できるだけ楽をしてブログを続けるために仕方なくGitHub PagesでJekyllを使ってる人は僕以外にいることと思う。

~~今となっては古いデザインのものが多く、好みのテーマを見つけることすらめんどくさかった。それすら古さが漂う~~

せっかく見つけたテーマのうち1部分だけ気に入らない時の対処法を書く。
ちなみにテーマは[minima](https://github.com/jekyll/minima)です。

今回僕が気に入らなかったのが、footerにある「Subscribe」の文字部分。これを消したい。
![feeds削除前](https://i.gyazo.com/1c3f3779075834651e9c927a2ea096a4.png)


[minima](https://github.com/jekyll/minima)のソースコードを確認し、`/_incledes/footer.html`が気に入らなかった箇所があることを確認した。


**自身のリポジトリ**に`/_incledes/footer.html`を作成、今回はオリジナルのfooter.htmlから該当箇所を削除。

以下の画像のような状態になると思います。
![リポジトリルート](https://i.gyazo.com/aa22c02a8c6b29a6ed66c1d473d6695d.png)

いつも通りGitHubにpush。
消えたことが確認できました。
![feed削除後](https://i.gyazo.com/1d8dc36636e96098fa0bff06abe2a31f.png)


Jekyllテーマのhtmlオーバーライド


* https://github.com/jekyll/minima
* https://github.com/zivong/jekyll-theme-hydure
* https://github.com/huangyz0918/moving
* https://github.com/jekyllt/jasper
* https://github.com/joshgerdes/jekyll-uno


GitHub Pagesでズボラに使えそうなJekyllのブログ用テーマ


Github Pagesで手軽にブログを作成する際に第一候補となるであろうStatic Site Generator「Jekyll」に自作ブログ内検索を手軽に導入する方法について記述します。

![完成イメージ図](https://i.gyazo.com/9f18a04650fb3bfaef972a88a25a00f2.png)


### 準備するもの
- すでに公開設定などを済ませたJekyll製ブログ
### 手順
1. 以下に示すソースコード（./assets）をダウンロードします。

[公式GitHubリポジトリ](https://github.com/jekylltools/jekyll-tipue-search)は2017年8月23日より新規コミットがないので、以下に直接zipのリンクを掲載しています。
[ソースコード(d4b5df7).zip](https://github.com/jekylltools/jekyll-tipue-search/archive/refs/heads/master.zip)




2. 解凍し、自身のブログのソースコードにassetsフォルダの中身を丸ごとコピーします。

![image1](https://i.gyazo.com/e8456b0e9178d920970dcc32c088b62a.png)
![image2](https://i.gyazo.com/b1c5d6ca798cf6851b5b17db17b09e8e.png)

3. 利用しているテーマでheadタグを規定している部分に以下のソースコードを追記する。
   - 筆者の環境だと[minima](https://github.com/jekyll/minima)を利用しているので、`_includes/custom-head.html`が本手順の作業対象になります。

[ソース](https://github.com/jekylltools/jekyll-tipue-search)

![image3](https://i.gyazo.com/a75a11a735f7db802a1f1eaccabebad3.png)

4. 以下に示すコードを`search.html`としてコピペし、画像のように配置します。
   - [minima](https://github.com/jekyll/minima)であれば、統一感を持たせるためにファイル名`search.md`とするのが綺麗な気がするので、私は`search.md`としています。

[ソース](https://github.com/jekylltools/jekyll-tipue-search)

![image4](https://i.gyazo.com/e83c01861fea2707147a8970e8f31784.png)


5. あとは`_config.yml`をいじるなりしてヘッダー部分にパーマリンクを設置したり、CSSを少し変えてみたり、ビルド、デプロイをすれば完了です。
   - よろしければ[筆者の公開リポジトリ](https://github.com/ikmnjrd/ikmnjrd.github.io)を参考にしてみてください。

完成です。

![完成](https://i.gyazo.com/82a80325376d64d4e4560fc0b924881f.png)


Jekyll Tipue Searchによる記事検索の導入方法


### 疑問
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を使う


### どのように書くのがいいのか
MITやISCなどよく書いてあるがどう書くのがいいのか？
npm Docsにはこのように書いてある。
> BSD-2-Clause や MIT などの一般的なライセンスを使用している場合は、次のように、使用しているライセンスの現在の SPDX ライセンス識別子を追加します。
> { "license" : "BSD-3-Clause" }
> --- [package.json | npm Docs](https://docs.npmjs.com/cli/v6/configuring-npm/package-json#license)

### SPDXとは
Linux Foundationのブログ（日本語訳版）に怪しい日本語でこのように書いてあります。
> SPDXは、コンポーネント、ライセンス、著作権、セキュリティ リファレンスなどのソフトウェア部品表 (SBOM) 情報を伝達するためのオープンな標準です
> --- [SPDX : すでに世界共通のソフトウェア部品表 (SBOM) およびサプライチェーン セキュリティで使用 - The Linux Foundation](https://www.linuxfoundation.jp/blog/2021/06/spdx-its-already-in-use-for-global-software-bill-of-materials-sbom-and-supply-chain-security/)

### ライセンスのリストを参照する
[SPDX License List](https://spdx.org/licenses/)
リンク先の表からのIdentifierを探し、次のようにかく。
```json
{ "license" : "CC0-1.0" }
```

UnlicenseなどもしっかりとSPDXライセンスリストに記載されています。

### 余談
[https://github.com/jslicense/spdx-license-ids](https://github.com/jslicense/spdx-license-ids)のスター数は2桁なのにUsed byの項目が1千万人近くになってるのはどういうことなのか不思議に思った。








Licenseを書く際の決まりについて調べたのでまとめた。

package.jsonに記述するlicenceの書き方



### ハードウェア
| 部品　        | 名称                                         |
|:--------------|:---------------------------------------------|
| CPU    　     | AMD Ryzen 7 7745HX (オンボード)              |
| マザーボード  | Minisforum BD770i                            |
| GPU           | ASUS Radeon RX 7600 OC  8GB                  |
| メモリ        | Crucial 32GB DDR5 4800MHz SODIMM             |
| HDD           | Crucial T500 1TB PCIe Gen4 NVMe M.2 SSD      |
| CPUファン     | Noctua NF-A12x25 PWM chromax.Black.swap      |
| 電源          | Cooler Master V850 SFX Gold ATX3.0           |
| ケース        | Cooler Master MasterBox NR200P ホワイト      |


### ソフトウェア
| 部品　        | 名称                                         |
|:--------------|:---------------------------------------------|
| OS     　     | EndeavourOS Linux x86_64                     |
| WindowManager | i3                                           |


### ざっくり構成を伝えるコピペ用
|               |                                   |
|:--------------|:----------------------------------|
| OS     　     | EndeavourOS Linux x86_64          |
| WM            | i3                                |
| CPU    　     | AMD Ryzen 7 7745HX (オンボード)   |
| マザーボード  | Minisforum BD770i                 |
| GPU           | ASUS Radeon RX 7600 OC  8GB       |

自作PCの構成_2024-03


### 調査
[Blackhole](https://github.com/ExistentialAudio/BlackHole)や[ladiocast](https://apps.apple.com/jp/app/ladiocast/id411213048)を使って録音した音声を文字起こしする方法がよく紹介されている。

リアルタイムでGoogle Docs上に文字起こしをしたかったが、Blackholeとlaidiocastでは実現できず。


### 無料で使えるリアルタイム文字起こしサービス
* Texta
* Sloos
* AI GIJIROKU


### 個人的な結論
普段のメモなどをGoogle Docsで管理しているため、Google Docsをマストとする。
そのためGoogle MeetやZoomを簡単に録音したい。
以上の理由から、[Blackhole](https://github.com/ExistentialAudio/BlackHole)と[ladiocast](https://apps.apple.com/jp/app/ladiocast/id411213048)で録音データをGoogle Docsに文字起こしする方式で、
録音自体を[Krisp](https://krisp.ai/)（ノイズ除去ソフト）で提供されている録音機能を使う。



Macでオンライン会議を文字起こし


ただの引用メモ

> Mac OS X に最初からインストールされているPythonを利用

```bash
$ cd ドキュメントルートとなるフォルダ
$ python -m SimpleHTTPServer 8080
```


### 参考文献
- [https://qiita.com/massie_g/items/2913066e596dae197539](https://qiita.com/massie_g/items/2913066e596dae197539)


Macでお手軽Webサーバー

失敗したけど、悔しいので調べたことのメモとそのプラグインの[リポジトリ](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)から接続する


## まとめ
- 自分のモチベの言語化で人に見せるようではない。
- mp3の規格書は有料だからほぼ公開されてない。OSSの[Flac](https://gitlab.xiph.org/xiph/flac)でも読んでおけ


## この記事を書いた動機
[誰が音楽をタダにした？　巨大産業をぶっ潰した男たち (早川書房)](https://www.amazon.co.jp/%E8%AA%B0%E3%81%8C%E9%9F%B3%E6%A5%BD%E3%82%92%E3%82%BF%E3%83%80%E3%81%AB%E3%81%97%E3%81%9F%EF%BC%9F-%E5%B7%A8%E5%A4%A7%E7%94%A3%E6%A5%AD%E3%82%92%E3%81%B6%E3%81%A3%E6%BD%B0%E3%81%97%E3%81%9F%E7%94%B7%E3%81%9F%E3%81%A1-%E6%97%A9%E5%B7%9D%E6%9B%B8%E6%88%BF-%E3%82%B9%E3%83%86%E3%82%A3%E3%83%BC%E3%83%B4%E3%83%B3-%E3%82%A6%E3%82%A3%E3%83%83%E3%83%88-ebook/dp/B01LYMTJ0M)という本を読んでいたらmp3という音楽ファイルフォーマットの開発それ自体と規格として広げるための難しさが書かれていた。  
特に開発に関しては、音響心理学などに興味がある自分としては、人間の特性に合わせていくつもの（何個？）チューニングが施されてるとはなぜか想像していなかった（ローパスフィルターなどが1,2個だと思い込んでいた）ので、この機会にmp3を学ぶためのヒントとして読書途中に探した物を残しておく。


## 参考リンク一覧

- [デジタルオーディオの仕組み - 音声圧縮の原理 MP3, AAC, ATRAC, etc.](https://align-centre.hatenablog.com/entry/2014/04/28/222154)
  - すご〜くざっくりとmp3がどういう処理をしているのか思い出すのにいい。
- [Spotifyのオーディオファイル形式 - Spotify](https://support.spotify.com/jp/artists/article/audio-file-formats/)
  - spotifyはアーティストからFLAC形式でオーディオファイルを送信するのを推奨している。それをspotifyが適切な音質オプションに合わせて配信している。
- [MP3 - Wikipedia](https://ja.wikipedia.org/wiki/MP3)
  - mp3の状況（規格書が有料）をここで知った
- [CD 11172-3
CODING OF MOVING PICTURES AND ASSOCIATED AUDIO
FOR DIGITAL STORAGE MEDIA AT UP TO ABOUT 1.5 MBIT/s
Part 3 AUDIO
CONTENTS ](https://csclub.uwaterloo.ca/~pbarfuss/ISO11172-3.pdf)
  - mp3の規格書の極々一部と思われるもの
- [Xiph.Org / flac · GitLab](https://gitlab.xiph.org/xiph/flac)
  - 現在音楽業界で広く使われているFlacのソースコード

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

mp3について



年始からMTGアリーナを始め、ファイレクシアの肉体喰らいにほれた結果このデッキを組み、主にBO1で回してようやくダイヤモンドに到達しました。

##　コンセプト
墓地に落としたファッティを利用しながら殴るシンプルなコンセプトのデッキ。  
デッキの核である怪物的戦ヒル、ファイレクシアの肉体喰らいを中盤に展開し、相手に除去などで対応させた後にオリヴィアで釣りながら殴ってゲームエンド。
![デッキ全容](https://i.gyazo.com/725b9ef9a22d6c69a09ae090c037bb21.jpg)

## デッキの長所
コントロール系のデッキに対して強め。  
でかいクリーチャーが盤面に出るので楽しい。  
デカブツを墓地に落とすためのルーティングが大量なので、結果的に安定する。

## デッキの短所
アグロ系デッキ全般。赤単にはほぼ何もさせてもらえず負ける。白や緑などもカウンターを増やしながら横に並べられる動きをされると無理。  
でかいクリーチャーが除去られたり1/1に止められたりするのは悲しい。


## メインカード紹介
* 怪物的戦ヒル  
  最大で4マナ15/15として君臨してくれる。
* ファイレクシアの肉体喰らい  
  ワームとぐろエンジンを彷彿とさせる大好きなカード。このデッキを考え始めるきっかけ。
* 鏡割りの寓話  
  ただのパワーカード。そのため、上のメインカードをコンセプトに組み上げて行ったのに、寓話を最大限生かす形にどんどんなっていった。
* 速攻付与系
  * 無謀な嵐探し  
  2Tルーティングで終末の影を墓地に、3T嵐探し、4T戦ヒルで殴るなど気持ちいい。ターン終了時まで速攻は有効なので、第一メインで出した税血の収穫者のタップ能力を第二メインで使うなども良い。
  * 苦々しい再会
  * 寓話（キキジキ起動能力）
  * 真紅の花嫁、オリヴィア
* 墓地肥やし系
  * ルーティング
    * 苦々しい再会
    * 染み付いた耽溺
    * 税血の収穫者(血トークン)
    * 死体鑑定士
    * 寓話(第二章)
* リアニメイト系
  * 真紅の花嫁、オリヴィア



## リスト入りしなかったカード
* 試作クリーチャーたち
  * 突き刺す戦耕し  
  一番の迷いどころ。さすがに接死を持ってるだけあり、緑相手などには強いが見送り
  * 鉄蹄の猪  
  フィニッシュのタイミングで魂力を使いたいために手札に残しておくが、序盤に落ちれないなら意味がなかったため不採用
  * 巨体変異  
  試作で出すとサイズ的に物足りない。コピー元がETBだけでも強いやつが伝説か税血の収穫者ぐらい、小粒システムクリーチャーの強化という文脈にもデカブツ主体のこのデッキには合わない。使ってて面白かったけど不採用

* 街並みの地ならし屋  
自力で出すようなマナ加速がないため不採用。こいつを入れるならもう一枚、終末の影を投入した方が安定する。

* 伝説のクリーチャー全般  
キキジキでデカブツをコピーしたい盤面は結構あるのだが、伝説だとコピーできなくてテンポロスが負けにつながった感覚。
シェオルドレッドやシェオルドレッドやトクスリル、ザンダー卿など強いだけで詰に行きづらいカードだった。  
逆に採用したオリヴィアと殉至は回避能力(飛行)で殴りに行けることが多く仕事できることが多かったので採用している。

* リアニメイト系のソーサリー(インスタント)  
戦ヒルなど、戦場に自力で出しやすいデカブツが主体なので5マナ払ってまで出したいという機会が少ない。1マナの不死なる悪意だけワンチャン。ギックスの残虐は悠長、殺戮者の目覚めはワンチャン

* 死体の爆発
ありかも。予算不足で試せてない

* 貪る混沌、碑出告
予算不足で試してないが、そんな強くなさそう


* PW全般
  * 3~5マナ程度で寓話や戰ヒルが動きたいタイミングと被る。これらで動きづらく長期戦に持ち込みたい時はヴェリアナがあるといいかもしれないが、4マナ以降が生物のみの構成に多少のメリットを感じてるため入れづらい。
  * 候補
    * ヴェールのリリアナ
    * 敵対するもの、オブ・ニクシリス

* 流城のルノ
面白そうなロマン枠。流城のルノが通る時はほぼ勝ちな状況なのでダメ押しのロマン野郎でしかなかった。

* 貪る混沌、碑出告
条件が難しいがルノとシナジーがありながらマナ総量分のダメージ飛ばせる。

* 貴顕廊一家の魔除け
殴り勝つデッキなので死体鑑定士に軍配があり。3マナから動き出す

* ランタンを携えるもの
このデッキのデカブツに足りないの回避能力付与。今のマナ基盤で1ターン目から青で動くことが難しいので保留したまま。

* 代償破
うまくいけば15点パンチ。ヒル+代償破=8マナなので1ターンに決めきれないのが痛い。

* 真夜中の空、殉至
強い。しかしフィニッシャーとして即効性がなく不採用


## インポート用デッキリスト
### 日本語
```txt
デッキ
4 憑依された峰 (MID) 263
2 山 (NEO) 290
4 沼 (NEO) 288
4 鏡割りの寓話 (NEO) 141
3 嵐削りの海岸 (VOW) 265
2 難破船の湿地 (MID) 267
2 島 (BRO) 271
1 見捨てられたぬかるみ、竹沼 (NEO) 278
4 ファイレクシアの肉体喰らい (BRO) 121
2 真紅の花嫁、オリヴィア (VOW) 245
4 硫黄泉 (DMU) 256
2 無謀な嵐探し (MID) 157
1 ザンダーの居室 (SNC) 260
4 怪物的戦ヒル (DMU) 98
2 死体鑑定士 (SNC) 178
2 終末の影 (SNC) 94
3 鏡殻のカニ (NEO) 63
1 天上都市、大田原 (NEO) 271
4 苦々しい再会 (BRO) 127
4 税血の収穫者 (VOW) 232
4 染みついた耽溺 (SNC) 227
1 刃とぐろの蛇 (BRO) 229

サイドボード
3 強迫 (M21) 96
1 家の焼き払い (MID) 131
1 兄弟仲の終焉 (BRO) 128
2 削剥 (VOW) 139
2 絶望招来 (NEO) 101
1 強迫 (M21) 96
3 兄弟仲の終焉 (BRO) 128
2 否認 (M20) 69
```

### 英語
```txt
Deck
4 Haunted Ridge (MID) 263
2 Mountain (NEO) 290
4 Swamp (NEO) 288
4 Fable of the Mirror-Breaker (NEO) 141
3 Stormcarved Coast (VOW) 265
2 Shipwreck Marsh (MID) 267
2 Island (BRO) 271
1 Takenuma, Abandoned Mire (NEO) 278
4 Phyrexian Fleshgorger (BRO) 121
2 Olivia, Crimson Bride (VOW) 245
4 Sulfurous Springs (DMU) 256
2 Reckless Stormseeker (MID) 157
1 Xander's Lounge (SNC) 260
4 Monstrous War-Leech (DMU) 98
2 Corpse Appraiser (SNC) 178
2 Shadow of Mortality (SNC) 94
3 Mirrorshell Crab (NEO) 63
1 Otawara, Soaring City (NEO) 271
4 Bitter Reunion (BRO) 127
4 Bloodtithe Harvester (VOW) 232
4 Tainted Indulgence (SNC) 227
1 Bladecoil Serpent (BRO) 229

Sideboard
3 Duress (M21) 96
1 Burn Down the House (MID) 131
1 Brotherhood's End (BRO) 128
2 Abrade (VOW) 139
2 Invoke Despair (NEO) 101
1 Duress (M21) 96
3 Brotherhood's End (BRO) 128
2 Negate (M20) 69

```

怪物的戦ヒル・ファイレクシアの肉体喰らい

「グリクシスヒルワーム」デッキ紹介(MTGA・スタンダード)


##　コンセプト
プレイヤーズコンベンション横浜で佐藤レイさんがセレズニアポイズンデッキで優勝したことに影響されて作成した。  
佐藤レイさんのリストを参考にしつつ、「毒性全振りなら自分だとこうするかな〜」と考えたものを回してみたら、調整なしの状態で予想以上に勝ててしまっている。  
スタンbo1のプラチナ帯で13戦12勝1敗。
![デッキ全容](https://i.gyazo.com/0c59b6484a4839907962a75f2f817e8e.jpg)

## デッキの長所
4~5キルが安定する。

## デッキの短所
生物のサイズが小さいので、赤単に祭典壊しなどの1点火力に悲鳴。


## キーカード
* 顎骨の決闘者  
  このデッキのエース。攻撃が通れば毒性もしっかりと2回分反応する。
* 屍気の拝領  
  毒性2を付与&装備クリーチャーを死亡時にリアニメイト。付与という言葉がややこしいが、毒性1のクリーチャーにつけたら毒性3のクリーチャーになる。強すぎる。


## よくある動き解説
### 理想ムーブ
1T: 離反ダニ、スクレルヴ設置  
2T: 離反ダニ、スクレルヴで1毒。 顎骨の決闘者設置  
3T: 顎骨の決闘者に屍気の拝領、スクレルヴのタップ起動能力でさらに毒性付与。決闘者アタックで8毒。合計9毒  
4T: 攻撃や胆液まみれの増殖などで10毒win

## リスト入りしなかったカード
* 苦痛ある選定  
  黒い毒デッキに必ずといっていいほど採用されている優良除去だが、毒を増やすことに直接は関係ないので不採用

## リスト入りしているが検討の余地あるカード
* スクレルヴの巣  
  今のリストの中で一番悠長なカード。2マナ1/1/毒1の伝染させる吸血者と入れ替えてもいいかもしれない。

## インポート用デッキリスト
### 日本語
```txt
デッキ
1 見捨てられたぬかるみ、竹沼 (NEO) 278
4 腐り腹のネズミ (ONE) 85
4 屍気の拝領 (ONE) 99
1 皇国の地、永岩城 (NEO) 268
2 平地 (DMU) 262
3 別館の歩哨 (ONE) 2
3 ダニの突撃 (ONE) 6
4 這い回る合唱者 (ONE) 8
4 顎骨の決闘者 (ONE) 18
4 離反ダニ、スクレルヴ (ONE) 33
4 スクレルヴの巣 (ONE) 34
4 胆液まみれ (ONE) 91
2 沼 (ONE) 274
4 ミレックス (ONE) 254
4 種子中枢 (ONE) 259
4 砕かれた聖域 (VOW) 264
4 コイロスの洞窟 (DMU) 244
4 多汁質の頭蓋住まい (ONE) 83

```

### 英語
```txt
Deck
1 Takenuma, Abandoned Mire (NEO) 278
4 Blightbelly Rat (ONE) 85
4 Necrogen Communion (ONE) 99
1 Eiganjo, Seat of the Empire (NEO) 268
2 Plains (DMU) 262
3 Annex Sentry (ONE) 2
3 Charge of the Mites (ONE) 6
4 Crawling Chorus (ONE) 8
4 Jawbone Duelist (ONE) 18
4 Skrelv, Defector Mite (ONE) 33
4 Skrelv's Hive (ONE) 34
4 Drown in Ichor (ONE) 91
2 Swamp (ONE) 274
4 Mirrex (ONE) 254
4 The Seedcore (ONE) 259
4 Shattered Sanctum (VOW) 264
4 Caves of Koilos (DMU) 244
4 Bilious Skulldweller (ONE) 83


```

「オルゾフ毒性アグロ」デッキ紹介(MTGA・スタンダード)


[前回の記事](/blog/mtg-deck-orzhov-poison-aggro)から多少の変更を加え、前回のミシック到達構築の試作ヒルよりもすんなりとミシックまで到達できてしまいました。  
ただし、BO1が強いデッキだと思ってBO1で最後まで回し続けました。  
ちなみにディミーア増殖(not毒)で3マナカイトの奥義から船砕きの怪物を叩きつけるのがマイブームです。  

![最終日のランク](https://i.gyazo.com/703479a757bb0bb4d8aade4c789b73d5.png)

![デッキ概要](https://i.gyazo.com/f78036fbd5bee3c89b73456f31688c1c.jpg)

## 前回~今までの対戦を経た感想
スクレルヴの巣はコントロールに強かったので、必須と言ってよかった。アグロ相手にも少し遅めだが、種子中枢と合わせれば十分戦える。  
今回はサイドボードを作らなかったが、サイドを組むとしたら婚礼の発表は絶対に必要だなと思った。除去を耐え凌ぎながら場を整え、終盤にも火力アップをもたらすのはこのデッキにもやはり有用。  
アグロが幅を利かせたからか、黒の除去に「梅澤敏郎の生涯」が採用されることが多くなってきた。  
このデッキにはキツすぎる除去で、そのせいなどもあってか勝率は感覚値だが55%~60%程度まで落ちついた気がする。  
それでもこれだけ勝てたのでやはりBO1でのアグロは大正義。

## 前回からの変更
### IN
- 伝染させる吸血者 x4
  - 2マナ帯の生物には回避能力持が欲しかったのでIN
### OUT
- 腐り腹のネズミ x4
  - PIGで毒1つは最後の押し込みに役立つかもという程度で序盤・中盤に役立たなかったのでOUT


## インポート用デッキリスト
### 日本語
```txt
デッキ
1 見捨てられたぬかるみ、竹沼 (NEO) 278
4 屍気の拝領 (ONE) 99
1 皇国の地、永岩城 (NEO) 268
2 平地 (DMU) 262
3 別館の歩哨 (ONE) 2
4 這い回る合唱者 (ONE) 8
4 顎骨の決闘者 (ONE) 18
4 離反ダニ、スクレルヴ (ONE) 33
4 スクレルヴの巣 (ONE) 34
4 胆液まみれ (ONE) 91
2 沼 (ONE) 274
4 ミレックス (ONE) 254
4 種子中枢 (ONE) 259
4 砕かれた聖域 (VOW) 264
4 コイロスの洞窟 (DMU) 244
4 多汁質の頭蓋住まい (ONE) 83
4 伝染させる吸血者 (ONE) 103
3 ダニの突撃 (ONE) 6
```

### 英語
```txt
Deck
1 Takenuma, Abandoned Mire (NEO) 278
4 Necrogen Communion (ONE) 99
1 Eiganjo, Seat of the Empire (NEO) 268
2 Plains (DMU) 262
3 Annex Sentry (ONE) 2
4 Crawling Chorus (ONE) 8
4 Jawbone Duelist (ONE) 18
4 Skrelv, Defector Mite (ONE) 33
4 Skrelv's Hive (ONE) 34
4 Drown in Ichor (ONE) 91
2 Swamp (ONE) 274
4 Mirrex (ONE) 254
4 The Seedcore (ONE) 259
4 Shattered Sanctum (VOW) 264
4 Caves of Koilos (DMU) 244
4 Bilious Skulldweller (ONE) 83
4 Pestilent Syphoner (ONE) 103
3 Charge of the Mites (ONE) 6
```

Magic The Gatheringのスタンダード(ファイレクシア完全なる統一期)ミシック到達構築



[前回のダイヤモンド到達構築](https://ikmnjrd.github.io/blog/mtg-deck-immortal-warm)から2週間ほどリストに変更を加えながらまわし、BO3をメインの主戦場に変えるなどした結果ようやくミシック対に到達できましたので、記念に書いておきます。  
まだ土地を甘えてますが許してください。  

![デッキ全容](https://i.gyazo.com/98f6d209f755672ac77aa4b3bcc9f400.jpg)


<img alt="マナカーブ" src="https://i.gyazo.com/6a72b184ee6b86057c879c1d46b6844a.png" width="40%">


##　コンセプト
前回と同じですが、墓地に落としたファッティを利用しながら殴るシンプルなコンセプトのデッキ。  
序盤は墓地肥やし&優良生物で流し、デッキの核である怪物的戦ヒル、ファイレクシアの肉体喰らいを中盤に展開し、相手に除去などで対応させた後にオリヴィアで釣りながら殴る。終盤は試作クリーチャーを本来のコストで展開するなどして勝ちを狙う  
前回と違うのが、序盤はファイレクシアの宣教師で生き延びながら。リーサルは最速ではなく「回避しながらドデカパンチ」という色が出てきている。

## 対戦感
先攻ではかなり強い。7割くらい勝てる印象。逆に後手なら後手用のサイドにしたいくらいなので、メイン後手だとマッチを落とした気分になる。メイン後手だと3~4割くらいしか勝てない印象。  
単色アグロには相変わらず苦戦するが、2マナ生物を増やしたことでなんとかなることが増えた。  
相手のアーキタイプによってサイドを変えるというよりは先手後手でサイドを変える要素が強い。  

サイド後の後手なら強迫、切り崩し、怒りの大天使などを投入。ヒルと終末の影などを1枚ずつ抜いて、先手の理想ムーブを2手遅れで遂行し、展開し終わった後の相手の対応次第でようやく5割の勝負に持ち込める展開が多い。

## 対仮想敵
基本的にメインはやること変えられないので、サイド後のつもりで書く。  
アグロは全体的に苦手。  
コントロールには強め。  

### 赤単アグロ&白単アグロ
相手のブン周りは諦めるつもりで丁寧に除去&絆魂クリーチャーで生き延びる。相手のリソース切れたところから巻き返す。

### グルールアグロ
赤単と白単よりも除去優先。相手の到達持ちのせいで飛行15点パンチなどが効きづらい。

### ランプ系
微有利な相手。
相手の5T目などにファイ門などがくるので、デカブツはその後に叩きつけるイメージで動く。低マナ域から殴ることを優先。中盤に様子見ながら墓地にヒルや地ならし屋を落としておく。

### 除去コン
有利。やりたいこと優先であまり問題なし。

## 前回からの主な違い
* 青=>白
  * 集団失踪と鋼の熾天使を採用したかった。詳しくは下記参照。
* 土地24枚=>土地21枚
  * メインの動きが3~4マナ。そしてルーティング苦々しい再会と税血の収穫者、鏡割りの寓話とあるのでこのくらいでちょうどよかった。しかしサイド後の後手だと少なく感じてしまう。
* 除去呪文の投入
  * 単色アグロが課題のこのデッキにおいて、兄弟仲の終焉を打とうとした3T目に相手の場にタフ4がいつの間にかいるので間に合ってないことが。そんなこともあり集団失踪をピン刺し。ギックスの残虐はリアニ要素がおまけでサーチが本命の銀の弾丸の装填役。
  * 3マナ除去orブリンクで試作クリーチャーを除去回避しながら強化できる精霊界との接触をメインに採用。クリーチャーが強いデッキなので、ここぞという場面でしか除去には使わないため枚数は控えめ。
* フィニッシャーの増量
  * 街並みの地ならし屋。単純に強いけどこのデッキでは持て余すかと考えていたが、アゾリウスランプ(ウルザ)などのランプ系が増えてきていたので、返しのオリヴィアで割れるように採用。こいつを2枚入れるタイミングで4枚にしていた終末の影を3枚にした。
  * ギックス残虐。豊富なフィニッシャーorピン刺し全体除去のシルバーバレット。
  * 鋼の熾天使。主な役割は戦ヒルへの飛行付与。そして相手からのヘイト買い。
* 序盤・中盤のやり過ごし
  * ファイレクシアの宣教師。2マナ2/3のタフ重視スタッツと絆魂がえらい。マナカーブが少し変なデッキなので、空いた中盤にキッカーする動きが超優秀。
  * 神憑く相棒。チャンプ&キャントリッパー。軽量でデッキを邪魔しないえらいやつ。（...もっと2マナにドンピシャなカード欲しい。）ファイレクシア完全なる統一で赤2マナインスタントのルーティングがあったで、多分この枠に入る。


## 前回リストから抜けたメイン級カード
* 無謀な嵐探し  
  メインの肉体喰らいや寓話を始め、鋼の熾天使が新しくメインに入ったり、横並び対策の兄弟仲の終焉など3マナが渋滞してる。鋼の熾天使の方がいつでも万能に動けたりヒルとよく噛み合うため残念ながらアウト。

* 鏡殻のカニ  
  メインの呪文が3マナであるこのデッキで3マナ構えながら、という場面はイコール6マナが使えることでオリヴィアを走らせることができる。1・2マナに強いやつがいないので、泣く泣くのリストラ。こいつがいないと青である意味もほぼ無くなってしまう、ぐらいに自分の中では衝撃だった。

* 死体鑑定士  
  グリクシスミッドレンジで活躍しているこいつだが、コントロール要素が薄いこのデッキではそんなに存在感がない。3マナに強い呪文が多いという理由も、もちろんある。

## 前回リストと今回のリストの間で試したカード
* 土建組一家の調達者  
  使用感は楽しかった。ただ、先手の活躍が主になってしまう。後手が弱かったり、単色アグロが課題のこのデッキなのでファイレクシアの宣教師に席を譲る形に。
* ギックスの命令  
  強いが、このデッキの中で使うと相手を選ぶなという感想。そのためサイドへ。
* 代償波  
  意外と決めれる場面ある。決めれる場面とこれじゃなきゃいけない場面は違うのでサイドカードとして採用。主にグリクシスミッドレンジ用。



## インポート用デッキリスト
### 日本語
```txt
デッキ
4 憑依された峰 (MID) 263
2 山 (NEO) 290
1 沼 (NEO) 288
4 鏡割りの寓話 (NEO) 141
1 見捨てられたぬかるみ、竹沼 (NEO) 278
4 ファイレクシアの肉体喰らい (BRO) 121
2 真紅の花嫁、オリヴィア (VOW) 245
4 硫黄泉 (DMU) 256
3 ファイレクシアの宣教師 (DMU) 27
4 怪物的戦ヒル (DMU) 98
3 終末の影 (SNC) 94
4 苦々しい再会 (BRO) 127
4 税血の収穫者 (VOW) 232
1 ギックスの残虐 (DMU) 87
2 砕かれた聖域 (VOW) 264
2 日没の道 (VOW) 266
1 平地 (ANB) 115
2 精霊界との接触 (NEO) 40
3 鋼の熾天使 (BRO) 38
2 街並みの地ならし屋 (BRO) 233
2 風に削られた岩山 (NEO) 282
2 神憑く相棒 (NEO) 38
1 集団失踪 (SNC) 10
2 ラフィーンの塔 (SNC) 254

サイドボード
1 精霊界との接触 (NEO) 40
3 強迫 (M21) 96
2 兄弟仲の終焉 (BRO) 128
1 切り崩し (DMU) 89
2 兄弟仲の終焉 (BRO) 128
1 切り崩し (DMU) 89
1 代償破 (BRO) 148
1 真夜中の空、殉至 (NEO) 102
1 ギックスの命令 (BRO) 97
1 ファイレクシアの宣教師 (DMU) 27
1 怒りの大天使 (DMU) 3
```

### 英語
```txt
Deck
4 Haunted Ridge (MID) 263
2 Mountain (NEO) 290
1 Swamp (NEO) 288
4 Fable of the Mirror-Breaker (NEO) 141
1 Takenuma, Abandoned Mire (NEO) 278
4 Phyrexian Fleshgorger (BRO) 121
2 Olivia, Crimson Bride (VOW) 245
4 Sulfurous Springs (DMU) 256
3 Phyrexian Missionary (DMU) 27
4 Monstrous War-Leech (DMU) 98
3 Shadow of Mortality (SNC) 94
4 Bitter Reunion (BRO) 127
4 Bloodtithe Harvester (VOW) 232
1 The Cruelty of Gix (DMU) 87
2 Shattered Sanctum (VOW) 264
2 Sundown Pass (VOW) 266
1 Plains (ANB) 115
2 Touch the Spirit Realm (NEO) 40
3 Steel Seraph (BRO) 38
2 Cityscape Leveler (BRO) 233
2 Wind-Scarred Crag (NEO) 282
2 Spirited Companion (NEO) 38
1 Depopulate (SNC) 10
2 Raffine's Tower (SNC) 254

Sideboard
1 Touch the Spirit Realm (NEO) 40
3 Duress (M21) 96
2 Brotherhood's End (BRO) 128
1 Cut Down (DMU) 89
2 Brotherhood's End (BRO) 128
1 Cut Down (DMU) 89
1 Pyrrhic Blast (BRO) 148
1 Junji, the Midnight Sky (NEO) 102
1 Gix's Command (BRO) 97
1 Phyrexian Missionary (DMU) 27
1 Archangel of Wrath (DMU) 3

```

怪物的戦ヒル・終末の影・試作

【ミシック到達構築】「マルドゥ試作ヒル」デッキ紹介(MTGA・スタンダードBO3)


ジャパンオープン面白かったですね。白単の優勝には爽快感があって見ていて気持ちよかったです。  
一方、アリーナで僕が盲目ネズミとタミヨウのコンボデッキを使ってるところで散々苦しめられたゴルガリミッドの入賞率も高く、さすがでした。  
今回はそんな憎きゴルガリミッドレンジに対してめちゃくちゃ強いデッキを作りミシックに到達したので紹介します。  

![メインデッキ](https://i.gyazo.com/cbbcec83fb7c63ee177c7a6694af4bc1.jpg)

## コンセプト
- アガサの魂の大釜を強く使おう
- 流行りのゴルガリやディミーアといった黒系ミッドレンジに強い
- あまり使ったことないカードも使えたらいいね

手前味噌だが完成度が高く、使っていて非常に楽しいおすすめのデッキになった。  
黒系のミッドレンジの一種だが調整した結果、あの黙示録の方のシェオルドレッドがメインから抜けるという快挙を達成した。  
スタンのラクドスサクリファイスといえば鬼流の金床の方ではなくこっち！と言われる未来もありえそうなぐらいいい感じです。

## デッキの長所
- アグロとミッドレンジの中間的な速さで、細かい動きが得意な分、ミッドレンジを狩れるミッドレンジ
  - メインはインスタントソーサリーは4枚体制だが、豊富な除去ルート
    - ヴォルダーレンの興奮探しや税血の収穫者、死鳴らし鬼
  - 屈指の盤面対応力
- リアニなど墓地利用に強い
  - メインからアガサの大釜と駆け抜け侯の墓地対策8枚体制
- 妨害に強い
  - 基本スタッツの高いクリーチャーで構成しコンボに依存しない
  - 個々のシナジーが高いカード群
  - 打ち消されて困るカードが全体除去ぐらい
  - 1~3マナのクリーチャーメインだが、大釜次第でこれらさえ墓地にいた方が強いまである
- ロングゲームに強い
  - **アガサの魂の大釜**と27枚のクリーチャー
  - 告別をされるような最終局面でも場面を崩してドローを狙える
    - 軽蔑剣の狂戦士+アガサの魂の大釜
  - 序盤からの詰めと白タッチして入れたミシュラン


## デッキの短所
- トークンなどの軽量横並びに弱い
  - デッキの純除去スペルの半分は全体除去
- 早過ぎるデッキにはアガサで有利に持っていくまで行かない
  - 一番の苦手は赤単アグロ+ウラブラスクの溶鉱炉的なデッキ。無理。
- 中盤の最善手を取り続けることがかなり難しい
- 5cドメインの装飾庭園を踏み歩くものがなどの3マナタフ4生物がキツイ。とはいえ5cドメインには微不利くらい


## メインカード紹介
- アガサの魂の大釜
  - 基本的には構えておき、相手の除去に合わせて除去のターゲットをサクってアドを取るか、相手のリアニ先を奪い取るかという運用が基本。自ターンのコンバットの点数を伸ばすために自ターンに起動は弱い。

- 軽蔑剣の狂戦士
  - ドロソ。除去のフィズらせ役その1。1ターン目に置ける選択肢があったとしてもミシュランのセットを優先したい。2ターン目以降に1マナ立てながら展開するのがゲームを有利に進めやすい。使ってる人見たことないカードその1。

- ヴォルダーレンの興奮探し
  - 万能兵器。除去のフィズらせ役その2。パワー3のクリチャーがデッキに多いのは、これと組み合わせてシェオルの除去が容易になるから。放浪皇などプレインズウォーカーの処理もこれで。

- 下水王、駆け抜け侯
  - 実はこのデッキで一番使ってて強いと思うカード。アガサの種の用意と本人も優秀なスタッツで切り崩しが当たらず、相手の墓地も抜ける。

- スランの蜘蛛
  - 起動型能力用のパワーストーン生成と壁と終盤のサーチ

- ラバブリンクの英雄、オーシオン
  - 使ってる人見たことないカードその2。起動型能力が中盤の膠着とフィニッシュにとても役立つ。シェオルをメインから退けた張本人で気持ちが良過ぎる。ちゃんと強いよ。ジャクシスも似た効果だが、血トークン+アガサで擬似即効的に起動できるので、ジャクシスのメリットよりもオーシオンのメリットが際立つ...~~伝説だし1枚ずつの採用で良かったかもと冷静に思ってしまった~~

- 死鳴らし鬼
  - 使ってる人見たことないカードその3。クリーチャーの単体性能はそこまで高くないカードが多く、コンバットトリックが豊富かつ駆け抜け侯のトークンなど横並びもそこそこするので、メインではシェオルやエリシュなどよりも使いやすかった。このカードだけでフィニッシュまで行けることは稀。正直自由枠

- 眠らずの露営
  - ラクドスといいつつミシュランのためにタッチしてる白の理由。アガサや興奮探しとの相性よし。タッチ白だと危難の道のの切除コストも払えるのでこっち。ゴルガリのミシュランとは迷った。


## サイドカードと解説
- 黙示録、シェオルドレッド
  - 対赤単最終兵器。メインではマナを構えたいこのデッキからしたら重くて出しづらいことが多く、もし無理に出そうとして打ち消されたりした際には何も仕事ができない。終盤のトップ勝負に強いが、人体改造機や駆け抜け侯など終盤のトップ勝負でも横並びが期待できるこのカードよりもオーシオンに軍配が上がった。

- 機械の母、エリシュ・ノーン
  - 対5cドメイン系のデッキ用サイドボード。

- 機能不全ダニ
  - 軽いディッチャ生物。本体は緑1マナ要求だがアガサに入れれば無色マナ要求になるので

- シェオルドレッドの勅令
  - 対フレンズ用。
* 石の脳
  * 白系コントロールにおける唯一の弱点になる告別対策。そのため一巻の終わりとは用途が違う

* 執念の徳目
  * 対アグロ用のドレインカードとしての運用がほぼ全て。

## リスト入りしなかったカードとその理由
- 戦闘バエの群れ
  - 接死で相打ちよりも解答を探しにチャンプしながらドローしたい場面の方が多い

- 進化した潜伏工作員
  - このデッキには、実際に試すまでもなく悠長すぎるファイレクシアンもいないので、不採用

- 流星の信奉者、ゴロゴロ
  - 改善の条件を満たしやすく5/5フライヤーを作れる機会も結構あったが、2マナ域にはパワー3が欲しかったことと伝説であることと、トークン生成能力が悠長気味なのでそこそこよかったが不採用。

- もつれる群体
  - 後手に弱過ぎる。ランプ系デッキなど、こちらが早期決着を狙う際のサイドカードとして入れてもいいかもしれないが強迫の方が流石に強いよね。

- スランの夜警
  - 自ターンにしか誘発しないので、相手ターンに動きがちなこのデッキと若干相性が悪い。相手ターンに誘発してくれれば...

- 人体改造機の冠
  - 入れるとしたら蒐集家の保管庫と交代の枠かと思う。

- 甦りし悪夢、ブレイズ
  - リソースを丁重に扱うこのデッキとはあまり相性が良くない。伝説だし、駆け抜け候ほどいつでもアドという能力でもないので不採用。

- ヨーグモスの法務官、ギックス
  - 起動型能力を持つが、7マナ使える終盤の手札には余裕がなく、余るカードもダブったアガサくらい。血トークンでルーティングできれば不要牌が豊富に揃えた有効なクリーチャーになるので、必要ない。

- 全軍突撃
  - 正直あり。喉首と入れ替えるかもしれない。ただ、アグロ相手には喉首の方が取り回しやすいので。

- ランクルのいたずら
  - 自分のクリーチャーが数体並びがちで数枚の手札もありがちなこのデッキとの相性は微妙だった。

- 焼炉の手綱
  - サクリ系能力と合わせて決まると強かったりするが場面と相手のデッキを選び過ぎる&アガサの

- 街並みの地ならし屋
  - スランの蜘蛛を4積みでも8マナに届かないことが多い。オーシオンでコピーできたら強過ぎるが、税血の収穫者や興奮探し、スランの蜘蛛で十分だった。

- +1カウンター等のインスタントソーサリー
  - 不死なる悪意などいいかもと思ったが、アガサの魂の実がない状況が弱くクリーチャー濃度が高いほど使いやすいデッキになるという判断

- PW全般
  - 候補としてヴェリアナやオブニク、アショクやソリンなどがあるがインソー全般を少なくした理由と同じところと、何より継続的アドは豊富な起動型能力とアガサで十分だと感じたので0枚採用

### 採用基準まとめ
2~3マナのクリーチャーが主体。3マナは特に採用したいクリーチャーが多かったが、シナジーはありきだが、癖をあまり感じず使える3種が残った。  
4マナ以上は自由枠という感がまだするので、まだまだ残りのエルドレインの森環境を色々回しながら試していきたいと思う。  


## インポート用デッキリスト
### 日本語
```txt
デッキ
4 アガサの魂の大釜 (WOE) 242
1 山 (LTR) 269
4 ヴォルダーレンの興奮探し (MOM) 171
1 沼 (LTR) 267
4 軽蔑剣の狂戦士 (MOM) 124
2 喉首狙い (BRO) 102
4 税血の収穫者 (VOW) 232
4 黒割れの崖 (ONE) 248
4 憑依された峰 (MID) 263
2 硫黄泉 (DMU) 256
1 見捨てられたぬかるみ、竹沼 (NEO) 278
4 下水王、駆け抜け侯 (WOE) 97
1 反逆のるつぼ、霜剣山 (NEO) 276
2 ミレックス (ONE) 254
1 マイコシンスの庭 (ONE) 256
3 剃刀鞭の人体改造機 (BRO) 122
1 蒐集家の保管庫 (WOE) 244
2 眠らずの露営 (WOE) 257
3 砕かれた聖域 (VOW) 264
2 コイロスの洞窟 (DMU) 244
2 ラバブリンクの英雄、オーシオン (MOM) 334
2 危難の道 (VOW) 124
4 スランの蜘蛛 (BRO) 254
2 死鳴らし鬼 (MAT) 13

サイドボード
3 強迫 (ONE) 92
2 機能不全ダニ (BRO) 199
2 切り崩し (DMU) 89
2 シェオルドレッドの勅令 (ONE) 108
1 石の脳 (BRO) 247
1 執念の徳目 (WOE) 115
2 黙示録、シェオルドレッド (DMU) 107
2 機械の母、エリシュ・ノーン (ONE) 10

```

### 英語
```txt
Deck
4 Agatha's Soul Cauldron (WOE) 242
1 Mountain (LTR) 269
4 Voldaren Thrillseeker (MOM) 171
1 Swamp (LTR) 267
4 Scorn-Blade Berserker (MOM) 124
2 Go for the Throat (BRO) 102
4 Bloodtithe Harvester (VOW) 232
4 Blackcleave Cliffs (ONE) 248
4 Haunted Ridge (MID) 263
2 Sulfurous Springs (DMU) 256
1 Takenuma, Abandoned Mire (NEO) 278
4 Lord Skitter, Sewer King (WOE) 97
1 Sokenzan, Crucible of Defiance (NEO) 276
2 Mirrex (ONE) 254
1 The Mycosynth Gardens (ONE) 256
3 Razorlash Transmogrant (BRO) 122
1 Collector's Vault (WOE) 244
2 Restless Bivouac (WOE) 257
3 Shattered Sanctum (VOW) 264
2 Caves of Koilos (DMU) 244
2 Orthion, Hero of Lavabrink (MOM) 334
2 Path of Peril (VOW) 124
4 Thran Spider (BRO) 254
2 Death-Rattle Oni (MAT) 13

Sideboard
3 Duress (ONE) 92
2 Haywire Mite (BRO) 199
2 Cut Down (DMU) 89
2 Sheoldred's Edict (ONE) 108
1 The Stone Brain (BRO) 247
1 Virtue of Persistence (WOE) 115
2 Sheoldred, the Apocalypse (DMU) 107
2 Elesh Norn, Mother of Machines (ONE) 10

```

エルドレインの森スタンダード環境。アガサの大釜、ラバブリンクの英雄、オーシオン、軽蔑剣の狂戦士

23年9月期BO3ミシック到達デッキ「大釜サクリファイス」(MTGA・スタンダード)


私は2020年12月からWebエンジニアとして働いている小市民です。

## 2022/1
世の中のフロントエンドプロジェクトではstorybookなるものが使われているらしいな...
とりあえず神ツールであるReactとWebpackで使ってみるとするか...
最新のWebpack5だとWebpack4->5からの破壊的変更のせいでstorybookがそのまま使えないだと？！！バッチが配布されているらしいが...
じゃあWebpackではなく何やら爆速と話題のesbuildは、、、cssをインポートできないというブログがちらほら...？

[公式](https://esbuild.github.io/content-types/#css-from-js)によると、CSSモジュールとしてのインポートはまだできないって書いてある。
>You can also import CSS from JavaScript. When you do this, esbuild will gather all CSS files referenced from a given entry point and bundle it into a sibling CSS output file next to the JavaScript output file for that JavaScript entry point. So if esbuild generates app.js it would also generate app.css containing all CSS files referenced by app.js. Here's an example of importing a CSS file from JavaScript:
>```javascript
>import './button.css'
>
>export let Button = ({ text }) =>
>  <div className="button">{text}</div>
>```
>Note that esbuild doesn't yet support CSS modules, so the set of export names from a CSS file is currently always empty. Supporting a basic form of CSS modules is on the roadmap.


ふーん。とりあえずstorybookとviteをインストールして...ん？
今webpackって見えたような...webpackいるな...



```javascript
while (何かいいの見つかればな〜){
  （...GitHubで「storybook vite」で検索）
  （...!!...😣）
}
```

この文章はなんの役に立つんですかね？（疑問）


へっぽこエンジニアの技術選定時の頭の中


## 環境

| 関連ソフトウェア | バージョン |
|:--------------|:---------|
| 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を併用すると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なの？


## Sandbox


<iframe src="https://codesandbox.io/embed/beautiful-darwin-4gf3h?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="beautiful-darwin-4gf3h"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

## ポイント

### SVG化した文字に陰影をつける

cssではこのようにすると綺麗に抜ける。
```css
svg {
  filter: drop-shadow(3px 3px 3px #fff)
    drop-shadow(-3px -3px 1px rgba(0, 0, 0, 0.15));
}
```
html上では、適宜fillやstrokeを設定する。

[https://danmarshall.github.io/google-font-to-svg-path/](https://danmarshall.github.io/google-font-to-svg-path/)（[GitHubリポジトリ](https://github.com/danmarshall/google-font-to-svg-path)）を使って文字を事前にSVG化しておく。

npmパッケージで似たものを提供している人もいる[https://github.com/shrhdk/text-to-svg](https://github.com/shrhdk/text-to-svg)


Neumorphismサンプル

エラーに遭遇しました。

### 環境
- 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を読み込む方法


### 結論
Notionにテキストファイルを直接アップロードすると、amazon S3 上にアップロード(&S3へのリンクが生成)され、文字化けしてしまう。（us-west-2リージョンにアップロードされてた）

![文字化けした様子](https://i.gyazo.com/01b1e2fad8348309ba8ce00a0adbdeb1.png)

ドラッグ&ドロップでテキストファイルのアップロードをいますぐやめて、サブページ作成後に`Text&Markdown`のインポートをして取り込もう。
![NotionへImport](https://i.gyazo.com/06904fb5cdea05b0bd13fb572b262bba.png)


### 背景
Notionを使いこなしてるとは言いづらい私ですが、私のNotionの数少ない活躍する機会の一つが、転職活動時に使う[ボードの機能](https://www.notion.so/ja-jp/help/boards)です。

![Notionのボード画像](https://i.gyazo.com/d00cadf7fdca1c09406d615bddef1d9b.png)


申し込み、連絡待ち、結果待ちなどのステータスで管理しながら、メモ程度の企業研究や、面談・面接時のメモを書き込んだりしています。

ただ、普段はMac標準のテキストエディタで`.txt`や`.md`を書き殴るのが癖になっていました。

このファイルをそのままNotionにアップロードすると文字化けするので、インポート機能を使ってサブページとして取り込もうねというのが上でも述べた結論。

それでもNotionの書き味よりも、テキストエディタでマークダウンを書くほうが性に合っているし、急なオンラインミーティングでもサクッと開けるので、Mac標準のテキストエディタはまだしばらく使い続けると思う。


そして極個人的な感想として「普段のメモスタイルという支流と、管理ツールという支流が交わったなぁ」という感想を持ちググったらそのまま`合流`という言葉がヒットして謎の感動をしました。


> 合流（ごうりゅう、英語：confluence）とは、地理学では二つ以上の水の流れが合わさることをいう。通常、支川がより大きな川に流れ込むことを指す。こうした地点は合流点と呼ばれる。
> wikipediaより引用

どこぞのソフトウェアは合流の意味だったんですね。

### 参考文献
- [合流 - wikipedia](https://ja.wikipedia.org/wiki/%E6%B5%81%E8%B7%AF%E5%BD%A2%E7%8A%B6#:~:text=%E5%90%88%E6%B5%81%EF%BC%88%E3%81%94%E3%81%86%E3%82%8A%E3%82%85%E3%81%86%E3%80%81%E8%8B%B1%E8%AA%9E%EF%BC%9A,%E3%81%AF%E5%90%88%E6%B5%81%E7%82%B9%E3%81%A8%E5%91%BC%E3%81%B0%E3%82%8C%E3%82%8B%E3%80%82)

個人的なNotionの使い方備忘録です。

Notionにテキストファイルを置くときはサブページとしてインポートしましょう


### 結論
**画像ファイル自体のリンクをNotionに貼り付ける**

![Notion埋め込み例](https://i.gyazo.com/7046c2a8fa7d00ff1cf6feb1503ce36c.png)

### 前提
私は画像を自身のブログに書くときなどにGyazo（スクリーショットの共有アプリ）を利用しています。

手元のテキストファイル（マークダウンファイル）として残しておく際には、`![hoge](url)`の記法で十分なのですが、Notionアプリ上でこの記法を使ってもそのまま画像を表示してくれません。

Gyazoを知らない人向けのイメージ画像。Gyazoを使ってスクリーンショットを撮ると、自動的にGyazoのクラウドサーバー（GCPを利用しているらしい）にアップロードされ、公開される。
![Gyazo画像](https://i.gyazo.com/34240519a32ac82716681aa70ef518fe.png)


### 作業の流れの例

Gyazoを利用して取得できるURL例:
https://gyazo.com/34240519a32ac82716681aa70ef518fe


Gyazoから自動的に与えられるURLをNotionに貼り付け(「Create bookmark」 「Create embed」を選択し)ても画像を綺麗に貼り付けられない。
![失敗例](https://i.gyazo.com/2f272328bf161c206970d572583f7b50.png)
↓
![続・失敗例](https://i.gyazo.com/26e64715a416362727c04054857d25d8.png)

Gyazoを使って生成されるリンクは、余分なWebページ情報が多く含まれている。そのためURLを次のようにしてからNotionに貼り付ける。
加工例（i.と拡張子.pngをつける）:
https://`i.`gyazo.com/34240519a32ac82716681aa70ef518fe`.png`


Notionに加工したURLを貼り付けると「Emged image」というオブションが選択できるので、選択すれば画像が埋め込まれる。
![成功例](https://i.gyazo.com/ef946f57d0800ca06f337425f98ec6fe.png)




NotionでMarkdown記法的に画像を埋め込む（w/Gyazo）

[公式](https://www.kali.org/docs/general-use/novnc-kali-in-browser/)にやり方も書いてあるがこの通りだとエラーが出た。

`$ sudo apt install -y x11vnc`

以下の部分をそのまま実行するとエラーが出る。
$ x11vnc -display :0 -autoport -localhost -nopw -bg -xkb -ncache -ncache_cr-quiet -forever
```bash
31/10/2021 20:23:07 passing arg to libvncserver: -ncache_cr-quiet
31/10/2021 20:23:07 x11vnc version: 0.9.16 lastmod: 2019-01-05  pid: 2173
31/10/2021 20:23:07 Using X display :0
31/10/2021 20:23:07 rootwin: 0x764 reswin: 0x3800001 dpy: 0x1dc24970
31/10/2021 20:23:07 
31/10/2021 20:23:07 ------------------ USEFUL INFORMATION ------------------
31/10/2021 20:23:07 X DAMAGE available on display, using it for polling hints.
31/10/2021 20:23:07   To disable this behavior use: '-noxdamage'
31/10/2021 20:23:07 
31/10/2021 20:23:07   Most compositing window managers like 'compiz' or 'beryl'
31/10/2021 20:23:07   cause X DAMAGE to fail, and so you may not see any screen
31/10/2021 20:23:07   updates via VNC.  Either disable 'compiz' (recommended) or
31/10/2021 20:23:07   supply the x11vnc '-noxdamage' command line option.
31/10/2021 20:23:07 
31/10/2021 20:23:07 Wireframing: -wireframe mode is in effect for window moves.
31/10/2021 20:23:07   If this yields undesired behavior (poor response, painting
31/10/2021 20:23:07   errors, etc) it may be disabled:
31/10/2021 20:23:07    - use '-nowf' to disable wireframing completely.
31/10/2021 20:23:07    - use '-nowcr' to disable the Copy Rectangle after the
31/10/2021 20:23:07      moved window is released in the new position.
31/10/2021 20:23:07   Also see the -help entry for tuning parameters.
31/10/2021 20:23:07   You can press 3 Alt_L's (Left "Alt" key) in a row to 
31/10/2021 20:23:07   repaint the screen, also see the -fixscreen option for
31/10/2021 20:23:07   periodic repaints.
31/10/2021 20:23:07 
31/10/2021 20:23:07 XFIXES available on display, resetting cursor mode
31/10/2021 20:23:07   to: '-cursor most'.
31/10/2021 20:23:07   to disable this behavior use: '-cursor arrow'
31/10/2021 20:23:07   or '-noxfixes'.
31/10/2021 20:23:07 using XFIXES for cursor drawing.
31/10/2021 20:23:07 GrabServer control via XTEST.
31/10/2021 20:23:07 
31/10/2021 20:23:07 Scroll Detection: -scrollcopyrect mode is in effect to
31/10/2021 20:23:07   use RECORD extension to try to detect scrolling windows
31/10/2021 20:23:07   (induced by either user keystroke or mouse input).
31/10/2021 20:23:07   If this yields undesired behavior (poor response, painting
31/10/2021 20:23:07   errors, etc) it may be disabled via: '-noscr'
31/10/2021 20:23:07   Also see the -help entry for tuning parameters.
31/10/2021 20:23:07   You can press 3 Alt_L's (Left "Alt" key) in a row to 
31/10/2021 20:23:07   repaint the screen, also see the -fixscreen option for
31/10/2021 20:23:07   periodic repaints.
31/10/2021 20:23:07 
31/10/2021 20:23:07 Client Side Caching: -ncache mode is in effect to provide
31/10/2021 20:23:07   client-side pixel data caching.  This speeds up
31/10/2021 20:23:07   iconifying/deiconifying windows, moving and raising
31/10/2021 20:23:07   windows, and reposting menus.  In the simple CopyRect
31/10/2021 20:23:07   encoding scheme used (no compression) a huge amount
31/10/2021 20:23:07   of extra memory (20-100MB) is used on both the server and
31/10/2021 20:23:07   client sides.  This mode works with any VNC viewer.
31/10/2021 20:23:07   However, in most you can actually see the cached pixel
31/10/2021 20:23:07   data by scrolling down, so you need to re-adjust its size.
31/10/2021 20:23:07   See http://www.karlrunge.com/x11vnc/faq.html#faq-client-caching.
31/10/2021 20:23:07   If this mode yields undesired behavior (poor response,
31/10/2021 20:23:07   painting errors, etc) it may be disabled via: '-ncache 0'
31/10/2021 20:23:07   You can press 3 Alt_L's (Left "Alt" key) in a row to 
31/10/2021 20:23:07   repaint the screen, also see the -fixscreen option for
31/10/2021 20:23:07   periodic repaints.
31/10/2021 20:23:07 X FBPM extension not supported.
31/10/2021 20:23:07 X display is capable of DPMS.
31/10/2021 20:23:07 --------------------------------------------------------
31/10/2021 20:23:07 
31/10/2021 20:23:07 Default visual ID: 0x21
31/10/2021 20:23:07 Read initial data from X display into framebuffer.
31/10/2021 20:23:07 initialize_screen: fb_depth/fb_bpp/fb_Bpl 24/32/7680
31/10/2021 20:23:07 *** unrecognized option(s) ***
31/10/2021 20:23:07     [1]  -ncache_cr-quiet
31/10/2021 20:23:07 For a list of options run: x11vnc -opts
31/10/2021 20:23:07 or for the full help: x11vnc -help
31/10/2021 20:23:07 
31/10/2021 20:23:07 Here is a list of removed or obsolete options:
31/10/2021 20:23:07 
31/10/2021 20:23:07 removed: -hints, -nohints
31/10/2021 20:23:07 removed: -cursorposall
31/10/2021 20:23:07 removed: -nofilexfer, now the default.
31/10/2021 20:23:07 
31/10/2021 20:23:07 renamed: -old_copytile, use -onetile
31/10/2021 20:23:07 renamed: -mouse,   use -cursor
31/10/2021 20:23:07 renamed: -mouseX,  use -cursor X
31/10/2021 20:23:07 renamed: -X,       use -cursor X
31/10/2021 20:23:07 renamed: -nomouse, use -nocursor
31/10/2021 20:23:07 renamed: -old_pointer, use -pointer_mode 1
```

そのため以下のように実行
$ x11vnc -display :0 -autoport -localhost -nopw -bg -xkb -ncache -forever


起動確認

`$ ss -antp | grep vnc`

```bash
LISTEN    0         32                127.0.0.1:5900            0.0.0.0:*        users:(("x11vnc",pid=8056,fd=8))
LISTEN    0         32                    [::1]:5900               [::]:*        users:(("x11vnc",pid=8056,fd=9))
kali@kali:~$
```




ここでもエラーが出る。
$ /usr/share/novnc/utils/launch.sh --listen 8081 --vnc localhost
```bash
Warning: could not find self.pem
Using installed websockify at /usr/bin/websockify
Starting webserver and WebSockets proxy on port 8081
Usage: 
    websockify [options] [source_addr:]source_port [target_addr:target_port]
    websockify [options] [source_addr:]source_port -- WRAP_COMMAND_LINE

websockify: error: Error parsing target
Failed to start WebSockets proxy
```
[novnc公式のIssue](https://github.com/novnc/noVNC/issues/1443)でも似た症状が報告されてた。


`$ cd ~`
`$ git clone https://github.com/novnc/noVNC.git`
`$ cd noVnc/utils/novnc_proxy --vnc localhost:5900`



サーバー側の別のターミナルでsshを有効にする（？）
`$ sudo systemctl enable ssh --now`


クライアントのターミナルからポートフォワーディング。sshでログインした状態になればOK。
`ssh kali@192.168.0.140 -L 6080:localhost:6080`


クライアントのWebブラウザで以下のようにアクセスする。
http://localhost:6080/vnc.html


kali linuxでVNCサーバーにnovncで接続する


### 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)をわからないなりにざっくり解説する

本を読んだ時のメモ書きがいつもより出てしまったので。

### これは実践vimを読んだ時のメモです

expressionレジスタ  
`<C-r>=` でアクセス  
1+1の実行結果(2)などが得られる。  

`vit`  
`<script>DDG.Utils.WebVitals.reportWebVitals(DDG.pixel)</script>`  

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

body>.container {
    background: none;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1264px;
    width: 100%;
}

.container {
    flex: 1 0 auto;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 100%;
}

| Left align | Right align | Center align | hoge |
|:--------|:--------|:--------|:-------|
| This    | This    | This    | hoge   |
| column  | column  | column  | hoge   |
| will    | will    | will    | hoge   |
| be      | be      | be      | hoge   |
| left    | right   | center  | hoge   |
| aligned | aligned | aligned | hoge   |

`q:` コマンドラインウィンドウ
テキストのように編集ができる。`J`を使って2つのコマンドを1つにまとめるなどができる。  
プロンプトから切り替えたい時は`<C-f>`で切り替えられる。  

`%`は現在編集中のファイル名のエイリアス  
バッファ内だと対となる対象へのジャンプ(モーション)  
プロンプトの`:%s`はsubstituteコマンドじゃなかった？？  

`:sh[ell]`コマンドが何故か使えず、`:terminal`コマンドなら使えた。  

`<C-z>`実行中のvimをバックグラウンドにする。zshではfgコマンドでvimに戻ってこれる。  

`read !{cmd}`コマンド実行結果をvim内に挿入できる  

`q{register}`マクロ記録開始 => `q` マクロ記録停止  
`@{register}` マクロ実行  
`@@` 前回実行のマクロを実行  
`:reg {register}` マクロ確認  

`q/` コマンドライン履歴を表示する  
ノーマルモードの時の`*`でカーソル位置の単語(?)の検索  

`C-w`s 水平分割  
`C-w`v 垂直分割  

### 置換コマンド

:[range]s[ubstitute]/{pattern}/{string}/[flags]

sコマンドのgフラグは現在行の意味でグローバルでしかない。  
ファイル全体を変更するならsコマンドの前に`%`をつける  

レジスタの参照し  
`:%s//\=@0/g` 直前の検索パターンをヤンクレジスタの内容で置き換える  

`g&` = `:%s//~/&`  

### ファイルの補完

`i_<C-x><C-f>`  
workspace/liff-firebase/liff-app/functions/node_modules/

### コンフィグ

`:set spell` => `:set nospell`  
`:set spell!` 設定値をトグル  
`:set spell?` 現在の設定値を見る  
`:set spell&` 設定値をデフォルト値にする  

`:setloacal tabstop=4` 現在のウィンドウとバッファに適用  
`:bufdo setloacal tabstop=4` 既存のバッファに適用  
`:windo setloacal tabstop=4` 全てのウィンドウに適用  


実践Vimを読んだ時のメモ


### 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がサポートしている言語


## 手順

ワークフローの設定（コード管理できるもの）とGitHubのUI上から設定するものに分けて考える

### ワークフローの設定

例として貼り付けますが、[ここ](https://docs.github.com/ja/actions/examples/using-scripts-to-test-your-code-on-a-runner)を参考にするなど自分の環境に合わせカスタマイズしてください。

```yaml
name: exec-tests
on:
  push:

jobs:
  status-check:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Use Node.js ${{ inputs.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'

      - name: Get Cache Dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install Dependencies
        run: npm ci

      - name: Create avif images dir
        run: mkdir tmp

      - name: Build
        run: npm run build
        env:
          NODE_OPTIONS: '--max_old_space_size=4096'

      - name: Check by linter
        run: npm run lint

      - name: Check by TypeScript Compiler
        run: npm run typecheck

      - name: Run Tests
        run: npm run test

```

### リポジトリ(Web上から)の設定

以下の画面から編集
![create-protection](https://i.gyazo.com/b5ca6098ced1849a751945e9e45d2c62.png)
mainブランチの保護をするため、「main」と入力。  
「Require status checks to pass before merging」にチェックを入れ、検索窓から「status-check」を入力、選択。  
![入力例1](https://i.gyazo.com/7e5c454ddc160cff2b14487e48a12504.png)

ここまで設定できると、以下のような画面で表示できる。
![動作例1](https://i.gyazo.com/ccf3105509cc3d866b5cc6ca9cf26524.png)

この設定だと警告が出るがマージはぽちぽちとクリックすればできてしまうので、「Do not allow bypassing the above settings」の設定もしておく。
![設定例2](https://i.gyazo.com/31b6721b6b8636087028d71c1f906445.png)

これでマージするにはコードの変更を余儀なくされる。
![動作例2](https://i.gyazo.com/bf39f63f875bc6ca659adbaca36bc357.png)

## 余談

### 意図通りいかなかったこと

`npm ci --ignore-scripts`コマンドを使って依存関係のインストールが爆速になるかと思ったら、ビルド時に画像フォーマットの変換に使っているsharpを対象に以下のエラーが出た。

> Error:  
> Something went wrong installing the "sharp" module
> Cannot find module '../build/Release/sharp-linux-x64.node'
> Require stack:
>   /home/runner/work/ikmnjrd.github.io/ikmnjrd.github.io/node_modules/sharp/lib/sharp.js

そのため、`$ npm ci`とした。

### 参考文献

- [スクリプトを使ってランナーでコードをテストする - GitHub Docs](https://docs.github.com/ja/actions/examples/using-scripts-to-test-your-code-on-a-runner)


GitHubでpushした時にマージ可否を設定する

GitHubにpushした時に特定コマンドの実行結果でマージ可否の設定


## リポジトリ
https://github.com/ikmnjrd/react-webpack-skelton

## 手順
`# npm init -y`

`# npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader`

package.jsonに追記
```json
"build": "webpack",
"watch": "webpack -w",
"start": "webpack serve"
```

`# npm i -S react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom`

tsconfig.json作成
```json5
{
  "compilerOptions": {
    "sourceMap": true,
    // TSはECMAScript 5に変換
    "target": "ES5",
    // TSのモジュールはES Modulesとして出力
    "module": "ES2015",
    // JSXの書式を有効に設定
    "jsx": "react",
    "moduleResolution": "node",
    "lib": [
      "ES2020",
      "DOM"
    ]
  }
}
```

`webpack.config.js` を作成
```js
module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "development",

  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: "./src/main.tsx",
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js"
  },
  module: {
    rules: [
      {
        // 拡張子 .ts もしくは .tsx の場合
        test: /\.tsx?$/,
        // TypeScript をコンパイルする
        use: "ts-loader"
      }
    ]
  },
  // import 文で .ts や .tsx ファイルを解決するため
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"]
  },
  // ES5(IE11等)向けの指定（webpack 5以上で必要）
  target: ["web", "es5"],

	// ローカルサーバー（webpack-dev-server）
  devServer: {
		contentBase: `${__dirname}/dist`,
    hotOnly: true,
    port: 8080,
    host: '0.0.0.0',
  }
};
```

`/src` 配下に  `main.tsx` を作成
```jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

const App = () => {
  return (
      <div>
        <h1>Hello React!</h1>
      </div>
  );
}

ReactDOM.render(<App/>, document.querySelector('#app'));
```



`/dist` にindex.htmlを作成
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>
```


https://ics.media/entry/16329/

https://newcss.net/


reactスケルトン的な



### 伝えたいことの結論
「リファクタリング」という言葉には新機能の追加タスクでも既存コードベースの改修が含まれる。

#### 自己紹介
前提として、私自身は小さな受託システム開発会社（50人規模）で働くWebエンジニアで主に新規開発を転々とやっています。


### いつやるか
コードを触る機会があったなら、それは常にリファクタリングするタイミング。

### 例え話
料金を表示するコードがあったとする。

```jsx
const price = 100

return (
  <div>
    {{
      price.toLocaleString("ja-JP", {
        style: "currency", currency: "JPY",
      })
    }}
  </div>
)
```

もし料金を国別の表にするという変更があったら、次のようにしたとする。  

```jsx
const priceJP = 100
const priceUS = 1

return (
  <div>
    <div>日本: {{
       priceJP.toLocaleString("ja-JP", {
         style: "currency", currency: "JPY",
       })
    }}</div>
    <div>米国: {{
       priceUS.toLocaleString("en-US", {
         style: "currency", currency: "USD",
       })
     }}</div>
  </div>
)
```

priceだったものが暗黙の了解として日本料金を示していたが、他の国が入ったことで暗黙の了解は崩れそれぞれを明示するに至った。  
私はこれをいい変更だと考えるものとして次の話に進む。  

### 実際によくあるやつ
この部分を既存コードの変更を嫌がって次のようにすることってまま稀によくあると思う。

```jsx
const price = 100 // 名前の変更もしない
const priceUS = 1 // 新しく追加
```

私はこういう時、変更の箇所が増えて自分が負わないでいい責任を負ってる感覚を味わうことがあるが、そこも含めてリファクタリングや仕様変更と呼びたい。  


しかもこういった部分は `price` のままにするとレビュワーからは差分にならないのでGitHub上から見えづらい。  

そのためレビュイーに頼る部分が多くなるが、善意でバグを発生させようとも善意を持ちたい（静的解析ツールを存分に頼ろう）

社のチーム内での共有に書いたメモの一部

リファクタリングしてますか？


### 結論
`.zshenv`ならvim起動時にも読み込まれるので、エイリアスは`.zshenv`に記述する。
`.config/nvim/init.nvim` に以下を記述
```vim
set shell=zsh
```

### 余談
ブログを書くときに"yyyy-mm-dd"という形でいつも日付を書いていた。  
その時にvimから`date "+%Y-%m-%d"`と実行・挿入したかった。  
毎回オプションを書くぐらいならalias(名前day)として登録したが、`:r! day`で挿入されなかった.  (エラー内容: シェルが値を返しました 127)  


### 参考文献
- [terminal vim not loading .zshrc](https://stackoverflow.com/questions/11415428/terminal-vim-not-loading-zshrc)


vim(nvim)からエイリアスコマンドを利用する

vim内部(:r!)からエイリアスコマンドを利用する


チェックボックスを少し洒落たデザインにする時、疑似要素の:beforeと:afterを使って実装すると思う。そんな時にsafariで困った時の備忘録。  

### 実装の雰囲気
```html
<div class="box">
  <input id="checkbox_1" type="checkbox" class="no-display" />
  <label for="checkbox_1" class="designed"><span>テキスト</span></label>
</div>
```
```css
.box {
  position: relative;
}
.no-display {
  display: none;
}
.designed:before,
.designed:after {
  position: absolute;
  content: "";
  display: block;
}
.designed:before {
  z-index: 1;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  left: 7px;
  width: 5px;
  height: 8px;
  top: 3px;
  transform: rotate(45deg);
  opacity: 0;
}
.designed:after {
  content: "";
  border: 1px solid #d3d5d5;
  border-radius: 4px;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  background-color: #fff;
}
.designed > span {
  margin-left: 24px;
}
.no-display:checked + .designed:before {
  opacity: 1;
}

```

### 問題の状態
問題になった箇所がsafariで、`position: absolute`をしていしているにも関わらず、疑似要素が before - 要素 - afterの順を崩してくれない。  
そのためbeforeとafterの要素を重ね合わせたいのに分離してしまっている。  

- safariでのレンダリング結果
![OSX-safari(16.0)でのレンダリング結果](https://i.gyazo.com/e63e9404ae95aa49af9b4616f9c4d15a.png)

- Chrome等でのレンダリング結果
![OSX-Braveでのレンダリング結果](https://i.gyazo.com/a4a4deec03d659f3a271762295f3c265.png)

### 対策
自分に何の理解が足りていないのかがいまいち判然としませんが、「span(非変形可能要素)にtransformが効かないようなものかな〜」と感じて、上記コードを次のようにすることで無理やり解決しました。


```css
.box {
  position: relative;
  display: flex;
  justify-content: left;
}
```

場当たり感が否めません。


### 検証に使ったsandbox
safari用のものが見たいならsafariで開き、chrome用のものが見たいならchromeで開いてください。頭痛が痛い。  
<iframe src="https://codesandbox.io/embed/pedantic-nash-sr1d7v?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="pedantic-nash-sr1d7v"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

疑似要素を使ったチェックボックスを書いた際にSafariで困ったこと

### 手順
`$ ssh-keygen -t ed25519`  
鍵の名前の入力を求められるので`github`や`hoge`などサービス名を入れておく。  
パスフレーズ（パスワード）はナシ。自分しか使わないマシン上で使う鍵なので。もしマシンの管理者が自分以外ならしっかり設定しておく。

`$HOME/.ssh`内にssh-keygenで入力した名前(`hoge`)の秘密鍵と`hoge.pub`の公開鍵ができている
`$ pbcopy < ~/.ssh/hoge.pub`  

### github
```
$ ssh -T github
Hi ikmnjrd! You've successfully authenticated, but GitHub does not provide shell access.
```
認証は通ってるがいざcloneをしようとしたら `Permission denied (publickey).` のエラー。
```
$ ssh -vT git@github.com
```
よくわからなかったが類似エラーを適当に検索したら~/.ssh/configのHostの値が原因っぽかった。
```
====変更前
Host github
====変更後
Host github github.com
```
無事cloneできた。

### 周辺用語
- RSA
- Ed25519
- 楕円曲線暗号
- エドワーズ曲線デジタル署名アルゴリズム


### 参考文献
- [SSH認証に最強の「Ed25519鍵」を使おう | LFI](https://linuxfan.info/ssh-ed25519)
- [SSH 鍵 - ArchWiki](https://wiki.archlinux.jp/index.php/SSH_%E9%8D%B5)
- [git clone したら、Permission denied (publickey).のエラー - Qiita](https://qiita.com/hatorijobs/items/92d8df363020a7f6d9fb)

自分のsshキーの作り方メモ


### 状況
[xz-utilsの件](https://gist.github.com/thesamesam/223949d5a074ebc3dce9ee78baad9e27)で環境のチェックやアップデートなどを終えたタイミングでsteam(proton)で動かしてるwindows向けのゲームが起動後、画面も立ち上がらないままクラッシュしてしまうようになった。ちなみにタイトルはエルデンリングです。


### 環境
|               |                                   |
|:--------------|:----------------------------------|
| OS     　     | EndeavourOS Linux x86_64          |
| WM            | i3                                |
| CPU    　     | AMD Ryzen 7 7745HX (オンボード)   |
| GPU           | ASUS Radeon RX 7600 OC  8GB       |



### トラブルシューティング
Steamのログの取り方は各ゲームの「管理」>「プロパティ」>「一般」>「起動オプション」のテキストフォームに
```
PROTON_LOG=1 %command%
```
と入力する。そしてゲームを起動するとホームディレクトリにsteam-{game-id}.logファイルができる。

```
~~~~~~
3600.766:012c:0190:trace:seh:NtGetContextThread 0xfffffffe: eax=000000e2 ebx=00000001 ecx=00000000 edx=00000000 esi=00000001 edi=0621f5a8
3600.766:012c:0190:trace:seh:NtGetContextThread 0xfffffffe: ebp=0621f6b8 esp=0621f578 eip=7bf4c8ec cs=0023 ss=002b flags=00000246
3600.766:012c:0190:trace:seh:NtGetContextThread 0xfffffffe: ds=002b es=002b fs=0063 gs=006b
3600.766:012c:0148:trace:seh:handle_syscall_fault code=c0000005 flags=0 addr=0xeaf11209 ip=eaf11209
3600.766:012c:0148:trace:seh:handle_syscall_fault  info[0]=00000000
3600.766:012c:0148:trace:seh:handle_syscall_fault  info[1]=000000b0
3600.766:012c:0148:trace:seh:handle_syscall_fault  eax=0000000a ebx=ed220538 ecx=03fbf595 edx=000000ac esi=00000000 edi=0000000a
3600.766:012c:0148:trace:seh:handle_syscall_fault  ebp=eb89dec8 esp=028f7c90 cs=0023 ds=002b es=002b fs=0063 gs=006b flags=00010206
3600.766:012c:0148:warn:seh:handle_syscall_fault backtrace: --- Exception 0xc0000005 at 0xeaf11209: /usr/lib/pressure-vessel/overrides/lib/i386-linux-gnu/vulkan/amdvlk32.so + 0x290d209.
3600.766:012c:0148:trace:seh:handle_syscall_fault returning to user mode ip=7a1dba0a ret=c0000005
3600.766:012c:0148:err:msvcrt:_wassert (L"!status && \"vkCreateGraphicsPipelines\"",L"../src-wine/dlls/winevulkan/loader_thunks.c",2934)
3600.766:012c:0148:trace:seh:raise (22)
3600.790:0030:0198:warn:threadname:NtSetInformationThread Thread renamed to L"wine_threadpool_worker"
3600.790:0030:019c:warn:threadname:NtSetInformationThread Thread renamed to L"wine_threadpool_worker"
3600.790:0030:01a0:warn:threadname:NtSetInformationThread Thread renamed to L"wine_threadpool_worker"
pid 122815 != 122814, skipping destruction (fork without exec?)
```

protonのバージョンを古すぎるものにしなければ、いくら設定を変えて試してもこのようなログになった。


### 対処方法
ログを自分なりに解釈すると、wineというwindowsアプリ互換を提供するアプリケーションのamdグラフィックス用のプログラムの部分が動いてなさそう。  
なので、wine等を依存としてインストールしていたsteamを一旦依存とともにアンインストール
```sh
$ sudo pacman -Rs steam
```

そしてもう一度インストール
```sh
$ sudo pacman -S steam
```
![pacmanインストール](https://i.gyazo.com/d21c04fe1d4c66589b30bd9803dff017.png)

前回まではデフォルトとされていたamdvlkとlib32-amdvlkをインストールしていたが、他のやつで自分の環境にあっていそうなvulkan-radeonとlib32-vulkan-radeonを選択してインストール。

これで無事起動できました。


### 参考文献
- [xz-utils backdoor situation (CVE-2024-3094)](https://gist.github.com/thesamesam/223949d5a074ebc3dce9ee78baad9e27)
- [Where does Steam Linux save its game crash logs? : r/linux_gaming](https://www.reddit.com/r/linux_gaming/comments/15c6t32/where_does_steam_linux_save_its_game_crash_logs/)
- [Steam/トラブルシューティング - ArchWiki](https://wiki.archlinux.jp/index.php/Steam/%E3%83%88%E3%83%A9%E3%83%96%E3%83%AB%E3%82%B7%E3%83%A5%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)

Steam(Linux)でWindows用ゲームが起動後即クラッシュした



使ってみたら使用感的にとてもよかった。
ただ、
[Getting started with React, Vite and Storybook (on a new project)]((https://github.com/eirslett/storybook-builder-vite#getting-started-with-react-vite-and-storybook-on-a-new-project))の中で紹介されていた`@vitejs/app`がdeprecatedだったので、修正したものを紹介する。

```bash
npm init vite@latest vite-react-app -- --template react-ts && cd vite-react-app
npm install # or yarn
npx sb@next init --builder storybook-builder-vite && npm run storybook
```



関係ないが、[viteの公式テンプレート集](https://github.com/vitejs/awesome-vite#templates)などもあるのでこれから参考にバイトライフをEnjoyしようと思います


### 参考
- [https://github.com/eirslett/storybook-builder-vite#getting-started-with-react-vite-and-storybook-on-a-new-project](https://github.com/eirslett/storybook-builder-vite#getting-started-with-react-vite-and-storybook-on-a-new-project)
- [https://vitejs.dev/guide/#scaffolding-your-first-vite-project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project)
- [https://github.com/vitejs/awesome-vite#templates](https://github.com/vitejs/awesome-vite#templates)


storybook-builder-viteを使ってみる


### 疑問に遭遇した状況
cssでtransformを使ったスタイリングが、なぜかWindows環境だけで見受けられるぼやけるという報告を受けて、ぼやっと[キャンバスの最適化](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas)のページを見ていると次のような記述がありました。
> キャンバスで整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。
> <cite>出典: [浮動小数点数値の座標を避けて整数を使用](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0%E5%80%A4%E3%81%AE%E5%BA%A7%E6%A8%99%E3%82%92%E9%81%BF%E3%81%91%E3%81%A6%E6%95%B4%E6%95%B0%E3%82%92%E4%BD%BF%E7%94%A8)</cite>

### サブピクセルレンダリングとは
wikipediaによると
> サブピクセルレンダリング(Subpixel rendering)とは、液晶・有機ELモニタ上のピクセルを構成する三原色の発光源を、仮想的にそれぞれ一つのピクセルとみなして横方向に三倍の解像度を得る技術のことである。 アンチエイリアスの一種。
> <cite>出典: [サブピクセルレンダリング - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%83%96%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0)</cite>
>

アンチエイリアスといえば、斜めにギザギザしたものをできるだけ真っ直ぐ見せるための技術と理解してる。  
各種ブラウザ（とOSが協調している）はデフォルトでアンチエイリアスが効いている。  
そしてCSSではfont-smoothというプロパティがある。  
```css
.something {
  -webkit-font-smoothing: antialiased; // auto | none | antialiased | subpixel-antialiased
  -moz-osx-font-smoothing: grayscale; // auto | grayscale
}
```
主にすでにかかったアンチエイリアスを効かせない方向に調整するためのもの。  
要は綺麗に見せたい場合では、ブラウザとOSに任せるしかなく、transformを適用しすぎてジャギジャギのままになった箇所はtransformによるスタイリングをやめるほかないと思う。  
試せていないが、遭遇したのは少数を含む指定だったので、transformを過剰に使ってもその指定が整数ならもしかするかもしれない（整数で済むような要件ならtransformを使っていない気がする）。

直接この答えになるような記事等は見つけられていないがMDNには次のような記述もある
> CSS 座標変換は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きなキャンバスを縮小するよりも小さなキャンバスを拡大したほうが良好です。
> <cite>出典: [CSS 座標変換を使用してキャンバスを拡大縮小する](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#css_%E5%BA%A7%E6%A8%99%E5%A4%89%E6%8F%9B%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%90%E3%82%B9%E3%82%92%E6%8B%A1%E5%A4%A7%E7%B8%AE%E5%B0%8F%E3%81%99%E3%82%8B)</cite>

canvasと同一視するのはどうかとも思うが、大きく離れてもいなさそうだと思う私でした。

### 参考文献
- [Webブラウザにおける文字のアンチエイリアスの現状の最適解 | dwango creators' blog（ドワンゴクリエイターズブログ）](http://creator.dwango.co.jp/14128.html)
- [CSS 座標変換の使用 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
- [font-smooth - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/font-smooth)

transformを過剰にあてた結果、ぼやけて表示されるフォントに救いのてはあるのか？いや、ない。

サブピクセルレンダリングってなんだ？



#### [証明写真ボックス](https://www.fujifilm.com/jp/ja/consumer/photoprinting/photo-box)
おすすめ。富士フィルムがやっている証明写真機。

写真機の中に入ると、「データと写真」「データのみ」「写真のみ」などから選択できる。値段は少しずつ違い、「データと写真」が1000円、「データのみ」が800円だったはず。

会員登録や専用アプリのダウンロードなどの必要がない。
撮影後に発行される受付番号とパスワードで半年間ダウンロード可。


#### [証明写真機Ki-Re-i](https://www.dnpphoto.jp/products/kirei/with/)

専用アプリのダウンロードが必要.
「証明写真機Ki-Re-i Withスマホ」という機種でないとデータでの受け取りに対応してなくてややこしい。


#### 地元の写真屋
地元の写真屋を今まで使ってた。
自分の顔がひん曲がってるせいで、もう少し顔傾けてなどの指示がよく出て面倒くさい。
カメラマンの腕次第で写真の出来が変わる。

値段は1500円くらいで高い。
CD-ROMに焼いてくれるが処分に困る。


履歴書用の写真をデータで受け取る方法まとめ


## **SVGとは**
Scalable Vector Graphics

### SVGの網羅的な説明
[https://www.webdesignleaves.com/pr/html/svg_basic.html](https://www.webdesignleaves.com/pr/html/svg_basic.html)

### SVGのベストプラクティス的な説明
[https://design.dena.com/engineering/svg-sprite](https://design.dena.com/engineering/svg-sprite)

## **便利な素材**
- [https://devicon.dev/](https://devicon.dev/)
  - MITライセンス
- [https://svgporn.com/](https://svgporn.com/)
  - CC0 1.0 Universal
- [https://fonts.google.com/icons?selected=Material+Icons](https://fonts.google.com/icons?selected=Material+Icons)
  - APACHE LICENSE, VERSION 2.0


SVGアイコンを配布しているWebサイト

### きっかけと対象読者
SwaggerことOpenAPI(以下、OAS)でドキュメントが書かれているが、特にそれが利用されているわけでもないプロジェクトに入ったばかりの頃（執筆している今）。
フロントエンドを中心に新規実装を担当していたが、APIの完成待ちの部分が多く、フロント・バックエンドともに未着手のAPI仕様を作る仕事が回ってきた。
手書きしてもいいが、どうせだったらOASの便利ツールにも手を出してみたくなったによるズボラ記事。
似た境遇じゃなきゃ以下の手順は参考にならないと思う。

### 手順
#### swagger-ui側
勝手にプロジェクトのリポジトリにインストールしたくないので、[git clone](https://github.com/swagger-api/swagger-ui)して使う。
`$ git clone git@github.com:swagger-api/swagger-ui.git && cd swagger-ui`
`$ cd swagger-ui`
`$ npm run dev`

localhost:3200でswagger-uiが起動するので開く

#### OASドキュメント側
`$ npm install -g http-server`
`$ cd {your-oas-document-dir}`
`$ http-server --cors`

localhost:8080でサーバー起動

![画面例](https://i.gyazo.com/5c53a9d6be78fafb5f4fda86a8d7d981.png)

テキストボックスに`http://localhost:8080/your-oas.json`などと入れてExploreボタンを押す。

### その他
swagger-ui起動時にはデフォルトで `https://petstore.swagger.io/v2/swagger.json`に接続される。

`swagger-ui/dev-helpers/dev-helper-initializer.js`に設定があったりするので、いじれる。ここらへんはしっかりと公式ドキュメントに書かれているのでぜひ見てみてください。
```javascript
// Build a system
  const ui = SwaggerUIBundle({
    url: "your-oas-file",
    dom_id: "#swagger-ui",
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    // requestSnippetsEnabled: true,
    layout: "StandaloneLayout"
  })
```

### 参考文献
- [how to load local .json file? · Issue #1110 · swagger-api/swagger-ui](https://github.com/swagger-api/swagger-ui/issues/1110#issuecomment-155873088)
- [治安のいいOpenAPIの開発環境を作る](https://tech.buysell-technologies.com/entry/2021/09/21/095238)
- [npm - swagger-ui](https://www.npmjs.com/package/swagger-ui)
- [swagger-ui/setting-up.md at master · swagger-api/swagger-ui](https://github.com/swagger-api/swagger-ui/blob/master/docs/development/setting-up.md)

ズボラにローカルでswagger-uiを使う

### 結論
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になるエラー


### TL;DR
個人的推しは2個目のこっち。
```ts
type Impossible<K extends keyof any> = {
  [P in K]: never;
};

type NoExtraProperties<T, U extends T = T> = U & Impossible<Exclude<keyof U, keyof T>>;
```

### 解決したい事象
次のようなコードはTypeScriptではエラーになりません。
```ts
interface User {
  name: string
  email: string
}
const user = {
  name: 'John',
  email: 'john@sample.example',
  password: 'password'
}

// passwordは型定義にはない
function checkUser(input: User): boolean {
  return !!input.name && !!input.email
}
checkUser(user)
```

これでは必要のないpasswordというプロパティも取り回してしまい、不都合がある場合もあります。


### 解決策
stack overflowでは次の2019年に投稿された2つの解決策が支持を得ていました。

#### 解決策1
```ts
type StrictPropertyCheck<T, TExpected, TError> = Exclude<keyof T, keyof TExpected> extends never ? {} : TError;
```
これを先ほどの例に当てはめれると次のようになります。
```ts
function checkUser<T extends User>(
  input: T & StrictPropertyCheck<T, User, 'MyError'>
): boolean {
  return !!input.name && !!input.email
}
checkUser(user)
```

```jsstacktrace
型 '{ name: string; email: string; password: string; }' の引数を型 '{ name: string; email: string; password: string; } & "MyError"' のパラメーターに割り当てることはできません。
  型 '{ name: string; email: string; password: string; }' を型 '"MyError"' に割り当てることはできません。ts(2345)
```


#### 解決策2
```ts
type Impossible<K extends keyof any> = {
  [P in K]: never;
};

type NoExtraProperties<T, U extends T = T> = U & Impossible<Exclude<keyof U, keyof T>>;
```
例は以下
```ts
function checkUser<T extends User>(input: NoExtraProperties<User, T>): boolean {
  return !!input.name && !!input.email
}
checkUser(user)
```
```jsstacktrace
型 '{ name: string; email: string; password: string; }' の引数を型 'NoExtraProperties<User, { name: string; email: string; password: string; }>' のパラメーターに割り当てることはできません。
  型 '{ name: string; email: string; password: string; }' を型 'Impossible<"password">' に割り当てることはできません。
    プロパティ 'password' の型に互換性がありません。
      型 'string' を型 'never' に割り当てることはできません。ts(2345)
```
どのプロパティがエラーとなるのかがわかりやすい点と利用するときの記述の簡単さが推しポイントです。  
その代わり、Impossibleの使い道が他に思いつかない点が少し気がかりです。  
コチラの方が個人的には好みです。  


### 参考文献
- [Forcing excess-property checking on variable passed to TypeScript function - Stack Overflow](https://stackoverflow.com/questions/54775790/forcing-excess-property-checking-on-variable-passed-to-typescript-function)
- [Is it possible to restrict TypeScript object to contain only properties defined by its class? - Stack Overflow](https://stackoverflow.com/questions/49580725/is-it-possible-to-restrict-typescript-object-to-contain-only-properties-defined)

オブジェクトのプロパティを検査したい時の解決策を2つ紹介

TypeScriptでオブジェクトのプロパティをチェックしたい時の解決方法2選


### 疑問
typescriptをjavascriptを挟まずにネイティブコードにコンパイルするようなプロジェクトはないのか？

### 自分なりの回答
ないよ。

DenoがTypeScriptコードをサポートしているが、中ではコンパイラが一度JavaScriptに変換している。

マイクロソフトがTypeScriptコンパイラAPIをwikiにしてくれている。
[https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API)

TypeScriptをネイティブコンパイルするって？


### 著者近況
転職を経てシステム開発会社に入社して2ヶ月。知らないことばかりが頭上を飛び交うドタバタの中、合間を縫って引っ越しをした。少し新しい生活に慣れ始めた今日この頃。久々に自分の興味を昇華しようとGitHubで他人のdotfilesを覗いたりしている。なお当人はMacのデフォルトのterminalを使い続け、特に設定にこだわろうとしたことすらなかったところ。

## Tips

### Webブラウザを簡易的なメモ帳として使う
アドレスバーに以下を入力しEnter
`data:text/html, <html contenteditable>`

htmlなのでstyleの指定やscriptタグも読み込める。
`data:text/html, <html contenteditable style="font-style: italic;">`

### Zsh
#### historyの検索
`control + r` でhistoryからの検索&実行ができる

#### cd系
pushdとpopdとこれらを使うのに便利な設定
```shell
# This is in ~/.zshrc
setopt auto_pushd
setopt pushd_ignore_dups
```

#### history系
```shell
# This is in ~/.zshrc
setopt hist_ignore_dups
setopt share_history
setopt inc_append_history
```

#### Zshのオプションの一覧(Web）はここ
[https://zsh.sourceforge.io/Doc/Release/Options-Index.html](https://zsh.sourceforge.io/Doc/Release/Options-Index.html)


### Mac標準TerminalとiTerm2
使ってて一番違うのが"色"という自分なりの結論。
[pastel](https://github.com/sharkdp/pastel)をbrew installして使ってみるのが体感しやすかった。
今まで標準のTerminalを使っていたが、nvimを試している中でiTerm2に乗り換えることにした。


### 周辺用語
- true color 
- 16bit color 
- 24bit color

### 参考文献
- [ブラウザのタブがメモ帳になる技が便利　とっさに何かメモりたいときなどに](https://nlab.itmedia.co.jp/nl/articles/2207/06/news129.html)
- [現役シリコンバレーエンジニアが教える NeoVim(VIM) + Tmux + Zsh 入門](https://www.udemy.com/course/vim-tmux-zsh/)

2022年度に知ったTipsまとめその1

最近知ったTips


アセンブリを読みたい願望がある。
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)


V8エンジン（JavaScript）が吐くアセンブリを見たい！



### 繰り返しが可能な操作と対になる操作

| 実施項目 | 操作 | 繰り返す| 戻る| 戻るの取り消し(進む) |
|:-----------|:------------|:------------|:------------|:------------|
|変更する | {edit} | . | u | `<C-r>` |
|行内で文字を前方検索|f{char}/t{char}|;|,||
|行内で文字を後方検索|F{char}/T{char}|;|,||
|ドキュメント内で文字を前方検索|/pattern`<CR>`|n|N||
|ドキュメント内で文字を後方検索|?pattern`<CR>`|n|N||
|置換の実行|:s/target/replacement|&|u||
|一連の変更を実行|qx{changes}q|@x|u||


### 参考文献
- [実践Vim 思考のスピードで編集しよう!](https://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Vim-%E6%80%9D%E8%80%83%E3%81%AE%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%81%A7%E7%B7%A8%E9%9B%86%E3%81%97%E3%82%88%E3%81%86-Drew-Neil/dp/4048916599)


vimで繰り返しの操作とその対となる操作


## 参考サイトまとめ
### vim関連
- [how-to-yank-from-vim-to-system-clipboard](https://vi.stackexchange.com/questions/23130/how-to-yank-from-vim-to-system-clipboard)
- [How to Undo Changes in Vim / Vi](https://phoenixnap.com/kb/vim-undo-redo)
- [Neovimでのフロントエンド開発環境 2021](https://zenn.dev/yano/articles/vim_frontend_development_2021)
- [新人達を1ヶ月でガチvimmerにした方法](https://qiita.com/nyantera/items/4bf29ca6f11bc797a9cb)
- [vim バッファ入門](https://zenn.dev/sa2knight/articles/e0a1b2ee30e9ec22dea9)

### tmux関連
- [とほほのtmux入門](https://www.tohoho-web.com/ex/tmux.html)
- [tmuxで快適にpane移動](https://qiita.com/pocari/items/b1828c8aea8e3545cadd)
- [tmux select-layout](https://waylonwalker.com/tmux-select-layout/)
  - main-verticalのvertical設定のバインド


vimとtmuxを使うに当たって参考にしたサイトまとめ

vim/tmuxを使うに当たって参考にしたサイトまとめ


### おすすめの設定(表示方法)
VSCodeで一番開いているである`ファイルエクスプローラー`の画面。その下の部分（タイムライン等が表示されている箇所）にGistPadを表示する。  

`アクティビティサイドバー`に表示されたGistPadのアイコンをドラッグし`サイドバー`にドロップすれば表示されます。  

この表示が気に入らなければ、`エクスプローラー`と書かれた右のば三点リーダーから解除できます。  
![dot-ellipsis](https://i.gyazo.com/344c5efc3d00536d832df6bf8fd38ff4.png)

ちなみに自分は`アクティビティサイドバー`と`サイドバー`という用語も初めて意識した程度だったので、参考にしたサイトと図を紹介しておきます。
> ![vscode-screen-structure](https://image.itmedia.co.jp/ait/articles/2105/14/di-vscp0201.gif)
> <cite>引用元: [VS Codeでのファイルの作成と編集の第一歩：アクティビティーバーと［エクスプローラー］ビューを使ってみよう：Visual Studio Codeで快適Pythonライフ（1/2 ページ） - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/2105/14/news025.html)</cite>

### GistPadについての感想
`cmd + P`での移動候補としても表示されてとてもいい感触です。

### GistPadを知るきっかけになったTweet

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">GistPad - Visual Studio Marketplace VSCode の拡張として Gist と GitHub レポジトリをメモ帳代わりに使える仕組み少し使ってみた感想。<br><br>1. 大変便利、拡張なのでどのリポジトリを開いていても共有のメモ帳として使える<br>2. VSCode 拡張が適用されるので md や rst…</p>&mdash; V (@voluntas) <a href="https://twitter.com/voluntas/status/1652150281298407424?ref_src=twsrc%5Etfw">April 29, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


### 参考文献
- [VS Codeでのファイルの作成と編集の第一歩：アクティビティーバーと［エクスプローラー］ビューを使ってみよう：Visual Studio Codeで快適Pythonライフ（1/2 ページ） - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/2105/14/news025.html)


VSCodeのエクスプローラーのサイドバーに拡張機能の要素を表示する

GistPadを使うなら設定しておきたいVSCodeの表示設定


### 疑問
WebブラウザではV8エンジンがJavaScriptを解釈・実行するのはわかったが、JavaScriptに埋め込まれたwasm（別言語・npm）で提供されている場合もV8エンジンが同一スレッド内でwasmを解釈・実行するの？
V8がhidden classを作成して、、、

### 参考文献
- [https://postd.cc/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code/](https://postd.cc/how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code/)


疑問メモ_WASMとV8エンジン


駆け出しエンジニアのふわっとした理解を書く。
Node.jsのコアモジュールであるBuffer()をフロント側で使いたいときがあるらしい。[参考の該当箇所](https://github.com/CyberAgentHack/web-speed-hackathon-2021/blob/135468cc9f69f6f27ba0bc9d3b74d60f1ebe3a40/client/src/components/foundation/CoveredImage/CoveredImage.jsx#L21-L23)（パフォーマンスチューニングを行う元して書かれたソースコードなので、ベストプラクティス的ではないのかもしれないが、初心者の私には判断つきません）
```javascript
const imageSize = React.useMemo(() => {
  return data !== null ? sizeOf(Buffer.from(data)) : null;
}, [data]);
```


### 解決策
解決策(といっても、元々のソースコードに書かれていたが)、下に記載する設定がないとブラウザから怒られてしまいます。
```bash
CoveredImage.jsx:22 Uncaught ReferenceError: Buffer is not defined
```


`webpack.config.js` に以下のように追記する。
```javascript
plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
]
```



### 参考文献
- [https://github.com/diegomura/react-pdf/issues/1029](https://github.com/diegomura/react-pdf/issues/1029)
- [https://github.com/CyberAgentHack/web-speed-hackathon-2021](https://github.com/CyberAgentHack/web-speed-hackathon-2021)
- [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/)


WebpackでBuffer（Node.js）を使う

### 疑問に遭遇した状況
ネットサーフィンをしていて`<head/>`を覗いていた

### 疑問
csp-hashディレクティブって何？なんのために使うの？

どうもcspは Content-Security-Policy の略っぽい。
```html
<script csp-hash>
  if (/Mac OS X/.test(navigator.userAgent))document.documentElement.classList.add('apple')
</script>
```

このブログがわかりやすかった気がしたが、わからなかった。[CSP(コンテンツセキュリティポリシー)について調べてみた - SSTエンジニアブログ](https://techblog.securesky-tech.com/entry/2020/05/21/)


### 参考文献
- [patterns.dev](https://www.patterns.dev/)
- [CSP(コンテンツセキュリティポリシー)について調べてみた - SSTエンジニアブログ](https://techblog.securesky-tech.com/entry/2020/05/21/)


疑問メモ_scriptタグのcsp-hashディレクティブについて


自分の環境のメモ的な意味合いが強いので、他のブログなどを参考にした方がいいです。  
[音声認識モデルwhisperの全モデル文字起こし比較 - 毎日がEveryday、日々 Day by Day](https://ysdyt.hatenablog.jp/entry/whisper)  
私は上のブログを見て使ってみようと思いました。

## 環境
| ソフト/ハード | バージョン |
|--------------:|---------:|
| iMac          | 27-inch, 2017     |
| macOS         | 12.6     |
| Python        | 3.9.6    |
| pip           | 22.3     |

普段pythonを使わない（言い訳）ので`% python3 hogehoge` `% pip3 hogehoge` とaliasすら貼ってない環境です。


## 手順
ffmpegをインストール
```sh
% brew install ffmpeg
```

whisperをインストール
```sh
% pip3 install git+https://github.com/openai/whisper.git
```

すると以下の警告が表示された。
```sh-session
Installing collected packages: whisper
  WARNING: The script whisper is installed in '/Users/ike/Library/Python/3.9/bin' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.
Successfully installed whisper-1.0
```
Pythonを日常使いすることないので、そうだったんだねー(どうやるのがスマートなんですか？)という気持ちで特にパスを通さず直接実行してみる。
```sh
% /Users/ike/Library/Python/3.9/bin/whisper /Users/ike/Downloads/recording.mp3 --language Japanese --model base
```
ちなみに自分の環境ではコマンド実行時に以下の警告が出た。
```sh-session
 UserWarning: FP16 is not supported on CPU; using FP32 instead
  warnings.warn("FP16 is not supported on CPU; using FP32 instead")
```

標準出力には以下のように出力される。
```txt
[00:00.000 --> 00:12.320] テストですと 本日はウィスパーの 紹介をしたいと思います
[00:12.320 --> 00:19.280] (恥ずかしいので省略)
[00:19.280 --> 00:26.720] トコマンドラインから実行することが できます
```

さらに、以下のようなファイルがカレントディレクトリに作成される。  
それぞれ形式違うらしいが標準出力とほぼ同じテキストファイル。
```sh
-rw-r--r--    1 ike   staff    319 Oct 17 20:02 recording.mp3.srt
-rw-r--r--    1 ike   staff    220 Oct 17 20:02 recording.mp3.txt
-rw-r--r--    1 ike   staff    303 Oct 17 20:02 recording.mp3.vtt
```

## まとめ
[GitHubのDiscussions](https://github.com/openai/whisper/discussions/categories/show-and-tell)内でwhisperを使ったツールなどが紹介されている。  
中にはリアルタイム文字起こしなどもあって眼福。  
個人的にはWeb会議を録音しておいて、議事録作成に役立てばすごく満足なので、一々上のコマンドを叩く使い方でしばらく使ってみようと思う。

### 周辺用語
- FP16
- FP32


### 参考文献
- [音声認識モデルwhisperの全モデル文字起こし比較 - 毎日がEveryday、日々 Day by Day](https://ysdyt.hatenablog.jp/entry/whisper)
- [openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision](https://github.com/openai/whisper)












whisper from openai を使ってみた際のメモ

Tag一覧