WASM x Web Worker x File System Access API でローカルディレクトリを文字列検索するWebツールを作った
ここ数日、File System Access API で何かできないかと思いを巡らしていた。
ふと grep コマンドについて思い至った。エンジニアは grep とか find とか、あとは VSCode なり Cursor なりでディレクトリ内の全文検索というのは日常的に行っているわけだが、非エンジニアの人にとってはそうではないのではないかと考えた。
まずターミナルがハードル高いし、プログラミングしないのに IDE なんかインストールしたくないだろう。
そこで、実際どのくらい需要あるかは全く不明だが、多分技術的にはできるだろうということで作ってみることにした。
STEP 1: パターンマッチ (WASM)
パターンマッチの処理は将来的に CLI 版とか Web 版とかを並行で動かしたくなったときのために、WASM（というか Rust）で作ることにした。今回の用途ではそんなに色々なインターフェース向けにビルドすることなど必要ないわけだが（CLIにはそれこそgrepとかあるし）、将来的に何かもっと面白いものを作るときにはコアロジックは最初からRustで書いておけば良かったな、とか思うケースが増えてきそうなので、今のうちから筋トレしておこうという意図でやってみた。
もちろん大部分は Codex に考えさせて実装させたわけだが、大まかな基本設計的なものは自分で考えた。
Rust の Workspace とか wasm-pack とかは今後も使っていきそうな予感がした。
STEP 2: Web に組み込む
STEP 1 で作った WASM バイナリを Web 版のコードベースに組み込んで、動かしてみた。結構うまくいく。Codex が気を利かせて、 ファイル内で複数マッチしている場合はそれも列挙してくれたり、検索対象のディレクトリの容量とかも数えてくれるようになってる。あとは 2MB 以上のバイナリはスキップするなどだ。
しかし、いろいろ試していると問題が起こった。実際の React Router プロジェクトのフォルダを検索してみたら、ブラウザが固まった。多分ファイル数が多すぎてメインスレッドのCPU負荷が100%になってしまってる。これはまずいと思い工夫することにした。
STEP 3: Web Worker でバックグラウンド実行
Web Worker を使えばフロントエンドの重い処理をバックグラウンドで実行できると聞いたことがあったので試してみた。もちろん Codex に頼んだわけだが、するとメインスレッドが固まることは無くなった。顎でAIを使っただけだが、この結果には感動した。
業務や2C本番環境にデプロイされるフロントエンドは、90%以上の確率でフロントエンドで重い処理をすることなどないと思う。これまで仕事で書いてきたアプリでは、ロジックは API 経由でバックエンドにディスパッチするか、ビルド時に実行して結果だけバンドルすることがほとんどだったので Web Worker を使う必要性は特になかった。
しかし Web Worker の威力は素晴らしい。めっちゃデカいディレクトリを検索したら Out of Memory のエラーがでたのだが、その場合でもUIが固まらない。Out of Memory にならないようにする対応は今のところやっていない。まあ、そのくらいのクオリティということで察してほしい。
作ったもの
感想
もしかしたらデータフェッチ系のライブラリは内部で Web Worker を使っているのかも知れないが、これまで意識することはなかった。今後は意識的に Web Worker を使っていきたい。というか、Web Worker を使いたくなるくらいのワークロードがある Web アプリでないと、個人開発の Web アプリが他のアプリに勝てるわけがない。
IT企業もソリューションもどんどん増えていく世の中で、しかも AI を使って素人でもアプリが作れる世の中で、個人開発者が何らかの存在感を示せる領域は、分散型のアーキテクチャしかないのではと思っている。なぜなら中央集権型のシステムは金になるからだ。システムそのものが役に立たなくても、情報さえあれば企業は金を稼げる。だから企業はみんなそっちにいく。めちゃめちゃ不便なアプリであろうと特典や割引をつけてゴリ押しでインストールさせて、ユーザーの情報を集める。サーバーに情報をすべて集めようとする。必然的に、サーバーに情報を集めないアーキテクチャに関しては企業は手薄になる。だから個人開発者が勝てるのは分散型でクライアントに処理をオフロードするアプリ領域に集中してくると思う。
自分にとって、 File System Access API は突破口になるかも知れない API の一つだ。。Chromium 限定だけど。