はてなブックマーク

このエントリはGitHub User Group Meetup #2 - August 2026の登壇資料です。 はじめに GitHub User Groupでは月に一度、GitHubの最新機能(Copilot, Actionsなど)のキャッチアップを行うYoutube Liveを配信しています。ラジオ感覚でご参加いただけます。 次回は2026年9月7日です。よければ是非チャンネル登録のうえ、配信通知をお受け取りください。 www.youtube.com Issue fields are now generally available github.blog issueフィールドがGAとなりました。issueフィールドを使用すると、課題に構造化された型付きメタデータを追加できるため、優先度、作業量、日付、カスタム値を組織全体で一貫して簡単に追跡できます。ベロシティを計測するのが一気に楽にな

このエントリは『TSKaigi Mashup Kansai #2 TSKaigi 2026を振り返ろう！』での登壇資料です。 当日の資料はこちらです。 slide.inorinrinrin.com このエントリは『TSKaigi Mashup Kansai #2 TSKaigi 2026を振り返ろう！』でお話しした内容を文字起こししているものです。 はじめに いつも通りのある日のこと mizdraさんは突然立ち上がり言った 「TSKaigi 2026 の発表資料の体感半数以上が AI 生成感ある資料だった」*1 www.mizdra.net 記事を読まれていない方向けに超簡潔に要約すると、 AIで資料を作ること自体は時短や心理的ハードルの低下に繋がるため否定しないものの、AIが出したものを自分なりに噛み砕かず、聞き手を向いていない という問題提起をされていたエントリです。 mizdraさん

Valibot・Formischの作者であるFabianからお声がけいただき、Open Circleにジョインしました*1。これからValibot・Formischのコア開発メンバー・メンテナーとして活動していくことになります。 先月のTSKaigi 2026 事後勉強会の発表で「もしかすると今僕が日本で1番Valibotに詳しいかもしれん」とほざいていたんですが、まさかこんなことになるとは思いませんでした。 コアチームが活動しているオンライン上の場所にはもう呼んでいただいており、チームメンバーには挨拶を済ませています。そしてそこで、しばらく先までのValibot と Formischのロードマップが共有されました。わくわくするようなアイデアがたくさんあります。みなさん楽しみにしていてください。 一方でValibotやFormischには新機能を作ること以外の課題もまた、たくさんあります。

その名をびっくりスライドといいます。 github.com www.youtube.com はてなブログなどの記事本文だけを抜き出し、モニター全体の全画面でプレゼンテーション表示します。スタイルやフォントなどは、記事本文のソレをそのまま投影します。 びっくりスライド で解決したいこと はてなブログの記事を、そのままプレゼンテーションの場で資料として使いたいと思ったことはありませんか？ 例えば世の中には、mizchiさんのような考え方の人たちがいます。 根本的にスライドという形式をそろそろ見直してほしい。 markdown の縦書きのテキストを上から下まで読むだけでいいだろとずっと思ってる。 スライド発表用にチューニングされたドキュメントは情報量が足りなくて、アクセシビリティも悪い— mizchi (@mizchi) 2026年5月28日 そして僕はtadsanと同じような考え方で、プレゼン

このエントリはGitHub User Group Kwansai Monthly Meetup #1 - July 2026の登壇資料です。 はじめに GitHub User Group Kwansaiでは月に一度、GitHubの最新機能(Copilot, Actionsなど)のキャッチアップを主目的としたMeetupを開催しています。"Kwansai"と冠していますがオンラインメインですので、全国どこからでも参加可能です。 次回は2026年8月3日です。よければ是非ご参加ください。Youtube Live形式なので、ラジオ感覚で参加いただけます！ gug-kwansai.connpass.com Updates to GitHub Copilot billing and plans github.blog 6月1日より、すべてのCopilotプランがGitHub AIクレジットの消費量に

GitHub After Dark Osakaでの登壇資料です。オリジナルの資料はこちらです。 このエントリはGitHub After Dark Osakaでお話しした内容を文字起こししているものです。 AIレビューと人間のレビューが同時に走る問題 CodeRabbit や GitHub Copilot などの AI コードレビューツールを導入しているチームでは、こんな状況に遭遇したことはないでしょうか。 PR をオープンした瞬間、AI レビューと人間へのレビュー依頼が同時に走ってしまう まずAIによる簡単 / 基本的な内容について指摘を入れたうえで、人間にレビューリクエストを送るようにしたい この場合の理想的なフローを以下のように考えています。 PR をオープンする AI が自動でレビューを開始する AI のコメントを全部対応してスレッドを resolve する その後はじめて、人間のレ

TSKaigi 2026事後勉強会の登壇資料です。オリジナルの資料はこちらです。 このエントリはTSKaigi 2026事後勉強会でお話しした内容を文字起こししているものです。 まえおき Valibot とは ValibotはTypeScript向けのスキーマライブラリです。スキーマを定義することで、未知のデータを型安全にバリデーションできます。同様のライブラリにはZodやArkTypeなどがあります。 github.com TSKaigi 2026での発表 Road to contributor of Valibot - ValibotにISBN validationを追加するまで -という内容で発表を行いました。 blog.inorinrinrin.com 今回はこの発表の続きとなっています。 きっかけとなったATS での一幕 僕の前にZod v4 Codec でスキーマに型変換を埋め

久しぶりの「xxな技術」シリーズです。今回は『シンプリシティ』を読みました。 シンプリシティ ―持続可能かつ人間的で効果的なソフトウェア開発 作者:Dave Thomas,島田 浩二（翻訳）オーム社Amazon 作者は達人プログラマーの共著者であり、アジャイルソフトウェア開発宣言の署名者でもある、Dave Thomas です。そして Dave はアジャイルソフトウェア開発宣言の署名者ですが"Agile is Dead"と言った人物でもあります。 本題に入る前にまず、なぜ Dave は "Agile is Dead" と言ったのか？を知ることで、より面白くこの本を読むことができます。この経緯については巻末の訳者あとがき*1でも詳しく解説されています。なのでこの本を読もうとしてる人は、逆にあとがきを読んでから本編を読むことをおすすめしたいです。 Agile is Dead Dave が言ったこ

<search> という HTML 要素が 2023年10月にすべての主要ブラウザで利用可能になっていましたが、2026年4月にBaseline Widely Available に到達しました。今回はこの <search> 要素を使って、検索のアクセシビリティについて考えてみます。 スクリーンリーダーとARIA ロール アクセシビリティの向上を支援する技術として、スクリーンリーダーがあります。スクリーンリーダーはランドマークナビゲーションという機能を使って、ページ内の主要なエリア(ヘッダー・メインコンテンツ・ナビゲーションなど)を素早く移動できます。 しかし、スクリーンリーダーがランドマークとして認識できるのは、ARIA ロールを持つ要素だけです。<header> や <nav> のような要素は暗黙のロールを持っているため自動的にランドマークとして扱われますが、<div> はロールを持た

先日受験した TOEIC L&R 422 でついに一つの目標だったTOEIC 700点を超えました。 4月にGoogle Cloud Nextでアメリカに行った 時も、日常会話やセッションを聞くといった場では特に困らなかったので、「もしかして英語力上がってる？」と思い始めたところ、この結果です。 学生の頃にはこの壁は越えられなかったので、間違いなく英語力は人生最高値を更新しています。まだまだ伸び盛り。とりあえず700点は一つの目安だったのでめちゃくちゃ嬉しいです*1。 TOEIC自体は去年の9月ごろからコツコツ受験していて、半年間の遷移はこんな感じです。地味にずっと右肩上がりなのは自分を褒めたい。 試験日 LISTENING READING TOTAL 2025/09/13 315 265 580 2026/02/15 365 295 660 2026/04/19 340 345 685

TSKaigi 2026 での登壇資料です。オリジナルの資料はこちらにあります。 slides-afd16.web.app このエントリはTSKaigiでお話しした内容を文字起こししているものです。 Valibot とは ValibotはTypeScript向けのスキーマライブラリです。スキーマを定義することで、未知のデータを型安全にバリデーションできます。同様のライブラリにはZodやArkTypeなどがあります。 github.com 作者のFabianはValibot以外にもStandard Schemaの共同オーナーであり、最近ではFormishというライブラリをリリースしています。Formishについては自分のブログでも解説しています。 blog.inorinrinrin.com 基本的な使い方 スキーマ関数でデータ構造を定義し、parse / safeParse でバリデーション

Kotlinの標準ライブラリに組み込まれているTODO()関数にインスパイアを受けて、TypeScriptで同様のことを実現するライブラリ untodo を作りました。 github.com 今回はuntodoを作るに至った経緯と、コンセプト・実際の使い方について紹介します。 TODOコメントの問題点 誰しもが以下のようなTODOコメントを書いたことがあるのではと思います。 // TODO: あとで実装する function fetchUser(): User { return {} as User } // TODO: コメントは手軽に書けて便利ですが、いくつかの問題を抱えています。 問題 内容 無視できる linterやコンパイラはコメントを検知しない 型システムに乗らない IDEで「参照を探す」ができない 構造化できない 誰が・なぜ・どのissueに紐づくかを保持できない 検索して初

フロントエンド開発でフォームを実装するとき、こんな経験はないでしょうか。 バリデーションロジックがコンポーネントとごっちゃになって見通しが悪い React Hook Form や Formik を使っているが、バンドルサイズが気になる フレームワークを乗り換えたとき、フォームライブラリも全部書き直しになった こうした課題を整理していたところ、辿り着いたのが Formisch です。TypeScript 向けスキーマバリデーションライブラリとして有名な Valibot と同じ作者のFabianが手がけています。 今回はこのFormischを使ってみたいと思います。今回のサンプルコードは以下にあります。 github.com Formisch とは Formisch はこれらの問題を解決するために設計された、モジュラーかつ型安全なフォームライブラリです。React / SolidJS / Vu

TSRX（TypeScript Render Extensions）は、宣言的UIを構築するためのTypeScript言語拡張です。 JSXの精神的後継として位置付けられており、構造・スタイリング・制御フローを同一ファイルにまとめて書けるのが特徴です。TypeScriptとの後方互換性も保たれており、.tsrx モジュールはJS・TS・JSX・TSXファイルからそのままインポートできます。 コンパイルターゲットはReact・Preact・Solid・Vue・Rippleに対応しており、フレームワーク非依存です。既存のTypeScript/TSXコードベースとの共存もできるので、プロジェクトの一部から段階的に導入できます。 今回はTSRXの特徴についてもう少し触れたのち、実際にReact+Viteの環境でTSRXを使っていきます。 AIとの親和性 TSRXは「AIとの親和性」を設計の中心に据

2026年3月に Reporting API というWeb標準 API が Baseline に到達し主要ブラウザで利用可能になりました。 今回はこの便利な Reporting APIを実際に使ってみて、できることやユースケースについて考えてみます。 Reporting API とは Webアプリケーションを運用していると、こんな問題に遭遇したことはないでしょうか。 本番環境でだけ CSP 違反が起きているが、ユーザーからの報告がない限り気づけない 使っている API がいつの間にか非推奨になっていて、将来のブラウザアップデートで壊れるかもしれない ブラウザが勝手に動画の自動再生をブロックしたが、ログに残っていない これらはすべて ブラウザ側で発生するイベント であり、従来のサーバーサイドの監視では捕捉できないものです。 このような場面で役に立つのが、Reporting API です。 R

Claude Code 2.1.101 で /team-onboarding なるコマンドが追加されました。 github.com 名前的にはプロジェクトを解析して、最初に学習すべきフレームワークやライブラリなどを整理してくれるもの...と思いきやそうではないようです。Helpをみると、どうもそのプロジェクトでClaude Codeを使いこなすためのオンボードを作成してくれるらしい。 Help teammates ramp on Claude Code with a guide from your usage あなたの使用状況に基づいたガイドで、チームメイトがClaude Codeを使いこなせるようサポートしましょう。 ということで、今回はValibotで /team-onboarding を試してみることにします。 /team-onboardingを叩いてみる まずはZodで/team-

昨日、Google Cloud Generative AI Leader という資格試験を受験し、見事合格することができました。勉強期間は1週間ほどで、時間換算だと16時間ほどだと思います。 今回はこのGoogle Cloud Generative AI Leaderが気になってる人に向けて、この認定資格がどういうもので、どのように攻略するのがいいか？についてお話しします。たまにはこういうエントリも悪くないでしょう。 Google Cloud Generative AI Leader とは Google Cloud Generative AI Leader は 2025年5月15日にGAされた Google Cloud のかなり新しい認定資格です。 認定試験ガイドによると Google Cloud Certified 生成 AI リーダーは、先見性のあるプロフェッショナルであり、生成 AI

Vitest 4.1 で aroundEach と aroundAll という新しいライフサイクルフックが追加されました。 github.com これらは文字通り、テストを 前後からwrapする フックです。aroundEach は各テストを、aroundAll はスイート全体をwrapします。runTest() や runSuite() の呼び出しを自分のコードで囲む構造になっており、名前のとおり"around"に処理を置けます。 しかしここで疑問が浮かびます。既存の beforeEach / afterEach で書けていたことが多い中で、なぜ新しいフックが必要だったのか説明できますか？ このエントリでは実際にコードを動かしながら、aroundEach / aroundAll / beforeEach / afterEachのユースケースについて確認していきます。 beforeEach

ソフトウェア開発におけるコードレビューは品質保証の要です。しかし、レビューの質はレビュアーの専門知識と集中力に大きく依存し、人間のレビューでは見落としが避けられません。 この課題に対して、Linuxカーネル開発コミュニティから生まれたのがSashikoです。 sashiko.dev 本記事では、Sashikoの仕組みを詳しく解説し、それをJavaScript/TypeScriptライブラリのレビュー向けにカスタマイズしたSashiko JSについて紹介します。 Sashikoとは何か？ Sashiko（刺し子）は、Google社員のRoman Gushchin氏が開発したAIを用いたバグ発見システムです。特にLinuxカーネルのパッチをAIで自動レビューします。名前の由来は日本の伝統的な補修刺繍技法で、「布の弱い部分を補強する」という意味が、コードの脆弱な部分を見つけ出すという使命に重ねら

Coding Agent全盛の今、Docs as Code*1を用いたContext Engineeringが本格化しています。 最近OpenAIによって提唱された新たな概念・Herness Engineeringにおいても、もはやAIへ与えられる設計ドキュメント(コンテキスト)は前提として語られているほどです。 openai.com またエムスリー様においても、Docs as Codeの取り組みについてエントリが公開されていました。 www.m3tech.blog Docs as Codeを進める上で直面した課題 自分自身、とあるプロジェクトのテックリードとしてDocs as Codeを推し進めているのですが、その過程で直面した問題がありました。 Docs as Codeとして文書を作成するうえで、AIが好きに読み書きでき編集できる場所にドキュメントを置くことを考えると、必然的にアプリケ

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. と、単一バ