はてなブックマーク

2026年2月25日、GitHub Copilot CLIがついにGAされました。 github.blog そこで今回はまだGitHub Copilot CLIをまだ見てない/触ってない という人向けに、ざっくりと使い勝手やベストプラクティスを3分で知ってもらえるような記事を書いてみました。 検証のコンテキスト 突然ですが、openapi-zod-clientというライブラリがあります。 github.com openapi-zod-clientはOpneAPI Specに定義された内容をZod Schemaへ変換してくれるライブラリです。一方でZodはTypeScript界隈では言わずと知れた型Schemaライブラリです。parseにより、データがSchemaに定義した型や形式に一致するかを検証することができます。 ところで、Zodは2025年4月のリリースでそれまでのV3からV4へと大

このエントリはDevin Meetup Osaka #1での発表内容です。登壇資料をブログとして読めるように再構成して公開しています。 はじめに コーディングエージェントの普及によって、PRの数は増加し、1つひとつのサイズも大きくなっています。Devinの開発元のCognitionは公式ブログで以下のように述べています。 cognition.ai code review—not code generation—is now the bottleneck to shipping great products. これはAIがコードを書く時代において、レビュワーの理解が追いつかなくなっているという問題です。PRが小さければ読みやすいですが、大きくなると形式的な承認(いわゆる「Lazy LGTM」)になりがちです。 上記のBlog: "Devin Review: AI to Stop Slop"

方法 以下のスクリプトを ご自身のブログの詳細設定 -> 要素にメタデータを追加 に貼り付ける。 <script type="module" src="https://cdn.jsdelivr.net/gh/ysknsid25/beautiful-mermaid@main/dist/beautiful-mermaid.browser.min.js"></script> するとこういう感じでスタイリッシュなMermaid図を表示することができます。 ただし普通に表示すると幅や高さが大きいと親要素を突き抜けて表示されてしまうため、たとえば以下のようにCSSでレイアウトを指定する必要があります。 .mermaid-rendered { max-width: 100%; overflow-x: auto; svg { max-width: 100%; height: auto; } } やることは

このエントリはTSKaigi Mashup Kansai 生成AIでTSを扱うときに考えたい設計&ガードレールでの発表内容です。登壇資料をブログとして読めるように再構成して公開しています。 はじめに 去年あたりは「ジュニアエンジニアレベルと思ってね」と公式各所から言われていたコーディングエージェントも、もはやそのレベルを超えてきました。 今や副操縦席に座っているのは人間の側です。しかし、AIが機長だからといって自由に飛行機を操縦してよいかというとそうではありません。決められた航路や離着陸の手順を守る必要があり、そこを外れないガードレールが必要です。 またこれはAIに限った話でもありません。AIであれ人間であれ、「開発者」はもれなく全員が決められたルールに違反しないようコードを書くべきです。またレビュワーも完璧ではありません。問題に気づかないまま変更を承認してしまうこともあるでしょう。 なの

最近、Next.jsがどのようにCSRF対策をしているのかを考える機会がありました。 そんななかで色々と学んだことを今回は書きます。 CSRFとは 本題に入っていく前に、いま一度CSRFについて改めて復習しておきましょう。CSRF(Cross-Site Request Forgery)とは、ユーザーが意図しないリクエストを攻撃者が勝手に送信させる攻撃です。以下に攻撃の一連の流れを可視化しています。 sequenceDiagram participant User as ユーザー participant Bank as 銀行サイト (bank.example) participant Evil as 悪意のあるサイト (evil.example) User->>Bank: ログイン（セッションCookieを取得） User->>Evil: 悪意のあるページを開く Evil->>User: 自

Webブラウザで数KBのjsONを取得するなら標準の fetch で十分ですが、例えばブラウザ上のWeb Viewerで画像を数十枚表示するなどのユースケースに標準のfetchで対応しようとする場合以下のような問題がつきまとうことが多いでしょう。 再開不能: ネットワーク瞬断やリロードでダウンロード進捗が0に戻る 整合性不明: ダウンロードが完了しない限りファイルが破損なくダウンロードできているかわからない メモリ逼迫: 全データをメモリに展開する必要があり、クラッシュのリスクがある これらの問題を解決するためのライブラリとして、今回は VerifyFetch を使ってみようと思います。 github.com VerifyFetchの特徴 先述の3つの問題への対処として、VerifyFetchは3つの機能を提供しています。 1. 分割ダウンロードと都度検証 VerifyFetchでは、あら

先週はcronからsystemd timerへ移行する記事が話題になっていましたね。 zenn.dev これに乗っかる形で(？)、今回は依存関係0で超軽量なjs/TS製スケジューラー Croner を紹介してみようと思う。 Cronerとは github.com 最大の特徴はゼロ依存であること。実行時に余計なパッケージを一切含まず、バンドルサイズが非常に小さいのが魅力だ*1。 またjsRにも公開されていて、Bun、ブラウザでの動作も保証してくれているのが嬉しい。ブラウザでの利用用途としては、フロントエンドで定期的なポーリング処理を行いたい場合などが考えられる。 さっそくサンプルを動かしてみる import { Cron } from "croner"; console.log("Croner demo started. Waiting for the next execution...")

Vibiumは、ブラウザ操作自動化ツール・Seleniumの作者であるJason Huggins氏の新作だ。 github.com READMEによると、 Vibium is browser automation infrastructure built for AI agents. A single binary handles browser lifecycle, WebDriver BiDi protocol, and exposes an MCP server — so Claude Code (or any MCP client) can drive a browser with zero setup. Works great for AI agents, test automation, and anything else that needs a browser. と、単一バ

Devinの新たな機能として Devin Reviewというレビュー機能がリリースされた。 cognition.ai 上記のブログを読んでみると、Public リポジトリのPRの場合であれば、URLをhttps://github.com/org/repo/pull/123 からhttps://devinreview.com/org/repo/pull/123のように書き換えるだけで利用できるらしい。 というわけでちょうどOSSに出していたPRを使って色々と試してみたことをメモする。 いろいろ試してみる レビュー開始 URLを書き換えてDevin Reviewへ飛んでいく。基本的にファーストビューではDevin Reviewの情報が表示される。タブを切り替えることでGitHub上でのコメントなどを確認することも可能。 1,2分待つとレビューが終わり、いろいろと確認できるようになる。 PRの概

タイトルの通り。ライトテーマとダークテーマの2種類をはてなテーマストアに公開した。 blog.hatena.ne.jp blog.hatena.ne.jp テーマストアにはデモページを掲載している。が、このブログのスタイル自体が「Git Style」のライトテーマなので、このブログを見るのが一番いいと思う。ちなみにライトもダークもレスポンシブに対応している。 元ネタ git-scm.com Gitの公式サイト。フォントと背景色、フォントカラーなどを参考にしている。ページのレイアウト自体など左記以外は、はてなさんが公開してくださっているboilerplateからほぼ変えていない。 モチベーション 元々は公式テーマのSmoothを使っていた。Smoothは洗練されていてすごくいいテーマだと思うんだけど、細かいところで自分好みに変えたいということと、Gitの公式サイトがかっこいいのでそれに寄せた

この記事はHono Advent Calendar 2025 最終日の記事です。今回は自分が作ったeslint-pluginについて書く。とりあえず作ったものを見て！！そしてLGTMならStarください！！！ github.com きっかけ Honoは非常に柔軟で軽量なWebフレームワークだけど、自由度が高いゆえにチーム開発や規模が大きくなった際にコードの書き方が統一されにくいという課題に直面することがある。特にAIにコーディングをさせているとこの傾向は顕著だ。これは自分がHono Conference 2025での発表内容で登場したプロジェクトを進めているときの経験談からきている*1。 そこで思いついたのがESLintでガードレールを設けること。 そして自作する前にさらっと調べてみたところ、まだ誰かが作って世界に公開している様子はなさげ。ってことで「お、自分で作るか」となった。 インスト

最近、いくつかのライブラリをnpmに公開した。公開したものは以下。是非使ってみてissueなりPRなり送ってほしい。 github.com github.com ところで、ローカルからnpmにライブラリを公開する場合、基本的に以下のコマンドを叩けば良い。 npm login npm publish これで少なくともライブラリは公開することができる。けど、npmに限らずどこかしらのレジストリに作ったライブラリを公開する場合、バージョン管理がとても重要になる。今回初めてnpmにライブラリを公開してみて、npm versionを使いこなせた方がいいことがわかった。 そんなわけで、このエントリではnpm versionの便利な機能をつらつらと書いていく。 Gitタグを自動生成してくれる npm version はバージョン変更のコミットと、そのバージョン番号の Git タグ（例: v0.1.0）を

Commander.jsはjs/TS向けのCLI作成キットだ。 github.com こういう感じでCLIに必要な要素をガリガリと定義していける。 const { program } = require('commander'); program .option('--first') .option('-s, --separator <char>') .argument('<string>'); program.parse(); const options = program.opts(); const limit = options.first ? 1 : undefined; console.log(program.args[0].split(options.separator, limit)); なんでCommander.jsに目がいったのか？ 最近Hono CLIをずっと見ているか

TSKaigi Hokurikuの登壇資料です 自己紹介 github.com npx deno run jsr:@ysknsid25/whois 補足 以下では Unjs製ライブラリ citty 入門 として、モダンで型安全なCLIを最速でつくるチュートリアルを提供する。 cittyとは unjs.io Nitroとかh3とかいろいろいい感じのライブラリを作ってるUnjsのライブラリの一つ。いい感じにCLIツールを作れる。 準備 npm install citty 公式のサンプルソースを拝借。 import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI Ap

Kotlin Fest 2025の登壇資料です 以下補足 はんずおんExposed ExposedはKotlin向けに作られたJetBrains社製のORM。Ktor×Exposedでのバックエンドアプリケーションの導入事例はほとんど見られず、Exposedに関するノウハウがあまり出回っていない印象がある。 事実、プロシージャやらファンクションやらcaseやら複雑なサブクエリやらを使ったSQLをExposedに移植しようとした際に非常に困った。なぜなら、この辺のノウハウは当時のExposed Wikiにはしっかり書かれておらず、ソースコードを解析するしかなかったので。 とまあそんな悲しい歴史を繰り返さないために執筆した本がこちら。 techbookfest.org iolite github.com 日付、メールアドレス、IPアドレスなど仕様が必ず決まっていて、かつ世界のいろんな場所で繰り

転職先でGoをやるって聞いてたので有給消化中に『初めてのGo言語』を読んでいた。 初めてのGo言語 第2版 ―他言語プログラマーのためのイディオマティックGo実践ガイド 作者:Jon BodnerオライリージャパンAmazon けどそれよりも先にA Tour of Goをやっとくのが正解だった*1。書籍自体はGo言語の仕様について詳しく書かれていてめっちゃいい本なんだけど、100%僕の頭と書籍の使い方が悪かった。 go-tour-jp.appspot.com 「Goの基本完全に理解した」状態で『初めてのGo言語』はもう一回読むことにする。それはそれでより理解が深まりそう。 A Tour of Go についての簡単な説明 左にチュートリアル、右にコーディングエディタがあるUIになっている。トピックスごとにベースのコードを用意してくれていて、ガチャガチャ手元で書き換えて、フォーマットして、実行

先日のAtCoder Beginner Contest 424でようやく入緑することができた。足掛け3年。長い道のりだった。言語はPython*1。 とりあえず祝ってほしいので先に干し芋を貼っておく。記事執筆時点であと2人で読者が100人になるので、お祝いに読者になってくれるとめちゃくちゃ嬉しい。 www.amazon.jp アルゴリズム部門での緑色以上の人数割合は レーティングのしくみ - AtCoderInfo によると2023 年時点で 7.86 % 程度。全体だと15.48%に入るらしい。 色ごとの絶対的な実力はchokudaiさんのエントリによるとこんな感じ。 印象としては、 学生ならかなり優秀。 エンジニアとしてもある程度の安心感がある。論理的に複雑な処理の実装に対応できない、なんてことはなさそう、くらいには思える。データ量が多い現場など、計算量の多い処理が要求される現場でなけ

ここでいう壁打ちとはテニスやバレーボールなどにおける練習方法のことではなく、思考整理の文脈における壁打ちである。 自分がこれから話そうとしている「壁打ちとは」について簡単に整理しておくと、 問題解決において、解決方法のとっかかりを得るためのコミュニケーション 相手に答えや解決策を求めるのではなく自分の考えやアイデア、思ってることなどをひたすら思いつくままに話す 相手には適度に相槌を打ってもらったり、意見などを出してもらう これを繰り返すうちに自分自身で気づきや整理が進む 感じのことを指す。 今回は自分が壁打ちをする側として気をつけていることなどを書く*1。 とにかくたくさん打つ。そのためにボールを準備する 壁打ちでは、とにかくたくさんボールを打つことが大事だと思っている。 そのためには簡単な準備段階をしておくのが良い。その時点で自分が思っていることや考えていることを5~10分と時間を決めて

最近pnpmのドキュメントを眺めていたんだけど、そこでよく知らない依存関係の種類が出てきた。いまさら人に聞くのは恥ずかしいと思ったので、理解したことをまとめてアウトプットしておく。 そもそも依存関係とは？ package-lock.jsonとは？ といった話は理解できている前提で書く。 dependencies / devDependencies 最も基本となる依存関係。npm installするとdependenciesに書かれたものは全てインストールされることになる。 なので、本番環境で使うものしかここには入れてはいけない。「ではそれ以外のものはどこにいれるのか？」となるが、基本的にはdevDependenciesとなる。 この話自体はいろんな記事やカンファレンスのトークで擦られ続けているので、もうお腹いっぱい感がある。 一応書くと、devDependenciesにインストールするには

コミュニケーションで1番重要なことはなんだろう？ 「自分が何を伝えたか？」は大前提として「相手に何が伝わったか？」ではないだろうか。なので、「前にも言ったけど」を言ってしまうとき、往々にしてこの原則が守られていない。 かのアイルランドの劇作家、バーナード・ショーは「コミュニケーションにおける最大の問題は、それが達成されたという幻想である」という言葉を残している。 「前にも言ったけど」という枕詞は相手にストレスをかけるだけだ。本質であるコミュニケーションの改善には寄与しない。むしろ悪化させるだけだ。日常的に発していることに心当たりがあるのなら、そのスタンスを見直す必要がある。 そのために心がけていることを話す。 自分の心の持ち方を変える 「前にも言ったけど」と言いたくなるのは、相手が覚えていないことへの苛立ちや、自分の説明コストが重なっていると感じているからだ。この感情とうまく付き合うために

2025年8月26日、JavaScriptエコシステムで最も広く使用されているビルドツールの一つであるNxにおいて、複数の悪意のあるバージョンが攻撃者によって公開されてしまったことが話題になった。 socket.dev github.com 攻撃の概要 簡単に説明すると、 攻撃者が悪意のあるコードを含むNxライブラリを作成 Nx公式のnpmトークンを盗む 攻撃者がNx公式になり代わり、あたかも公式リリースかのように悪意のあるコードを含む最新バージョンを公開 利用者が最新版をダウンロードすることで、悪意のあるコードが実行される という感じだ。攻撃の影響や詳しい流れは本記事の守備範囲外のため、NotebookLMに簡潔にまとめてもらった内容を記載する。 1. GitHub Actionsワークフローの脆弱性悪用 攻撃者は pull_request_target トリガーを持つワークフローのBa

最近pnpmのドキュメントを眺めていたんだけど、そこでよく知らない依存関係の種類が出てきた。なので、理解したことをまとめてアウトプットしておく。 そもそも依存関係とは？ package-lock.jsonとは？ といった話は理解できている前提で書く。 dependencies 最も基本となる依存関係。npm installするとdependenciesに書かれたものは全てインストールされることになる。 なので、本番環境で使うものしかここには入れてはいけない。 devDependencies 「dependenciesには本番環境で使うものしかいれてはいけない」と上で話した。「ではそれ以外のものはどこにいれるのか？」となるが、その答えがここ。 繰り返しだがこの話自体はいろんな記事やカンファレンスのトークで擦られ続けているので、もうお腹いっぱい感がある。 一応書くと、devDependenci

cittyを使ってみたところめっちゃ良かったのでメモがてらエントリを書く。 citty unjs.io Nitroとかh3とかいろいろいい感じのライブラリを作ってるUnjsのライブラリの一つ。いい感じにCLIツールを作れる。 準備 npm install citty 公式のサンプルソースを拝借。 import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI App", }, args: { name: { type: "positional", description: "Your name", required: true, }, friendly: { ty