
そろそろ育休が終わるので、リハビリがてらWebRTCに触れようと思い、DenoでWeb会議システムのスケルトンを作った。

[GitHub](https://github.com/ibuibu/deno_webrtc_skeleton)

[Demo](https://deno-websocket-skeleton.deno.dev/)

これのミソは下記の３点。

- Deno Deployをするだけで誰でも速攻で構築できる。
- 超シンプルなファイル構成。全部で3ファイルしかなく、フロント、サーバのjsはそれぞれ100行ちょっとしかない。
- サードパーティパッケージを用いていない。

シグナリングサーバは、Denoに標準装備されたWebSocket APIで書いた。

これを思いついたのは、Zennの記事でDeno DeployがWebSocketを使えると知ったのがきっかけ。

Deno Deployはリクエスト制限が100K/dayまであるようなので、じゃんじゃん使っても余裕そう。



DenoでWeb会議システムのスケルトンを作った


Elixirに入門しようと思いたち、VimにLSPを導入するためにmason.nvimでelixir-lsをインストールした。

しかし、.exsファイルを開くと、こんなエラーが表示された。

```
Error detected while processing BufReadPost Autocommands for "*":
Error executing lua callback: ...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:22: Error executing lua: ...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:23: Vim(append):[lspconfig] cmd not defined for
 "elixirls". Manually set cmd in the setup {} call according to server_configurations.md, see :help lspconfig-index.
stack traceback:
        [C]: in function 'nvim_cmd'
        ...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:23: in function <...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:22>
        [C]: in function 'nvim_buf_call'
        ...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:22: in function <...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:11>
stack traceback:
        [C]: in function 'nvim_buf_call'
        ...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:22: in function <...ocal/Cellar/neovim/0.8.1/share/nvim/runtime/filetype.lua:11>
```

[nvim-lsp-configのドキュメント](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#elixirls)を確認すると、elixir-lsにはcmdが設定されていないので、設定が必要とのこと。

なので、以下の通りmasonの設定の関数内でpathを設定すると、エラーが解消された。


```lua
require('mason-lspconfig').setup_handlers({ function(server)
  local opt = {
    capabilities = require('cmp_nvim_lsp').default_capabilities(
      vim.lsp.protocol.make_client_capabilities()
    )
  }

  if server == "elixirls" then
    opt.cmd = { "/Users/hirokiibuka/.local/share/nvim/mason/packages/elixir-ls/language_server.sh" }
  end

  require('lspconfig')[server].setup(opt)
end })

```


elixir-lsの設定


育休に入ってまとまった時間が取れたので、Neovimの設定をオーバーホールした。具体的には、init.vimをinit.luaにすると同時に、プラグインも極力Lua製のものに刷新した。

で、お世話になっていた[shareline.vim](https://github.com/koizuss/shareline.vim)というプラグインが簡易な作りのvim script製だったので、Luaプラグインを作るいい機会と捉えて自分でLua版を作ることにした。

で、できたのがこれ。

[https://github.com/ibuibu/shareline.nvim](https://github.com/ibuibu/shareline.nvim)

ノーマルモードかヴィジュアルモードで実行すれば、該当行のGitHubのURLがクリップボードにコピーされるというもの。

作りとしてはエラーハンドリングもしていないし、リポジトリサービスはGitHubを使っていることが前提になっていて、とても雑。

また機会があればもっと凝ったものを作ってみたい。


初めてのNeovim用Lua製プラグインを作った


先日、筆者がコントリビュートしたJestのv29.3.0がリリースされた。

[https://github.com/facebook/jest/releases/tag/v29.3.0](https://github.com/facebook/jest/releases/tag/v29.3.0)

Jestは直近の週間DL数が2千万、累計8億件以上もある、JavaScriptのテストフレームワークでシェアNo.1の代物だ。初めてのOSS活動で、いきなり超有名なライブラリにコントリビュートできて、正直びっくりした。

以下、経緯を振り返る。

## 経緯

もうすぐ長期の育児休暇に入るため、コーディングスキルの衰えを防ぐためにOSS活動を初めてみようかと思い立った。「OSS活動 やり方」と検索すると、`good first issue`なるlabelでissueを検索してチャレンジするのがよい、という勧めが多かった。早速、`good first issue`のまとめサイトである[goodfirstissue](https://goodfirstissue.dev/)で検索し、毎日使っているJestに5件ほどのissueが見つかった。

その中でまず着手したのが、こちらの[issue](https://github.com/facebook/jest/issues/12556)。 3月に起案されたもので、ドキュメント上のWebpackのチュートリアルが古すぎる、という内容だった。ドラフトのPRが7月に作られていたが、コメントが放置されていた。これは誰でもできるただのめんどくさい作業なので、入門にちょうどよいと考え、2h程度で[PR](https://github.com/facebook/jest/pull/13556) を作成した。（lint漏れでメンテナが直してくれてた。ありがたや。）

次に着手したのが、こちらの[issue](https://github.com/facebook/jest/issues/9761)。4月に起案されたもので、configの`projects`の中身のバリデーションが効いてない、というものだった。わかりやすいし再現もすぐできる事象なので、これならイケると思い、原因調査を開始した。割とすぐに対象箇所は見つかったが、`projects`の中身を覗いているとき、という判定がなかなか骨が折れた。というのも、`projects`は文字列で対象プロジェクトのpathの文字列か、その設定のオブジェクト、という２つのパタンを持つ配列型のプロパティだからだった。多くの使えそうな変数をひたすらprintしながら、文字列でもオブジェクトでも共通で使える条件式をなんとか特定できた。 判定さえできれば、あとはバリデーションに用いるオブジェクトを`projects`用の型のプロパティに絞ったものを作って渡すだけだった。

PR作成後、メンテナの方にnice!と言われたときはとても嬉しかった。メンテナのapproveの後、超細かい版のCIテストが走るのだが、windowsのテストでpathが`\`のためにコケてたので、急いで直した。その翌日マージされ、直後にv29.3.0がリリースされた。

しかし、実はv29.3.0のリリース直後に筆者の修正箇所にバグが見つかり、nice!と行ってくれたメンテナの型が速攻で修正してパッチversionをリリースしてくれていた。といっても筆者の修正自体にはミスはなく、用いた型定義にそもそもプロパティが足りていなかったことが問題であった。そのため、それが顕在化して修正されるきっかけを作ったという意味でプラスに捉えられる事態だと思う。

・・・ということで、初めてOSS活動をやってみたが、とてもいい経験だった。Jestはおそらく何億ものソフトのテストとして使われていて、そのユーザー数となれば想像もつかないほど多くの人数になるわけで、、、今回の貢献の効果を考えるととても感慨深い気持ちになる。



Jestにコントリビュートした


昨日に続き、今度はUDP版のEchoサーバを作った。

[ibuibu/zig-udp-echo-server](https://github.com/ibuibu/zig-udp-echo-server)

std.netにUDP実装が無かったため、[zig-network](https://github.com/MasterQ32/zig-network)パッケージを利用した。

最初、README通りにexampleを動かそうとしてみたが、どうも開発途中のmasterブランチのZigに合わせて作っているようで、最新版の0.9.1でもビルドすらうまく通らなかった。

とりあえず[ziglearnのBuild System](https://ziglearn.org/chapter-3/)を読んでパッケージインポートの仕方を学び、その通りに動かしてみると一応exampleのTCP Echoサーバが動いた。

インポートはパッケージマネージャを利用したかったのだが、まだ乱立中でデファクトスタンダードが無いようだったので諦めた。手動インポートの場合はbuild.zigを書き換え、`git submodule add`する必要があり面倒。どれでもいいので早く覇権を取っていただきたい。

exampleにはUDPのEchoサーバが無かったので、C言語での実装を思い出しながら雰囲気で改造すると動いた。



ZigでUDP Echoサーバを作ってみた


最近よく話題に上がるZig言語を使って、TCP Echoサーバを作ってみた。

```zig
const std = @import("std");
const net = std.net;

pub fn main() anyerror!void {
    var server = net.StreamServer.init(.{});
    defer server.close();

    var gpa = std.heap.GeneralPurposeAllocator(.{}){};
    const allocator = gpa.allocator();

    const args = try std.process.argsAlloc(allocator);
    defer std.process.argsFree(allocator, args);

    if (args.len != 3) {
        std.debug.print("Invalid arguments.", .{});
        std.os.exit(1);
    }

    const address = args[1];
    const port: u16 = try std.fmt.parseInt(u16, args[2], 10);

    const address_port = try net.Address.resolveIp(address, port);
    try server.listen(address_port);

    while (true) {
        var conn = try server.accept();
        defer conn.stream.close();

        var recv_data = try conn.stream.reader().readAllAlloc(allocator, std.math.maxInt(usize));
        std.debug.print("{s}", .{recv_data});

        try conn.stream.writer().print("{s}", .{recv_data});
    }
}
```

[Gist](https://gist.github.com/ibuibu/888b08c429bc9f39b96b08cd6446bf23)

本当は前に作った[Rust製STUNサーバ](https://github.com/ibuibu/rust-stun)のZig実装を作ろうと、UDPサーバを作りたかったのだが、[std.net](https://github.com/ziglang/zig/blob/master/lib/std/net.zig)パッケージにはTCPしか実装されていなかったので、とりあえずTCPサーバだけ作ってみた。

新しい言語なので、TCPサーバの作り方どころか文字列から数値へのキャスト方法すらググってもまともにヒットせず、[ドキュメント](https://ziglang.org/documentation/master/)を見ても書いていなかったりで、なかなかに苦労した。

また、エディタ周りもまだ環境が整っていない印象。neovimのcoc.nvimで、ZigのLSPのzlsを利用する`coc-zig`をインストールしてみたのだが、変数のカーソルホバーで型が表示されなかったり、関数説明に文字色が付いていなかったり、で書きにくくてしょうがなかった。VSCodeもチラ見したが同じような状況ぽいのでLSPがまだ貧弱なのかと思う。

書き味としては、型名や関数定義等の記法がRustっぽいが、例外処理があるので素直に書けてかなりシンプルに書ける。deferなどgoっぽさも漂っていた。

今後に期待したい。


ZigでTCP Echoサーバを作ってみた


Rust で STUN サーバを作った。

[https://github.com/ibuibu/rust-stun](https://github.com/ibuibu/rust-stun)

以下、経緯と作り方と感想。

## 経緯

最近、なんとなく CPU やコンパイラなど低レイヤの勉強をゆるくやっており、その流れでネットワークプログラミングの勉強もしたくなった。どうせやるなら新しいプログラミング言語で勉強しようということで、気になっていた Rust で書くことにした。

適当に本を探すと、Kindle Unlimited で[Rust で始めるネットワークプログラミング](https://www.amazon.co.jp/Rust%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E5%B0%8F%E9%87%8E-%E8%BC%9D%E4%B9%9F-ebook/dp/B07SW2GXVF)というバッチリの書籍を見つけた。パパっと写経して、速攻で TCP/UDP サーバ&クライアントが作れた。

で、UDP サーバが作れたということは、これを改造して STUN サーバを作れるぞ、と思いついた。以前読んだこの[ブログ](https://sublimer.hatenablog.com/entry/2021/12/12/000000)を思い出し、参考にして取り掛かることにした。

## 作り方

STUN サーバがやっていることはとても単純で、リクエストが規約に沿っているか、STUNのリクエストかどうかの2点をチェックし、ok だったらリクエスト元 IP アドレスを規約に沿って返却するだけである。

ブログ記事の案内どおり、RFC 原文を読みつつ、[googleのtricle ICEのサンプルサイト](https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/)を動かした際に送受信される STUN パケットを wireshark でキャプチャし、自身のサーバが同じ値を返せるようにしていった。ブログ記事では TURN サーバの実装まで踏み込んでいるが、とりあえず STUN だけ実装したい場合は、STUN属性 は xor-mapped-address のみで、後半のfingerprint云々は不要だ。

STUN 実装におけるテストの方法としては、まずローカルでリクエストチェック部分をテストするだけならば、記事にある通り nc コマンドを使うのが手っ取り早い。 ローカルでレスポンスのテストをする場合は、coturn付属の[turnutils_uclient](https://github.com/coturn/coturn/wiki/turnutils_uclient) を使うのがよい。ちなみに、先のtricle ICEのサンプルサイトで`stun:localhost:<port>`を指定してみても動かない（srflxの経路が取得できない）。これはブラウザがlocalhostを経路として認めてないせいと思われる。

つまり、ちゃんとブラウザでのテストをしたかったらローカルじゃ無理である。 なので筆者は適当にGCEにVMを立てて、private ipでSTUNサーバを立ち上げ、FWでUDPで指定ポートを許可し、`/etc/hosts`に`hoge-turn.com`という適当なドメインと外部IPを記載して試してみて、ようやく正常性確認できて安堵したのであった。

## 感想

Rustを初めて書いてみたのだが、とにかく型が硬いので、キャスティング処理に四苦八苦した。コンパイラのおせっかい感がすごいのでサクッとトイアプリを作るには辛い言語だという印象を受けた。

また、bitやbyte配列をいじる低レイヤを初めて書いたので、とても新鮮な体験だった。一部文字列で処理してしまっている部分があるので、時間があったらbit配列に直したりしてキレイにしたい。


RustでSTUNサーバを作った



zshでechoを使って文字に色を付けるときは、以下のようにANSIエスケープ文字`\e`で挟み込み、色指定をする。

```
echo "\e[31m red \e[m"
```

しかし、sedでは`\e`ではANSIエスケープ文字と解釈されない。`\x1b`で記述すると解釈される。

```
echo red | sed "s/red/\x1b[31mRED\x1b[m/"
```

ちなみに、そんなふうにして色を付けた結果を`fzf`したいときは、`--ansi`オプションを付ければよい。


sedの結果に色を付ける


久しぶりに競プロでもやろうと思い、gccでコンパイルを実行すると以下のようなエラーが出力された。

```shell
In file included from /usr/local/Cellar/gcc/12.1.0/include/c++/12/bits/postypes.h:40,
                 from /usr/local/Cellar/gcc/12.1.0/include/c++/12/iosfwd:40,
                 from /usr/local/Cellar/gcc/12.1.0/include/c++/12/ios:38,
                 from /usr/local/Cellar/gcc/12.1.0/include/c++/12/ostream:38,
                 from /usr/local/Cellar/gcc/12.1.0/include/c++/12/iostream:39,
                 from a.cpp:1:
/usr/local/Cellar/gcc/12.1.0/include/c++/12/cwchar:44:10: fatal error: wchar.h: No such file or directory
   44 | #include <wchar.h>
      |          ^~~~~~~~~
```

どうもMacのOSをアップデートしたことで環境が壊れたぽい。

gccが参照するインクルードのpathを確認すると、`/Library/Developer/CommandLineTools/SDKs/MacOSX12.sdk`であった。
```shell
❯ g++ -v

Using built-in specs.
COLLECT_GCC=g++
COLLECT_LTO_WRAPPER=/usr/local/Cellar/gcc/12.1.0/bin/../libexec/gcc/x86_64-apple-darwin21/12/lto-wrapper
Target: x86_64-apple-darwin21
Configured with: ../configure --prefix=/usr/local/opt/gcc --libdir=/usr/local/opt/gcc/lib/gcc/current --disable-nls --enable-checking=release --with-gcc-major-version-only --enable-languages=c,c++,objc,obj-c++,fortran --program-suffix=-12 --with-gmp=/usr/local/opt/gmp --with-mpfr=/usr/local/opt/mpfr --with-mpc=/usr/local/opt/libmpc --with-isl=/usr/local/opt/isl --with-zstd=/usr/local/opt/zstd --with-pkgversion='Homebrew GCC 12.1.0' --with-bugurl=https://github.com/Homebrew/homebrew-core/issues --with-system-zlib --build=x86_64-apple-darwin21 --with-sysroot=/Library/Developer/CommandLineTools/SDKs/MacOSX12.sdk
Thread model: posix
Supported LTO compression algorithms: zlib zstd
gcc version 12.1.0 (Homebrew GCC 12.1.0)
```

だがしかし、そのpathをlsしてみてもなにもない。

SDKのpathを下記コマンドで調べてみる。

```shell
❯ xcrun --show-sdk-path

/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk
```

環境変数SDKROOTにこのpathを設定することで、gccがインクルードのpathを正しく認識するらしい。

ということで、`.zshrc`に下記を追記することで、gccのエラーを解消できた。

```shell
export SDKROOT="$(xcrun --show-sdk-path)"
```



Macでfatal error: wchar.h: No such file or directory の修正


Viteを利用しているプロジェクトにChakra UIを入れてみて、`npm run build`を叩いてみると、以下のようなエラーが発生した。

```shell
> tsc && vite build

node_modules/@chakra-ui/menu/dist/declarations/src/use-menu.d.ts:480:50 - error TS2694: Namespace '"/<OMITTED>/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

480         colorAdjust?: import("csstype").Property.ColorAdjust | undefined;
                                                     ~~~~~~~~~~~

node_modules/@chakra-ui/menu/dist/declarations/src/use-menu.d.ts:986:61 - error TS2694: Namespace '"/<OMITTED>/node_modules/csstype/index".Property' has no exported member 'ColorAdjust'.

986         WebkitPrintColorAdjust?: import("csstype").Property.ColorAdjust | undefined;
                                                                ~~~~~~~~~~~

```

issueを探すと、ドンピシャなものが発見できた。

[https://github.com/chakra-ui/chakra-ui/issues/5714](https://github.com/chakra-ui/chakra-ui/issues/5714)

この解決方法の通り、npmのversion 8.3以上で`overrides`を使って`csstype`のversionを固定しないとイケないとのことだったのだが、自分の環境のnpmが7系だったので、以下でアップデートした。

```shell
npm install -g npm
```

それで`node_modules`と`package-lock.json`を削除して`npm i`するだけで直ってしまった。

なぜかはわからないが、7系のnpmだと`package-lock.json`を読む限り、`csstype`が`0.3.11`が入ってしまっていたが、8系でやり直すと`0.3.9`に統一されていた。

ちゃんと調べていないので理由はわからないが、8系じゃないと`chakra-ui`の`package.json`の`csstype`のバージョンが解釈されていなかったものと思われる。

ということで、7系のnpmを使うとこのエラーにハマる人がいるかもしれないので、書き残しておく。とりあえず、npmのversionを上げれば直る。



npm7系（未満?）でChakra UIを利用するとビルドに失敗する


NetlifyとVercelにデプロイしたSPAにおいて、ルート以外のページにURLから直接遷移しようとすると404エラーが起きる。

それぞれにおける回避方法は以下の通り。


### Netlify

`_redirects`ファイルをトップ階層に設置し、内容を以下の通りにする。


```shell
/*    /index.html   200
```

[参考: Netlify docs (History pushstate and single-page apps)](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps)

### Vercel

`_redirects`ファイルをトップ階層に設置し、内容を以下の通りにする。

```js
{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}
```

[参考: Stack Overflow - Why does react-router not works at vercel?](https://stackoverflow.com/questions/64815012/why-does-react-router-not-works-at-vercel)


NetlifyとVercelでのSPA設定


Viteで静的な画像を取り扱う場合は、通常`assets`ディレクトリを用意し、画像を格納する。

これをimportステートメントを書いて利用するのだが、画像のファイル名が`/assets/hoge.599ed363.png`のようにハッシュ化されてしまう。

よって、OGP画像などファイル名をハッシュ化したくない場合には、publicリポジトリを用意し、この中に配置する。

こうすると、`URL/画像.png`でアクセス可能となるので、以下のようにmetaタグを用意すればよい。

```html
<meta property="og:image" content="https://example.com/ogp.png">
```

[参考: Vite - 静的アセットの取り扱い(publicディレクトリ)](https://ja.vitejs.dev/guide/assets.html#public-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA)


ViteでOGP画像の設定方法



## 困った事象
個人開発でFlutterアプリを作成したので、デベロッパー登録料 $25を払って、Google Play Storeにアップしようとした。

が、Google Play Consoleでの「本人確認が必要」と言われ、なぜか企業の登記簿謄本などが求められた。。

いやこっちは個人なんだが。。。Play Consoleの設定を確認しても個人アカウントになっているのに。。。なぜ。。


## 対応

とりあえず無理やり免許書をアップロードしてみた。

が、数時間後に当然のごとく却下メールが届いた。

メール内のリンクを押すと、Googleお支払センターなるページへ飛ばされた。

お支払いセンター = Google Payの設定ページのようで、Googleの課金系のあらゆる設定はここで統括しているらしい。

お支払いプロファイルなるものの設定を見ると、アカウント種別が「組織」になっていた。これが原因か・・・！！！

「組織」になってしまった原因は思い出せないが、おそらくかなり以前にGCPの契約をした際にミスったのだと思われる。

個人アカウントから組織アカウントへの変更方法を調べてみたが、ドキュメントに「無理」と明記されている。

参考: [https://support.google.com/paymentscenter/answer/9028746?hl=ja](https://support.google.com/paymentscenter/answer/9028746?hl=ja)

困ったので、ヘルプから英語で問い合わせてみると「$25は返金するから、お支払いプロファイルを閉鎖して、もう一度デベロッパー登録しなよ」と言われた。

なるほど。

だが、お支払いプロファイルにはGCPの支払いも含まれている。GCPの「お支払い」画面からプロファイルを削除しようすると、「リソースは全部停止するか消えるぜ？」と言われる。

ムムムム。。。。デッドロック。。。。

そこで、以下の対応を取った。

1. 別のgmailアカウントでGoogle Payのページからお支払いプロファイルを作成
2. GCPのIAMから当該アカウントを招待
3. プロジェクトの支払いを新たに作成したお支払いプロファイルに設定
4. メインのお支払いプロファイルを閉鎖
閉鎖すると、自動で個人アカウントの画面になり、Google Play Storeで買ったアプリの料金などが表示されていた。（というか、組織と個人両方紐付いてるのに組織しか表示されないお支払いセンターの仕様とは・・・）

5. プロジェクトの支払いを、種別が個人になったメインのお支払いプロファイルに戻す
6. 新たに作ったお支払いプロファイルを削除

で、改めてデベロッパー登録料を支払ったとさ。。。

めでたしめでたし。





Google Play Consoleの本人確認ができなくて困った話


Netlify, Vercel, Firebase Hostingをそれぞれ何度か使ってみて、いろいろ感じたことがあるので、雑にメモする。

## Netlify

### 👍
- 使いやすい。index.htmlをドラッグ&ドロップでホスティングできるのはすごい。
- 多くのオプション機能がある。Formsや最近だとFunctionsまである。

### 👎
- CDNが国内にないので、遅い。
- Basic認証は、有料プランじゃないとできない。

## Firebase Hosting

### 👍
- CDNが国内にあるので、速い。
- SPAのBasic認証をやろうと思えば、Cloud Functions for Firebaseを使えばできる。が、Blaze（従量課金）プランにする必要がある。（でも無料枠がある）

### 👎
- 使いにくい。CLIでの作業がメインなので、GUIでの操作ができない。
- PR契機でホスティングするにはGitHub Actionsが必要なので、.githubフォルダがソースにも必要になる。
- `firebase deploy`コマンドが確認無しで走るので、オペミスが怖い。
- カスタムドメインに、eTLD+1の所有権が無いと設定できない。例えば、`hoge.fuga.example.co.jp`は設定できない。

## Vercel

### 👍
- CDNが国内にあるので、速い。
- GUIもかなり使いやすい。Netlifyと遜色ない。

### 👎
- GitHub Organizationのリポジトリと連携するには、無料プランじゃできない。


ので、私は基本的にVercel推しです。



ホスティングサービス（Netlify, Vercel, Firebase Hosting）を使ってみて


どうしても`"]"`を文字クラス（`[]`）内に含めたいときは三重バックスラッシュエスケープをかませばいける。

```js
// node
> const r = new RegExp("[\\\]]")
r.test("]")
true
> r.test("a")
false
```

ちなみにJavascriptだと、`"]"`以外の基本的な記号はすべてエスケープが不要なようだ。

```js
// node
> const r = new RegExp("!\[@#$%^&*()+_|=:;\"/?.><,`~{}]+$")
> r.test("![@#$%^&*()+_|=:;\"/?.><,`~{}")
true
```



Javascriptの正規表現で" ] "を指定する


いつも`git checkout`するときは zsh の補完で branch を選択していたが、まあまあ使いにくいので、[GitHub CLI の extension](https://github.com/mislav/gh-branch)を使ってみたのだが、ものすごく遅い。やっぱり GitHub CLI は遅い。。

ので、自分で fzf を使ったコマンドを作った。

出来栄えはこんな感じ。

![gb](https://i.imgur.com/6RoeINq.png)

コマンドはこれ。

```shell
function gb() {
  branches=$(git branch --all --format="%(refname:short)%09%(authordate:relative)%09%(authorname)" | grep -v HEAD)
  branch=$(echo "$branches" | column -ts "$(printf '\t')" | fzf)
  git checkout $(echo "$branch" | awk '{print $1}' )
}
```

こだわりポイントは以下２点。

- format オプションで、最終更新がどれくらい前だったかと、更新者を出力
- column コマンドで縦を揃えてキレイに出力

ちなみに column コマンドの`-s`オプションで Tab を指定しようとしたが、Mac だと`printf`で Tab を出力してやらないとうまくいかなかった。


git checkoutをfzfでいい感じにする


いままで、githubのブラウザを開くために、`GitHub CLI`の以下コマンドを利用していた。

```shell
gh repo view --web
```

これを`gh alias`で`gh open`として登録して使っていた。

が、どうも最近、APIの速度が落ちたせいなのか、動作が遅い。

ので、シンプルな実装のコマンドを作った。

```shell
function gho() {
  url=$(git config --get remote.origin.url | sed -e 's/github.com:/github.com\//' -e 's/^git@/https:\/\//g')
  open "${url}"
}
```

HTTPSではなくSSHでクローンしたリポジトリでも利用できるよう、sedでremoteのURLを整形している。

`open`コマンドはMAC用なので、OSによってここは変える必要がある。

ちなみに、私は`ghq`でリポジトリを管理しているので、`fzf`と組み合わせて、どこからでも選択式にブラウザを開けるよう、こんなコマンドも作った。

```shell
function grr() {
  pushd $(ghq root)/github.com/$(ghq list | cut -d "/" -f 2,3 | sort | fzf)
  gho
  popd
}
```


GitHubをブラウザで開くコマンド



（語り尽くされたテーマで今更だけど)

タイトルの内容で検索すると一番ヒットする`rmtrash`が、Homebrewでインストールできなくなっていた。
[https://github.com/Homebrew/homebrew-core/pull/65438](https://github.com/Homebrew/homebrew-core/pull/65438)

<br />

ので、代替手段として、`trash`をインストールした。

[https://hasseg.org/trash/](https://hasseg.org/trash/)

<br />

`.zshrc`にaliasを追加

```shell
alias rm="trash -F"
```

-Fを付けておくと、シャコン！って音がなるようになるので、ゴミ箱に入れた感が高まる。



macでrmを「ゴミ箱に入れる」に変える


Next.js と Typescript で GA を導入する方法を記す。

まず、React で GA を導入する方法を調べると、まず引っかかるのは`react-ga`というパッケージだった。しかし、`react-ga`は 2020 年 10 月に出た Google Analytics 4(GA4)という最新のバージョンに対応していないとのこと。

GA4 は以下のメリットがあるらしい。

1. ウェブとアプリを横断的に計測できる
2. Google の機械学習モデルを活用した予測機能の導入
3. プライバシー重視のデータ収集

ということで、GA4 を導入する場合は、従来のクライアントライブラリである`analytics.js`ではなく、[gstag.js](https://semlabo.com/seo/blog/google_analytics4/)を導入しないといけないことがわかった。(`react-ga`は analytics.js ベース)

`gstag.js`ベースのパッケージとして以下 2 つが見つかったが、どちらも 100star 以下だったので、採用は見送った。

- [https://github.com/unrealmanu/ga-4-react](https://github.com/unrealmanu/ga-4-react)
- [https://github.com/PriceRunner/react-ga4](https://github.com/PriceRunner/react-ga4)

Next.js 公式リポジトリに[サンプルコード](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)があり、これに基づいた日本語記事のサイトがいくつかあったので、参考にさせていただいて実装した。

SSG の本ブログもこの方法で計測できた。

### 必要な型定義ファイルをインストール

```shell
npm i -D @types/gtag.js
```

### GA の ID を env ファイルで定義

```js
// .env
NEXT_PUBLIC_GA_ID=UA-********-**
```

なお、UA-から始まるユニバーサル アナリティクス プロパティだけでなく、GA4 の測定 ID（「G-XXXXXXXX」）でも動く。

参考 [https://support.google.com/analytics/answer/9310895?hl=ja](https://support.google.com/analytics/answer/9310895?hl=ja)

`NEXT_PUBLIC_`を接頭辞につけると、Node.js だけでなくブラウザにも渡すことができる。

参考 [https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser)

この環境変数は、忘れずにホスティングサービスにも設定する。

### 関数を定義

```ts
// lib/gtag.ts

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID || "";

https: export const pageview = (url: string): void => {
  window.gtag("config", GA_TRACKING_ID, {
    page_path: url,
  });
};
```

こちらは単にページビューのイベントを送信する関数。

なお、公式サンプルには任意の event 用の関数も定義されているが、使わない場合は割愛する。

### gtag.js の埋め込み

```ts
// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import { GA_TRACKING_ID } from "lib/gtag";

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang="ja">
        <Head>
          {GA_TRACKING_ID && (
            <>
              <script
                async
                src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
              />
              <script
                dangerouslySetInnerHTML={{
                  __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
        `,
                }}
              />
            </>
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

`_document.tsx`はすべてのページで適用されるテンプレートとなる。

参考 [https://nextjs.org/docs/advanced-features/custom-document](https://nextjs.org/docs/advanced-features/custom-document)

これを変更して全ページの head タグに gtag.js を埋め込んでいる。

### ページ遷移時のイベントの実装

```ts
// /src/pages/_app.tsx

import type { AppProps } from "next/app";
import { useRouter } from "next/router";
import { useEffect } from "react";
import * as gtag from "../../lib/gtag";

export default function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url: string) => {
      gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}
```

router の`routeChangeComplete`イベント発火時に先程定義した`pageview`関数を実行するようセットして完了。

---

参考

- [https://fwywd.com/tech/next-ga-pv](https://fwywd.com/tech/next-ga-pv)

- [https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)

- [https://semlabo.com/seo/blog/google_analytics4/](https://semlabo.com/seo/blog/google_analytics4/)


Next.js + TypeScriptでGoogle Analyticsを導入する


TypeScript を使った Jest において、あるオブジェクトのプライベートプロパティにアクセスしたいときは、クラス自体を`as any`でキャストしてしまうという無理やりな方法で対処する。（他にいい方法があれば教えて欲しい）

```ts
class Car {
  constructor(private name: string) {}
  showName() {
    console.log(this.name);
  }
}

test("The name is correct", () => {
  const car = new Car("GMC");
  expect((car as any).name).toBe("GMC");
});
```

ちなみに、読み取りではなく書き換えを行いたい場合は、同じく`as any`を使う方法でもよいが、`Object.defineProperty`を使う方法もある。

```ts
test("The name is correct", () => {
  const car = new Car("GMC");
  // または(car as any).name = "CHEVROLET";
  Object.defineProperty(car, "name", { value: "CHEVROLET" });
  expect((car as any).name).toBe("CHEVROLET");
});
```


TypeScript + Jestでプライベートプロパティの異常系テストを書く


TypeScriptにおいて、型チェックを内部で実行する関数について異常系のテストを書くとき、
単に違う型を渡すとコンパイルが通らないのでテストが実行できない。


例えばこんな非同期関数があるとして、

```ts
async function sampleFunc(arg: number) {
  return new Promise((resolve, reject) => {
    if (!arg || typeof arg !== 'string') {
      throw new Error('the type of arg must be string');
    }
    resolve('OK');
  })
}
```

こんなテストを書くと、

```ts
test('throw error if the type of arg is not string', async () => {;
  const dummyArg = 1;
  await expect(sampleFunc(dummyArg)).rejects.toThrow('the type of arg must be string');
});
```

当然こうなる。

```shell
error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
```

この対策としては、まず`unknown`型で定数を定義したうえで、`as`で関数の引数の型にキャストすればよい。


```ts
test('throw error if the type of arg is not string', async () => {;
  const dummyArg: unknown = 1;
  await expect(sampleFunc(dummyArg as string)).rejects.toThrow('the type of arg must be string');
});
```

これで晴れてテストを通すことができる。




TypeScript + Jestで型の違う引数の異常系テストを書く


最近作った某サイトで使用したデザインを、React コンポーネント化してみた。

[npm](https://www.npmjs.com/package/react-random-fancy-border-radius)

[GitHub](https://github.com/ibuibu/react-random-fancy-border-radius)

![output](https://user-images.githubusercontent.com/5201487/131143733-441d4343-fc5d-40ec-bb50-42442b72b977.gif)

こんな感じで、画像をレンダリング毎にランダムにフワッとした不思議な形で表示するもの。

作りとしては、以下のサイトの機構を基にして、CSS の border-radius の値をレンダリング毎にランダムにしただけの超カンタンな代物。

[https://github.com/9elements/fancy-border-radius](https://github.com/9elements/fancy-border-radius)

npm パッケージの公開の仕方がわかって勉強になった。


Reactコンポーネントをnpmパッケージ公開した

以下はさっと TS でコードを書きたいときにプロジェクトを一撃で作ってくれるシェルスクリプト。

プロジェクト名を引数に与えて実行すれば、index.html + main.js なザ・シンプルなプロジェクトを一撃で立ち上げてくれる。

実はこれ半年前ぐらいに作ったものだったのだが、最近ちょっとアップデートした。

```shell
#!/bin/bash

if [ $# != 1 ]; then
    echo 'The argument must be one (project name)'
    exit 1
fi

mkdir $1
cd $1
mkdir src

npm init -y
npm i -D webpack webpack-cli typescript ts-loader html-loader html-webpack-plugin

git init

num=`grep -n test package.json | sed -e 's/:.*//g'`
sed -i '' ${num}d package.json
sed -i '' "${num}i\\
\ \ \ \ \"watch\": \"webpack -w\"
" package.json
sed -i '' "${num}i\\
\ \ \ \ \"build\": \"webpack\",
" package.json

cat << EOS > tsconfig.json
{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
  }
}
EOS

cat << EOS > webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
      },
      {
        test: /\.html$/,
        loader: "html-loader"
      }
    ],
  },
  resolve: {
    extensions: [
      '.ts', '.js',
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ]
};
EOS

cat << EOS > .gitignore
node_modules
package-lock.json
dist
EOS

cat << EOS > ./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>
EOS

cat << EOS > ./src/main.ts
console.log('Hello world');
EOS

```

最近アップデートした箇所というのは、`html-loader`と`html-webpack-plugin`を使って、index.html を src フォルダ内で管理できるようにしたところ。

以前は dist フォルダに index.html を格納していた。main.js しか読まないからええやろ、と思っていたが、dist を GitHub にアップするのは非常にキモことに気がついたので、修正を図った。

一見、src/index.html は script タグで main.js を読んでないが大丈夫？って思うが、先のプラグインが勝手に script タグを以下のように追加してくれる。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
    <script defer src="main.js"></script>
  </head>
  <body></body>
</html>
```

恥ずかしながら`defer`なる呪文を知らなかったため、head タグ内じゃだめだろと思ってしまったが、調べてみて納得した。

![https://html.spec.whatwg.org/images/asyncdefer.svg](https://html.spec.whatwg.org/images/asyncdefer.svg)

[https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async](https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async)

文字通り HTML パースを待ってから JS を実行してくれるようだ。これがナウい script タグの書き方なのか。。

TypeScript + webpackのプロジェクトを一撃でセットアップする


毎日のように DeepL を使っているが、ブラウザでお気に入りをクリックしてペーストして・・・という一連の作業が大変面倒くさいことに気づいた。

DeepL API を使って、CLI でできるようにした。

## やり方

まず[DeepL API のページ](https://www.deepl.com/pro?cta=menu-login-signup)へ行き、DeepL Pro に無料登録する。

そしてアカウントページへ行き、API キーをゲットする。

シェルスクリプトでこんな感じのコードを書いて出来上がり。

```shell
#!/bin/bash

if [ $# != 1 ]; then
  echo "Let's specify one target language (en or ja) as an argument."
  exit 1
fi
if [ "${1}" != "en" ] && [ "${1}" != "ja" ]; then
  echo "Let's specify one target language (en or ja) as an argument."
  exit 1
fi

while read line; do
  if [ "${text}" = "" ]; then
    text="${line}"
  else
  text="${text}
$line"
  fi

  if [ "$line" == "" ]; then
    echo "Now translating..."
    echo ""
    break
  fi
done

apikey=$(cat ~/credentials/deepl-apikey)

result=$(curl -s https://api-free.deepl.com/v2/translate \
-d "auth_key=${apikey}" \
-d "text=${text}" \
-d "target_lang=${1}" \
| jq -r '.translations[].text')

echo ${result}
echo ${result} | pbcopy
```

実行後に Enter ２回押せば、API から翻訳後文章を取得して標準出力する。

複数行の文章を貼り付けられるように、改行が２連続で来たら API 問い合わせを実行する仕組みにした。

ちなみに`pbcopy`は Mac のクリップボードにコピーするコマンド。


DeepL APIで翻訳CLIを作った


![Ergo Dash](https://i.imgur.com/wQTMbPw.jpg)

2020年の6月、遊舎工房さんで自作キーボード入門セットなるものを購入した。

モデルはErgo Dash。お店のお兄さんに優しく教えてもらいながら、ダイオードを丸一日かけて100個以上ハンダ付けしたのはいい思い出。

画像は組み立て直後のキーマップ。現在は以下の通り。

![キーマップ](https://i.imgur.com/j1NaGLK.png)

macなので、Karabiner-Elementsで日本語切り替えを変換/無変換で実施できるようにしている。


そもそも購入のきっかけは肩凝りだった。

5月にプログラマデビューして毎日キーボードと7時間近く触れ合う生活に突入した途端、33歳の肩甲骨はゴリゴリと音を立てて痛み出した。

どうも肩凝り解消には分離キーボードが効くというネットの噂を聞き、調べてみると当時分離キーボードといえば既製品はほとんど無く自作が主流だった。

金額もなかなかのものだったし、ハンダ付けもあまりやったこと無いので自身がなかったが、意を決して購入に踏み切った。

どうせ完全リモートワーク生活なので、音より押す心地を優先し、キースイッチはクリッキー軸にした。

最初の１ヶ月はかなりミスタイプだらけで辛かったが、１年経ってみるとさすがに慣れた。

肩凝りもだいぶ良くなった。

愛着もある。とても良い買い物だった。



自作キーボードを使い始めて1年（と2ヶ月）経った


Tailwind CSS で、javascript で markdown を HTML 化する際、HTML が未確定なため CSS を書き込めなくて困った。

以下のように.article クラスを作り、その子要素をすべて定義したうえで、読み込む div 要素に適用すれば良いことがわかった。

```css
.article p {
  @apply text-sm;
}
.article h1 {
  @apply text-xl;
}
```

```javascript
<div
  className="${styles.article}"
  dangerouslySetInnerHTML={{ __html: content }}
/>
```

ただ、CSS に.article をすべて記載しないといけないため、非常に冗長だ。SASS のようにネストしたい。

調べると、どうも[PostCSS-Nested](https://github.com/postcss/postcss-nested)を導入すれば、ネスト記法が可能となることがわかった。

ちなみに、姉妹プラグインで[PostCSS-Nesting](https://github.com/csstools/postcss-nesting)なるものもあり、こちらは[本家 CSS Nesting Module（草案）](https://triple-underscore.github.io/css-nesting-ja.html)の記法に準じている。

今回は、簡潔に SASS っぽく書ける PostCSS-Nested を選んだ。

### 導入方法

1. インストールする（PostCSS がインストールされている前提）

```shell
npm i -D postcss-nested
```

2. `postcss.config.js`に以下のように plugin を追加する

```javascript
//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    "postcss-nested": {},
  },
};
```

これだけで OK。

### 使い方

以下のようにネストができる。

```css
.article {
  h1,
  h2,
  h3,
  h4 {
    font-family: serif;
    font-weight: bold;
  }
  h1 {
    @apply text-4xl;
  }
  h2 {
    @apply text-3xl;
  }
}
```


PostCSS-Nestedの導入


本ブログを作成する際に実施した内容。



1. 以下をインストール

- [prismJS](https://prismjs.com/)
- prismJS の型定義ファイル
- [babel-plugin-prismjs](https://www.npmjs.com/package/babel-plugin-prismjs)

```shell
npm i prismjs
npm i -D @types/prismjs babel-plugin-prismjs
```

2. `.babelrc.js`を作成。ここで必要な language を追加したり、テーマを変更できる。

```javascript
module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "prismjs",
      {
        languages: ["javascript", "css", "html", "bash"],
        plugins: ["line-numbers", "show-language"],
        theme: "okaidia",
        css: true,
      },
    ],
  ],
};
```

3. 実装。useEffectを使って、レンダリング後にハイライトを適用。

```javascript
import Prism from "prismjs";

const Component = ({ post }) => {
  useEffect(() => {
    Prism.highlightAll();
  });
  return (
    <div
      dangerouslySetInnerHTML={{ __html: post.content }}
    />
  );
};
```

参考

[https://frendly.dev/posts/using-prism-js-in-next-js](https://frendly.dev/posts/using-prism-js-in-next-js)

Next.jsでmarkdownのコードブロックをPrismJSでシンタックスハイライトする


例えば、こんなふうに固定値を指定することができる。

```html
<div class="w-[762px]"></div>
```

数値のところに単位（px）を付けて、`[]`で括る。

なお、使用する際には、Tailwind CSS を Just in time（jit） モードにする必要がある。

jit モードにするには、`tailwind.config.js`に１行追加する。

```javascript
// tailwind.config.js
module.exports = {
  mode: "jit",
};
```

参考

[https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support](https://tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support)


Tailwind CSSでwidth等に固定値を使う方法


なんとなく気分でブログを新しくした。Next.js製。

[前のブログ](https://awesome-nightingale-e9e443.netlify.app)は気分が乗らず更新しなくなってしまった。たぶん原因は３つ。

- ヘッドレスCMSのContentful経由で記事を取得する作りにしたのだが、Contentfulの書き味が悪く、なかなか書く気になれなかった。
- サムネイル画像を記事ごとに用意するのがダルかった。
- Nuxt.jsで作ったが、最近はVueに触れてないせいで、作りを変えようにもVueを書く気になれなかった。

そこで、夏休みの間のJavaScriptのリハビリがてら、ブログを新調した。今度のブログに求める要素は以下の通り。

- SSRではなくSSG。ローカルで好きなエディタで記事を書きたい。
- 記事の画像なしも寂しいので、Zenn.devのパクリで絵文字を添えたい。
- 最近はReactしか書かないので、Reactのフレームワークを使いたい。

ReactのSSGフレームワークといえば、Gatsby.jsが候補の筆頭に挙がる。実は最近仕事と趣味でGatsby.jsを使ったブログを作ってみたことはあった。が、いくつか不満に感じる部分があった。

- ビルドが遅い
- ブラックボックスな部分が多い
- プラグインの挙動に悩まされる

Next.jsで書きたいなあと思っていたときに、すてきなブログに出会った。

[https://miyaoka.dev/](https://miyaoka.dev/)

コードを見て、すごく洗練されていてシンプルで、学びが多そうな予感がした。

こちらを参考にさせてもらって、getStaticProps等のNext.jsのSSG用関数の使い方を勉強しながら、5日ぐらいかかって完成した。

まだまだ、基礎的な部分しか出来上がっていないが、これから少しずつ育てていきたい。

コードはこちら。

[https://github.com/ibuibu/ibulog](https://github.com/ibuibu/ibulog)


