サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
MacBook Neo
blog.inorinrinrin.com
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. と、単一バ
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アドレスなど仕様が必ず決まっていて、かつ世界のいろんな場所で繰り
Hono Conference 2025 での登壇資料です。
転職先で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分と時間を決めて
デブサミ関西が今年も堺筋本町で開催される。 event.shoeisha.jp 堺筋本町には新卒の頃から5年ほど通っていて、会場近辺にもいくつかお気に入りのお店があるので紹介する。*1。 いっしん tabelog.com たぶん5年間で一番行った。ランチで提供されるチキン南蛮定食がとにかくおすすめ。変わってなければ、温泉卵が食べ放題のはず。夜の利用もおすすめ。 中国料理 晴華 tabelog.com 個人的にここの酢豚は今まで食べた酢豚のなかで一番おいしい。 峰のうどん tabelog.com 大阪なんだけど福岡うどんのお店。なぜか堺筋本町はうどんのお店がやたら多い。 うどん×酒場 第六感 tabelog.com 飲み(夜)で使ったことはないけど、食べログを見ると飲みのお客さんも多いのかな。値段に対してうどんの量がとにかく多い。 麺屋 はなぶさ tabelog.com 鶏そばがオーソドック
最近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
流行りの(?)NFCキーホルダー制作のスライドや記事を見た。NFCタグに自分の好きなURLを書き込んでおいて、交流の場で自分のポートフォリオなどを手軽にシェアするというものだ。既存の有料サービスだとプレーリーカードなどがある。 speakerdeck.com zenn.dev 「めちゃくちゃいいやん!」と思ったものの、鞄につけてると懇親会の場とかでは持ち歩いていない。かといってキーホルダーだけ持ち歩くのもそれはそれでおかしな感じ。スマホストラップにキーホルダーをつけてもいいけど、普段使いの時には邪魔に感じてる時間が多そう。文字通りキーホルダーとして鍵につけても、懇親会のときにわざわざ鍵を持ち出したくない。落としそう。 ということで自分なりに出した結論が表題の通りである。 町民ステッカー裏の"町"と"民"の間にNFCタグがある スマホとステッカーの間にNFCタグを挟んでスマホケースで密封*1
Google Cloud Next 25で8/6まで東京に滞在することは確定してたんだけど、8/8も妻が横浜でやるたべっこどうぶつ展に一緒に行きたいとのことで、中日の8/7も東京に宿をとることにした。 けどなにも用事なく東京で過ごすのは勿体無いので、なら日本全国旅行マップを埋めようかということで山梨・富山を目的地に据えた旅行に行ってきた。 これで日本の約2/3は制覇できた。余談だが長野はスキーで何度か行ってるので、初上陸ではない。 旅程 宿は秋葉原にとっていたので、まず新宿まで移動しそこから山梨を目指す。次に松本・長野を経由して富山へ入るルートをとった。タイムラインはこんな感じ。 10:30 -> 12:01 新宿 -> 石和温泉 12:34 -> 12:41 石和温泉 -> 甲府 14:27 -> 16:56 甲府 -> 長野 18:09 -> 19:12 長野 -> 富山 21:23
日本時間で昨日の深夜にZod v4に関するchangelogが公開された。 v4.zod.dev うっきうきで見に行ったが、かなり破壊的な変更が入ろうとしている。 deprecates .email() etc https://v4.zod.dev/v4/changelog#zstring-updates 元々z.string().email()のようにかけていたこれらは、z.email();と呼び出すように変更される。 現行のz.string().email()らに関しては、 The method forms (z.string().email()) still exist and work as before, but are now deprecated. They may be removed in a future version. z.string().email()はまだ存在
最近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
次のページ
このページを最初にブックマークしてみませんか?
『blog.inorinrinrin.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く