はてなブックマーク

バイブコーディングの効率化でGit worktreeが話題になっていたけど、コマンドの実行や管理が大変そうだったので、まずは効率化するツールを作りたいと思いました。いつもならシェルスクリプトとかエイリアスで済ませるところですが、バイブコーディングでOSSとして作ってみたら面白そうと思い、この1週間集中して開発しました。 結果、Git worktreeの管理を効率化するCLIツールをリリースすることができました。途中からはドッグフーディングで自らの生産性も向上させて、Claude Codeを20万円分以上使いましたがCLIツールとしてかなりクオリティの高いものを短期間で作ることができました。 作ったツール PhantomというCLIツールを作りました。Git worktreeを簡単に管理できるツールで、docker execみたいにワークツリーの中でコマンドを実行する機能があったり、tmux

Claude Codeを使ってリポジトリ内を探索してWikiを構築してもらったところ、高精度で実用性の高いものができました。再現手順を共有します。 実例 このようなWikiが完成しました。 DeepWikiが出力したものと比較しても遜色ない品質であると思います。 Wikiのセットアップ GitHubリポジトリの設定画面からWikiを有効にし、空のHomeページを作成してください。 詳細な説明は省きます。 Git submoduleとしてクローン GitHub WikiはGitリポジトリとして扱えるため、以下のコマンドでsubmoduleとしてcloneします。 クローン先はどこでもいいですが、今回はリポジトリ直下のwikiディレクトリにします。 手順書(wiki-manual.md)を作成 Wikiを作る際のルールをまとめた手順書を用意します。自分の好みに合わせた手順を用意すればいいですが

as プロパティに任意の要素を渡すことで、コンポーネントをその要素で描画することができる仕組みを用意しました。仕組みの実態はいい感じの型定義です。 <Button onClick={handleClick}>ボタン</Button> <Button as="a" href="/foo/bar">リンクボタン</Button> Button コンポーネントは普段は button 要素で描画されますが、 as="a" を渡した場合は a 要素で描画されます。また、コンポーネントの props の型定義がその要素に最適化され、 href を渡すことができるようになります。 要素以外にコンポーネントも渡すことができ、 next/link 等の独自の振る舞いが加えられたコンポーネントを使うこともできます。props も next/link に最適化されます。 サンプルプロジェクト as で拡張した様

Next.js を使うプロジェクトでの開発をいくつか経験した結果、環境変数の取り扱いについての知見が溜まりましたので共有します! サンプルリポジトリへのリンクを後半に記載しています。実装ベースで確認したい方は後半へどうぞ 💁‍♂️ Next.js 標準の環境変数機能に不足していること Next.js には標準で環境変数を管理する機能があります。(以後 .env と呼びます。) .env の方法は提供されている機能が最小限となっており、次の 3 つのタイミングに合わせてしか環境を切り替えることができません。 ファイル名 読み込まれるタイミング

もう 1 年半ほど前になりますが、 iPad OS 13.4 からマウスなどのポインティングデバイスがサポートされ、接続した時にポインターが表示されるようになりました。 このポインターは要素に合わせて形状を変えるようになっており、ボタンに吸い付いたりテキストカーソルの形に変形したりします 参考動画(51 秒辺りから) 操作していてとても気持ち良いため、似たようなものを Web ページ向けに JavaScript で実装してみました。 この記事では上記ツイートの動画と同じ動作をするポインターの実装手順を紹介します。 サンプルプロジェクト 今回紹介する実装の完成形を Codepen で公開しています。 実装 ポインターを実装します。 要素の作成・スタイルの適用まで JavaScript で行います。 マウスポインターを作る まず、シンプルなマウスポインターを作成します。 ポインターとなる di

プライベートでお手伝いをしていた Electron プロジェクトで OS コマンドインジェクションの脆弱性を発見し、指摘・修正を行いました。 Electron(Node.js) のアプリケーションで別言語で作成したモジュールを動かす時には、実行ファイル形式にビルドして child_process から呼び出すことが多いと思います。 この記事では child_process.{exec|execSync} を使用した際の落とし穴について、Electron での事例を紹介しながら解説します。 要約 exec/execSync はシェルで実行されるため、外部要因に影響するコマンドを実行する場合は必ずサニタイズしなければならない クロスプラットフォームでかつユーザーの動作環境に依存する Electron の場合は使用されるシェルが変わるため、サニタイズは難しい execFile/execFileS

組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。 継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。 組み込み案件自体が初めてでしたのでその話も入っています。 約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※(注記)Electron の基本的な説明は割愛します。 システムについて 一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。 ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。 筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。 機能 主な機能として 来店受付・整理券発行 予約チェックイン チェックアウト