たより

All

gihyo.jp

第914回　IPv6オンリー環境でも家庭内にVPNを繋ぎたい。Pangolinのプライベートリソースを試す

VPNを利用したトンネル型リバースプロキシPangolin。今回はPangolinの1.13以降で実装されたプライベートリソースを使い、インターネットからよりセキュアにLAN内のリソースへアクセスする方法を解説します。

Zennの「Rust」のフィード

grepを毎回起動するの、もうやめたい。FFFでAIの検索体験を速くする

Masato13

AIエージェントでコードベースを触っていると、地味に気になるのが「検索の回数」です。 rg や grep 自体は優秀なのですが、Claude Code や Codex、OpenCode のように同じリポジトリに対して何度も検索を繰り返す使い方だと、毎回プロセスを起動して、毎回 .gitignore を読んで、毎回ファイルツリーをなめるコストが積み上がります。 1回の検索なら誤差でも、1セッションで数十回、数百回と繰り返すと、無視しにくくなってきます。 そんなときに見つけたのが FFF です。 https://github.com/dmtrKovalenko/fff FFF は Neovi...

Zennの「Rust」のフィード

大量のログから、目的の一行に一瞬でたどり着く Android logcat ビューアを作った

qwerfunch

Android アプリをデバッグしていると、logcat を見ない日はまずありません。 でも個人的にずっとつらかったのは、大量に流れてくるログの中から、本当に見たい一行を探し出すことでした。スクロールしては検索し、また新しいログに流されて見失う……。そもそも logcat を一行確認したいだけなのに、わざわざ Android Studio を立ち上げるのも地味に億劫で。 「ログの洪水の中から、目的の一行にすぐたどり着けるツールがほしい」 そう思って自分用に作り始めたのが LogcatOn です。気づいたらリリースできる状態まで来たので、思いきって公開しました。無料です。 https://...

Zennの「Rust」のフィード

タスクバーで魚を飼うアプリを、Electron→Tauriで作り直して無料のMicrosoft Storeに公開した

sobu-lab

はじめに Windows のタスクバーで熱帯魚や金魚を泳がせる小さなアプリ「Taskbar Aquarium」を作って、無料になった Microsoft Store に個人で公開しました。 最初は Electron で作ったのですが、配布サイズが MSIX で 99MB になってしまい、Tauri に移植したら 3MB まで小さくなりました。 この記事は「作って・移植して・ストアに出す」までの記録です。 特に、 Electron/Tauri 共通で苦しんだ「タスクバー押し負け」問題 Tauri 移植で踏んだ Rust 固有の罠 無料化された Microsoft Store の公開フ...

Zennの「Rust」のフィード

競プロのメイン言語をPythonからRustに乗り換えた話

Kawa_

はじめに こんにちは、アルバイトの川﨑です！ 初のブログ執筆ということで何を書けばいいのかわからなかったのですが、PythonからRustに乗り換えて半年ほど経ち、タイミングも良かったので振り返ってみることにしました。 拙い内容になるとは思いますが、最後までお付き合いいただければと思います。 なお、筆者の執筆時点(2026/05/25)でのAtCoder Algo部門のレーティングは563（茶色）です。 実力相応のお話しか出ません。便利Tipsをお求めの場合は他記事の参照をお勧めします。 (執筆時点の筆者のレートグラフ) なぜRustへ乗り換えたのか 一般的にPythonからR...

Zennの「Rust」のフィード

Rustで信頼できないURLへのHTTPリクエストをreqwest-ssrf-guardで防ぐ

walf443

ユーザーの入力したURLなどにHTTPリエクストする場合、ローカルネットワークのIP直指定のリクエストや、名前解決した結果内部ネットワークになるURLなどを除外しておかないと意図せず内部情報にアクセスされてしまったり意図しない障害などにつながってしまうことがあります。 内部ネットワークであってもmTLSで認証を突破できるクライアントしか許可しないとなっているのがベストではありますがそうなっていないサーバーが1つもないというのはなかなか難しいのではないかなと思います。 rustの場合reqwestというHTTPクライアントが定番ですが、それにssrf対策のhookを加えたライブラリreqw...

Zennのトレンド

Claude Managed Agents で社内データ・ログ・コードを横断調査する Slack bot を安定運用する方法

まりる

はじめに 前回の記事『Claude Managed Agentsで「まずエンジニアに聞こう」を「まずbotに聞こう」に変えた』では、ダイニーが社内向け Slack bot @ask-anything を Claude Managed Agents で組み、社内エンジニアへの調査依頼 (= dev-help) を半減させた話を書きました。本記事はその技術編で、Slack から Claude Managed Agents を安定運用するためのダイニーの実装パターン を紹介します。 記事1に書いた通り、Managed Agents を使うとダイニー側で書くコードは 3 種類に収束します。 ...

JSer.info

2026-06-09のJS: pnpm 11.5、Node.js 26.3.0、CloudflareがVoidZeroを買収

JSer.info #773 - pnpm 11.5がリリースされました。 Release pnpm 11.5 · pnpm/pnpm 新しい機能として、nodeLinker: hoisted向けにhoistの範囲を制限するhoistingLimits設定が追加されています。 pnpm dist-tagでの2FA対応、minimumReleaseAgeExcludeの扱い、リモートのHTTPS tarball依存のintegrityフィールドの保持などが含まれます。 Node.js v26.3.0 (Current)がリリースされました。 Node.js — Node.js 26.3.0 (Current) Buffer.poolSizeのデフォルト値が64 KiBに変更されています。 httpValidationオプション、パーミッションを破棄するpermission.dropが追加されています。 CloudflareがViteやOxcなどを開発するVoidZeroの買収を発表しました。 VoidZero is joining Cloudflare VoidZero is Joining Cloudflare | VoidZero Vite、Vitest、Rolldown、Oxc、Vite+の各プロジェクトはMITライセンスのオープンソースのまま開発が継続される予定です。 Voidは、オープンソースにする予定があわせて発表されています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release pnpm 11.5 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.5.0 pnpm ReleaseNote pnpm 11.5リリース。 nodeLinker: hoisted向けにhoistの範囲を制限するhoistingLimits設定を追加。 pnpm dist-tagでの2FA対応を修正。 minimumReleaseAgeExcludeの扱い、リモートのHTTPS tarball依存のintegrityフィールドの保持などを修正。 Node.js — Node.js 26.3.0 (Current) nodejs.org/en/blog/release/v26.3.0 nodejs ReleaseNote Node.js v26.3.0 (Current)リリース。 Buffer.poolSizeのデフォルトを64 KiBに変更。 httpValidationオプション、パーミッションを破棄するpermission.dropを追加。 Node.js — Node.js 24.16.0 (LTS) nodejs.org/en/blog/release/v24.16.0 nodejs ReleaseNote Node.js v24.16.0 (LTS)リリース。 crypto.randomUUIDv7()によるUUID v7の生成、fs.stat()へのsignalオプション、util.styleText()の16進数カラー対応を追加。 AbortSignal.timeout向けのモックタイマーを追加、IncomingMessageにreq.signalを追加など Chrome 150 beta  |  Blog  |  Chrome for Developers developer.chrome.com/blog/chrome-150-beta?hl=en Chrome browser ReleaseNote css Chrome 150 betaリリース。 text-fitプロパティ、background-clip: border-areaによるグラデーションボーダー、polygon()の角丸サポート、focusgroup属性のサポート。 data: URLのWorkerに一意のopaque originを割り当てるよう変更。 SpeechRecognitionにqualityオプションを追加など VoidZero is joining Cloudflare blog.cloudflare.com/voidzero-joins-cloudflare/ cloudflare vite news CloudflareがViteやOxcなどを開発するVoidZeroを買収。 VoidZero is Joining Cloudflare | VoidZero アーティクル Declarative partial updates  |  Blog  |  Chrome for Developers developer.chrome.com/blog/declarative-partial-updates Chrome HTML WebAPI DOM stream article HTMLを宣言的に部分更新するためのAPIとして提案中の<template for>について。 <template>要素と<?marker>などの処理命令プレースホルダーを使い、ドキュメント内の順序に依存せずコンテンツを配信するOut-of-order streamingについて。 setHTML()/replaceWithHTML()/streamHTML()などのJavaScript APIについても解説している。 On Rendering Diffs :: Pierre Computer Company pierre.computer/writing/on-rendering-diffs JavaScript performance diff library article Pierreが開発したdiffレンダリングライブラリ@pierre/diffsの実装解説。 スライド、動画関係 TSKaigi 2026 発表資料まとめ zenn.dev/yasse/articles/a7240304af804c TypeScript Conference slide TSKaigi 2026のスライド資料のまとめ。 TSKaigi 2026 Oxlintのカスタムルールの現況 - Speaker Deck speakerdeck.com/syumai/oxlint-custom-rule ESLint Rust slide JavaScript Oxlintのカスタムルールについてのスライド。 サイト、サービス、ドキュメント SoraKumo001/satoru github.com/SoraKumo001/satoru WebAssembly HTML css SVG PDF Image library WebAssemblyで動作するHTMLをSVG/PNG/WebP/PDFへ変換するレンダリングエンジン。 ソフトウェア、ツール、ライブラリ関係 microsoft/Webwright: A simple SWE style browser agent framework that achieves SOTA results on long horizon web tasks. github.com/microsoft/Webwright AI browser automation playwright library Microsoftによるブラウザエージェントフレームワーク。 pionxzh/wakaru: 🔪📦 Javascript decompiler for modern frontend github.com/pionxzh/wakaru JavaScript Tools webpack bundler esbuild minifyやbundleされたJavaScriptを読みやすいコードへと復元するデコンパイラ。 Shakya47/pip-it-up: Pop any UI component into a floating Picture-in-Picture window. Zero config. Auto-sizing. Framework-agnostic core. github.com/Shakya47/pip-it-up JavaScript React library Document Picture-in-Picture APIを扱うReactコンポーネントライブラリ。 書籍関係 基本からしっかり学ぶフロントエンドテスト入門 | 技術評論社 gihyo.jp/book/2026/978-4-297-15704-3 JavaScript test book 2026年6月26日発売。 フロントエンドのテストについての書籍

gihyo.jp

NotebookLM、Gemini 3.5とAntigravityをベースにしたリサーチ支援のアップデートを発表 ——データビジュアライゼーション対応や、PDFやMarkdown、CSV形式などの出力も可能に

Googleは2026年6月8日、AIリサーチツール「NotebookLM」のアップデートを発表した。チャットから情報ソース探しや複数段階の調査を進めやすくし、複雑なリサーチに対応する。

Zennのトレンド

データエンジニアこそ組織のオントロジーに向き合うべき

harry

こんにちは、クラシルでデータエンジニアをしているharry(@gappy50)です。 クラシルでは、これまでAI-Readyなデータ利活用に取り組んできました。Tier設計でデータの信頼性を担保したり、Snowflake Managed MCP × Claude Codeでデータの仕事をAgenticに回したりと、データをAIで扱える状態にする仕事を続けてきています。 その流れは過去記事にまとめています。 https://zenn.dev/dely_jp/articles/dely-ai-ready-dataops-tier https://zenn.dev/dely_jp/articl...

gihyo.jp

Apple、Siriを大幅アップデート、新バージョン「Siri AI」を発表 ―次世代Apple Intelligenceと第3世代Apple Foundation Modelsをベースに

Appleは2026年6月8日、米国で開催中の開発者イベントWWDC26にて、次世代のApple Intelligenceを活用し、AIアシスタントSiriの処理能力を劇的に向上させた新バージョン「Siri AI」を発表した。

Zennのトレンド

難解な条文すら関西弁なら理解できる説。試せるサイト「おおさかけんぽう」を作った話

kako-jun

「カーニーはんの手紙」を知ってますか？ https://kabumatome.doorblog.jp/archives/65900288.html 初めて読んだ時、その理解りやすさに衝撃を受けました。 難しい経済用語ですら、関西弁にすると理解できるならば！ 司法試験のための暗記も、関西弁で解説してもらったら楽勝なんじゃね……？ という仮説が成り立ちます。 いや、司法試験を受ける予定はないのですが 「権利の上に眠る者は保護に値せず」というルールもありますし 法律には詳しくなっときたい。 どうせなら、関西弁のおっちゃんでなく、若いキャラがいい。 私はClaude Codeを秘書的に使って...

Zennのトレンド

マルチテナント化のために本番稼働中のMySQLをPostgreSQLに移行した話（マルチテナント化連載 第2回・PostgreSQL移行編）

shim

はじめに こんにちは。株式会社カウンターワークスにて、テックリードとして、リーシングのDXを実現するクラウド管理システム 「ショップカウンター エンタープライズ」（以下 SCE）を開発しております shim です。 前回の俯瞰編に続いて、いよいよ各論に入っていきます。今回は Phase 1: MySQL から PostgreSQL への完全移行 がテーマです。 前回も触れた通り、マルチテナント化の中で Row Level Security（以下 RLS）を二重防御の DB 層として採用することを決めたのですが、それを使うために避けられなかったのが 「本番稼働中のサービスを、MySQL...

gihyo.jp

Blenderでオブジェクトにアウトラインを作成して表示してみよう

第78回目は、Blenderでオブジェクトを作成し、レンダリングした際にオブジェクトにアウトラインを作成する方法を見ていきます。

Zennのトレンド

「Claude Code」を支える技術

Atsushi Kadowaki

本記事では、Claude Code の裏側を支えるアーキテクチャについて、ざっくり理解します。 株式会社ナレッジセンスは、生成AIやRAGを使ったプロダクトを、エンタープライズ企業向けに開発しているスタートアップです。 この記事は何 この記事は、Claude Code の内部構造を、ソースコードレベルで解析した論文[1]について、日本語で簡単にまとめたものです。 https://arxiv.org/abs/2604.14228 本題 ざっくりサマリー Claude Code は、最も有名な「コーディングエージェント」です。PCのコマンドを実行したり、ファイルを編集したりでき...

Zennの「Rust」のフィード

cozy という小さな TUI エディタを公開しました

takaki2

Rust 製の小さな TUI エディタ cozy を GitHub と crates.io に公開しました。 GitHub: https://github.com/takakix2/cozy crates.io: https://crates.io/crates/cozy docs.rs: https://docs.rs/crate/cozy 一言でいうと、nano の代わりに気軽に使える terminal editor です。 cargo install cozy cozy とは cozy は、ターミナルでちょっとファイルを編集したいときのためのエディタです。 cozy ...

gihyo.jp

第272回　MySQL 9.7でJSON Duality ViewのDMLを再検証してみた

第266回は、MySQL 9.6 Community Editionを用いてJSON Duality Viewを紹介しました。今回は、MySQL 9.7 Community Editionを用いてJSON Duality ViewのDML機能を改めて検証してみます。

Zennのトレンド

Claude Code のトークン削減を実測した — semble 93%・cacheRead 1800倍の内訳

あたに

はじめに GitHub Copilot の料金改定をきっかけに、AI コーディングのトークン削減が話題になっています。私も Claude Code の設定ファイルに削減策を仕込んでいました。 せっかくなので、実際にどれくらい効いているか測ってみました。ccusage と semble の実ログで集計したところ、累計 cacheRead は136億トークン、コード検索の削減率は93%という数字が出ました。本記事はその実測レポートです。 定番手法、どれを実装していたか トークン削減の定番手法を自分の設定と突き合わせると、3つは実装済みでした。 定番手法 ねらい 私の実装 ...

Zennのトレンド

ExcelVBA開発をAIエージェントで自律化させるAll-in-Oneな開発ランタイムを作りました

ハルミ

! この記事は97%人間による手書きで執筆しています。（真心） TL;DR ExcelVBA開発は、VBE・GUIダイアログ・Debug.Print・MsgBox・UserFormなどがAIエージェントと相性最悪 そこで、AIエージェントがExcelVBAマクロを自律的に開発できるOSS xlflow を作った xlflowは、VBAソースのpull/push、CLIからのマクロ実行、ランタイム/コンパイルエラーのCLI出力、lint、テスト、inspect、UserFormのYAMLビルドなどを提供する MsgBox / InputBox や Debug.Print も、AI...

Zennの「Rust」のフィード

AIに書かせる前提でRust/Tauriに入門する

太田和彦

はじめに Rust と Tauri に入門するとき、普通は Rust の文法、所有権、Cargo、Tauri のプロジェクト構成、フロントエンドと Rust の連携、権限管理、ビルド、配布までを順に学ぶ必要があります。 しかし、最近ではコーディング自体はAIコーディングエージェントに任せるため、人間が理解しておく内容が変わります。 この記事では、Rust/Tauri をすべて自分で書けるようになることではなく、AIコーディングエージェントに実装を依頼し、出てきた差分をレビューできるレベルになることを目標にします。 なお、AIコーディングエージェントとして、今回はCodex CLIを使...

Zennの「Rust」のフィード

SlintのScrollView内でDrag & Dropを作ろうとしたら大爆発して「2タップ方式」に革命した話

Kenji Igarashi

概要 RustのモダンGUIツールキット Slint を使って、リッチなダッシュボードを作ろうとした時の大激闘の記録です。 コンポーネントを自由に入れ替えるドラッグ＆ドロップ（D&D）機能を実装しようとしたところ、Slintの「ScrollView内でのタッチイベント強奪仕様」や「z-index（重なり順序）の動的変更バグ」といった数々の罠に直面しました。 泥沼のコンパイルエラーと座標の暴走を乗り越え、最終的に 「1回タップして『移動モード』をONにしてから、全画面シールドで滑らかにずらす（2タップ方式）」 という、操作性・実装クリーンさ共に100点満点のアーキテクチャに辿り...

Zennの「Rust」のフィード

Wio Terminal で bCore4 を制御できるようにしてみました

Tasuku Suzuki

https://www.youtube.com/watch?v=VK_NSRCSBiU bCore4 は超小型の BLE ロボットコアです。3cm 角ほどの基板1枚で、DC モーター2個・サーボ4個・LED ポート4個を駆動でき、BLE 経由でラジコンや小型ロボットを動かせます。通常はスマートフォンの専用アプリから操作します。 これを Wio Terminal（液晶とボタンを備えた小型マイコンボード）から操作したくなりました。そのために書いたのが、Rust 製の BLE クライアント bcore（リポジトリ名 bcore-rs）です。このクレートを土台に、 Wio Terminal を...

Zennの「Rust」のフィード

Obsidianのvaultを壊さないための設計 — Petatto.md開発メモ（哲学編）

just2enough

「失われては困るファイルを、常駐プロセスが継続的に書き換える」 Petatto.md は、便利なメモアプリの顔をして、実態はこういうアプリです。 Obsidian vault 内の Markdown をデスクトップ付箋にする Tauri 製アプリを公開した（紹介サイト / ダウンロード）ので、機能ではなく「vault を壊さないための設計」を記録しておきます。 前提：他人のファイルを触り続けるアプリ アプリの性格を整理すると、編集の主役は Obsidian で、Petatto.md はそこに後から手を出す側です。対象はユーザーが長期間かけて書きためた vault で、Petatto....

Zennのトレンド

どこからでもAIで仕事をできるようにしたけど、疲れてやめた話

G2

お風呂から始まるエンジニアリング きっかけはお風呂でした。私はお風呂が好きで、毎日湯船に一時間は浸かっています。お風呂でのんびり小説や漫画を読む。熱でも出ない限りは、そうやって湯船に浸かってのんびりとする時間は欠かさずとっていました。 AIがまだそこまで長時間稼働できなかった今年の初め。お風呂に入る前に、ふとPCの前に引き寄せられるようになりました。これから一時間以上、自分は席を離れる。その間、AI はタスクを中途半端なところで止めてしまうかもしれない。動かせるのに動かさないのが、なんだかもったいない気がしました。 そして、長時間タスクを安定して実行させたい、ゴール（Definiti...

Zennの「Rust」のフィード

検索エンジンを立てるほどじゃない全文検索の落としどころ

yoRyuuuuu

はじめに システム開発において、住所や商品名といったテキストデータの中から、特定の文字列を含むレコードを探したいことがあります。 このような「文書の中から目的のテキストを高速に探し出す」機能を、一般的に「全文検索」と呼びます。 全文検索を実現する手段は様々です。 MySQL や PostgreSQL に内蔵されている全文検索インデックスを利用する方法もあれば、OpenSearch や Elasticsearch のような専用の検索エンジンを採用する方法もあります。 拡張性やパフォーマンスの観点から、検索に特化した OpenSearch のような検索エンジンを選ぶことが多いです。 しか...

Zennのトレンド

Docker Buildを106秒→44秒、32秒→3秒に高速化した3つの改善

杉山晴輝(Haruki.Sugiyama)

Docker Composeで複数のコンテナを管理していると、気づかないうちにDocker Buildの待ち時間が長くなりがちです。 私の関わっているプロジェクトでは、Next.jsのフロントエンド1台、Goのバックエンド2台、Go Worker1台をビルドしており、開発中に頻繁にDocker Buildを実行していました。 しかし、ビルド時間が1分以上かかるようになり、修正 → ビルド → 動作確認のサイクルが大きなストレスになっていました。 そこでDocker Buildの処理内容を見直し、 .dockerignore によるBuild Contextの削減 Docker Laye...

Zennの「Rust」のフィード

Android 16でWireless ADBツールが壊れる — 開発者が知るべき仕様変更と対策

hiyoyo

はじめに Android アプリ開発やスクリーンショット転送ツールを作っている方へ。 Android 16 で、Wireless ADB の挙動が変わりました。 従来の adb tcpip 5555 → adb connect <IP>:5555 のフローが 動かなくなるケース が発生しています。 この記事では、筆者が macOS 向け Android スクリーンショット自動転送アプリ「Hiyoko Shot」を開発する中で直面した問題と、その対策の考え方を共有します。 ! この記事は「何が起きているか」と「どう考えるべきか」に焦点を当てています。 具体的な実装コードは ...

Zennのトレンド

生成AI時代のエンジニアの生存戦略

shim

はじめに こんにちは。株式会社カウンターワークス、テックリードの shim です。 別途マルチテナントの記事を頑張って書いているのですが、先日社内にて「AI開発LT大会」を主催しました。 言い出しっぺなので、そこで「（生成）AI時代のエンジニアの生存戦略」というテーマで発表したのですが、せっかくなので改めて記事として再構成しました。 「生成AIにより開発スピードが速くなった」という話は至る所で聞かれるようになりましたが、その先、速くなったあとに、では自分はどこで価値を出すのか、という話を特に若手メンバーに聞いてほしいと思い書きました。 簡単にまとめると ! 開発生産性を「価値提供の...

Zennのトレンド

GitHub Copilot FinOps戦略：Usage-Based Billingへの移行と最適化

yuriemori

GitHub Copilotは2026年6月1日よりPremium Request Unit（PRU）ベースの課金からUsage-Based Billing（UBB）へと移行しました。本記事では、この移行の背景と、組織がAI Creditのコストを適切に管理するためのFinOps戦略、Token最適化のプラクティスについて解説します。 なぜUsage-Based Billingに移行したのか PRU課金モデルの限界 従来のPremium Request Unit（PRU）ベースの課金では、エージェントを複数オーケストレーションしていても、1つのエージェントを使う場合であっても、同...

Zennのトレンド

メモリが潤沢ではないPCでローカルLLMにコーディング質問した結果

okamyuji

! この記事は、LiteLLMをやめて自作Goバイナリに置き換えたら一気に軽くなりました - 「実践AIエージェント開発」を実装してみたの実践編です。自作したgo-llm-agentを使い、Ollama経由でローカルLLMにRubyとGoの落とし穴を質問して、回答の正確性を検証しました。 同じ質問を異なるモデルに投げることで、モデルの得意な言語と不得意な言語、そして質問の仕方による回答品質の変化が明確に見えてきました。 検証環境 項目 内容 マシン MacBook Pro (2024, M3 Pro) チップ Apple M3 Pro メモリ 18GB (統合...

Zennのトレンド

GPU プログラミングでも Modern C++ コードを書きたい: gpu-array ライブラリの紹介

Yoshiki Matsuda

はじめに C++20 では、C++17 以前と比べて C++ の表現力が大きく広がりました。特に、コンセプトや Ranges ライブラリの導入により、コンテナ (配列) に対する抽象化がデータ指向設計を容易にし、ビューによる遅延評価・パイプによる合成・射影によるデータ抽出、などが可能となりました。 しかし、GPU プログラミング (CUDA や HIP) においては、コンパイラ自体は C++20 に対応しているものの、カーネルコードにおいてその恩恵を享受することは依然として困難です。例えば、以下のような課題が GPU プログラミングにおける C++ らしさを阻害しています。 cu...

Zennのトレンド

設計資料をHTMLで回す — 生成・レビュー・社内共有のワークフロー

Masaki Kubota

はじめに 社内では最近、HTMLで書いた設計資料を認証付きの基盤に置き、誰でもブラウザから閲覧できる仕組みを整えました。この共有基盤の上で、私がいま個人的に試しているのが、設計資料のHTMLにコメント機能を持たせ、その指摘をそのまま修正プロンプトにしてClaude Codeに渡す、というワークフローです。 社内でHTMLレビューが広がるきっかけのひとつが、Anthropicのこの記事でした。 https://claude.com/blog/using-claude-code-the-unreasonable-effectiveness-of-html 半信半疑で始めたのですが、HTM...

Zennの「Rust」のフィード

sqlxで結合テーブルの構造体パターンを考える

reo

はじめに 単一テーブルの永続化対象の構造体を定義した記事等はあるが、結合テーブルはなかったので、どうすればいいか考えてみた 前提 例として、usersとclock_in_and_outsテーブルを結合したレコードを取得したい場合で考える CREATE TABLE users ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(255), is_delete tinyint(1) DEFAULT 0, create_date DATETIME DEFAULT CURRENT_TIMESTAMP, up...

Zennのトレンド

Dynamic workflow と /goal コマンドによるスキルの最適化手法

nogu

! 本記事で紹介する手法は、通常よりも多くのトークンを消費する可能性があります。 はじめに 実運用において、Agent Skillsは作って終わりではなく、検証ループで育てるものです。 先日、チームへ配布するワークフロー系のスキルを作成しました。スキル自体は /skill-creatorコマンドを使うことで簡単に作成することができます。しかし、それだけでは実運用に耐えることができません。 次に必要なのは、スキル本体をいじることではなく、スキルが意図通りに動作するかを多角的に検証することです。 網羅性、スキル、スキル内のプロセス遵守、検証すべきことはわかっているのに、どうしても手動の...

Zennの「Rust」のフィード

aitm 1.0：AIをコパイロットに、ハンドルは自分で

kanfu-panda

ほとんどのAIターミナルには、暗黙の前提があります。「AIがドライバーである」という前提です。やりたいことを伝えれば、AIが何を実行するかを決め、ユーザーはよく理解しないまま承認する——それもひとつの哲学です。aitm は、別の哲学で作りました。 aitm において、AI はコパイロットです。環境を見て、ファイルを読み、ツールを呼び出し、コマンドを提案する。しかし、常にこの順序です：AIが提案し、あなたが決め、実行される。ハンドルはあなたの手に残ります。 些細な違いのように聞こえるかもしれません。でも 1.0 をシップするにあたって、それがコードの上でどういう意味を持つか、じっくり考え抜...

Zennのトレンド

GoランタイムにおけるGCのタイミングを知っておこう

kakkky

はじめに Goは GCを備えており、開発者がメモリ管理を直接気にする場面はそう多くありません。 「ヒープに乗ったオブジェクトは、いずれ自動で解放される」....この前提でコードを書けるのは、Goの大きな魅力のひとつです。 GCは自動で動きますが、いつ動くかは決まったルールで制御されています。 そのルールを知らないまま「いつかGCが回収してくれるはず」と思ってコーディングしてしまうと、OOMを引き起こしてしまう可能性があります。 本記事では、Goランタイムが持つ4つのGC発火タイミングを、サンプルコードを動かしながら整理します。 GC(Garbage Collection)とは G...

Zennのトレンド

数学で読み解くHaskell——入門編

いかろちゃん

Haskellの抽象的な概念（型システムからFunctor、Monadまで）を、集合や代数構造といった「馴染みのある数学の言葉」を補助線にして読み解く入門書。難解な理論を学ぶためではなく、Haskellの挙動を理解するためのツールとして数学を活用するスタイルで解説します。そのため、数学の教科書というより物理の教科書の雰囲気に近いです。

Zennのトレンド

TypeScript拡張「TSRX」を触ってみて、JSXと比べて考えたこと

Hayato Yokoyama

はじめに Reactを書くとき、私たちはほぼ必ずJSX（TSX）で書くと思います。 そんなJSX（TSX）の代替となるようなTSRXというTypeScriptのスーパーセット言語がアルファ版として公開されていて、ちょっと面白そうだったので触れてみました。 TSRXとは？ https://tsrx.dev/ TSRXは、元ReactコアエンジニアであるDominic Gannawayさんが開発しているTypeScriptのスーパーセット言語です。 Gannawayさんは現在RippleというUIライブラリを開発しており、TSRXはもともとRippleのなかで使われていた構文です。そ...

Zennのトレンド

バイブコーディングが怖いので、全PJにSemgrep + gitleaksの自動セキュリティスキャンを仕込んだ話

pesca

はじめに ITコンサル1年目です。Claude Codeを使って個人開発を進めていますが、最近ずっと引っかかっていたことがあります。 「AIに書いてもらったコード、本当に安全なんだろうか?」 code-to-rich.com、shindan-me.com、その他いくつかの個人開発PJをClaude Codeと一緒に作ってきましたが、コードレビューの大部分をAIに任せている以上、 危険なパターン（shell=True、SQLインジェクションになりうる文字列結合など）をうっかり実装してしまう .envの中身やAPIキーをそのままコードに埋め込んでしまう といったミスが紛れ込んでいて...

Zennのトレンド

AIに8割書かせたコードを、半年後の自分が保守できるようにするために実際にやっていること

Rapls

半年ぶりにそのリポジトリを開いて、最初にしたのは、自分が書いた関数を指でなぞることでした。 小さなバグ報告が来て、直そうとしてファイルを開いて、それで手が止まりました。どこに何が書いてあるのか、追えない。書いた記憶はあります。何週間もこれにかかりきりだったのも覚えている。でも、目の前のコードと自分のあいだに、知らない人が一人挟まっているような感じがする。八割くらいをAIに任せて作った、LMS用のテーマでした。そして、仕様書は一枚も書いていませんでした。 報告されたバグは、進捗の表示がときどきずれる、という単純なものでした。普通なら、表示を作っている関数を探して、計算の順番を直して終わりで...

Zennの「Rust」のフィード

Rust を学ぶために、漫画ビューア gashuu(画集)を作った

Yasuyuki Takeo

はじめに AI を前提にすると、新しいプログラミング言語の学び方はどう変わるのか。 これまでは、本を読む、チュートリアルを写経する、小さなものを作りながら覚える、という流れが多かった。もちろん今でもそれは有効だ。ただ、生成 AI がある程度まとまったコードを書けるようになった今、別の学び方もあるのではないかと思った。 今回試したのは、「AI にある程度動くところまで作ってもらい、そのコードを読み、直しながら学ぶ」という方法だ。 題材にしたのは Rust で作るコミックビューア gashuu。Rust と Slint で作ったクロスプラットフォームのデスクトップアプリだ。 この記事では...

Zennの「Rust」のフィード

画面（見た目）は雑、設計はガチ。Rust×Slintで動的レイアウトを完璧に制御する3大設計図

Kenji Igarashi

はじめに ハローワールドのような入門レベルの文法解説は、裏で個人的にやればいい。公式ドキュメントの最初の1ページ目をコピペしたような記事は、わざわざ時間を割いて読む価値がない。 本記事では、今朝記事にしていたRustとSlintで実装したMITライセンスのUI基盤『dashboard-core』の「設計（パラダイム）」の核心だけを示す。 自分一人で抱え込んで満足するのではなく、他人がデザインをガワ替えして自分の基盤として再利用できるように、MITライセンス（改造自由） で公開している。 リポジトリ: https://github.com/kenjiigarashi/dashboa...

Zennの「Rust」のフィード

RustでABC461 (A ~ D)

石垣島産石垣

ABC 461 参加記録 戦績 問題 結果 時間 ペナルティ A AC 1:31 0 B AC 3:12 0 C AC 11:59 0 D AC 24:32 0 レート変動： 909 -> 980（+71） 各問題メモ A - Armor 考えたこと 4（よ）6（ろ）1（い）...ってこと？！ 問題文そのまま実装するだけ 問題ページ https://atcoder.jp/contests/abc461/tasks/abc461_a 提出コード https://atcoder.jp/contests/abc461/submissi...

Zennの「Rust」のフィード

Rustでエラー原因をsourceとDisplayの両方に書いてはいけない理由

ultimatile

! TL;DR 責務分担: Displayは自エラーの説明。source()は原因へのリンク。reporterは全体の表示。 原因を#[source]/#[from]で露出するなら、同じ原因を#[error("...: {0}")]でDisplayに重ねない。 重ねるとanyhow等のreporterがsource()を辿り、同じ原因が重複表示される。 文脈ありなら#[error("自レイヤの文脈")]+#[source]。文脈なしラッパーなら#[error(transparent)]。 error.to_string()単独なら例外的にありうる。reporter併用ではfoot...

Zennの「Rust」のフィード

Rust で Cheminformatics のライブラリ chematic をゼロから開発している話

kent-tokyo

Cheminformatics ツール（RDKit、OpenBabel など）の多くは C++ で書かれ、JavaScript での利用は Emscripten を経由してコンパイルされます。そうすると WASM バイナリは 30～50 MB に膨れ上がり、ビルド環境は cmake・clang・Emscripten SDK と複雑化します。 もし C/C++ をゼロにしたら どうなるのか。その答えが chematic です。Pure Rust で cheminformatics ライブラリをスクラッチから書き、npm パッケージとして WASM で公開しました。バイナリサイズは ~550...

Zennの「Rust」のフィード

AI時代のサーバーサイド開発を考えて、Next.jsフルスタックからRustへ移行した話

たろ

私たち株式会社Eye Universe は、美容サロン向けにAIエージェントをノーコードで構築できるプラットフォームを中心に、予約や物流など美容サロンの業務を支えるプロダクトを開発・運営しているスタートアップです。 もともとは開発速度を重視し、Next.jsをフルスタックに使う構成で開発してきました。しかし、ユーザー数やユースケースが増え、WebアプリだけでなくiOSアプリからも使われるサーバーサイドの責務が大きくなるにつれて、主要なサーバーサイド処理をRustで書いたAPIサーバーへ移行しました。 この記事では、Rustを採用した理由を「高速だから」という観点だけではなく、AIコーディ...

gihyo.jp

VS Code 1.123リリース、問題のある拡張機能リリースへの対策として自動更新を通常2時間遅延 ——MAI-Code-1-FlashもCopilot個人ユーザー向けに展開

Microsoftは2026年6月3日、Visual Studio Code 1.123をリリースした。今回の更新では、拡張機能の自動更新を新バージョン公開から通常2時間遅らせる変更が追加された。

azukiazusa のテックブログ2

`/goal` コマンドの活用例: Vitest の実行時間を 6 倍高速化した話

Vitest の `isolate: false` オプションを有効にすることで、テストの実行時間を大幅に短縮できましたが、その際に大規模なコードの修正が必要でした。Claude Code の `/goal` コマンドを活用することで、最終的なゴールを達成するために必要なステップを自律的に判断して実行させることができます。この記事ではその経験について紹介します。

gihyo.jp

AIニュースノート：Gemma 4 12B公開、Nemotron 3 Ultra公開、画像モデルReve 2.0／Ideogram 4.0公開、ChatGPTメモリー改善、Hermes Desktop公開など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近（2026年6月3日〜5日頃）に発表・公開されたAI関連の興味深いニュースの概要を簡単にまとめてみました。

azukiazusa のテックブログ2

エディタを Zed に乗り換えてみた

Zed は Rust で書かれたネイティブアプリケーションで、非常に高速な動作と軽量な設計が特徴の新しいエディタです。この記事では、Zed のインストール方法と、実際に使ってみて感じた主要な機能や特徴について紹介していきたいと思います。

gihyo.jp

Ubuntu 26.10（Stonking）の開発; Snapshot 1、「Ubuntu入り」Windows 365 開発者向けイメージ、NVIDIA OpenShell snap

stonkingの最初のスナップショットリリース、Snapshot 1がリリースされました。

gihyo.jp

DSXが示すNVIDIAの未来：垂直統合と水平分散のハイブリッド戦略～NVIDIA GTC Taipei 2026、Jensen Huangキーノートから

NVIDIAのCEOであるJensen Huang氏（以降Jensen）と言えば、もはや COMPUTEX TAIPEIの「顔」とも言える IT業界のスターです。今年も一般公開前の 6月1日にJensenはGTCのキーノートに登壇し、たっぷり2時間、多くのことについて語りました。

gihyo.jp

データ疲れの時代にGoogleが提示した新しい形「Google Fitbit Air」

ディスプレイをなくしたGoogleの「Google Fitbit Air」について考察してみます。

gihyo.jp

OpenAI、Codexのビジネス用途を広げる役割別プラグインを公開、アノテーション対象拡大やSitesのプレビュー提供も

OpenAIは2026年6月2日、Codex向けに、職種や役割に合わせて使える6種類の新しい「役割別プラグイン」、成果物をWebサイトやアプリとして共有できる「Sites」のプレビュー提供、選択箇所を指定して修正を依頼できる「アノテーション」の対象拡大を発表した。

gihyo.jp

Microsoft Build 2026、AIエージェント開発向けにMicrosoft IQ、MAIモデル、MXCなどを発表 ——Coreutils for WindowsやIntelligent Terminalも

Microsoftは2026年6月2日から開催されている開発者イベントMicrosoft Build 2026」で、AIエージェントの構築、実行、管理に関わる開発者向けの発表を行った。

gihyo.jp

GitHub、Copilotアプリのテクニカルプレビューを拡大 ――CanvasやSDKの一般提供、サンドボックスもパブリックプレビューも

GitHubは2026年6月2日、同日から開催されているMicrosoft Buildにあわせて、エージェントによる開発を支援するGitHub Copilot関連のアップデートを発表した。デスクトップ版のGitHub Copilotアプリでは、テクニカルプレビューの対象を拡大した。

gihyo.jp

第913回　Ubuntu 26.04 LTSで本格的に進むRust版coreutilsへの移行

Ubuntu 26.04 LTSの大きな変更点のひとつが「sudoとcoreutilsがRust版になった」ことです。今回はこのRust版のツール、特にcoreutilsに関してと、その経緯・状況を詳しく紹介しましょう。

gihyo.jp

OpenAIのGPT-5.5やCodexがAWS/Amazon Bedrockで利用可能に

OpenAIとAmazonは2026年6月1日、OpenAIのGPT-5.5、GPT-5.4とCodexがAWSの生成AIサービスであるAmazon Bedrockで利用可能となったことを発表した。

gihyo.jp

第4回 Evalでエージェントの品質を改善しよう ～計測→分析→改善→再計測：Evalsで応答品質を定量化する

今回はまずEvalsの一般概念を整理し、その上で具体例としてMastra Evalsでの実装を見ていきます。

gihyo.jp

Windows版Codexアプリがコンピュータユースに対応、ChatGPTモバイルアプリからWindowsに接続可能に

OpenAIは2026年5月29日、Codexアプリの新バージョン26.527をリリースした。このバージョンでWindowsでのコンピュータ操作に対応した。またCodexのWindowsサポートにより、モバイル版ChatGPTアプリでWindowsとのSSHを介した接続ができるようになった。

gihyo.jp

AI時代のロボット開発と「やわらかい手」の関係――第2回関西ロボデックスレポート

2026年の5月13日から15日にかけて、インテックス大阪にて「第2回関西ロボデックス」が開催されました。

gihyo.jp

github.comでCopilotを使いこなす ～コードの調査、AIレビュー、自律実装をWebブラウザで完結

Copilotが活躍する場所はエディタの中だけではありません。Webブラウザでgithub.comにアクセスするだけでも、Copilotの多彩な機能を利用できます。本章では、github.com上の3つの主要機能取り上げます。エディター上の体験とはひと味違う、GitHubプラットフォームならではのCopilot活用を見ていきましょう。

gihyo.jp

第130回　MySQLコミュニティ連携の強化継続、PostgreSQLの脆弱性修正11件を含むアップデート、Tsurugi最新情報

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

OpenAI の Secure MCP Tunnel を試してみた

OpenAI の Secure MCP Tunnel を利用すると、プライベートな MCP サーバーをパブリックなインターネットに公開することなく OpenAI のプロダクトに接続できるようになります。この記事では Secure MCP Tunnel を試してみた様子を紹介します。

blog.jxck.io

Google I/O 2026

Google I/O 2026 に参加した。

gihyo.jp

VS Code 1.122リリース、GitHubサインインなしでBYOKを利用可能に

Microsoftは2026年5月28日、Visual Studio Code（VS Code）1.122をリリースした。今回の更新では、BYOK（Bring Your Own Key）でGitHubにサインインしなくてもユーザー自身の言語モデルを使えるようになった。統合ブラウザのデバイスエミュレーション、エージェントウィンドウの改善なども含まれる。

azukiazusa のテックブログ2

Claude Code の Dynamic Workflow を試してみた

Claude Code v2.1.154 で Dynamic Workflow と呼ばれる機能が追加されました。Dynamic Workflow は数時間から数日かかるような大規模な作業を実行するために設計されています。ワークフローは JavaScript で定義され、複数のサブエージェントをオーケストレーションすることができます。この記事では Claude Code の Dynamic Workflow を試してみた様子を紹介します。

gihyo.jp

科学研究向けAIエージェントチーム「AutoScientists」公開 ——仮説生成、実験設計、失敗分析を自律的に進める

ハーバード大学に所属するShanghua Gao氏、Ada Fang氏、Marinka Zitnik氏らは2026年5月28日、複数のAIエージェントが継続的な計算科学の研究を進めるプロジェクト「AutoScientists」を発表した。

gihyo.jp

Zed、AIエージェント向け「Skills」に対応

コードエディタ「Zed」を開発するZed Industriesは、2026年5月27日に公開した安定版v1.4.2で、AIエージェント向け機能「Skills」に対応したことを案内した

gihyo.jp

Claude Opus 4.8登場、Claude Codeの「ダイナミックワークフロー」機能もリリース

Anthropicは2026年5月28日、同社のフロンティアモデルの最新バージョンClaude Opus 4.8をリリースした。

gihyo.jp

Ubuntu 26.10（stonking）の開発; カーネル7.2採用、UEFI CA証明書のローテーション、Arm AGI CPU、開発用サンドボックス“Workshop”

stonking（Ubuntu 26.10）の開発開始が宣言され、各種計画が開始されました。現実的には現在開催中のUbuntu Summit 26.04での議論が終了し、より精緻な計画が公開されてからが本格的な稼働となるでしょう。

gihyo.jp

まつもとゆきひろさん「Meet Spinel」 ～RubyKaigi 2026 3日目キーノート

最終日の締めくくりとして、Rubyの作者であるまつもとゆきひろさんより「Meet Spinel」と題した講演が行われました。

gihyo.jp

Google、AIマーケティングツール「Pomelli」にブランドプロフィール作成支援のエージェント機能を追加 ——ブランドガイドと簡易Webサイト生成にも対応

Googleは2026年5月19日、Google Labsで提供する実験的なAIマーケティングWebアプリ「Pomelli」に、ブランドプロフィールの作成を支援するエージェント機能を追加したと発表した。Pomelli Agentでブランドの特徴をまとめた「Business DNA」を作成し、その情報をもとに定型的なブランドガイドや簡易的なWebサイトも生成できる。

gihyo.jp

OpenAI、プライベートMCPサーバーをChatGPTやCodexに安全に接続できる「Secure MCP Tunnel」を提供開始

OpenAIは2026年5月28日、プライベートネットワーク内のMCPサーバーを、インターネットに公開することなくOpenAIのサービスに接続できる「Secure MCP Tunnel」の提供を開始した。

gihyo.jp

カリフォルニア州の“年齢確認法”、Linuxディストロは例外となる公算大

米国では1、2年前から複数の州でOSプロバイダに対してユーザの年齢確認を義務付ける法案が可決されつつあるが、そのなかでも比較的初期から独自の法律を制定したことで注目されてきたのがカリフォルニア州である。

gihyo.jp

バックエンドのメモリ使用量の削減

今回は、Misskeyバックエンドのメモリ使用量を削減させる取り組みについて紹介します。

gihyo.jp

Charles Nutterさん「Twenty Years of JRuby」 〜RubyKaigi 2026 2日目キーノート

RubyKaigi 2026の2日目のキーノートとして、Charles Nutterさんが「Twenty Years of JRuby」というタイトルで発表を行いました。

gihyo.jp

Gemini Intelligence が示す「エージェント・ファースト」の未来

5月12日、Googleは「Gemini Intelligence」を発表しました。

gihyo.jp

Claude Code、脆弱性検出と修正を支援する「security-guidance」プラグインを公開

Anthropicは2026年5月26日、Claude Code向けのセキュリティ支援プラグイン「security-guidance」を公開した。

gihyo.jp

田籠聡さん「Ruby Boxを探す旅」 〜RubyKaigi 2026 1日目キーノート

今年のRubyKaigiは、Ruby 4.0で試験的に導入されたRuby::Boxを扱うキーノート「The Journey of Box Building」とともに幕を開けました。登壇したのは田籠聡さんです。

gihyo.jp

高校数学から最先端AIまでを「横断的」に学ぶ理由 ——バラバラでは見えない景色

本シリーズでは、2冊12章を貫く「共通項」を意識して構成しました。2冊目の「はじめに」では、その狙いを「最先端技術を支えている数理の共通項を横断的に学ぶこと」だと説明しています。今回は、その「共通項」を、添付図に沿って読み解いていきましょう。

gihyo.jp

第912回　26.04 LTSとNVIDIA/AMDのGPGPU事情

今回は執筆時点でのUbuntu 26.04 LTSのNVIDIA/AMDのGPGPU対応状況を報告します。

gihyo.jp

OpenClaw作者、エージェントスキルのチェックツール「Skill Cleaner」をGitHubで公開

OpenClawの作者として知られるPeter Steinberger氏は2026年5月25日、効率の良いエージェントスキルを書くためのチェックスクリプト「Skill Cleaner」をGitHubで公開した。

gihyo.jp

第271回　MySQL Shellのプロンプトを改造してみる［その2］

前回では、MySQL Shellのprompt.jsonを使ってsegmentsとpromptを中心にプロンプトをカスタマイズしてみました。prompt.jsonには前回紹介しきれなかった項目があります。今回はdesc、symbols、classes、variablesを見ていきます。

gihyo.jp

Microsoft、Fedoraベースの「Azure Linux 4」ソースコードをGitHubで公開

5月18日～20日の3日間に渡って米ミネアポリスで開催された「Open Source Summit North America 2026」で、Linuxコミュニティからもっとも注目されたトピックのひとつがMicrosoftによる「Azure Linux 4」のパブリックプレビュー開始のニュースだった。

gihyo.jp

Pythonマルチモーダル検索とANN 〜ベクトル検索の応用編〜

2026年5月の「Python Monthly Topics」は、先月号に引き続きPythonを使ったベクトル検索について紹介します。今月はマルチモーダルへの応用を中心に取り上げます。

gihyo.jp

npm、メンテナー承認後に公開する「Staged publishing」が利用可能に ——URLやローカルファイルからの依存も制御可能に

GitHubは2026年5月22日、npmのサプライチェーンセキュリティを強化する更新として、Staged publishingの一般提供開始と、新しいインストール元制御フラグを発表した。

JSer.info

2026-05-24のJS: pnpm 11.1〜11.3、npm CLI v11.15.0、Deno 2.8

JSer.info #772 - pnpm 11.1から11.3にかけて、サプライチェーンセキュリティに関する機能が多数追加されています。 Release pnpm 11.1 · pnpm/pnpm Release pnpm 11.1.3 · pnpm/pnpm pnpm 11.3 | pnpm pnpm 11.1ではレジストリ署名を検証するpnpm audit signaturesコマンドが追加され、11.1.3ではインストール時にlockfileのエントリをminimumReleaseAgeで再検証する仕組みとminimumReleaseAgeStrictモードが導入されています。11.3ではStaged Publishing用のpnpm stageコマンドと、信頼済みのlockfile検証をスキップするtrustLockfile設定が追加されています。 npm CLI v11.15.0がリリースされました。 Release v11.15.0 · npm/cli Staged Publishingのためのnpm stageコマンドが追加されました。Staged Publishingは、パッケージの公開前に承認ステップを追加する仕組みで、ステージングへ送信した後にメンテナーが2FAで承認してからレジストリに公開されます。また、インストール時の挙動を制御するallow-git/allow-file/allow-directory/allow-remoteの設定が追加されています。 Staged publishing for npm packages Deno 2.8がリリースされました。 Deno 2.8 | Deno deno audit fix、deno bump-version、deno ci、deno pack、deno transpile、deno whyなどの新しいサブコマンドが追加されています。Node.js互換性のテストスイート合格率が42%から76.4%に改善し、Stage 3のimport deferを実装しています。また、CLIでnpm:プレフィックスが不要になり、catalog:プロトコルでモノレポの依存バージョンを一元管理できるようになっています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release v1.60.0 · microsoft/playwright github.com/microsoft/playwright/releases/tag/v1.60.0 playwright ReleaseNote playwright v1.60.0リリース。 Locator.ariaRef()、bindingsのhandleオプション、videosPath/videoSizeなどのdeprecatedなAPIを削除。 tracing.startHar()/tracing.stopHar()でHAR記録をサポート、外部からのドラッグ&ドロップをシミュレートするlocator.drop()の追加。 expect(page).toMatchAriaSnapshot()をPageに対して利用できるように、boxesオプションで境界ボックス情報を含められるように。 test.abort()、browser.on('context')イベントとBrowserContextのライフサイクルイベントの追加など Release pnpm 11.1 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.1.0 pnpm ReleaseNote pnpm v11.1.0リリース。 pnpm audit signaturesコマンド、namedRegistriesによるレジストリのプレフィックス指定(gh:@acme/privateなど)のサポート。 pnpm bugs/pnpm ownerコマンドの追加。 --sbom-spec-version、ランタイムのインストールをスキップする--no-runtimeフラグの追加など。 Release vite-plus v0.1.21 — Create, Migrate & Local CLI Power-Up · voidzero-dev/vite-plus github.com/voidzero-dev/vite-plus/releases/tag/v0.1.21 vite CLI Tools ReleaseNote vite-plus v0.1.21リリース。 vp pmコマンドがローカルCLIで動作するようになり、vp migrateはnamed catalogsの書き換えやtsdown/clientのインポートと型設定の移行に対応。 vp createは@org形式のスコープ付きテンプレートをサポート。 vp pm pluginのyarnサポート、--provenanceフラグ、Windowsの.cmdシム経由のPowerShell実行などを追加。 --ignore-scripts自動付与、vite-plus/pack/clientの追加など Bun v1.3.14 | Bun Blog bun.com/blog/bun-v1.3.14 Bun ReleaseNote Bun v1.3.14リリース。 Bun.Imageを追加。 Bun.serve()がHTTP/3 over QUICに対応、fetch()が実験的にHTTP/2とHTTP/3プロトコルをサポート。 --no-orphansフラグの追加。 process.execve()、WindowsでのBun.Terminal(ConPTY)、FreeBSD/Androidの公式ビルド提供など Release pnpm 11.1.3 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.1.3 pnpm ReleaseNote pnpm v11.1.3リリース。 pnpm-lock.yamlのエントリをminimumReleaseAgeとtrustPolicyで再検証するように変更とminimumReleaseAgeStrictモードの追加。 pnpm self-updateがminimumReleaseAgeを尊重するように変更、NODE_AUTH_TOKEN未設定時のOIDC認証失敗などを修正。 Node.js — Node.js 26.2.0 (Current) nodejs.org/en/blog/release/v26.2.0 nodejs ReleaseNote Node.js 26.2.0リリース。 fs.StatsとBigIntStatsがTemporal.Instantをサポート、HTTPのwriteInformationメソッドで任意の1xxステータスコードを送信できるよう。 stream.composeがStableへ変更、Web Cryptography APIにML-DSA/ML-KEM/ChaCha20-Poly1305などのアルゴリズムを追加など Release v11.15.0 · npm/cli github.com/npm/cli/releases/tag/v11.15.0 npm CLI ReleaseNote npm CLI v11.15.0リリース。 npm stageコマンドを追加、trustコマンドにpermissionsサポートを追加。 allow-git/allow-file/allow-directory/allow-remoteの設定を追加。 Staged publishing for npm packages Release @apollo/client@4.2.0 · apollographql/apollo-client github.com/apollographql/apollo-client/releases/tag/%40apollo%2Fclient%404.2.0 JavaScript library ReleaseNote GraphQL Apollo Client 4.2.0リリース。 defaultOptionsを反映する"modern"スタイルを追加。 RefetchEventManagerクラスを追加し、windowのfocusやネットワーク再接続などのイベントに応じたクエリの自動再取得をサポート。 client.query/client.mutate/useMutation/preloadQueryの戻り値の型にdefaultOptionsを反映するように改善。 pnpm 11.3 | pnpm pnpm.io/blog/releases/11.3 pnpm ReleaseNote pnpm 11.3リリース。 pnpm stageコマンド、信頼済みのlockfileの検証をスキップするtrustLockfile設定の追加。 pnpm pkg/pnpm repo/pnpm set-scriptをネイティブ実装に置き換え、pnpm publishに--skip-manifest-obfuscationフラグを追加など Deno 2.8 | Deno deno.com/blog/v2.8 deno ReleaseNote Deno 2.8リリース。 deno audit fix/deno bump-version/deno ci/deno pack/deno transpile/deno whyなどの新しいサブコマンドを追加。 import deferを実装。 npm:プレフィックスが不要に、catalog:のサポート、--os/--archフラグでクロスプラットフォームインストールに対応。 OffscreenCanvasやDOMPointなどのWeb APIを追加、Chrome DevToolsでのネットワークデバッグやCPUプロファイリングをサポート。 アーティクル Postmortem: TanStack npm supply-chain compromise | TanStack Blog tanstack.com/blog/npm-supply-chain-compromise-postmortem TanStack npm security Actions article 2026年5月11日に発生したTanStackのnpmパッケージに対するサプライチェーン攻撃のポストモーテム。 pull_request_targetワークフローの設定不備、GitHub Actionsのキャッシュポイズニングを組み合わせた攻撃手法について。 /proc/経由でランナープロセスのメモリからOIDCトークンを抽出してnpm publishに利用された。 pull_request_targetを使うワークフローの監査、サードパーティActionのコミットハッシュ固定などを挙げている。 9 Times the Web Platform Was Influenced by Libraries | Jad Joubran jadjoubran.io/blog/web-platform-influenced-by-libraries WebPlatformAPI JavaScript library history article WebプラットフォームのネイティブAPIがライブラリから受けた影響を9つの事例で紹介する記事。 querySelectorに、Bootstrapのdata-toggleがpopovertarget/command属性に。 .addClass()がclassListへ、Lodash/UnderscoreのメソッドがString/Arrayのメソッドに。 structuredClone、Promises/A+の標準化、ES Modulesの設計。 Temporal API、jQueryの.closest()からElement.closest()の流れなどについて。 Node.js — Axios to WHATWG Fetch nodejs.org/en/blog/migrations/axios-to-fetch nodejs Fetch HTTP article AxiosからNode.js Fetch APIへの移行ガイド。 axios.get()/axios.post()/axios.put()/axios.delete()やフォーム送信などのコード変換例を解説している。 Introducing Secure Registry: install-time defense for the npm supply chain - StepSecurity www.stepsecurity.io/blog/introducing-secure-registry-install-time-defense-for-the-npm-supply-chain npm security article StepSecurityによるnpmサプライチェーン攻撃に対するインストール時の防御を行うProxy型のレジストリサービス。 nkzw-tech/fate: fate is a modern data client for React. github.com/nkzw-tech/fate React library TypeScript GraphQL Reactのデータクライアントライブラリ。 viewでデータを宣言し、正規化キャッシュとデータマスキングを提供する。 use)に対応し、ページネーション、Optimistic Updates、Server-Sent Eventsでの更新のサポート。 Announcing Web Serial Support in Firefox - Mozilla Hacks - the Web developer blog hacks.mozilla.org/2026/05/web-serial-support-in-firefox/ Firefox browser WebAPI Mozilla Firefox 151でWeb Serial APIをサポート。 ソフトウェア、ツール、ライブラリ関係 tmikov/hermes-node: Node.js built-in module compatibility layer for the Hermes JS engine github.com/tmikov/hermes-node nodejs JavaScript TypeScript library HermesをベースにしたNode.js互換のJavaScript/TypeScriptランタイム。 fs/http/net/path/streamなどのNode.jsコアモジュールは、Node.js内部のJS実装をそのまま利用する。

gihyo.jp

AI生成のマージリクエストに潜む、隠れたコスト［後編］

前回は、AIコーディングツールの普及によってマージリクエスト（MR）が増加し、レビュー負荷がシニアエンジニアに集中することで、「隠れたコスト」が生じている実態を解説しました。今回は、これらの課題に対し、どのような指標でボトルネックを可視化し、レビュー体制やワークフローをどのように再設計すべきかについて、実践的なアプローチを紹介します。

gihyo.jp

Blenderで面の向きを意識してみよう

第77回目は、Blenderでモデリングをしている際、面の向きを意識することで、モディファイアを追加するときなどに想定外のことが起こったとしても対処できるようになります。

azukiazusa のテックブログ2

2026-07-28 MCP 仕様ではステートレスファーストになる

2026-07-28 MCP 仕様リリース候補の最も大きな変更点は、MCP サーバーがステートレスファーストになることです。これにより、MCP サーバーはシンプルなロードバランサーの背後でスケーリングできるようになります。また `Mcp-Method` ヘッダに基づいたトラフィックのルーティングや、サーバー応答のキャッシュなども可能になります。この記事では 2026-07-28 MCP 仕様リリース候補におけるステートレスなプロトコルの変更点について紹介します。

gihyo.jp

VS Code 1.121リリース。MarkdownプレビューでのMermaid図とYAMLフロントマター表示を標準搭載し、リモートエージェントにも対応 ——Agent Host Protocol（AHP）でリモート側のセッションを継続

Microsoftは2026年5月20日、Visual Studio Code（VS Code）1.121をリリースした。

@sakupi01.com blog

Google I/O 2026 (1st edition!)

DISCLAIMER: Semi-tech & mostly everyday kind of stuff! It means skip this content if you're expecting 100% tech content. Thanks!

gihyo.jp

Hugging Face、理論物理学向け研究エージェント「physics-intern」を公開

Hugging FaceのDavid Louapre氏は2026年5月12日、数学および理論物理学の研究問題に自律的に取り組む「physics-intern」をXで紹介した。

gihyo.jp

OpenAI、Codexのgoalモードを一般提供開始

OpenAIは2026年5月21日、Codexのアップデートを行い、実験的な機能として提供していたgoalモードの一般提供を開始した。

gihyo.jp

PythonAsia 2026 参加レポート ―PyCon APACからPythonAsiaへ

k-kamijoです。PythonAsia 2026でスピーカーとして登壇してきましたので、参加レポートをお届けします。

gihyo.jp

Ubuntu 26.10（stonking）の開発 / “Redhound”の導入とCIX P1への対応、Ubuntu Core 26のリリース

UbuntuにおけるAI活用について、“Redhound”と名付けられたCanonical社内で利用される監査エージェントの利用を開始していることが提示されています。

gihyo.jp

Google、モダンなWeb開発を支援するエージェントスキル「Modern Web Guidance」を公開

Googleは2026年5月19日、Google I/O 2026に合わせて、モダンなWeb開発を支援するエージェントスキル「Modern Web Guidance」を早期プレビューとして公開した。

gihyo.jp

Google検索、AI対応の新しい検索ボックスを発表、AIモードにGemini 3.5 Flashも導入

Googleは2026年5月19日、Google I/O 2026に合わせて、検索におけるAI機能の更新を発表した。

gihyo.jp

Zed、エージェントをターミナルで管理できる「ターミナルスレッド」を追加 ―Zed内でClaude Codeサブスクリプション利用が可能に

Zed Industriesは2026年5月20日、同社が開発するコードエディタZedの最新バージョン1.3.5で、エージェントパネルでターミナルをスレッドとしてホストする「ターミナルスレッド（Terminal Threads）」の機能を追加したことを発表した。

gihyo.jp

新カテゴリ「Googlebook」が目指すプレミアムなデスクトップ体験と開発者への影響

5月12日、Googleは開発者向けのイベント「The Android Show: I/O Edition」を開催して、新たなパーソナルコンピュータとなる「Googlebook」を発表しました。

gihyo.jp

Google、Antigravity 2.0とGemini APIのManaged Agentsを発表、AI StudioはAndroidアプリ開発に対応

Googleは2026年5月19日、Google I/O 2026で開発者向けAIツール群の更新を発表した。主な発表には、Google Antigravity 2.0、Gemini APIのManaged Agents、Google AI StudioのAndroid対応やWorkspace連携などが含まれる。

gihyo.jp

Google、Gemini 3.5 FlashとGemini Omni Flashを発表、24時間体制で作業を支援する「Gemini Spark」も

Googleは2026年5月19日、年次開発者会議「Google I/O 2026」で、次世代モデルファミリー「Gemini 3.5」と、動画生成・編集に向けた新モデルファミリー「Gemini Omni」を発表した。

gihyo.jp

［速報］GitHub、内部リポジトリへの不正アクセスを調査　従業員端末の侵害を確認

GitHubは2026年5月20日、日本時間8時48分、GitHubの内部リポジトリへの不正アクセス疑いを調査していると公式Xアカウントに投稿した。

gihyo.jp

第911回　Waylandで行こう[Kubuntu編]

今回はKubuntu 26.04 LTS以降を使用するのに必須の知識であるインプットメソッドの変更点をお知らせします。

gihyo.jp

Linux 7.1-rc4リリース ―Linus、AIツールによるバグ報告増加に警告

Linus Torvaldsは5月17日、開発中の次期Linuxカーネル「Linux 7.1」の4本目のリリース候補版「Linux 7.1-rc4」を公開した。

gihyo.jp

Cursor、大幅進化したコーディングエージェント向けモデル「Composer 2.5」をリリース ―SpaceXAIと協業し10倍の計算資源を投入

Anysphereは2026年5月18日、コーディングエージェント向けAIモデルの最新バージョンComposer 2.5をリリースした。

gihyo.jp

第3回 メモリとガードレールで賢く安全に ～Memory（メッセージ履歴・ワーキングメモリ）/Guardrails（PromptInjectionDetector）

今回の記事では、Memory機能で「賢さ」を、Guardrails機能で「安全性」をそれぞれ付与し、実用レベルへ引き上げます。前回同様、本稿は実装1行ずつではなく「AIエージェントに記憶や安全装置を持たせるとはどういうことか」という汎用的な概念を中心に解説します。

azukiazusa のテックブログ2

Hermes Agent と Grok の統合を試してみた

Hermes Agent は v0.14.0 で xAI の Grok モデルとの統合できるようになりました。Grok モデルは X（旧 Twitter）の投稿を検索できる `x_search` ツールを使えることが特徴で、リアルタイムでトレンドを把握したり、最新の情報を取得できることが強みとなっています。この記事では Hermes Agent と Grok の統合を試してみた様子を紹介します。

gihyo.jp

GitHub Copilotプラン変更で変わるもの、変わらないもの ――Software Design 2026年6月号第1特集「GitHub Copilot完全入門」追録

Software Design 2026年6月号の第1特集「GitHub Copilot完全入門」の制作が終わった後、いくつかの更新や変更がありました。本記事では、このアップデートについて解説したうえで、特集の内容と現在の状況との差分を整理します。

gihyo.jp

Xが未認証アカウントからの投稿を制限、1日50件までに

Xは2026年5月16日に利用制限を変更し、未認証アカウントからのオリジナル投稿を1日あたり50件、返信を200件とする制限を開始したことがユーザーの投稿やメディアにより報告されている。

gihyo.jp

Vercel、AIエージェントのためのプログラミング言語「Zero」を公開

Vercel Labsは2026年5月16日、AIエージェントによるプログラミングに向けて設計された新しいプログラミング言語「Zero」をApache 2.0ライセンスのもと公開した。

gihyo.jp

AI生成のマージリクエストに潜む、隠れたコスト［前編］

AI生成コードの増加により、レビュー負荷の集中や設計時間の減少といった課題が生じています。本稿では、その実態と背景を整理するとともに、それらをどのように可視化し、レビューキャパシティを前提としたワークフロー設計へ落とし込むべきか、前後編に分けて紹介します。

gihyo.jp

Google AI Studioでアプリを作成し、公開までやってみよう

本記事では、バイブコーディングを試せる「Google AI Studio（グーグルエーアイスタジオ）」の使い方を、2回にわたって解説します。

azukiazusa のテックブログ2

Generative UI のためのフレームワーク OpenUI

OpenUI は Generative UI を構築するためのフレームワークです。OpenUI 言語と呼ばれる独自の宣言型言語を使用して、AI が UI を構築するための指示を与えるという新しいアプローチを提供します。この記事では OpenUI を使用して Generative UI を実装する方法について解説します。

gihyo.jp

VS Code 1.120リリース、Agentsウィンドウの安定版向けプレビューを開始

Microsoftは2026年5月13日、Visual Studio Code（以下VS Code）のバージョン1.120をリリースした。今回のリリースでは、エージェントを使った開発を支援するAgentsウィンドウの安定版向けプレビューを開始している。

gihyo.jp

GitHub、デスクトップ用のCopilotアプリをテクニカルプレビューとして公開

GitHubは2026年5月15日、GitHub Copilotアプリのテクニカルプレビュー開始を発表した。GitHubのIssueやプルリクエストなど、実際の開発作業にひも付く文脈を起点に、エージェントによる開発セッションを立ち上げ、コード変更からレビュー、検証、プルリクエスト作成までを1つのデスクトップアプリ内で進められるようになる。

gihyo.jp

ChatGPTモバイルアプリ内でCodexプレビュー版が利用可能に

OpenAIは2026年5月14日、ChatGPTのモバイルアプリ内で実行できるCodexをプレビュー版としてリリースした。

gihyo.jp

Ubuntuにおける“Copy Fail”亜種への対応、HWE virtualization stack

“Copy Fail”に類似する脆弱性が連続して出てきている状態なので、まず状況を整理しましょう。

gihyo.jp

nginxに18年前から存在する重大な脆弱性が発見される

オープンソースのWebサーバーnginxで2026年5月13日、2008年から存在するヒープバッファオーバーフローを引き起こす緊急（Critical）を含む4つの脆弱性が報告された。

gihyo.jp

SUSEが掲げる「Open Future」とは何か、SUSECON 2026で見えたオープン戦略の本質

2026年4月20日から23日にかけて、SUSEはチェコ・プラハで年次カンファレンス「SUSECON 2026」を開催した。

gihyo.jp

Anthropic、Claude有料プランでプログラムによる利用専用の月間クレジットを導入へ

Anthropicは2026年5月14日、Claudeの有料プランでプログラムによる使用（Programmatic use）のための専用の月間クレジットを2026年6月15日より導入することを発表した。

gihyo.jp

Google Workspace StudioにNotebookLM統合、「NotebookLMに質問」ステップでノートブックをフローから参照可能に

Googleは2026年5月12日、Google Workspace Studioの自動化フローからNotebookLMを利用できる新しいステップ「NotebookLMに質問（Ask NotebookLM）」の提供を開始した。

gihyo.jp

Microsoft 365 Copilot、アプリ内アクセスを整理へ —— 画面右下のCopilotボタンと新たな操作体系を導入

Microsoftは5月11日、Word、Excel、PowerPointなどのMicrosoft 365アプリで、Microsoft 365 Copilotの呼び出し方とキーボード操作を見直すアップデートを発表した。

gihyo.jp

ATmosphereConf 2026レポート: Blueskyの先にある、ATプロトコルエコシステムの現在地点

2026年3月26日から29日にかけて、カナダ・バンクーバーのブリティッシュコロンビア大学（UBC）キャンパスで「ATmosphereConf 2026」が開催されました。2025年シアトルでの初開催に続く2回目で、コミュニティ主導のイベントです。

gihyo.jp

Tensor G6はピーク性能を追い求めない？ SoCもユーザ体験重視の時代に

例年、この時期になると次期OSの新機能に注目が集まりますが、今年は少し様相が異なります。Pixel 11に搭載されていると言われている「Tensor G6」に関する踏み込んだ情報が次々とリークされています。今回は、こうした情報をまとめておきます。

gihyo.jp

SUSEは「Linux運用基盤企業」へ進化する ——ロードマップから見えてきた次世代Linux戦略

2026年4月20日から23日にかけて、SUSEはチェコ・プラハで年次カンファレンス「SUSECON 2026」を開催した。

gihyo.jp

Google DeepMind、AI対応ポインター「AI-Pointer」の実験デモを公開

Google DeepMindは2026年5月12日、マウスポインターをAI時代のインターフェースとして捉え直す取り組みを発表した。

gihyo.jp

第910回　GPGより簡単でZIPより安全。シンプルな暗号化ツール「age」を試す

今回は簡単に使える暗号化ツールであるageを紹介します。

gihyo.jp

Vercel Labs、Markdownの表示・操作体験を定める仕様案「MDXG」を提案

Vercel LabsのChris Tate氏は2026年5月11日、Markdown文書をアプリケーションやエディターがどのように表示し、操作できるようにするかを定める仕様案「Markdown Experience Guidelines（MDXG）」をGitHubで公開したことを案内した。

gihyo.jp

npmワーム攻撃「Mini Shai-Hulud」によりTanStackなど160以上のパッケージがマルウェアに感染

4月末ごろからnpmパッケージを標的にした「Mini Shai-Hulud キャンペーン」と呼ばれるソフトウェアサプライチェーン攻撃により、MistralやTanStackといったパッケージに感染が広がっていることが複数のセキュリティ監視組織によって報告されている。

gihyo.jp

ソフトウェアの設計段階からサイバーセキュリティ対応機能を備える「OpenAI Daybreak」発表

OpenAIは2026年5月11日、AIを活用した新たなセキュリティ対応戦略「OpenAI Daybreak」を発表した。

gihyo.jp

9/1～3開催「DroidKaigi 2026」チケット販売開始

Android開発者コミュニティによる技術カンファレンス「DroidKaigi 2026」が、2026年9月1日（火）～3日（木）に開催される。

gihyo.jp

第270回　MySQL Shellのプロンプトを改造してみる

MySQLのコマンドラインといえば、長らくmysqlクライアントが中心でした。シンプルで軽量なツールである一方、その分だけユーザー側で工夫する余地も多く、特にプロンプトのカスタマイズはこの連載でもたびたび取り上げられてきました。

gihyo.jp

Google AI Studioにログインして簡単なアプリを秒速で作ってみよう

本記事では、バイブコーディングを試せる「Google AI Studio（グーグルエーアイスタジオ）」の使い方を、2回にわたって解説します。

gihyo.jp

第62回　Linuxカーネルのコンテナ機能 - cgroup v2から使うメモリコントローラ（7）

第56回から続けてcgroup v2から使うメモリコントローラの機能を紹介してきました。今回も引き続き、まだ紹介していない機能を紹介していきます。

JSer.info

2026-05-11のJS: Node.js 26.0.0、Rolldown 1.0、Jest v30.4.0

JSer.info #771 - Node.js 26.0.0がリリースされました。 Node.js — Node.js 26.0.0 (Current) Temporal APIがデフォルトで有効化され、V8 14.6への更新によりMap/WeakMapのgetOrInsert()/getOrInsertComputed()やIteratorのconcat()メソッドが追加されています。--experimental-transform-typesフラグの削除やmodule.register()のruntime-deprecateなどの破壊的変更も含まれています。 Node.js 26は、現在のLTSリリーススケジュールに従う最後のメジャーリリースとなります。Node.js 27からは年1回のリリースに変更され、すべてのリリースがLTSとなる新しいスケジュールに移行します。 Evolving the Node.js Release Schedule また、Node.js 20.xがEOLとなりセキュリティパッチを含むアップデートが提供されなくなりました。 Node.js — End-Of-Life Rolldown 1.0がリリースされました。 Announcing Rolldown 1.0 | VoidZero RolldownはRustで書かれたJavaScript/TypeScriptバンドラーです。 Jest v30.4.0がリリースされました。 Release v30.4.0 · jestjs/jest Node v24.9+でES Modulesに対するrequire()をサポートし、Node v26のTemporal APIに対応するfake timersが追加されています。また、jest.config.mtsのサポート、プロジェクト単位のverbose/silent設定の追加、React 19のpretty-formatサポートなども含まれています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release v8.0.0 · avajs/ava github.com/avajs/ava/releases/tag/v8.0.0 JavaScript testing nodejs library ReleaseNote AVA v8.0.0リリース。 const {default: test} = require('ava')への変更が必要。 js/mjsに変更され、テストファイルはimport()経由で読み込まれるように変更。 test.skipIf()/test.runIf()を追加。 *.tsbuildinfoファイルの変更をWatchモードで無視、TAPレポーターのエラー名復元処理の改善など。 Node.js — Node.js 26.0.0 (Current) nodejs.org/en/blog/release/v26.0.0 nodejs ReleaseNote Node.js 26.0.0(Current)リリース。 getOrInsert()/getOrInsertComputed()やIteratorのconcat()メソッドが追加。 http.Server.prototype.writeHeader()の削除、レガシーストリームモジュール(_stream_wrapなど)の削除。 --experimental-transform-typesフラグの削除、module.register()をruntime-deprecateなど Release 0.18 | StyleX stylexjs.com/blog/v0.18 React css library ReleaseNote StyleX v0.18リリース。 stylex.env APIの追加、プロジェクトの雛形を作成するcreate-stylex-app CLIの追加。 stylex.attrs APIの復活、Chrome DevTools拡張の提供。 sx={}構文のサポート、defineVarsの自己参照変数のサポート、stylex.whenが属性セレクタもサポート、CSS Layersの制御の改善、ESLintプラグインの修正など。 Node.js — End-Of-Life nodejs.org/en/about/eol nodejs news Node.js 20.xがEOLとなりセキュリティパッチを含めたアップデートが提供されなくなった。 Chrome 148  |  Release notes  |  Chrome for Developers developer.chrome.com/release-notes/148 Chrome browser ReleaseNote Chrome 148リリース。 container-name単独でのコンテナクエリ、@supportsのat-rule()サポート、revert-ruleキーワードを追加。 text-decoration-skip-ink: all、<video>/<audio>要素のloading="lazy"属性をサポート。 contentTypeを追加。 New in Chrome 148  |  Blog  |  Chrome for Developers Node.js — Node.js 26.1.0 (Current) nodejs.org/en/blog/release/v26.1.0 nodejs ReleaseNote Node.js 26.1.0リリース。 node:ffiモジュールを追加し、--experimental-ffiフラグで動的ライブラリの読み込みとネイティブシンボルの呼び出しに対応。 crypto.randomUUIDv7()の追加、crypto.diffieHellman()がキーデータを受け入れるように変更。 fs.stat()にsignalオプションを追加、statfsがfrsizeフィールドを公開。 IncomingMessageにreq.signalを追加、BufferのindexOf()/lastIndexOf()にendパラメータを追加。 AbortSignal.timeoutのモックタイマー対応を追加、util.styleText()が16進数カラーをサポートなど Release v30.4.0 · jestjs/jest github.com/jestjs/jest/releases/tag/v30.4.0 jest test ReleaseNote Jest v30.4.0リリース。 require()をサポート、Node v26のTemporal APIに対応するfake timersの追加。 jest.config.mtsのサポート、--collect-testsフラグの追加、workerGracefulExitTimeoutオプションの追加など。 verbose/silent設定の追加、React 19のpretty-formatサポートなど。 projects設定でのカバレッジレポートの修正、structuredCloneでのtoStrictEqualの修正、ESMとWebAssemblyのimport時のデッドロックの修正など。 Electron 42 | Electron www.electronjs.org/blog/electron-42-0 Electron ReleaseNote Electron 42リリース。 UNNotification APIに変更されコード署名が必須に、postinstallでElectronバイナリをダウンロードする挙動を削除。Session.clearStorageData()からquotasオブジェクトを削除。 view.setBounds()のアニメーション対応、view.setBackgroundBlur()によるネイティブ背景ぼかしのサポート。 Notification.getHistory()、globalShortcut.setSuspended()、ヒーププロファイリングのサポートなど。 Release v1.16.0 · axios/axios github.com/axios/axios/releases/tag/v1.16.0 HTTP library JavaScript ReleaseNote axios v1.16.0リリース。 maxBodyLength/maxContentLengthの制限を強制、proxyリクエスト時のユーザー指定Hostヘッダの保持などの破壊的変更を含む。 parseProtocolがコロン区切りを厳密に要求するよう変更されている。 AxiosError.ECONNREFUSEDの追加、encodeヘルパーのexportなど。 Announcing Rolldown 1.0 | VoidZero voidzero.dev/posts/announcing-rolldown-1-0 Rust rollup bundler ReleaseNote vite Rolldown 1.0リリース。 Chrome 149 beta  |  Blog  |  Chrome for Developers developer.chrome.com/blog/chrome-149-beta?hl=en Chrome browser ReleaseNote Chrome 149 betaリリース。 shape-outsideプロパティでpath()/shape()/rect()/xywh()関数のサポート。 pathLength属性のCSSプロパティ化、image-rendering: crisp-edgesのサポート。 Intl.Locale.prototype.variantsの追加、プログラムによるスクロールメソッドがPromiseを返すように変更。 RequestにisReloadNavigation属性を追加、WebSocket接続中でもbfcacheを利用可能に。 focus-without-user-activation、rawgamepadinputchangeイベントを追加。 ソフトウェア、ツール、ライブラリ関係 sqlfu sqlfu.dev/ SQL TypeScript tool database library cloudflare SQLファイルを中心としたTypeScript用のSQLiteデータベース開発ツールキット。 definitions.sqlでスキーマを定義しsqlfu draftでマイグレーションを生成、SQLクエリから型安全なTypeScriptラッパーを生成する。 fabon-f/temporal-polyfill-lite: Lightweight Temporal polyfill github.com/fabon-f/temporal-polyfill-lite JavaScript library polyfill ECMAScript TypeScript Temporal APIのpolyfillライブラリ。 open-circle/formisch: The lightweight, schema-first, and fully type-safe form library for React, Solid, Vue, Svelte and more. github.com/open-circle/formisch library React Vue Svelte Solid TypeScript React/Solid/Vue/Svelte/Preact/Qwikに対応したスキーマファーストのフォームライブラリ。 createFormや<Form />/<Field />などのAPIでフォームの状態を管理する。

gihyo.jp

Linuxカーネルの論理バグ“Copy Fail”が示した論理バグとゼロコピーの危険な連鎖

2026年4月30日付けで公開されたLinuxカーネルの脆弱性「CVE-2026-31431」―通称“Copy Fail”は、ローカルユーザが非常に簡単な方法でroot権限を奪取できてしまうことに加え、対象範囲の広さから世界中のLinuxユーザに衝撃を与えた。

gihyo.jp

8/21、22に広島で開催「PyCon JP 2026」Call for Proposals開始

2026年8月21日（金）、22日（土）に開催されるPyCon JP 2026のCall for Proposals（CfP）が開始されている。

gihyo.jp

Blenderで視点の動かし方を少しだけ詳しく見てみよう

第76回目は、Blenderで視点を動かす際、知っておくと役に立つであろう機能について見ていきます。

gihyo.jp

第2回 AIエージェントの基礎を作ろう ～Agent・Tools・Workflow・Channels / HITL (Human In The Loop)

今回は、メール返信エージェントの基本形を実装して動かしてみます。

azukiazusa のテックブログ2

CSS Grid Layout の gap を装飾する `column-rule` と `row-rule`

グリッドレイアウトで「列の間に線を引く」といった装飾は多くの場面で必要になります。しかし、flexbox や grid で列の間に線を引くためのプロパティは存在せず、ボーダーや背景色を利用して線のように見せるといったワークアラウンドが必要でした。CSS Grid Layout の gap を装飾する `column-rule` と `row-rule` を使用することにより、flexbox や grid で簡単に列や行の間に線を引くことができるようになります。

gihyo.jp

ubuntu.comへのDDoSとその対処、“copyfail”問題への対応、Ubuntu 26.10 “Stonking Stingray”の開発 / ドキュメント公開サイトの整理

5月1日前後から発生していた、外部の攻撃者によるものと見られるDDoS攻撃によるubuntu.comインフラストラクチャの可用性問題についての対策状況が公開されています。

gihyo.jp

Google検索のAIモードとAIによる概要、Webサイトへのリンクを見つけやすくする更新を順次提供

Googleは2026年5月6日、Google検索の生成AI機能である「AIモード（AI Mode）」と「AIによる概要（AI Overviews）」のアップデートを段階的に提供し始めた。

gihyo.jp

Anthropic、SpaceXと提携、Claude Codeの利用制限を大幅に緩和

Anthropicは2026年5月6日、SpaceXとのパートナーシップに合意したことを発表した。

azukiazusa のテックブログ2

兄弟要素のインデックスを返す CSS 関数 sibling-index()

`sibling-index()` は要素の兄弟要素の中でのインデックスを返します。`sibling-index()` 関数により取得したインデックスを使用することにより、スタッガー（時間差）アニメーションや、色相を段階的に変えるといった、兄弟要素の位置に基づいたスタイリングが可能になります。これまでは JavaScript を使用して実装する必要があったような効果も、純粋な CSS で実現できるようになります。

azukiazusa のテックブログ2

Codex を利用した iOS アプリ開発を試してみた

私自身は Web 開発の経験はありますが、iOS アプリ開発の経験はほとんどありません。このようなバックグラウンドを持つ私がコーディングエージェントである Codex を利用して iOS アプリ開発をどこまで進められるか試してみました。コーディングエージェントは単に中身を見ずにアプリケーションを作るいわゆる「バイブコーディング」的な使い方だけでなく、なぜこのコードが必要なのか？より良い設計にできないか？といったことを随時質問しながら進める学習用途の使い方が中心です。

gihyo.jp

Codexアプリのペットを孵化させる　hatch-petスキルで動くマスコットを作る

この記事では、独自のペットを孵化させるためのhatch-petスキルを紹介します。

azukiazusa のテックブログ2

Playwright CLI で AI エージェントに視覚的なフィードバックを与える

Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すことができます。AI エージェントはこのアノテーションが残された要素を簡単に特定できるため、どのコードを修正すればよいのかを判断しやすくなります。

gihyo.jp

OpenAI、Codexアプリの作業状況を知らせるコンパニオン「Codex pets」をリリース

OpenAIは米国時間2026年5月1日、Codexアプリ向けの新機能として「Codex pets」を発表した。

gihyo.jp

VS Code 1.118リリース、Copilot CLIのリモート制御やCopilotの共同作成者追加をデフォルト化 ——プロンプトを分析する拡張機能も公開

Microsoftは2026年4月29日、Visual Studio Codeのバージョン1.118をリリースした。

@sakupi01.com blog

本サイトにおける Web UI のプラクティス #2 Typography

本サイトの Typography のプラクティスを紹介します。ユーザの設定を仮定せず、ブラウザ設定・画面幅・解像度・OS テキストスケールに段階的に応える Typography の組み方を、本サイトでの実装と合わせて整理します。本エントリは個人連載の一部です。

gihyo.jp

予測不可能な時代を生き抜くSUSEの戦略：レジリエンスを実現するデジタル主権と選択肢

2026年4月20日から23日にかけて、SUSEはチェコ・プラハで年次カンファレンス「SUSECON 2026」を開催した。

gihyo.jp

Google、オープンウェイトLLMの安全性を内部状態から検証するツール「AMS」を公開

Googleは2026年4月27日、オープンウェイトモデルを導入する前に安全性を検証するツール「AMS（Activation-based Model Scanner）」を、オープンソースとしてリリースした。

gihyo.jp

Ubuntu 26.10 “Stonking Stingray”の開発 / AIの導入、Inference Snaps

26.10の開発を踏まえて、Ubuntuにおける今後のAIの利用について展望が表明されています。

gihyo.jp

第129回　MySQL 9.7.0 LTSリリース、PostgreSQLエンタープライズ・コンソーシアム成果報告会がまもなく

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

Microsoft、ターミナル用エディター「Edit」バージョン2.0.0をリリース　——構文ハイライトを追加

Microsoftは2026年4月28日、ターミナル用テキストエディター「Edit」のバージョン2.0.0をリリースした。

gihyo.jp

Microsoft、DOS 1.0のソースコードと開発関連資料を公開

Microsoftは2026年4月28日、86-DOS 1.00/PC-DOS 1.00のカーネルコードを含む最も初期のDOS開発に関する資料をGitHub上で公開した。

gihyo.jp

Fedora Linux 44リリース、デフォルトデスクトップにGNOME 50 / KDE Plasma 6.6を採用

Fedoraプロジェクトは4月28日、「Fedora Linux 44」の一般提供を開始した。

gihyo.jp

Zed 1.0リリース ―「完成」を意味するものではなく、多くの開発者がすぐに馴染めるようになった「転換点」、週次リリースは継続

Zed Industriesは2026年4月29日、同社が開発するオープンソースのコードエディタZedの最新バージョン1.0をリリースした。

gihyo.jp

AIエージェントコーディング向けターミナルWarpがオープンソースに

Warp Inc.は2026年4月28日、同社が提供するAIエージェントコーディング向けターミナルエミュレータWarpをオープンソース化したことを発表した。

gihyo.jp

pnpm 11.0リリース ——新規公開の依存パッケージをデフォルトで1日後に解決対象に

npmと同様に使えるパッケージマネージャー「pnpm」のメジャーバージョンとなるpnpm 11.0が、2026年4月28日に公開された。

gihyo.jp

Geminiアプリのチャット内でGoogleドキュメントやWord、Excel、PDF、LaTeXなどのファイルが直接生成可能に

Googleは2026年4月29日、Geminiアプリのチャット内でPDFやMicrosoft Word / Excelなどのさまざまな形式のファイルを直接生成してダウンロードできるようになったことを発表した。

gihyo.jp

Pythonによるベクトル検索の基礎と実践 ～Embedding、Vector DB～

2026年4月の「Python Monthly Topics」は、Pythonを使ったベクトル検索の基礎と実践について紹介します。

gihyo.jp

ITインフラの基礎「サーバーの構成要素、仮想化、コンテナ技術」を押さえよう

ネットワークを通じてSaaSやSNSなどさまざまなITサービスを提供するために、サーバーは欠かせない存在です。本章では、ITインフラの基本であるサーバーが、どのような要素で構成されているかしっかり押さえます。そして、近年欠かせない仮想化とコンテナの技術によるサーバー構築を体験してみましょう。

gihyo.jp

第909回　Ubuntu 26.04 LTSの変更点 ［24.04→26.04 LTS編］

4月23日（現地時間）にリリースされたUbuntu 26.04 LTSの、24.04 LTSからの注意すべき変更点をお知らせします。

gihyo.jp

Android 17で見えた「充電」と「マルチタスク」の新しいバランス

Android 17の開発は着実に進み、最終ベータとなるBeta 4がリリースされています。今回は新機能のうち、「Priority Charging（優先充電）」とマルチタスクの進化について取り上げます。

JSer.info

2026-04-29のJS: Node.js 24.15.0(LTS)、Rspack 2.0、pnpm 11

JSer.info #770 - Node.js 24.15.0(LTS)がリリースされました。 Node.js — Node.js 24.15.0 (LTS) require(esm)とモジュールコンパイルキャッシュが安定版(Stable)に昇格しています。また、SQLiteがリリース候補(Release Candidate)段階に進みました。そのほかには、--max-heap-sizeオプションの追加、SocketのsetTOS/getTOSメソッドの追加、fs.statのthrowIfNoEntryオプションの追加などが含まれています。 Rspack 2.0がリリースされました。 Announcing Rspack 2.0 - Rspack @rspack/coreなどのコアパッケージをPure ESMパッケージへ移行し、CommonJSビルドが削除されています。ビルドパフォーマンスの改善、CommonJSのrequire分割代入やプロパティアクセスのTree Shakingの改善が含まれています。また、/*#__NO_SIDE_EFFECTS__*/アノテーションのサポート、library.typeにmodern-moduleの追加、React Server Componentsの実験的サポートなども追加されています。 pnpm v11.0.0がリリースされました。 Release pnpm 11 · pnpm/pnpm Pure ESMパッケージへ移行し、Node.js 18-21のサポートが終了しています。.npmrcは認証/レジストリ設定のみに限定され、その他の設定はpnpm-workspace.yamlへ移行されています。npm CLIへの依存を排除してpnpm publish/pnpm login/pnpm auditがネイティブ実装に変更され、pnpm ci/pnpm sbom/pnpm clean/pnpm pack-appコマンドが追加されています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン v1.17.0 | React Aria react-aria.adobe.com/releases/v1-17-0 React library ReleaseNote React Aria v1.17.0リリース。 react-ariaとreact-statelyに統合して、依存パッケージ数を削減。 react-aria-components/Buttonなど)のサポート、マイグレーション用のcodemodも提供されている。 commitBehavior propの追加、SelectにshouldCloseOnSelectオプションの追加など。 Node.js — Node.js 24.15.0 (LTS) nodejs.org/en/blog/release/v24.15.0 nodejs ReleaseNote Node.js 24.15.0リリース。 require(esm)とモジュールコンパイルキャッシュが安定版に昇格、SQLiteがリリース候補段階へ進んだ。 --max-heap-sizeオプションの追加、SocketのsetTOS/getTOSメソッドの追加、fs.statのthrowIfNoEntryオプションの追加など。 Bun v1.3.13 | Bun Blog bun.com/blog/bun-v1.3.13 Bun ReleaseNote Bun v1.3.13リリース。 bun testに各テストファイルを独立したグローバル環境で実行する--isolateフラグを追加。 --parallel、CIジョブ間でテストを分割する--shard、gitの変更に影響されたテストのみ実行する--changedフラグを追加。 bun installでtarball展開をストリーミング化してメモリ使用量を削減、Isolated linkerによりmonorepoのインストール速度を改善。 node:crypto対応、SubtleCryptoでのX25519鍵導出に対応。 ws+unix:///wss+unix://のUnixドメインソケット接続をサポート。 Bun.serve()でRangeリクエストのレポート、zlib-ngを使いgzip圧縮のパフォーマンス改善など Announcing Rspack 2.0 - Rspack rspack.rs/blog/announcing-2-0 rspack ReleaseNote Rspack 2.0リリース。 @rspack/coreなどのコアパッケージをPure ESMパッケージへ移行、CommonJSビルドを削除。 @rspack/dev-serverの依存数の削減、トップレベルのtargetオプションがLoaderやMinimizer Pluginに自動継承されるように変更。 require分割代入やプロパティアクセスのTree Shakingを改善。 /*#__NO_SIDE_EFFECTS__*/アノテーション、Module Federationの共有依存のExportレベルでのTree Shakingに対応。 import.meta/import deferなどをそのまま出力できるように、library.typeにmodern-moduleを追加。 #/サブパスエイリアスをサポート、swc-loaderのdetectSyntaxオプションの追加など Fresh 2.3: Zero JS by default, View Transitions, and Temporal support | Deno deno.com/blog/fresh-2.3 deno vite ReleaseNote Freshフレームワークのv2.3リリース。 app.ws()によるWebSocketのサポート、Vite統合の改善。 trustProxyオプション)の追加など。 Release pnpm 11 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.0.0 pnpm ReleaseNote pnpm v11.0.0リリース。 .npmrcは認証/レジストリ設定のみに限定し、その他の設定はpnpm-workspace.yamlへ移行。 minimumReleaseAgeのデフォルトを1日に変更、allowBuildsに設定を統一、ストアのインデックスにSQLiteを使用するように変更。 pnpm publish/pnpm login/pnpm auditをネイティブ実装に変更。 pnpm ci/pnpm sbom/pnpm clean/pnpm pack-appコマンドの追加。 アーティクル Manage agent skills with GitHub CLI - GitHub Changelog github.blog/changelog/2026-04-16-manage-agent-skills-with-github-cli/ GitHub CLI AI Tools GitHub CLIにgh skillコマンドが追加され、Agent Skillsの検索/インストール/管理/公開ができるようになった。 サイト、サービス、ドキュメント vercel-labs/wterm: A terminal emulator for the web github.com/vercel-labs/wterm WebAssembly library terminal browser Webブラウザ向けのターミナルエミュレータライブラリ。 Introducing Claude Design by Anthropic Labs \ Anthropic www.anthropic.com/news/claude-design-anthropic-labs AI Design Tools Anthropic Labsが公開したデザインツール。 Trees, from Pierre trees.software/ React library UI accessibility ファイルツリーをレンダリングするReactライブラリ。 ソフトウェア、ツール、ライブラリ関係 PerryTS/perry: A native TypeScript compiler written in Rust. Compiles TypeScript directly to executables using SWC and LLVM. github.com/PerryTS/perry TypeScript Rust compiler Tools Rustで書かれたTypeScriptのネイティブコンパイラ。 endevco/aube: A fast Node.js package manager github.com/endevco/aube nodejs package Rust Tools Rustで書かれたNode.js向けのパッケージマネージャー。 pnpm-lock.yaml/package-lock.json/npm-shrinkwrap.json/yarn.lock/bun.lockなどの既存のロックファイル形式の読み書きに対応している。 TSRX | TypeScript Language Extension for Declarative UI tsrx.dev/ TypeScript UI compiler React Solid 宣言的UIのためのTSXの拡張言語。 rstackjs/connect-next: An actively maintained fork of Connect. github.com/rstackjs/connect-next nodejs library TypeScript Node.jsのHTTP middleware framework connect をメンテナンスするfork。 TypeScriptで書き直され、ESモジュールとして名前付きexportで提供される。依存関係の更新や削除などが行われている

azukiazusa のテックブログ2

`contrast-color()` 関数を使用した自動コントラスト調整

`contrast-color()` 関数は、指定した色に対して `white` もしくは `black` のどちらがより高いコントラスト比を持つかを自動的に判断し、適切な色を返す関数です。動的に色が変わる場合やユーザーがカスタムテーマを使用する場合など、常にコントラスト比を確保するのが難しい状況で役立ちます。

gihyo.jp

Linux 7.1-rc1がリリース ―“削除した古いコードを補ってあまりある新機能とコードが追加された”

Linus Torvaldsは4月26日（米国時間）、次期Linuxカーネル「Linux 7.1」の最初のリリース候補版となる「Linux 7.1-rc1」を公開した。

gihyo.jp

GitHub Copilotがトークン消費量ベースの料金体系に移行、コードレビューはGitHub Actions minutesを消費する扱いに

GitHubは2026年4月27日、GitHub Copilotのすべてのプランが2026年6月1日からトークン使用量ベースの課金に移行することを発表した。

gihyo.jp

「Python Boot Camp」6/6に広島市で開催

Python Boot Campは、一般社団法人PyCon JP Associationが主催するPythonを学べるチュートリアル講座。

gihyo.jp

高校数学から最先端AIまで ——『独学で鍛える数理思考』全12章の全体像

本稿ではまず、2冊12章を一望できる「全体像」をお見せします。どの章が、どんな数学を積み重ねて、どの先端技術にたどり着くのか、全体像をざっとご覧いただきます。そのうえで、本シリーズがタイトルとしている「数理思考」をどのような力として捉え、どのように鍛えていくのかを、両書の中身に即して解説していきます。

gihyo.jp

Hugging Face、機械学習の論文調査から学習実行まで進めるAIエージェント「ml-intern」を公開

Hugging Faceは2026年4月21日、機械学習（ML）研究者が日常的に行う論文調査、データセット確認、学習実行、評価といった研究ループを支援するAIエージェント「ml-intern」を公開した。

gihyo.jp

OpenAI、GPT-5.5の利用法とプロンプトガイドを公開　——達成条件と停止条件の明確化を重視

OpenAIは2026年4月24日、OpenAI DevelopersでGPT-5.5の開発者向けガイド「Using GPT-5.5」とプロンプトガイド「Prompt guidance」を公開した。

gihyo.jp

第1回 AIエージェントを作ってみよう ～Mastraを使って

第1回はAIとAIエージェントの違いを整理し、開発フレームワークのエコシステムを俯瞰した上で、本連載の教材としてMastraを選んだ理由と完成形のデモを紹介します。

azukiazusa のテックブログ2

AI エージェントが UI を安全に生成して描画するためのプロトコル A2UI とは？

Google が提唱する A2UI（Agent-to-UI）プロトコルは、AI エージェントが安全に UI を生成してクライアントに送信し、クライアントがそれを描画するための標準的な方法を提供します。A2UI は、AI エージェントがテキストの応答を返す代わりに宣言的なコンポーネント定義を返すことにより、クライアントはネイティブなウィジェットを使用して安全に UI をレンダリングできます。

azukiazusa のテックブログ2

事前に定義した UI を AI に生成させる json-render を試してみた

AI に UI を生成させる Generative UI の手法が注目されています。しかし、AI の出力が予測不可能であるため、意図しない UI が生成されてしまうリスクもあります。json-render はあらかじめ定義したコンポーネントやアクションのカタログに基づいて AI に JSON を生成させることで、AI が誤った構造の UI を生成するリスクを減らし、アプリケーションの一部として自然に統合された UI を提供するフレームワークです。

gihyo.jp

DeepSeek-V4プレビュー版がWeb、APIで利用可能に

中国DeepSeekは2026年4月24日、同社のフロンティアモデルの最新バージョンDeepSeek-V4シリーズをプレビュー版としてリリースした。

gihyo.jp

VS Code 1.117リリース、GitHub Copilot Business/EnterpriseプランでもBYOKで外部モデルを利用可能に

Visual Studio Code1.117が2026年4月22日にリリースされた。今回のリリースでは、外部モデルを追加するBring your own language model key（BYOK）がGitHub Copilot BusinessおよびEnterpriseプランでも利用できるようになった。

gihyo.jp

OpenAI、新モデルGPT-5.5をリリース ―エージェントコーディング、コンピュータユース、知的作業、科学研究向けの性能を大幅に強化

OpenAIは2026年4月23日、同社のフロンティアモデルの新バージョンGPT-5.5をリリースした。

blog.jxck.io

Compression Dictionary Transport 用の Toolkit を公開した

Compression Dictionary Transport(CDT) は、まだ新しいプロトコルのため専用のツールが不足している。それらを開発し公開したので、紹介する。

gihyo.jp

Ubuntu 26.04 LTS “Resolute Raccoon”のリリース

4月23日、Ubuntu 26.04 LTS “Resolute Reccoon”（⁠決然としたアライグマ）がリリースされました。

gihyo.jp

Google、Workspace Intelligenceを発表 ―Google Workspaceアプリ、コンテンツの高度な利用をAIエージェントが支援

Googleは2026年4月22日、米国ラスベガスで開催中の年次イベント「Google Cloud Next '26」において、Google WorkspaceのアプリにAIエージェントを組み合わせてユーザーの業務を支援する「Workspace Intelligence」を発表した。

gihyo.jp

Android 17 “Cinnamon Bun”まとめ、リリースサイクル変革と新しい操作体験

今回は、Android 17でリリースされる予定の新機能をまとめとともに、開発サイクルやリリース時期に関する考察を深く掘り下げます。

gihyo.jp

Stitch、DESIGN.mdのドラフト仕様をオープンソースに

Google Labsは2026年4月21日、AIデザインツールStitchで用いるDESIGN.mdのドラフト仕様をオープンソースとして公開した。

gihyo.jp

OpenAI、最先端の画像生成モデル「ChatGPT Images 2.0」を発表 ——日本語を含む非ラテン文字のレンダリング能力も向上

OpenAIは2026年4月21日、最先端の画像生成モデルを発表した。ChatGPTでは「ChatGPT Images 2.0」として、開発者向けAPIでは「GPT Image 2」として展開する。

gihyo.jp

第908回　Ubuntu 26.04 LTSの変更点 ［25.10→26.04 LTS編］

4月23日にリリースされる予定のUbuntu 26.04 LTS。今回は、25.10からの特徴的な変更点をお知らせします。

@sakupi01.com blog

本サイトにおける Web UI のプラクティス #1 Overview & Basics

本サイトの Web UI における CSS 設計のプラクティスを、全体像と基盤となるスタイルを中心に紹介します。本エントリは個人連載の一部です。

azukiazusa のテックブログ2

命令的な方法で支援技術に通知する `ariaNotify()` メソッド

`ariaNotify()` メソッドは、支援技術を使用しているユーザーに対して、動的なコンテンツの更新を通知するための命令的な方法を提供する Web API です。従来の WAI-ARIA の仕様では宣言的な属性を使用して支援技術に情報を伝える方法が一般的でしたが、`ariaNotify()` メソッドは JavaScript を使用して、特定のタイミングで支援技術に通知を送ることができるという点が特徴です。

gihyo.jp

最先端のコーディング性能をもつオープンソースのマルチモーダルエージェントモデルKimi K2.6リリース

中国Moonshot AIは2026年4月21日、同社のフロンティアモデルの最新バージョンKimi K2.6をリリースした。

gihyo.jp

実験的に日本でも「Skills in Chrome」が利用可能に

Gemini in Chromeの日本国内の展開と同時に、よく使用するプロンプトを再利用しやすくスキルとして活用できる機能「Skills in Chrome」が実験的に利用可能になっている。

gihyo.jp

Gemini in Chromeが日本でも使用可能に

Googleは2026年4月21日、WebブラウザGoogle Chromeに直接組み込まれたAIアシスタントGeminiを使うことができる「Gemini in Chrome」の機能を日本を含む複数地域向けに拡大して提供することを発表した。

blog.jxck.io

Compression Dictionary Transport によるコンテンツ圧縮の最適化

Compression Dictionary Transport は、圧縮に用いる辞書を HTTP 上で共有するプロトコルであり、2025 年 9 月に RFC 9842 として標準化された。本サイトの対応を行ったので、方式の概要とデプロイ方法について解説する。

gihyo.jp

第269回　SUPER権限のその後 ――MySQL 8.4/9.x時代の権限設計を見直す

MySQLの管理者権限といえば、やはりSUPERを思い浮かべる方が多いのではないかと思います。

gihyo.jp

Cloudflare、WebサイトのAIエージェント対応を診断する「isitagentready.com」を公開

Cloudflareは2026年4月17日、WebサイトのAIエージェント対応状況を診断するWebツール「isitagentready.com」を公開した。

gihyo.jp

Blenderで頂点を思うように動かしたりオブジェクトを平面にぴったりくっつけてみよう

第75回目は、Blenderで作成したオブジェクトの頂点をスライドさせたり、一直線上に並べる方法を見ていきます。

gihyo.jp

GitHub CLIでエージェントスキルを管理する「gh skill」をパブリックプレビューで公開

GitHubは2026年4月16日、GitHub CLIでエージェントスキルの検索、プレビュー、インストール、更新、公開を行える新コマンドgh skillをパブリックプレビューとして公開した。

gihyo.jp

Ollama、GitHub Copilot CLIをサポート

Ollamaは2026年4月19日、最新バージョンのOllama 0.21でGitHub Copilot CLIをサポートしたことを発表した。

azukiazusa のテックブログ2

gh コマンドでエージェントスキルをインストール・管理できるようになった

GitHub CLI に `gh skill` コマンドが追加され、GitHub 上のエージェントスキルを簡単にインストール・検索・管理できるようになりました。この記事では `gh skill` コマンドの使い方について紹介します。

gihyo.jp

VS Code 1.116リリース、統合ブラウザの起動方法を追加・Insiders版のVS Code Agentsアプリも改善

この記事では、開発が進んできた統合ブラウザ機能と、「Visual Studio Code Agents - Insiders」を主に取り上げる。後者は現在のところVS Code Insidersでのみ利用でき、VS Code本体とは別アプリとして起動する。

gihyo.jp

OpenAI、Codexを大幅アップデート ―アプリ内ブラウザ、過去スレッドを元にした自動実行や“メモリ機能”を装備、“ほぼあらゆることができる”AIエージェントに

OpenAIは2026年4月16日、Codexのメジャーアップデートをリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; リリースまで一週間、各種インフラステータスの公開とリニューアル

resolute（Ubuntu 26.04 LTS）のリリースまであと一週間となりました。

azukiazusa のテックブログ2

AI エージェント向けのパッケージマネージャー apm

apm は Microsoft が開発した AI エージェント向けパッケージマネージャーです。npm や pip のように依存関係を解決しながら、エージェントのスキルや MCP をパッケージ化して管理・共有できます。この記事では apm の基本的な使い方を紹介します。

gihyo.jp

OpenAI、Agents SDKをアップデート。サンドボックス対応やメモリ制御を追加

OpenAIは2026年4月15日、エージェントを開発するためのフレームワークである「Agents SDK」のPython版の大規模なアップデートを発表した。

gihyo.jp

Google、70以上の言語に対応、表現力豊かな音声生成が可能なスピーチモデルGemini 3.1 Flash TTSをリリース

Googleは2026年4月15日、テキスト読み上げモデルの新バージョン「Gemini 3.1 Flash TTS」をリリースした。

gihyo.jp

Android Runtimeがアップデート！ MessageQueue刷新と世代別GCの真価

2026年も4月に入り、Google I/Oの足音が近づいてきました。今週は、開発者版の検証を通じて明らかになった、Android 17で「ART（Android Runtime）」が大幅に進化しているので、今回はこれにフォーカスします。

gihyo.jp

Linus、i486サポート削除に向けてパッチのマージを開始 ―進むレガシーからの脱却

Linus Torvaldsは4月14日、カーネルメンテナーのIngo Molnar（Red Hat所属）が提出したLinux 7.1に向けたパッチ「x86-platform-2026-04-13」をマージした。

JSer.info

2026-04-15のJS: pnpm 11 RC 0、webpack 5.106、Servo v0.1.0

JSer.info #769 - pnpm v11.0.0 RC 0がリリースされました。 Release pnpm 11 RC 0 · pnpm/pnpm Pure ESMパッケージへ移行し、Node.js 18から21のサポートを終了しています。 .npmrcは認証/レジストリ設定のみに限定し、その他の設定はpnpm-workspace.yamlへ移行、pnpm serverコマンドの削除など多くの破壊的変更を含んでいます。 pnpm ciコマンドの追加、pnpm sbomでのSBOM生成に対応しています。 minimumReleaseAgeのデフォルトを1日に設定、blockExoticSubdepsのデフォルトをtrueに変更するなど、サプライチェーンセキュリティの強化も行われています。 undiciの採用によるHTTPリクエストの改善なども含まれています。 webpack 5.106がリリースされました。 Webpack 5.106 | webpack Plugin Validation Hook(compiler.hooks.validate)の追加、CSS Modulesのランタイムスタイル注入(exportType: "style")のサポートが含まれています。 create-webpack-appツールの追加、実験的な機能としてES Stage 3のSource Phase ImportsによるWebAssemblyサポート、oxc-parserのサポートが追加されています。 Rustで書かれた組み込み可能なWebレンダリングエンジンであるServoのservoクレートがcrates.ioで公開されました。 Servo is now available on crates.io アプリケーションにWebレンダリング機能を組み込むためのEmbedding APIを提供しています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release v1.5.0 · Pagefind/pagefind github.com/Pagefind/pagefind/releases/tag/v1.5.0 Rust JavaScript search library ReleaseNote Pagefind v1.5.0リリース。 Webpack 5.106 | webpack webpack.js.org/blog/2026-04-08-webpack-5-106/ webpack ReleaseNote webpack 5.106リリース。 compiler.hooks.validate)の追加。 exportType: "style")のサポート。 create-webpack-appツールの追加。 Release pnpm 11 RC 0 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.0.0-rc.0 pnpm ReleaseNote pnpm v11.0.0 rc.0リリース。 .npmrcは認証/レジストリ設定のみに限定し、その他の設定はpnpm-workspace.yamlへ移行、pnpm serverコマンドの削除など多くの破壊的変更を含む。 pnpm ciコマンドの追加、pnpm sbomでのSBOM生成に対応。 minimumReleaseAgeのデフォルトを1日に設定、blockExoticSubdepsのデフォルトをtrueに変更などサプライチェーンセキュリティの強化。 undiciの採用によるHTTPリクエストの改善など。 Bun v1.3.12 | Bun Blog bun.com/blog/bun-v1.3.12 Bun ReleaseNote Bun v1.3.12リリース。 Bun.WebViewの追加、Markdownファイルをターミナルで直接実行できるbun ./file.mdのサポート。 Bun.cron()の追加。 using/await using)のサポート。 Servo is now available on crates.io - Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications. servo.org/blog/2026/04/13/servo-0.1.0-release/ servo Rust browser ReleaseNote Servo v0.1.0リリース。 servoクレートがcrates.ioで公開された。 アーティクル Summary of CVE-2026-23869 - Vercel vercel.com/changelog/summary-of-cve-2026-23869 Next.js React security vercel React Server Components(RSC)のDoS脆弱性の修正としてNext.js 15.5.15/16.2.3とReact 19.2.5がリリースされている。 Release 19.2.5 (April 8th, 2026) · facebook/react The uphill climb of making diff lines performant - The GitHub Blog github.blog/engineering/architecture-optimization/the-uphill-climb-of-making-diff-lines-performant/ GitHub React performance article GitHubのFiles changedタブのReactベースの実装におけるdiff行のパフォーマンス最適化について。 React Server Components Your Way | TanStack Blog tanstack.com/blog/react-server-components React RSC TanStack article TanStackにおけるReact Server Components(RSC)のアプローチについて。 createServerFnによる明示的なサーバー関数定義などの機能を提供する。 The Intl API: The best browser API you're not using | Polypane polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/ JavaScript i18n article Intl APIについての解説記事。 Intl.DateTimeFormat/Intl.RelativeTimeFormat/Intl.NumberFormatなどの日付や数値のフォーマットAPIを紹介している。 Intl.ListFormat/Intl.PluralRules/Intl.Segmenter/Intl.Collatorなどの使い方について Under the hood of MDN's new frontend developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/ mdn WebComponents architecture article MDNのフロントエンドアーキテクチャの刷新についての解説記事。 dangerouslySetInnerHTMLによる静的コンテンツの埋め込みなどの課題もあった。 ソフトウェア、ツール、ライブラリ関係 yuku-toolchain/yuku: High-performance JavaScript/TypeScript compiler and toolchain in pure Zig 🦎 github.com/yuku-toolchain/yuku Zig JavaScript TypeScript compiler Tools Zigで書かれたJavaScript/TypeScriptコンパイラおよびツールチェーン。 Diffs, from Pierre diffs.com/ JavaScript CSS library diff diffレンダリングとコード表示のライブラリ。 CSS GridとShadow DOMを活用してDOMノード数を削減しレンダリングの高速化やVirtualizationに対応している。 Stack型(統合表示)とSplit型(左右並列表示)の2つのレイアウトに対応し、Shikiベースの構文ハイライト/コメント/マージコンフリクト解決UIなどの機能を持つ。

gihyo.jp

Cloudflare、ユーザー・ノード・AIエージェントをつなぐプライベートネットワークCloudflare Meshを発表

Cloudflareは2026年4月14日、プライベートネットワークを相互接続し、AIエージェントなどに安全なアクセスを提供する「Cloudflare Mesh」を発表した。

gihyo.jp

OpenAI、Trusted Access for Cyberを拡張、上位ティアでGPT-5.4-Cyber提供へ

OpenAIは2026年4月14日、サイバー防衛に携わる個人やチーム向けプログラム「Trusted Access for Cyber（TAC）」の拡張を発表した。

gihyo.jp

Anthropic、Claude CodeデスクトップアプリのUIを再設計 ——複数プロジェクトの並列作業を効率化

Anthropicは2026年4月14日、Claude Codeで複数プロジェクトのセッションを並列で進めやすくするため、Claude CodeデスクトップアプリのUIを再設計したバージョンをリリースした。

gihyo.jp

第907回　Ubuntu 26.04 LTSのディスク全体暗号化（FDE）

FDEはFull Disk Encryptionの略で、ディスク全体を暗号化する仕組みのことです。来週リリース予定の26.04 LTSからはいよいよFDEが実用できそうな段階まできました。そこで今回はリリースに先だって紹介します。

gihyo.jp

GitHub、Stacked PRsをプライベートプレビューで限定公開 ——大規模プルリクエストを、レイヤーごとのプルリクエストのチェーンとして管理可能に

GitHubは2026年4月13日、プルリクエストをレイヤーごとのプルリクエストのチェーンとして管理する「GitHub Stacked PRs」をプライベートプレビューで限定公開した。

gihyo.jp

Cloudflare、プラットフォーム全体をCLIで操作可能に ―エージェントの挙動をローカルから把握できるLocal Explorerも登場

Cloudflareは2026年4月13日、AIエージェントに関するさまざまな新技術を発表する「エージェントウィーク」中に、Cloudflare製品全体で使用できるCLIをプレビュー版として発表した。またあわせて、ローカル開発時にリソースを確認、編集できる「Local Explorer」をオープンベータ版として公開した。

gihyo.jp

Linux 7.0リリース、AIツールがカーネル開発に本格導入

Linus Torvaldsは4月12日、「Linux 7.0」を公開した。

gihyo.jp

週間アクティブユーザー300万人にのぼるCodex、OpenAI Japanの瀬良氏に聞く「開発スタイル」の変化

この記事では、2026年4月8日に行われたOpenAI JapanのDeveloper Experience Engineer、瀬良和弘氏への取材をベースに、OpenAIの公式ブログなどの情報を交えて構成を整え、Codexが変えつつある開発スタイルを紹介します。

gihyo.jp

プラットフォームエンジニアリングの導入ステップと成功のポイント

第3回目となる今回は、プラットフォームエンジニアリングを効果的に導入するために必要な手順について見ていきます。

azukiazusa のテックブログ2

Claude の Advisor tool を活用して性能とコストのバランスを最適化する

Claude に新たに追加された advisor tool を使用すると、通常のタスクは軽量モデルに任せつつ、必要に応じて高性能モデルに相談することで、性能とコストのバランスを最適化できます。この記事では Claude Code 内で advisor tool を活用する方法について紹介します。

azukiazusa のテックブログ2

Canvas 内に直接 HTML を描画できる HTML in Canvas API について

HTML in Canvas API は WICG で提案されている API で、Canvas 内に直接 HTML を描画できるようにするものです。現在の `` 要素にはリッチテキストや HTML コンテンツを描画する標準的な方法が存在しないという課題があります。この記事では HTML in Canvas の使用方法やユースケースについて説明します。

gihyo.jp

Ubuntu 26.04（resolute）の開発; 要求スペックの変更とUbuntu Mateの新メンテナ募集

Betaがリリースされた後、Kernel Freezeなどの各種「最後に完成するもの」が投入されるタイミングになりました。カーネル7.0パッケージが準備され、来週のFinal Freezeに向けた準備が進められています。

azukiazusa のテックブログ2

大規模にエージェントを構築する Claude Managed Agents を試してみた

Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。この記事では実際に Claude Managed Agents を試してみた内容を紹介します。

gihyo.jp

Movable Typeに深刻な脆弱性が見つかる――2026年4月8日、脆弱性対策最新版MT公開

Movable Typeに深刻な脆弱性が存在することが判明し、シックス・アパート株式会社は2026年4月8日にその脆弱性を修正した最新版Movable Typeを公開しました。

gihyo.jp

AIを搭載した新しいGoogle Financeが日本を含む100か国以上で順次利用可能に

Googleは2026年4月8日、AIを統合した新しいGoogle Financeを100か国以上で順次展開することを発表した。

gihyo.jp

Google、Geminiアプリでプロジェクトごとに情報を整理できる機能「notebooks」を順次提供へ ——NotebookLMとの同期も可能に

Googleは2026年4月8日、Geminiアプリに、複数のプロジェクトを整理し、過去のチャットや関連ファイルをソースとして追加することで、特定の作業向けの専用スペースを持てる機能「notebooks」の導入を発表した。

gihyo.jp

Meta、新しいマルチモーダル推論モデル「Muse Spark」を発表

Metaは2026年4月8日、新たなAI戦略に基づいて開発されたMuseファミリーの第一弾となるネイティブなマルチモーダル推論モデル「Muse Spark」を発表した。

gihyo.jp

Android「らしさ」失われる？ 2026年9月から「開発者認証」完全義務化

2026年4月に入り、Android開発者の間で1つの大きな期限が強く意識されるようになりました。それは、約半年後の2026年9月に迫った「開発者認証」の完全義務化です。

gihyo.jp

Anthropic、重要ソフトウェアを保護するための取り組み「Project Glasswing」を発表 ——最新フロンティアモデル「Claude Mythos Preview」で脆弱性発見と修正を支援

Anthropicは2026年4月7日、世界で重要なソフトウェアのセキュリティ確保を支援する緊急の取り組みとして、「Project Glasswing」を発表した。この取り組みは、未公開のフロンティアモデル「Claude Mythos Preview」を基盤としている。

gihyo.jp

第906回　さまざまな生成AIプロバイダーに対応したデスクトップAIアシスタント、Witsyを使用する

今回はAIアシスタントのWitsyを紹介します。

gihyo.jp

そろそろお別れの時間が来たようだ ―i486サポート、終了へのカウントダウンが始まる

LinuxカーネルエンジニアのIngo Molnar（Red Hat所属）は3月30日、i486 CPUのM486、M486SX、およびAMD ELAN（MELAN）のビルドオプションをKconfigから削除するパッチを開発ブランチに投稿した。

gihyo.jp

AIを真の競争力に変えるには：インテリジェントオーケストレーションの実践

今回はGitLabが日本の経営層を対象に行った調査の結果に基づき、CISOが直面する「AI導入を妨げずにリスクを最小化する方法」という課題に焦点を当て、今すぐ取り組むべき実践的なステップを提案します。

gihyo.jp

第268回　pt-online-schema-changeで外部キー制約付きテーブルにDDLを実行する

本稿では、pt-oscの--alter-foreign-keys-methodに着目し、その内部挙動と運用上の注意点を整理します。

gihyo.jp

U-22プログラミング・コンテスト2026 公式サイトオープン、応募要項を公開

U-22プログラミング・コンテスト実行委員会は、公式WebサイトにてU-22プログラミング・コンテスト2026の応募要領を公開した。

JSer.info

2026-04-06のJS: TypeScript 6.0、ES2026 RC、axiosサプライチェーン攻撃

JSer.info #768 - TypeScript 6.0がリリースされました。 Announcing TypeScript 6.0 - TypeScript 現在のJavaScriptコードベースによる最後のリリースで、Goで書き直されたTypeScript 7.0への移行を準備するリリースとなっています。strictがデフォルトでtrueに、targetのデフォルトがes2025に、moduleのデフォルトがesnextに変更されています。target: es5や--moduleResolution node(node10)、--outFileなどが非推奨となりエラーに変更されました。新しい機能として、es2025ターゲットの追加、Temporal APIの型定義、Map/WeakMapのgetOrInsert()/getOrInsertComputed()メソッドの追加、TypeScript 7.0の型順序に合わせる--stableTypeOrderingフラグの追加などが含まれています。 ECMAScript 2026のRelease Candidateが公開されました。 Release ES2026 Candidate March 31st 2026 · tc39/ecma262 TC39によって2026年3月に承認され、2026年6月のEcma General Assemblyでの承認を経て正式リリースとなる予定です。ES2026には、Array.fromAsync、JSON.parse source text access、Iterator Sequencing、Uint8ArrayのBase64変換、Math.sumPrecise、Error.isError、Upsert(Map.prototype.getOrInsert)などが含まれる予定です。 axiosのnpmパッケージに対するサプライチェーン攻撃が発生しました。 axios Compromised on npm - Malicious Versions Drop Remote Access Trojan - StepSecurity Attackers Are Hunting High-Impact Node.js Maintainers in a C... The Hidden Blast Radius of the Axios Compromise - Socket ソーシャルエンジニアリングによりメンテナーアカウントが乗っ取られ、悪意のあるaxios@1.14.1とaxios@0.30.4が公開されました。これらのバージョンにはplain-crypto-jsというマルウェアが依存関係として追加されており、postinstallフックを通じてmacOS/Windows/Linux向けのRemote Access Trojan(RAT)をインストールする仕組みになっていました。 影響を受けたかどうかの確認方法は次のページにまとめられています。 Am I affected? - StepSecurity JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Announcing TypeScript 6.0 - TypeScript devblogs.microsoft.com/typescript/announcing-typescript-6-0/ TypeScript ReleaseNote TypeScript 6.0リリース。 strictがデフォルトでtrueに、targetのデフォルトがes2025に、moduleのデフォルトがesnextに変更。 target: es5、--moduleResolution node(node10)、--outFile、--esModuleInterop falseなどが非推奨となりエラーに変更。 es2025ターゲットの追加、Temporal APIの型定義の追加、Map/WeakMapのgetOrInsert()/getOrInsertComputed()メソッドの追加。 #/のサポート、--moduleResolution bundlerと--module commonjsの組み合わせをサポート。 --stableTypeOrderingフラグの追加など WebKit Features for Safari 26.4 | WebKit webkit.org/blog/17862/webkit-features-for-safari-26-4/ safari browser CSS WebTransport WebAuthentication ReleaseNote Safari 26.4リリース。 @containerクエリのサポート。 font-size: mathとmath-depthプロパティのサポート。 Iterator.concat()のサポート。 <img>のsizes属性でのmath関数(min()/max()/clamp())のサポート、SVGのlighter合成演算子のサポート。 Release v20.0.0 · raineorshine/npm-check-updates github.com/raineorshine/npm-check-updates/releases/tag/v20.0.0 npm Tools ReleaseNote npm-check-updates v20.0.0リリース。 Release ES2026 Candidate March 31st 2026 · tc39/ecma262 github.com/tc39/ecma262/releases/tag/es2026-candidate-2026-03-31 ECMAScript spec ReleaseNote ECMAScript 2026のRelease Candidateが公開された。 Release v15.0.0 · sindresorhus/got github.com/sindresorhus/got/releases/tag/v15.0.0 nodejs HTTP library ReleaseNote Got v15.0.0リリース。 promise.cancel()を削除しAbortControllerのsignalオプションに移行、isStreamオプションの削除。 responseType: 'buffer'がBufferの代わりにUint8Arrayを返すように変更。 strictContentLengthのデフォルトをtrueに変更。 Release 4.18.0 · lodash/lodash github.com/lodash/lodash/releases/tag/4.18.0 lodash JavaScript library security ReleaseNote lodash 4.18.0リリース。 _.unsetと_.omitのPrototype Pollutionの脆弱性を修正、_.templateのコードインジェクションの修正。 lodash.unsetやlodash.templateなどの個別パッケージが古いままだったのを修正して再公開。 Node.js — Node.js 25.9.0 (Current) nodejs.org/en/blog/release/v25.9.0 nodejs ReleaseNote Node.js v25.9.0リリース。 defaultExportとnamedExportsオプションをexportsオプションに統合。 --max-heap-sizeフラグの追加、Web CryptoでTurboSHAKEとKangarooTwelveアルゴリズムのサポート。 stream/iterモジュールの追加。 AsyncLocalStorageにusingスコープの追加、REPLでのカスタムエラーハンドリングのサポートなど。 Release v5.0.0 · lerna-lite/lerna-lite github.com/lerna-lite/lerna-lite/releases/tag/v5.0.0 monorepo Tools ReleaseNote lerna-lite v5.0.0リリース。 --remove-package-fieldsオプションの削除。 アーティクル Storybook MCP for React storybook.js.org/blog/storybook-mcp-for-react/ storybook MCP React article Storybook MCPサーバについて。 Node.js — Security Bug Bounty Program Paused Due to Loss of Funding nodejs.org/en/blog/announcements/discontinuing-security-bug-bounties nodejs security article Node.jsのセキュリティバグバウンティプログラムの一時停止について。 Signals, the push-pull based algorithm — Willy Brauner willybrauner.com/journal/signal-the-push-pull-based-algorithm JavaScript article Signalにおけるpush-pullベースのリアクティブアルゴリズムについての解説記事。 Core JavaScript and TypeScript Features Become Free in IntelliJ IDEA | The IntelliJ IDEA Blog blog.jetbrains.com/idea/2026/03/js-ts-free-support/ JetBrains IDE JavaScript TypeScript IntelliJ IDEA v2026.1で、JavaScript/TypeScript/HTML/CSSのコア機能が無料で利用可能に。 axios Compromised on npm - Malicious Versions Drop Remote Access Trojan - StepSecurity www.stepsecurity.io/blog/axios-compromised-on-npm-malicious-versions-drop-remote-access-trojan npm security article axiosのnpmパッケージに対するサプライチェーン攻撃について。 axios@1.14.1とaxios@0.30.4が公開された。 plain-crypto-jsというマルウェアが依存関係として追加されている。 Attackers Are Hunting High-Impact Node.js Maintainers in a C... The Hidden Blast Radius of the Axios Compromise - Socket サイト、サービス、ドキュメント Introducing EmDash — the spiritual successor to WordPress that solves plugin security blog.cloudflare.com/emdash-wordpress/ cloudflare CMS TypeScript astro security OpenSource wordpress CloudflareによるサーバーレスCMS。 vercel-labs/emulate: Local API emulation for CI and no-network sandboxes github.com/vercel-labs/emulate vercel API testing CI Tools nodejs server Vercel/GitHub/Google/Slack/AWS(S3/SQS)などのAPIをローカルでエミュレートするツール。 ソフトウェア、ツール、ライブラリ関係 ArrowJS — The first UI framework for the agentic era arrow-js.com/ JavaScript TypeScript WebAssembly library ビルドステップなしで動作する軽量なUIフレームワーク。reactive、html、componentの3つの関数で構成される。 書籍関係 React本格入門 | 技術評論社 gihyo.jp/book/2026/978-4-297-15523-0 React book 2026年4月15日発売。 React 19をベースにした入門書。

gihyo.jp

Blenderでオブジェクトに常にワイヤーフレームを表示する方法について見ていこう

第74回目は、Blenderで作成したオブジェクトに常にワイヤーフレームを表示する方法について見ていきます。

azukiazusa のテックブログ2

Codex の Sandbox とエージェントの承認について

コーディングエージェントの自動承認の範囲をどこまで許可するかは、ユーザー体験とセキュリティのバランスを取る上で重要な設計指針の1つです。Codex ではサンドボックス機能を提供することで、エージェントが安全に自律的に動作できる環境を実現しています。この記事では、Codex のサンドボックスの仕組みと、サンドボックス外でコマンドを実行する際の承認プロセスについて説明します。

azukiazusa のテックブログ2

Boneyard で正確なスケルトンローダーを生成する

スケルトンローダーは、コンテンツが読み込まれる前に表示されるプレースホルダーで、ユーザーに対して読み込み中であることを視覚的に示すためのものです。Boneyard はスケルトンローダーの手動の計測と更新の手間を解消するためのフレームワークです。この記事では、Boneyard を使用してスケルトンローダーを簡単に実装する方法について説明します。

azukiazusa のテックブログ2

Codex のネットワークアクセス設定

デフォルトの `workspace-write` サンドボックスではネットワークアクセスは無効です。外部通信を許可したい場合は、`config.toml` で明示的に有効にします。

azukiazusa のテックブログ2

Codex Hooks で終了時に通知を出す

Codex では `hooks` を使って、特定のタイミングで任意のコマンドを実行できます。例えば応答が終わるたびに通知したい場合は `Stop hook` を使います。

azukiazusa のテックブログ2

Codex の smart_approvals で承認の負担を軽減する

コーディングエージェントに多く承認を求められると、本当に確認が必要なコマンドの実行を見落とす確率が高まります。Codex には `smart_approvals` という設定があります。これは承認が必要になったとき、その一部をそのままユーザーに投げるのではなく、まず `guardian reviewer` というサブエージェント経由で扱うための実験的な機能です。

gihyo.jp

NII、約12兆トークンのコーパスで学習した「LLM-jp-4 8Bモデル」「LLM-jp-4 32B-A3Bモデル」をオープンソースライセンスで公開

国立情報学研究所（NII）の大規模言語モデル研究開発センター（LLMC）は2026年4月3日、約86億パラメータの「LLM-jp-4 8Bモデル」と約320億パラメータのMoEモデル「LLM-jp-4 32B-A3Bモデル」をオープンソースライセンスで公開した。

gihyo.jp

Cursor 3リリース ―AIエージェントコーディング向けにUIを刷新

Anysphereは2026年4月2日、AIコーディングエディタCursorの新バージョンCursor 3をリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; Betaとその後の調整、アイデンティティ管理の新機能群、「次」におけるntpd-rsの採用とGRUB関連の整理

resolute（Ubuntu 26.04）のBetaがリリースされ、タイミングをあわせたTest Rebuildも行われています。

gihyo.jp

Google、ローカルハードウェア上で実行できる高性能なマルチモーダル推論モデルGemma 4をオープンモデルとしてリリース

Googleは2026年4月2日、軽量言語モデルGemmaの最新バージョン「Gemma 4」を、Apache 2.0ライセンスの元オープンモデルとしてリリースした。

gihyo.jp

第30回 円になるまで何角形？Scratchで検証する、算数教室

「スクラッチでプログラミングをはじめよう」第30回です。

azukiazusa のテックブログ2

Claude Code の hooks で if フィールドでフックが呼び出される条件を指定する

v2.1.85 で、Claude Code の hooks で if フィールドを指定できるようになりました。if フィールドには、フックが呼び出される条件を指定できます。条件に一致しない場合はプロセス自体が起動しないため、オーバーヘッド削減にもなります。

azukiazusa のテックブログ2

difit-review スキルでエージェント自身に変更点をコメントしてもらおう

difit はローカルの git 差分を GitHub スタイルのインターフェースで確認できる CLI ツールです。difit-review スキルを使用することでエージェントがコードの変更点にコメントを残した状態で difit を起動できます。この記事では、difit-review スキルを使用してエージェント自身にコードの変更点をコメントしてもらう方法を紹介します。

gihyo.jp

Cloudflare、WordPressの機能をTypeScriptで再構築した「EmDash」をオープンソースとしてプレビューリリース ―WordPressプラグインのセキュリティ問題を解消

Cloudflareは2026年4月1日、メジャーなCMSであるWordPressの機能をTypeScriptで実装した「EmDash」を、MITライセンスの元GitHub上に公開した。

gihyo.jp

AI時代のインフラはどう変わるのか、SUSE CSO Frank Feldmann氏が語るITコスト、デジタル主権、エンジニアの役割

SUSEのChief Strategy Officer（CSO）であるFrank Feldmann氏に、現在の技術トレンド、AI時代のインフラのあり方、そしてエンジニアに求められる役割について話を聞きました。

gihyo.jp

rabbit r1がアップデートで覚醒!AOSPを土台に掴んだ実用性の正体

Google I/Oを控えたこの時期、Androidへはマイナーアップデートが配信される一方で、かつて「スマートフォン・キラー」と呼ばれた専用AIデバイス、rabbit r1が実用性を身に付け始めています。

gihyo.jp

第128回　「内向き思考打破が日本を救う！」セミナー報告、MySQL 9.7アーリー・アクセス版リリース、次期PostgreSQL 19の期待したい新機能候補

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

第905回　新年度特別企画 llama.cppでコマンドラインベースのローカルLLM入門［VRAM容量別編］

今回はVRAMの容量別でおすすめのローカルLLMのモデルを動作させる方法を紹介します。

blog.jxck.io

本サイトの IPv4 アクセスをブロックするテスト

4/1 なので、本サイトを IPv6 のみのアクセスに限定することにした。背景を解説する。

azukiazusa のテックブログ2

Claude Code から Codex を呼び出すためのプラグイン codex-plugin-cc

Codex プラグインを使用すると、Claude Code から Codex を呼び出してコードレビューをしたり、タスクを委任するといったことが簡単にできるようになります。この記事では、Codex プラグインの使用方法と、どのような方法で Codex を呼び出しているのかといった内部の仕組みについて紹介します。

gihyo.jp

OpenAI、Claude Code用のCodexプラグインをリリース

OpenAIは2026年3月31日、Claude CodeからCodexを使えるようにするプラグインをリリースした。

gihyo.jp

Python 3.14新機能: InterpreterPoolExecutorで新しい並列処理を体験しよう

2026年3月の「Python Monthly Topics」では、Python 3.14で追加されたInterpreterPoolExecutorを紹介します。

gihyo.jp

PostgreSQLの並列処理とJIT ――実行計画からひも解く処理特性と導入効果

本稿では、リソースを効率的に活用する「パラレルクエリ」と、クエリ評価をネイティブコード化する「JITコンパイル」、さらにメンテナンスを劇的に速める「パラレルVACUUM」を紹介します。理論と実行計画の両面から高速化の真髄に迫ります。

gihyo.jp

プラットフォームエンジニアリングの導入メリットを理解する：開発プロセスをどう改善するか

第2回となる今回は、プラットフォームエンジニアリングがDevSecOpsおよびサイト信頼性エンジニアリング（Site Reliability Engineering）とどのように関連しているか、また組織内でプラットフォームエンジニアリングを効果的に実装する方法について詳しく見ていきます。

azukiazusa のテックブログ2

Cline Kanban で複数のコーディングエージェントを一括管理する

Cline Kanban は人間が数十個のエージェントを運用するうえで正気を保つためにはどうすればいいか、という問いに対する 1 つの答えとして、Cline が開発したツールです。Cline Kanban はカンバン方式のビューを提供します。各カードは稼働中のエージェントを表しており、どのエージェントが実行中で、どのエージェントが作業がブロックされているのか、どのエージェントが完了しているのかを一目で把握できるようになっています。

azukiazusa のテックブログ2

Figma のキャンバスを AI エージェントから操作してデザインしよう

2026 年 3 月末、Figma の MCP サーバーに Figma のキャンバスを直接操作できる `use_figma` ツールが追加されました。`use_figma` ツールは Figma Plugin API を通じて Figma ファイル上で JavaScript を直接実行する汎用ツールとして設計されている点が特徴です。この記事では、実際に `use_figma` ツールを使用して Figma のキャンバスを操作する方法を試してみます。

gihyo.jp

Google、AIオーディオモデル「Gemini 3.1 Flash Live」をリリース ―多言語音声によるリアルタイム検索やスマートフォンでのリアルタイム翻訳がより使いやすく

Googleは2026年3月26日、AIオーディオおよび音声モデルの最新バージョンGemini 3.1 Flash Liveをリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; Betaと「次」へ向けた作業、“CrackArmor”への対応

resolute（Ubuntu 26.04）の開発はベータリリースに進み、あわせて「変更することだけが決まっている」項目が徐々に確定しつつあります。

gihyo.jp

分散成分分析で検証するLLM-as-a-Judgeの信頼性 — AIエージェントの一貫性実証に向けて

連載最終回（第三回）である本記事では、AIエージェントのGRC・ガバナンスに焦点を当てます。

gihyo.jp

Laravel Live Japan、5/26、27に開催、スケジュール公開、チケット販売中

日本初となるLaravelの公式カンファレンス「Laravel Live Japan」が2026年5月26日、27日に東京・立川ステージガーデンで開催される。

gihyo.jp

オープンソースアイコンライブラリLucide、バージョン1をリリース

オープンソースアイコンライブラリ「Lucide」は2026年3月23日、バージョン1となる1.0.1を公開した（現在の最新バージョンは1.7.0）。

gihyo.jp

Anthropic、Claude Codeの「オートモード」をリサーチプレビュー版として提供開始 ―“その操作は安全か？”をAIが判断

Anthropicは2026年3月25日、Claude Codeがコマンド実行やファイル変更する前のユーザー承認プロセスをより安全に自動化する「オートモード」をリサーチプレビューとして提供開始した。

gihyo.jp

Androidが「デスクトップ」を再定義するか？ 最新デザインガイドライン公開

2026年3月16日、GoogleはAndroidアプリ向けのデザインガイドラインを更新して、デスクトップ体験（Desktop Experience）に焦点を当てた新しいデザインガイドラインを加えています。

azukiazusa のテックブログ2

Storybook MCP を試してみた

Storybook MCP は Storybook と AI エージェントを接続し、エージェントがコンポーネントドキュメントを参照しつつコードを生成したり、ストーリーを作成して UI コンポーネントをテストしたりできるようにする機能です。この記事では、Storybook MCP を実際に試してみた内容を紹介します。

gihyo.jp

Hugging Face、Storage Bucketsやモデル／データセットのリポジトリをローカルにマウントできるhf-mountを公開

Hugging Faceは2026年3月24日、同社のStorage Bucketsや、（Hugging Face上の）モデル／データセットのリポジトリをローカルファイルシステムとしてマウントするhf-mountを公開した。

gihyo.jp

Krita、バージョン5.3/6.0を同時リリース ——Qt 6でビルドされる6.0はLinux版でHDRに対応

OSSのデジタルペイントツールKritaは2026年3月24日、バージョン5.3.0および6.0.0を同時リリースした。

gihyo.jp

Sakana AI、日本に特化させたオープンLLM「Namazu」とWeb検索機能を統合したチャットサービス「Sakana Chat」を公開

Sakana AIは2026年3月24日、日本仕様に適応させたオープンなフロンティアモデルを使ったAIチャットサービス「Sakana Chat」を公開した。

gihyo.jp

TypeScript 6.0リリース ―大幅進化のTypeScript 7.0への“橋渡し”となるバージョン

Microsoftは2026年3月23日、TypeScriptのメジャーバージョンアップとなるTypeScript 6.0をリリースした。

gihyo.jp

Java 26とJavaOne 2026 ――JavaOne 2026にてJava 26リリースを発表

本記事ではJava 26の機能を紹介するとともに、JavaOne 2026でのトピックについてもレポートします。

gihyo.jp

第267回　MySQL Group Replication 動作モードの違い

MySQL Group Replicationには、Single-Primary modeとMulti-Primary modeの2つの動作モードがあります。

gihyo.jp

TSKaigi 2026、5/22、23に開催、基調講演、プロポーザル採択者決定、チケット販売開始

TypeScriptに関するあらゆるテーマを扱う国内最大級のカンファレンス「TSKaigi 2026」が2026年5月22日（金）、23日（土）の2日間、東京・ベルサール羽田空港とオンラインのハイブリッド形式で開催される。

gihyo.jp

Blenderでオブジェクトをスムーズにする方法について見ていこう

本連載では、Blenderの基本的な知識、機能についてイラストを交えながら紹介しています。第73回目は、Blenderで作成したオブジェクトをスムーズに見せる方法について見ていきます。

blog.jxck.io

HTTPS 証明書クロニクル

Web サービスをデプロイする際に、CA から証明書を取得し HTTPS で暗号化するのが一般的となった。かつては "SSL 証明書" として、メールでやり取りし有料で購入するのが常識だったが、自動/無料で取得することが増えた。かつては 5~10 年あった有効期限もどんどん短くなり、今では 6 日の証明書も発行されている。このように、証明書を取り巻く変遷は目覚ましく、それは Web を取り巻く環境の劇的な変化を色濃く反映した結果と言える。http:// が https:// になった裏で何が起こり、これからどうなっていくのか。まとめていく。(極力ソースを付記するが、既に消えて WebArchive にも残っていないものも多く、筆者の記憶に頼る情報も多い。)

JSer.info

2026-03-22のJS: Vite 8.0、Temporal Stage 4、Next.js 16.2

JSer.info #767 - Vite 8.0がリリースされました。 Vite 8.0 is out! | Vite (main branch) Vitest 4.1 is out! | Vitest esbuild + Rollupの二重バンドラー構成をRustベースの統合バンドラーであるRolldownに置き換えています。lightningcssがpeerDependencyから直接的な依存関係へ変更され、ビルトインのDevtools、TypeScriptのパスエイリアス解決(resolve.tsconfigPaths)のサポートが追加されています。WebAssemblyのSSRサポート、ブラウザのコンソールログをdevサーバーのターミナルに転送するserver.forwardConsoleの追加なども含まれています。同じタイミングでVitest 4.1もリリースされており、Vite 8のサポート、Test Tags機能の追加、aroundEach/aroundAllフックの追加なども含まれています。 TC39 2026年3月ミーティングの結果として、TemporalがStage 4となりES2026に含まれることが決定しました。 ECMAScript proposal updates @ 2026-03 | ECMAScript Daily Import TextがStage 3へ、Error Stack AccessorがStage 2.7へ、Curtailing the Power of ThenablesがStage 2へ進みました。 Next.js 16.2がリリースされました。 Next.js 16.2 | Next.js Next.js 16.2: AI Improvements | Next.js next devの起動速度の改善、Server Componentsペイロードのデシリアライズの改善によるレンダリングの高速化が行われています。next/linkにtransitionTypesの追加、ブラウザのコンソールログをターミナルへ転送する機能がデフォルトで有効化され、Hydrationエラーのデバッグ表示の改善、Adapters APIがStableへ変更されています。また、create-next-appがデフォルトでAGENTS.mdを生成するようになりました。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Vite 8.0 is out! | Vite (main branch) main.vite.dev/blog/announcing-vite8 Vite Rust ReleaseNote bundler Vite 8.0リリース。 resolve.tsconfigPaths)のサポート。 server.forwardConsoleの追加など。 Vitest 4.1 is out! | Vitest vitest.dev/blog/vitest-4-1.html vite ReleaseNote test Vitest 4.1リリース。 test.extendでの型推論の改善、aroundEach/aroundAllフックの追加。 vi.defineHelper()でスタックトレースからヘルパー関数の内部を除外できるように。 --detect-async-leaksフラグで非同期リソースのリーク検出をサポート。 mockThrow()/mockThrowOnce()の追加、Chai形式のmockアサーションのサポート。 Announcing Vite+ Alpha | VoidZero voidzero.dev/posts/announcing-vite-plus-alpha vite Rust CLI Tools ReleaseNote Vite+ Alphaリリース。 vp dev/vp build/vp test/vp checkなどのコマンドで、開発サーバ、ビルド、テスト、Lint、フォーマットを1つのツールで実行できる。 vp envでのNode.jsバージョン管理、vp runでのmonorepoタスク実行とキャッシュ機能も提供する。 voidzero-dev/vite-plus: Vite+ is the unified toolchain and entry point for web development. It manages your runtime, package manager, and frontend toolchain in one place. Nuxt 4.4 · Nuxt Blog nuxt.com/blog/v4-4 Vue library ReleaseNote Nuxt v4.4リリース。 createUseFetch/createUseAsyncDataを追加。 useAnnouncer composableと<NuxtAnnouncer>コンポーネントによるアクセシビリティの改善。 unroutingライブラリを採用しパフォーマンスを改善。 useCookieのrefreshオプションの追加、nuxt build --profileでのビルドプロファイリングのサポートなど。 ECMAScript proposal updates @ 2026-03 | ECMAScript Daily ecmascript-daily.github.io/ecmascript/2026/03/16/ecmascript-proposal-update ECMAScript proposal news TC39 TC39 113th meetingでのECMAScript Proposalのステージの変更まとめ。 Nova 1.0 · Nova trynova.dev/blog/nova-1.0 Rust JavaScript ReleaseNote Nova 1.0リリース。 Electron 41.0 | Electron www.electronjs.org/blog/electron-41-0 Electron ReleaseNote Electron 41.0リリース。 changedイベントにinsertedなどの変更理由を追加。 --disable-geolocationフラグの追加。 loginイベントで処理できるように、webPreferences.focusOnNavigationオプションの追加など。 Bun v1.3.11 | Bun Blog bun.com/blog/bun-v1.3.11 Bun ReleaseNote Bun v1.3.11リリース。 Bun.cron APIの追加、ANSIエスケープコードを考慮した文字列スライスを行うBun.sliceAnsiの追加。 bun testに--path-ignore-patternsフラグの追加など Release pnpm 11 Beta 0 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v11.0.0-beta.0 pnpm ReleaseNote pnpm v11.0.0-beta.0リリース。 package.jsonのpnpmフィールドの設定をpnpm-workspace.yamlへ移行、pnpm serverコマンドの削除、pnpm linkコマンドの変更など多くの破壊的変更を含む。 pnpm cleanコマンドでnode_modulesの削除、pnpm audit --fix=updateでlockfileの更新による脆弱性の修正に対応。 config.yamlのサポート、PnpmfileでESMフォーマット(.pnpmfile.mjs)をサポートなど。 Next.js 16.2 | Next.js nextjs.org/blog/next-16-2 Next.js React ReleaseNote Next.js 16.2リリース。 next devの起動速度の改善、Server Componentsペイロードのデシリアライズの改善によるレンダリングの高速化。 next/linkにtransitionTypesを追加、Server Functionの実行ログをターミナルに表示する機能の追加、ブラウザログをターミナルに表示する機能をデフォルトで有効化。 next startで--inspectフラグのサポート。 create-next-appがデフォルトでAGENTS.mdを生成するように変更、node_modules/next/dist/docs/にドキュメントをバンドルするように変更など Next.js 16.2: AI Improvements | Next.js Turbopack: What's New in Next.js 16.2 | Next.js アーティクル TC39 Advances Temporal to Stage 4 Alongside Several ECMAScri... socket.dev/blog/tc39-advances-temporal-to-stage-4?utm_medium=feed TC39 ECMAScript proposal article TC39 2026年3月ミーティングの結果について。 External import maps, today! • Lea Verou lea.verou.me/blog/2026/external-import-maps-today/ JavaScript module article External Import Mapsをビルドツールなしで利用する方法について。 <script type="importmap">をDOMで動的に注入することで、外部ファイルとしてImport Mapを管理できる。document.currentScript.after()を使い<script type="importmap">要素を挿入する。 JSPM - JSPM 4.0 Release Edge.js: Running Node apps inside a WebAssembly Sandbox · Blog · Wasmer wasmer.io/posts/edgejs-safe-nodejs-using-wasm-sandbox WebAssembly nodejs article WebAssemblyのSandboxでNode.js互換のアプリケーションを実行できるRuntime。 サイト、サービス、ドキュメント unjs/impound: Builder-agnostic plugin to allow restricting import patterns in certain parts of your code-base. github.com/unjs/impound?tab=readme-ov-file JavaScript TypeScript Tools module bundler plugin 特定のディレクトリからのimportを禁止するなどのパターンを定義できるunpluginプラグイン。 traceオプションを有効にすると、ルールで禁止された結果をわかりやすく表示できる BrowserPod — Sandboxed Dev Environments in any Browser browserpod.io/ WebAssembly nodejs browser webservice ブラウザ内でNode.jsなどのコードをサンドボックス実行できるプラットフォーム。 ソフトウェア、ツール、ライブラリ関係 sam247/openredaction: Open Source PII detection and redaction for JavaScript/Typescript. Achieve enterprise compliance and unparalleled, lightning fast performance, all 100% local. github.com/sam247/openredaction JavaScript TypeScript library privacy RegExp JavaScript/TypeScript向けのPII(個人識別情報)の検出とマスキングを行うライブラリ。 正規表現パターンを使い、メールアドレス、電話番号、クレジットカード番号、政府発行IDなど50カ国以上のPIIパターンをサポートしている。

azukiazusa のテックブログ2

Claude Code と Discord 連携はどのように動作しているのか？

Claude Code v2.1.80 から Research Preview 版として Claude Code channels（以下、チャンネル）が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Claude Code と Discord 連携がどのように動作しているのか、その仕組みを解説します。

azukiazusa のテックブログ2

Discord から Claude Code とやり取りしてみた

Claude Code v2.1.80 から Research Preview 版として Claude Code channels（以下、チャンネル）が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Discord からチャンネルを通じて Claude Code とやり取りする方法を紹介します。

gihyo.jp

CDK for TypeScriptで検証するAgentCore Observabilityゼロコード計装の仕組み

連載第二回である今回は、そのアーキテクチャを支える技術基盤のひとつであるAgentCore Observabilityに焦点を当てます。

gihyo.jp

Stitch、ノードベースの無限キャンバスに刷新 ——画面遷移・次画面生成機能、音声操作、デザインシステムのためのDESIGN.mdも導入

Google Labsは2026年3月18日、バイブデザインを支援するStitchの大幅アップデートを発表し、提供を開始した。

gihyo.jp

GNOME 50 “Tokyo”がリリース、X11セッションを完全削除

GNOMEプロジェクトは3月18日、オープンソースの統合デスクトップ環境「GNOME」の最新バージョンである「GNOME 50 “Tokyo”」の正式リリースを発表した。

gihyo.jp

Anthropic、開発者カンファレンス「Code with Claude」を6/10に東京で開催 ―サンフランシスコ、ロンドンでも5月に開催

Anthropicは開発者向けカンファレンス「Code with Claude」を、サンフランシスコ（5/6）、ロンドン（5/19）、東京（6/10）で開催する。

gihyo.jp

NVIDIA、OpenClawにセキュリティ制御を追加するプラグイン「NVIDIA NemoClaw」をプレビューリリース

NVIDIAは2026年3月17日、AIチャットアシスタントOpenClawのプライバシーとセキュリティを強化し、安全に利用できるようにするオープンソースのプラグイン「NVIDIA NemoClaw」を早期プレビューとしてリリースした。

gihyo.jp

Androidを高速化する新たな最適化技術「AutoFDO」とは

3月10日、GoogleはAndroidのパフォーマンス向上を狙った技術「AutoFDO （Automatic Feedback-Directed Optimization）」をAndroid OSのカーネルに導入したことを明らかにしました。

gihyo.jp

これからのEMの価値を考える ――EMConf JP 2026レポート

2026年3月4日、TOC有明で、開催されたEM（エンジニアリングマネージャー）向けカンファレンス「EMConf JP 2026」をレポートします。

gihyo.jp

『独学で鍛える数理思考2』：参考文献の紹介

本記事では、2月に刊行した『独学で鍛える数理思考2〜次世代AIを生み出す数学の基礎』の全6章のうち第1章から第4章を中心に執筆において特に参考にした書籍・論文を紹介します。

gihyo.jp

systemd 260がリリース、System Vサービススクリプトのサポートを完全終了

systemd開発チームは3月17日、「systemd 260」を公開した。

gihyo.jp

第904回　ミドルレンジのグラフィックボードで生成AI入門［Intel編］

今回は、グラフィックボードとしてミドルレンジのIntel Arc B580でllama.cppを使用する方法を紹介します。

gihyo.jp

Node.js、仮想ファイルシステムを実装へ

Node.jsのメンテナーであるMatteo Collina氏は2026年3月16日、Node.js向けのユーザーランド仮想ファイルシステム@platformatic/vfsを発表し、あわせてNode.jsのコアに仮想ファイルシステムを統合する予定があることを明かした。

gihyo.jp

Vite 8リリース ―バンドラーをRolldownに統一、tsconfigパス解決、emitDecoratorMetadataをサポート

Vite開発チームは2026年3月12日、高速フロントエンドビルドツールViteの新バージョンVite 8.0をリリースした

gihyo.jp

第65回　最近の『らじる★らじる』（その3）

年末年始の行事や雑用が重なって前回から少し間が空いてしまいましたが、今回も「らじる★らじる」の「聴き逃し配信」を楽しむ方法の続きです。

gihyo.jp

AI時代のソフトウェア開発はなぜ停滞する？ 「AIパラドックス」を解消するための戦略とは

AIがソフトウェア開発を大きく変革しつつある一方で、多くの組織は新たな課題にも直面しています。それは、本来であればソフトウェア開発者が戦略的かつ革新的な業務に割くべき時間が、かえって単調で付加価値の低い作業に費やされてしまっているという点です。

azukiazusa のテックブログ2

npm パッケージに Agent Skills を同梱する TanStack intent

ライブラリのメンテナが Agent Skills を生成・検証して npm パッケージに同梱することを支援するツールである `@tanstack/intent` を使用して、ライブラリの使用者側と、メンテナ側の両方の観点から Agent Skills を利用する方法を紹介します。

azukiazusa のテックブログ2

新時代のフロントエンドツールチェイン Vite+ を試してみた

Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。

gihyo.jp

AWSネイティブサービスで実現するDataOps × LLMOps統合アーキテクチャ

本記事は、複数のAIエージェントと複数の検索データストアが本番稼働する環境を対象とし、LLMOps(AIエージェントの品質管理)とDataOps(検索データストアの品質管理)の統合運用に焦点を当てます。

gihyo.jp

Renesas RZシリーズとArduino VENTUNO Qのサポート、Ubuntu 26.04（resolute）の開発; glibc 2.43のFTBFSの解決

Canonicalとルネサスの協働によって、ルネサスRZ/G2L、RZ/G2LCプラットフォームにおいてcertified Ubuntu 24.04 LTS と Ubuntu Core 24のイメージの提供が行われるようになりました。

JSer.info

2026-03-12のJS: TypeScript 6.0 RC、Solid v2.0.0 Beta、Node.jsリリーススケジュールの変更

JSer.info #766 - TypeScript 6.0 RCがリリースされました。 Announcing TypeScript 6.0 RC - TypeScript TypeScript 7(Go言語ベース)への移行を見据えたリリースで、多くのデフォルト設定の変更や非推奨化が含まれています。 strictがデフォルトでtrueに変更、moduleのデフォルトがesnextに変更、targetのデフォルトがes2025に変更など、既存のプロジェクトへの影響が大きい変更が含まれています。 target: es5/--moduleResolution node10/--module amd|umd|system/--outFileなどが非推奨化されています。 Solid v2.0.0 Betaがリリースされました。 Release v2.0.0 Beta - The is Over · solidjs/solid 非同期処理がファーストクラスとして扱われ、computationsがPromiseやasync iterablesを返せるようになっています。 <Loading>コンポーネントやisPendingによるPending状態の追跡、action()とcreateOptimisticによるOptimistic Updateの仕組みが追加されました。 <Index>を<For keyed={false}>へ変更、createEffectのcompute/applyフェーズの分離、use:ディレクティブの削除など破壊的変更も含まれています。 Node.jsのリリースモデルが2026年10月から変更されることが発表されました。 Node.js — Evolving the Node.js Release Schedule 現在の年2回のメジャーリリースから年1回に変更され、すべてのメジャーリリースがLTSとなります。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release v6.3.0 · actions/setup-node github.com/actions/setup-node/releases/tag/v6.3.0 GitHub nodejs ReleaseNote setup-node v6.3.0リリース。 devEnginesフィールドのサポート Release v2.0.0 Beta - The <Suspense> is Over · solidjs/solid github.com/solidjs/solid/releases/tag/v2.0.0-beta.0 Solid JavaScript ReleaseNote library Solid v2.0.0 Betaリリース。 <Loading>コンポーネントやisPendingによるPending状態の追跡、action()とcreateOptimisticによるOptimistic Updateの仕組みを追加。 <Index>を<For keyed={false}>へ変更、createEffectのcompute/applyフェーズの分離、use:ディレクティブの削除など。 Announcing TypeScript 6.0 RC - TypeScript devblogs.microsoft.com/typescript/announcing-typescript-6-0-rc/ TypeScript ReleaseNote TypeScript 6.0 RCリリース。 import ... assert {...}の廃止が延期された。 strictがデフォルトでtrueに変更、moduleのデフォルトがesnextに変更、targetのデフォルトがes2025に変更、typesのデフォルトが[]に変更。 target: es5/--moduleResolution node10/--module amd|umd|system/--outFileなどを非推奨化。 RegExp.escapeやTemporalの型定義を追加、lib.domにdom.iterableとdom.asynciterableを統合。 thisを使わない関数のcontext sensitivityの改善、#/で始まるsubpath importsのサポートを追加。 --moduleResolution bundlerと--module commonjsの組み合わせが可能に。 --stableTypeOrderingフラグの追加など。 Astro 6.0 | Astro astro.build/blog/astro-6/ astro ReleaseNote cloudflare Rust Vite Astro 6.0リリース。 Node.js — Evolving the Node.js Release Schedule nodejs.org/en/blog/announcements/evolving-the-nodejs-release-schedule nodejs news Node.jsのリリースモデルを2026年10月から変更される。 Chrome 146  |  Release notes  |  Chrome for Developers developer.chrome.com/release-notes/146 Chrome ReleaseNote Chrome 146リリース。 trigger-scopeプロパティのサポート。 meta name="text-scale"によるOS/ブラウザのテキストスケーリング設定の反映、Scoped Custom Element Registryのサポート。 Iterator.concat()のサポート、Sanitizer APIの追加、WebAudioのPlayback Statistics APIの追加。 Get features faster with Chrome's two-week release cycle  |  Blog  |  Chrome for Developers developer.chrome.com/blog/chrome-two-week-release?hl=en Chrome browser news Chromeのリリースサイクルを2026年9月(Chrome 153)から、4週間サイクルから2週間サイクルへ変更する。 RedwoodSDK 1.0: Getting Out of the Weeds | Blog | RedwoodSDK rwsdk.com/blog/redwood-v1-getting-out-of-the-weeds cloudflare React library ReleaseNote Cloudflare Workers向けのReactフレームワークであるRedwoodSDK 1.0リリース。 Release v1.0.0 · redwoodjs/sdk アーティクル Temporal: The 9-Year Journey to Fix Time in JavaScript | Bloomberg JS Blog bloomberg.github.io/js-blog/post/temporal/ TC39 ECMAScript JavaScript article ECMAScript ProposalのTemporalがStage 4となりES2026に含まれることが決定するまでの経緯についての記事。 Dateオブジェクトが抱えるミュータブルな設計、タイムゾーン対応の不足、曖昧なパースなどの問題と、それを解決するためにTemporalがどのように設計されたかを解説している。 ZonedDateTime/Instant/PlainDate/PlainTimeなどの型。temporal_rsやBloomberg/Google/Microsoft/Igaliaなど複数の組織による協力についても紹介されている。 サイト、サービス、ドキュメント Announcing npmx: a fast, modern browser for the npm registry npmx.dev/blog/alpha-release npm webservice search npmパッケージ検索サービスnpmx αリリース flatt-security/setup-takumi-guard-npm: GitHub Action to configure npm with Takumi Guard registry auth via OIDC github.com/flatt-security/setup-takumi-guard-npm npm security Actions npmのパッケージインストールをセキュリティプロキシ経由にすることで、悪意あるパッケージをブロックするGitHub Action。 https://npm.flatt.tech/に設定することでインストール時にパッケージをチェックする。 ソフトウェア、ツール、ライブラリ関係 aidenybai/react-grab: Select context for coding agents directly from your website github.com/aidenybai/react-grab/tree/main React Tools AI library Webサイト上のUI要素をInspectしてReactコンポーネント名やファイルパス、HTMLソースコードなどのコンテキスト情報をコピーできるツール。 dupontcyborg/numpy-ts: Full NumPy, in TypeScript/JavaScript (94% coverage) github.com/dupontcyborg/numpy-ts TypeScript JavaScript library math PythonのNumPyをTypeScript/JavaScriptで再実装したライブラリ。 pbakaus/impeccable: The design language that makes your AI harness better at design. github.com/pbakaus/impeccable AI Design CSS Tools AIコーディングエージェント向けのフロントエンドデザインのスキルとコマンドのセット。 タイポグラフィ、色彩、空間設計、モーション、インタラクション、レスポンシブデザイン、UXライティングなどのスキルを定義している。 AIが生成するUI/UXデザインにおけるアンチパターンのガイダンスも含まれている。 Claude Code、Cursor、Gemini CLIなどのAIツールに対応している。

azukiazusa のテックブログ2

CSS によるスクロールトリガーアニメーション

要素が画面内に入った時にアニメーションを開始するスクロールトリガーアニメーションは、これまでは JavaScript を使用して `Intersection Observer API` を利用する方法が一般的でした。JavaScript を使わずに CSS だけで実装を完結できるようになる `animation-trigger` という新しい CSS プロパティが登場しました。

gihyo.jp

OpenAI、Windows向け「Codex」アプリを一般提供開始 ——Windows上のCodexサンドボックスでエージェントを実行可能に

OpenAIは2026年3月4日、Windows向けCodexアプリの一般提供を開始した。

gihyo.jp

Google、マルチモーダル埋め込みモデル「Gemini Embedding 2」をパブリックプレビューリリース

Googleは2026年3月10日、Geminiアーキテクチャを基盤とする同社初のマルチモーダル埋め込みモデル「Gemini Embedding 2」をパブリックプレビューとしてリリースした。

gihyo.jp

Fedora 44 Betaリリース、KDE Plasmaデスクトップのユーザビリティが大幅に改善

Fedoraプロジェクトは3月10日、「Fedora Linux 44」のベータ版を公開した。

gihyo.jp

大量のアップデート！ 位置共有、AIアイコン、マジックサジェストなど、生活を変える機能が登場

3月3日、GoogleはAndroidエコシステム全体へ提供する新機能と、Pixelデバイス向けの「Pixel Feature Drop」を発表しました。

gihyo.jp

第903回　コンテナ時代の端末ソフトウェアPtyxisを活用しよう！

Ubuntu 25.10から、Ubuntu標準の新しい端末ソフトウェアとして「Ptyxis（てぃくしす）」が採用されました。これまでの「GNOME端末」に比べると、インターフェースがよりモダンになり、かゆいところに手が届く細かい機能も増えています。今回はこのPtyxisについて紹介しましょう。

gihyo.jp

Claude Codeにコードレビュー機能がリサーチプレビューとして追加

Anthropicは2026年3月9日、AIコーディングアシスタントClaude Code用のコードレビュー機能がリサーチプレビュー版として利用可能になったことを発表した。

gihyo.jp

DuckDB 1.5.0リリース、コマンドラインクライアント、パーサーを刷新 ―次バージョンは“DuckDB 2.0”に

DuckDB開発チームは2026年3月9日、オープンソースの組み込み型データベースDuckDBの新バージョン1.5.0（コードネーム“Variegata”）をリリースした。

gihyo.jp

第61回　Linuxカーネルのコンテナ機能 - cgroup v2から使うメモリコントローラ（6）

今回は、メモリコントローラ関係のイベントを監視する際に使えるファイルについて説明します。

gihyo.jp

第266回　MySQL 9.4に追加されたJSON Duality Viewってなに？

第260回 MySQL 9.4と9.5の新機能について にもある通り、MySQL 9.4にて「JSON Duality View」という機能が追加されています。

gihyo.jp

予測三角形を用いたネストしたメニューのUX向上

今回は、予測三角形(prediction cone)を用いて、ネストしたポップアップメニューのUXを向上させる手法を紹介します。

gihyo.jp

複雑な脆弱性を推論、実用性の高い修正を提案する「Codex Security」リサーチプレビュー版として公開

OpenAIは2026年3月6日、AIセキュリティエージェント「Codex Security」をリサーチプレビュー版として公開した。

gihyo.jp

Blenderでオブジェクトの整理や不用意に触らないようにしてみよう

第72回目は、Blenderで作成したオブジェクトを整理する方法や、特定のオブジェクトを触らないようにする方法を見ていきます。

azukiazusa のテックブログ2

Skill Create スキルを使用したスキルの作成と改善

オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は skill-creator と呼ばれるスキルの作成と改善のプロセス、パフォーマンス測定を支援するツールを提供しています。この記事では skill-creator を使用してスキルを作成・改善を行うプロセスを実際に体験してみます

gihyo.jp

GPT‑5.4リリース ―最高性能の推論、コーディング、エージェントワークフロー機能を1つのモデルに統合

OpenAIは2026年3月5日、同社のフロンティアモデルの最新バージョンGPT-5.4をリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; Snapshot4のリリースとsudoのエコーバック、カリフォルニア州 AB1043への対応の検討

resoluteのSnapshot 4がリリースされました。SnapshotはQuesting（25.10）から開始された試みで、「⁠⁠リリース直前までの各月末に、リリース版と同じプロセスで生成されるISOイメージを作ってみる」というものです。

gihyo.jp

Google Workspace CLI公開、Gmail、Googleドライブ、カレンダー、Chatなどをコマンドラインから操作可能に ―エージェントスキルやMCPサーバーも装備

2026年3月4日、Google Workspaceのサービスをコマンドラインから操作できる「Google Workspace CLI」が、Apache 2.0ライセンスの元、GitHubとnpmレジストリで公開された。

gihyo.jp

HTMLを拡張し、JSなしで動的UIを作る「htmx」

本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。

gihyo.jp

Android 17 Beta 2リリース、MWC 2026で「ロボットスマホ」、「プライバシー・ディスプレイ」を披露

Googleは、MWC 2026に合わせるかのように「Android 17 Beta 2」をリリースしました。今回のアップデートは「ユーザの使い勝手」を左右するUIの刷新が目立つので、これに触れた後で、MWC 2026をターゲットとしてお披露目された気になるモノをピックアップします。

azukiazusa のテックブログ2

iOS Safari で触覚フィードバックを実現する WebHaptics

WebHaptics は、Web アプリケーションで触覚フィードバックを実装するための JavaScript ライブラリです。iOS Safari でも触覚フィードバックを提供することができます。この記事では、WebHaptics ライブラリの概要と、どのようにして iOS Safari で触覚フィードバックを実現しているのかについて解説します。

gihyo.jp

OpenAI、ChatGPT用の最新モデル「GPT-5.3 Instant」をリリース

OpenAIは2026年3月3日、ChatGPTでもっとも多く利用されているモデルのアップデートとして、GPT-5.3 Instantを発表した。

gihyo.jp

Chrome、9月リリースのバージョン153から2週間ごとのリリースサイクルに移行へ

Chromeは2026年3月3日、2021年に始まった現在の4週間のChromeリリースサイクルを、2026年9月から2週間へと移行することを発表した。

gihyo.jp

実運用を見据えたログ設計の観点 ——5つの設計指針と運用面での活用戦略

効果的なログ設計は、信頼性が高いアプリケーションの開発・運用に不可欠です。この記事では主要な設計原則を整理し、実効性を重視した具体的な指針と実装の勘所を提示します。クラウドネイティブな運用とオブザーバビリティの観点から、従来の設計を見直してみましょう。

gihyo.jp

第902回　FirefoxのAIチャットボットをローカルLLMで使用する

今回はFirefoxが持つAI機能の1つ、チャットボット、特にページの要約機能で使用するLLMをローカルLLMに変更する方法を紹介します。

gihyo.jp

Claude Code Agent Teamsの衝撃と実際

この連載で扱わざるを得ないエポックメイキングな機能が2026年2月5日にv2.1.32のClaude Opus 4.6のリリースと同時に発表されました。それが「Claude Code Agent Teams」です。今回は、何がそんなに衝撃だったのか、結局Agent Teamsは何ができて何が欠点なのか、その現在地を触りながら、今後の可能性を探求していきたいと思います。

gihyo.jp

AIエージェントからfreeeのAPIを操作可能なMCPサーバー「freee-mcp」オープンソースとして公開

フリー（株）は2026年3月2日、同社のサービス「freee」で提供されているAPIをAIエージェントが直接操作できるMCPサーバー「freee-mcp」をオープンソースとして公開した。

blog.jxck.io

「定時実行」と「定期実行」の実装ガイド

「毎時何時に実行」や「何時間ごとに実行」といった、タスクスケジューリングを実装する機会は少なくない。タスクを実装し cron に登録すれば、動くものを実装するのは難しくない。しかし、ひとたびタスクが思うように動かなかった途端、隠れていた要件が牙を剥く。一度でも痛い目を見た人は、それを経験的に疑い「まず色々と前提を確かめよう」という気持ちになり、例外処理を事前に固めることができる。今回は、実装方法そのものというよりも、「実装する前に確認すべき例外事項」を個人の経験を元に解説していく。

gihyo.jp

第127回　オープンソースカンファレンスOsaka報告、MySQLのコミュニティに向けた方針発表、PostgreSQLの緊急リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

`clamp()` 関数を使用したレスポンシブなフォントサイズ

レスポンシブデザインにおいてメディアクエリを使用して異なる画面サイズに対して異なるフォントサイズを指定する方法は一般的ですが、いくつかの課題点もあります。`clamp()` 関数を使用することで、画面幅の変化に対してフォントサイズが滑らかに変化するようにできます。また煩雑なメディアクエリの管理を減らすことができます。

gihyo.jp

プラットフォームエンジニアリングとは何か？ 基本概念と背景

第1回となる本稿では、プラットフォームエンジニアリングの定義と、注目されている背景にある、ソフトウェア開発現場が抱える課題について解説します。

gihyo.jp

GitHub Copilot CLI が一般提供を開始

GitHubは2026年2月25日、GitHub Copilot CLIを、すべての有料プランのユーザーに向けて一般提供を開始した。開発に関連する様々な作業をこなすコーディングエージェントをターミナルから操作できるようになる。

gihyo.jp

Google、Nano Banana 2をリリース ―Nano Banana ProのインテリジェンスとGemini 3.1 Flashのスピードをもつ画像生成モデル

Googleは2026年2月26日、画像生成AIモデルの最新バージョン「Nano Banana 2（Gemini 3.1 Flash Image）」をリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; Feature FreezeとUI Freezeの間の調整

resolute（Ubuntu 26.04 LTS）のFeature Freezeが完了し、3月12日のUI Freezeまでの「仕上げと調整」のシーズンに入りました。

JSer.info

2026-02-26のJS: Electrobun v1、Deno 2.7、Oxfmt Beta

JSer.info #765 - Electrobun v1がリリースされました。 Electrobun v1 - Blackboard Blog TypeScriptでクロスプラットフォームのデスクトップアプリを作成できるフレームワークで、ランタイムにBunを使い、ZigやC/C++で実装されています。 Deno v2.7がリリースされました。 Deno 2.7: Temporal API, Windows ARM, and npm overrides | Deno Temporal APIがstableに変更され、Windows ARM(aarch64)のサポートが追加されています。package.jsonのoverridesフィールドのサポート、CompressionStream/DecompressionStreamでのBrotliサポート、Web Crypto APIでのSHA3アルゴリズムのサポートなどが含まれています。 OxcのJavaScript FormatterであるOxfmtのβがリリースされました。 Oxfmt Beta | The JavaScript Oxidation Compiler PrettierのJavaScript/TypeScriptの互換テストを100%パスするようになっています。Tailwind CSSのクラスソート、importのソート、package.jsonのフィールドソートの組み込みサポートなどが含まれています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Electrobun v1 - Blackboard Blog blackboard.sh/blog/electrobun-v1/ TypeScript Bun Zig Electron library ReleaseNote TypeScriptでクロスプラットフォームのデスクトップアプリを作成できるフレームワーク。 <electrobun-webview>要素として扱える仕組みなどを持つ。 blackboardsh/electrobun: Build ultra fast, tiny, and cross-platform desktop apps with Typescript. Electrobun Documentation - Build ultra fast, tiny, cross-platform desktop apps Release v4.12.0 · honojs/hono github.com/honojs/hono/releases/tag/v4.12.0 Hono ReleaseNote Hono v4.12.0リリース。 $path()メソッドの追加、SSG向けのredirect pluginの追加、Basic AuthのonAuthSuccessコールバックの追加。 getConnInfoがAWS Lambda/Cloudflare Pages/Netlifyに対応。 c.json()のFast Pathの追加など Oxfmt Beta | The JavaScript Oxidation Compiler oxc.rs/blog/2026-02-24-oxfmt-beta JavaScript Rust Tools ReleaseNote OxcのJavaScript FormatterであるOxfmtのβリリース。 package.jsonのフィールドソートの組み込みサポートなど Oxfmt | The JavaScript Oxidation Compiler Node.js — Node.js 25.7.0 (Current) nodejs.org/en/blog/release/v25.7.0 nodejs ReleaseNote Node v25.7.0リリース。 node:sqliteモジュールがRelease Candidate(RC)に昇格。 http1Optionsを追加。 Duplex.toWeb()のtypeオプションをreadableTypeにリネーム、node:testでSIGINT時に中断されたテストを表示するように。 fs.statにthrowIfNoEntryオプションの追加、zlibでBrotli圧縮辞書のサポートなど。 Node.js — Node.js 24.14.0 (LTS) nodejs.org/en/blog/release/v24.14.0 nodejs ReleaseNote Node v24.14.0リリース。 async_hooksのcreateHook()にtrackPromisesオプションの追加、fs.watch()にignoreオプションの追加。 http.setGlobalProxyFromEnv()の追加、Subpath Importsで#/から始まるパスをサポート。 stream/consumersにbytes()メソッドの追加、node:testのrun()にenvオプションの追加やit.expectFailureのサポートなど。 Deno 2.7: Temporal API, Windows ARM, and npm overrides | Deno deno.com/blog/v2.7 deno ReleaseNote Deno v2.7リリース。 package.jsonのoverridesフィールドのサポート、deno install --compileの追加。 CompressionStream/DecompressionStreamがBrotliをサポート、Web Crypto APIでSHA3アルゴリズムのサポート。 deno taskでglobstar(**)とpipefailのサポート、deno compile --self-extractingオプションの追加。 node:worker_threads/node:child_process/node:zlib(Zstd)などの修正、V8 14.5へのアップデートなど。 npm bulk trusted publishing config and script security now generally available - GitHub Changelog github.blog/changelog/2026-02-18-npm-bulk-trusted-publishing-config-and-script-security-now-generally-available/ npm security npm CLI v11.10.0リリース。 min-release-ageでパッケージの公開から一定日経過したものだけをインストールできるように。 npm trustコマンドで複数パッケージのOIDC Trusted Publishingの設定を一括で行えるように。 --allow-gitフラグの追加により、git依存関係のインストール時のセキュリティ制御が可能に。.npmrcでgit実行パスを上書きすることで--ignore-scripts使用時でもコード実行が可能だった問題に対処している。 --allow-git=noneの利用が推奨されており、npm CLI v12でデフォルトになる予定。 Release v11.11.0 · npm/cli The React Foundation: A New Home for React Hosted by the Linux Foundation – React react.dev/blog/2026/02/24/the-react-foundation React OpenSource community organization news React FoundationがLinux Foundation傘下に正式に設立された。 Release styled-components@6.3.7 · styled-components/styled-components github.com/styled-components/styled-components/releases/tag/styled-components%406.3.7 CSS React library ReleaseNote styled-components v6.3.7リリース。 createGlobalStyleがReact StrictModeやRSC(React Server Components)で正しく動作しない問題の修正。 exportsフィールドを追加しESMの対応を改善など アーティクル Clinejection — Compromising Cline's Production Releases just by Prompting an Issue Triager | Adnan Khan - Security Research adnanthekhan.com/posts/clinejection/ security VSCode AI article ClineのGitHub Actionsワークフローに対する攻撃手法についての記事。 Goodbye innerHTML, Hello setHTML: Stronger XSS Protection in Firefox 148 - Mozilla Hacks - the Web developer blog hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/ Firefox XSS security DOM article Firefox 148で実装されたSanitizer APIについて。 innerHTMLはHTMLをフィルタリングせずに挿入するが、setHTML()は自動的にサニタイズしてXSSの原因となる危険な要素や属性を除去する。 How we rebuilt Next.js with AI in one week blog.cloudflare.com/vinext/ Next.js cloudflare vite article CloudflareによるNext.js互換フレームワークvinextについて。 cloudflare/vinext: Vite plugin that reimplements the Next.js API surface — deploy anywhere サイト、サービス、ドキュメント millionco/react-doctor: Let coding agents diagnose and fix your React code github.com/millionco/react-doctor React Tools ESLint performance accessibility AI Reactのコードベースを静的解析して、ヘルススコア(0〜100)を算出するツール。 vercel-labs/portless: Replace port numbers with stable, named .localhost URLs. For humans and agents. github.com/vercel-labs/portless Tools server nodejs debug ポート番号の代わりにmyapp.localhostのような名前付き.localhost URLを使えるようにする開発用プロキシツール。 portless proxy startでデーモンを起動し、portless myapp next devのように開発サーバーを起動する。 http://myapp.localhost:1355のようなURLでアクセスできる。 HTTP/2やHTTPSの証明書の自動生成に対応し、Next.js/Express/Nuxt/Vite/Astroなどのフレームワークで利用できる。

azukiazusa のテックブログ2

AI エージェントを通じてコードとキャンバスを接続するデザインツール Paper を試してみた

Paper は AI エージェントを通じてコードとキャンバスを双方向に接続するデザインツールで、AI にデザインの作成やコードへの変換を任せることができます。Paper の MCP サーバーのツールを組み合わせることでキャンバス上のノードの情報を取得したり、デザインを挿入・編集したりすることができます。この記事では実際に Paper を試して、コードからデザインへ、デザインからコードへの双方向のワークフローがどのように実現されているのかを紹介します。

gihyo.jp

Cloudflare、Next.jsをCloudflare Workersに1コマンドでデプロイできる「vinext」を公開 ―AIコーディングで“Viteで動作するNext.js”をリビルド

Cloudflareは2026年2月24日、ReactのフレームワークNext.jsをフロントエンドビルドツールViteで動作させるプラグイン「vinext」を、MIT Licenseの元GitHub上に公開した。

gihyo.jp

PythonでLLMアプリ開発を型安全に扱う ― Pydantic AI入門

2026年2月の「Python Monthly Topics」は、Python向けAIエージェントフレームワーク「Pydantic AI」について紹介します。

gihyo.jp

Android 17 Beta 1からのリリース、この裏にある「AIエージェント」への転換点とレスポンシブ対応の義務化

2026年2月13日、Googleは次期OS「Android 17」の最初のベータ版がリリースされました。

azukiazusa のテックブログ2

プラットフォームごとの Chat ボットの実装を抽象化する Chat SDK

Chat SDK は TypeScript で記述されたライブラリで、1 つのコードベースで複数のチャットプラットフォームに対応するチャットボットを開発できるようになります。イベント型アーキテクチャを採用しており、メンション, メッセージ, リアクション, スラッシュコマンドなどのイベントに型安全なハンドラーを定義できます。この記事では実際に Chat SDK を使用して、Slack 向けのチャットボットを実装する方法を紹介します。

gihyo.jp

ノーコードでAIワークフローを構築できるOpal、エージェントステップを追加

Google Labsは2026年2月24日、AIワークフローを組み立てて実行できるノーコードビジュアルビルダーOpalにおいて、これまで具体的なモデルを選択する必要があったGenerateステップでエージェントを選択できるようになったことを発表した。

gihyo.jp

第901回　さらに進化したUptime Kumaで、家庭内監視システムを構築する

シンプルな監視ツールであるUptime Kumaを紹介し4年が経過しました。Kumaのバージョンは2系に進化し、様々な仕様変更や機能強化がなされています。今回はバージョン2系の最新版を使い、シンプルな家庭内監視システムを構築してみましょう。

blog.jxck.io

ローカル HTTPS 開発専用ツール SPTTH を公開した

http://localhost:3000 での開発には限界がある。しかし、本番と同じように https://example.com でアクセスできる環境をローカルに作るには、ドメインの解決、証明書の発行、443 での起動など、少し手間がかかる。そこで、必要な全てを 1 つのツールで行い、様々な開発環境を再現するためのツールを開発したので、紹介する。Jxck/sptth: reverse https proxy (https - sptth) for local developmenthttps://github.com/Jxck/sptth

azukiazusa のテックブログ2

テキストサイズの拡大設定の問題と解決策

WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザーがテキストサイズを拡大してもコンテンツが拡大されないという問題が長年存在していました。この記事では、この問題の原因と解決策について解説します。

gihyo.jp

draw.io、Claude Code向けスキルを公開

draw.ioは2026年2月23日、Claude Code向けの「Draw.io Skill」を公開した。

gihyo.jp

Linux 7.0-rc1が公開、正式リリースは4月中旬か ―メジャーナンバーのアップは「着実な進歩の指標」

Linus Torvaldsは2月22日、次期LinuxカーネルLinux 7.0の最初のリリース候補版（RC）となる「Linux 7.0-rc1」を公開した。

gihyo.jp

llama.cpp開発を牽引してきたggml.aiがHugging Faceに合流

llama.cppの開発を牽引してきたggml.aiは2026年2月20日、Hugging Faceへの合流を発表した。

gihyo.jp

AIが脆弱性を推論し検知、修正を提案する「Claude Code Security」限定リサーチプレビュー版として提供開始

Anthropicは2026年2月20日、Web版Claude Code上でAIがコードをスキャンして、セキュリティ脆弱性を検出しパッチを提案する新機能「Claude Code Security」を限定リサーチプレビュー版として公開した。

gihyo.jp

日本語性能を強化したオープンなLLM「GPT-OSS Swallow」と「Qwen3 Swallow」リリース

Swallow LLM Projectは2026年2月20日、OpenAI GPT-OSSおよびAlibaba Qwen3の日本語能力と思考力を強化した推論型言語モデル「GPT-OSS Swallow」と「Qwen3 Swallow」をリリースした。

gihyo.jp

Blenderで作成したオブジェクトを、別のBlenderファイル読み込んでみよう

第71回目は、Blenderで作成したオブジェクトを、別のBlenderファイルに読み込む方法について見ていきます。

gihyo.jp

第265回　MySQLの再帰CTEを使ってBrainf*ckを動かしてみる

MySQL 8.0で導入された再帰CTE（WITH RECURSIVE）は、階層構造の走査やグラフ探索に使われることが多い機能です。

azukiazusa のテックブログ2

Claude Code デスクトップで Worktree を作成するとき .worktreeinclude で .gitignore で除外されているファイルを含める

Git Worktree を作成するとき、.gitignore に指定している .env ファイルなどがコピーされないという問題があります。この問題を解決するために Claude Code のデスクトップバージョンでは .worktreeinclude で .gitignore で除外されているファイルを含めることができます。

azukiazusa のテックブログ2

デスクトップ Claude Code の Preview 機能で UI を直接確認する

Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。

gihyo.jp

GitHub CopilotのZedエディタ対応が一般提供開始

GitHubは2026年2月19日、高速に動作するエディタZedにおけるGitHub Copilot対応を一般提供で開始した

gihyo.jp

Copilotから逃れたい！―Gentoo Linux、GitHubからCodebergへの移行を開始

Gentoo Linuxの開発チームは2月16日、Gentoo Linuxのリポジトリミラーを従来使っていたGitHutからCodebergへと移行する作業を開始した。

gihyo.jp

Ubuntu 26.04（resolute）の開発;「ソフトウェアとアップデート」の整理、Ubuntu 24.04.4のリリース、Open Source Conference 2026 Tokyo/Spring＠駒澤大学、ハイブリッド鍵交換の必要性

resoluteの開発において、比較的大きな「転換点」が生じました。具体的には“Software &amp; Updates”（software-propertiesパッケージ）を整理するという方向性です。

gihyo.jp

Gemini 3.1 Proリリース ―テキストから鮮明なSVGアニメを生成可能に

Googleは2026年2月19日、Gemini 3シリーズを元に推論機能をさらに進化させたモデル「Gemini 3.1 Pro」プレビュー版をリリースした。

gihyo.jp

KDE Plasma 6.6リリース　―“宇宙で最高のデスクトップです（当社比）”

KDEプロジェクトは2月17日、デスクトップ環境「KDE Plasma」の最新バージョンとなる「KDE Plasma 6.6」をリリースした。

gihyo.jp

NVIDIA、高性能で軽量な日本語特化言語モデルNemotron-Nano-9B-v2-Japaneseを公開

NVIDIAは2026年2月18日、軽量で高度な日本語理解能力を持つ言語モデルNVIDIA Nemotron-Nano-9B-v2-Japaneseを公開した。

gihyo.jp

4/22-24開催「RubyKaigi 2026」キーノートスピーカー発表、チケット販売中

プログラミング言語Rubyに関する年次国際カンファレンス「RubyKaigi 2026」が2026年4月22日（水）～24日（金）の3日間、北海道函館市の函館アリーナ/函館市民会館で開催される。

gihyo.jp

プレーンテキストで出力するワイヤーフレームツール「Mockdown」「Wiretext」が相次いで公開 ——テキスト形式のワイヤーフレームをエージェントに渡し、UIコードの生成を目指す

ワイヤーフレームを作成して、それをテキストとして出力するツールが相次いで登場した。2026年2月16日に「Mockdown」が、2月13日に「Wiretext」の2つのツールがそれぞれ別の開発者から公開されている。

azukiazusa のテックブログ2

Claude Code to Figma を使ってコードから Figma デザインを生成する

Claude Code to Figma はコードから Figma デザインを生成するための機能です。Figma MCP サーバーの `generate_figma_design` ツールを使用して、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。

gihyo.jp

Anthropic、Opusクラスに迫る「Claude Sonnet 4.6」をリリース ——FigmaもClaude Codeを利用した、ブラウザ上のUIキャプチャ機能を発表

Anthropicは2026年2月17日、同社の最新モデルClaude Sonnet 4.6をリリースした。Sonnetのモデルとして全面的なアップデートであり、多くの分野でOpusクラスの能力に近づいている。

gihyo.jp

NotebookLM、プロンプトを使ったスライド修正機能と、PowerPoint形式の出力機能を提供へ

NotebookLMは2026年2月17日、プロンプトを使ったスライド修正機能と、PowerPoint形式の出力機能を追加するアップデートを発表した。

gihyo.jp

第900回　Ubuntuでもウイルスのオンアクセススキャンをしてみよう

今回はUbuntu 24.04向けにアップデートした、ClamAVのオンアクセススキャンの使い方を紹介します。

gihyo.jp

「PHPerKaigi 2026」3/20-22に開催、チケット販売中

PHPユーザが技術的なノウハウやPHP愛を共有するための年次イベント「PHPerKaigi 2026」が、2026年3月20日（金）～22日（日）に東京、中野セントラルパークカンファレンスとニコニコ生放送のハイブリッド形式で開催される。

blog.jxck.io

「カンファレンス開催ノウハウ」を公開します

コロナ禍が明け、カンファレンス文化も再開し、コロナ前と同等かそれ以上の頻度で多くのカンファレンスが企画されるようになりました。しかし、コロナ禍による断絶でノウハウの継承が途絶えた部分もあり、後発のイベントが既知の失敗を重ねている場面も見られます。そこで、カンファレンス主催者の有志が集まり、それぞれのノウハウを持ち寄ってまとめた「カンファレンス開催ノウハウ」を作成しました。📔 カンファレンス開催ノウハウ - Google ドキュメント複数人で書いたため、この公開に合わせて複数の有志がそれぞれのブログなどで告知します。

JSer.info

2026-02-16のJS: TypeScript 6.0 Beta、State of React 2025の結果、Interop 2026

JSer.info #764 - TypeScript 6.0 Betaがリリースされました。 Announcing TypeScript 6.0 Beta - TypeScript TypeScript 7(Go言語ベース)への移行を見据えたリリースで、多くのデフォルト設定の変更や非推奨化が含まれています。strictがデフォルトでtrueに、moduleのデフォルトがesnextに、targetのデフォルトがes2025にそれぞれ変更されています。また、target: es5や--moduleResolution node10などが非推奨化され、ES2025のRegExp.escapeやTemporalの型定義の追加、TypeScript 7への移行を補助する--stableTypeOrderingフラグの追加なども含まれています。 State of React 2025のアンケート結果が公開されました。 State of React 2025 Reactの機能、フレームワーク、状態管理、データフェッチング、メタフレームワーク、ツール、AI活用などについてのアンケート結果がまとめられています。 ブラウザの相互運用性の向上を目指すプロジェクトであるInterop 2026が開始されました。 Interop 2026が始まりました！ Launching Interop 2026 - Mozilla Hacks - the Web developer blog Announcing Interop 2026 | WebKit Interop 2026 Focus Areas Announced | Igalia Interop 2026: Continuing to improve the web for developers | web.dev Microsoft Edge and Interop 2026 - Microsoft Edge Blog Apple、Google、Microsoft、Mozillaなどのブラウザベンダーが参加し、CSS Anchor Positioning、Container Style Queries、Navigation API、View Transitionsなどがフォーカスエリアに選ばれています。その他にもScroll-driven Animations、IndexedDB、WebRTC、WebTransportなど合計20の分野が対象となっています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Announcing TypeScript 6.0 Beta - TypeScript devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/ TypeScript ReleaseNote TypeScript 6.0 Betaリリース。 strictがデフォルトでtrueに変更、moduleのデフォルトがesnextに変更、targetのデフォルトがes2025に変更、typesのデフォルトが[]に変更。 target: es5/--moduleResolution node10/--module amd|umd|system/--outFileなどを非推奨化。 RegExp.escapeやTemporalの型定義を追加、lib.domにdom.iterableとdom.asynciterableを統合。 --stableTypeOrderingフラグの追加など。 WebKit features for Safari 26.3 | WebKit webkit.org/blog/17798/webkit-features-for-safari-26-3/ safari browser ReleaseNote Safari 26.3リリース。 NavigateEventにAbortSignalを公開し、ナビゲーション中断時に進行中の処理をキャンセルできるように。 position-tryやtext-decoration、マルチカラムレイアウトに関するバグ修正など。 Biome v2.4—Embedded Snippets, HTML Accessibility, and Better Framework Support | Biome biomejs.dev/blog/biome-v2-4/ biome ReleaseNote Biome v2.4リリース。 :slottedや:deepに対応。 --skip/--onlyフラグのサポートなど。 アーティクル Blog > Writing Good Unit Tests eliocapella.com/blog/writing-good-unit-tests/ test JavaScript article ユニットテストの書き方についての記事。 State of React 2025 2025.stateofreact.com/en-US React Survey State of React 2025のアンケート結果が公開された。 The CSS Selection - 2026 Edition - Project Wallace www.projectwallace.com/the-css-selection/2026 CSS article 10万以上のウェブサイトを対象にした実際のCSS利用状況の調査レポート。 :where() 91%、:has() 41%、@container 10%、@layer 2.7%などの採用率になっている。 Interop 2026が始まりました！ zenn.dev/yamanoku/articles/interop-2026-launched browser WebPlatformAPI article ブラウザの相互運用性の向上を目指すプロジェクトであるInterop 2026について。 Launching Interop 2026 - Mozilla Hacks - the Web developer blog Announcing Interop 2026 | WebKit Interop 2026 Focus Areas Announced | Igalia Interop 2026: Continuing to improve the web for developers | web.dev Microsoft Edge and Interop 2026 - Microsoft Edge Blog Web フォントを使って contenteditable から脱出する techblog.lycorp.co.jp/ja/20260216c CSS fonts article 任意の大きさに変形できる空白の文字を持つウェブフォントとテキストのオーバレイを使ってテキストエリアに絵文字などの装飾を表示する方法について Roadmap 2026 (2026-02-04) | webpack webpack.js.org/blog/2026-04-02-roadmap-2026/ webpack article webpack 2026年のロードマップ。 サイト、サービス、ドキュメント npmx - Package Browser for the npm Registry npmx.dev/ npm search webservice npmレジストリのインクリメンタル検索サービス。 ソフトウェア、ツール、ライブラリ関係 hamzaydia/verifyfetch: Resumable, verified downloads for large browser files. Fail at 3.8GB, resume from 3.8GB. github.com/hamzaydia/verifyfetch JavaScript library Fetch WebAssembly ブラウザでの大容量ファイルのダウンロードにおいて、レジューム対応と整合性の検証を行うライブラリ。 bikeshaving/shovel: Run Service Workers anywhere github.com/bikeshaving/shovel ServiceWorker server library nodejs Bun cloudflare Service Worker APIやWeb標準APIのインターフェースをベースにしたサーバアプリケーションを書けるメタフレームワーク。 install/activate/fetchイベントをベースにしたサーバライフサイクルを持つ。 ubugeeei/vize: Unofficial High-Performance Vue.js Toolchain in Rust github.com/ubugeeei/vize Vue Rust Tools compiler Rustで書かれたVue.jsツールチェイン。 Vue SFCのコンパイラ、Linter、Formatter、型チェッカー、LSPなどを含む。 CLI/Browser(WebAssembly)/Vite Pluginとして利用できる

gihyo.jp

GitHub、Agentic Workflowsをテクニカルプレビューで提供開始 ——GitHub Actionsでのエージェント動作を自然言語で記述可能に

GitHubは2026年2月13日、Issueのトリアージやコードの修正、CIエラーの分析といったリポジトリ内の作業を自動化する「GitHub Agentic Workflows」をテクニカルプレビューとして公開した。

gihyo.jp

Visual Studio Code安定版、チャットメッセージのキューイングとステアリング、エージェントフックを導入 ——Insiders版の注目機能をより早く提供するため、安定版を「週次アップデート」に移行へ

Visual Studio Codeは2026年2月12日、安定版の最新アップデート、バージョン1.109.3をリリースした。新機能として、メッセージのキューイングとステアリング、フック、Claude互換性、そしてスラッシュコマンドとしてのスキルが導入されている。

gihyo.jp

OpenClaw開発者、OpenAIに入社 ―OpenClawはオープンソースプロジェクトとして継続

パーソナルAIアシスタントOpenClaw（旧名称Clawdbot）の作者であるPeter Steinberger氏は2026年2月16日、OpenAIに入社することを明らかにした。

gihyo.jp

MakerChipを作ろう

3DPに興味がある人たちの中でMakerChipという文化が浸透し始めています。

azukiazusa のテックブログ2

AI エージェントのセッションを Git 互換のデータベースに保存する Entire CLI

Entire CLI は AI エージェントのセッションを Git 互換のデータベースとして保存するためのツールです。Git レポジトリで Entire を有効にすると、AI エージェントのセッションをチェックポイントとして保存できるようになります。チェックポイントではユーザーのプロンプトや AI エージェントの応答、ツールの使用履歴、AI がコードを書いた割合などを確認できます。

gihyo.jp

Cloudflare、「Markdown for Agents」を発表 ——エージェント向けにウェブページのHTMLをオンザフライでMarkdownに変換

Cloudflareは2026年2月12日、ウェブページをエージェント向けにMarkdownにして提供できる機能「Markdown for Agents」を発表した。この機能はPro/Business/EnterpriseプランおよびSSL for SaaSで、ベータ機能として無償で提供される。

gihyo.jp

Google、Gemini 3 Deep Thinkを更新し研究・エンジニアリング用途を強化 ——数学研究エージェント「Aletheia」など共同研究の取り組みも

GoogleのDeep Thinkチームは2026年2月12日、推論モード「Gemini 3 Deep Think」のモデルを更新したことを発表した。

gihyo.jp

本当に効く、真の業務改善とは ～『業務設計の教科書』発売記念イベント@書泉ブックタワーレポート～

2026年1月29日に書泉ブックタワーで開催された書籍2冊をテーマにしたイベント「本当に効く、真の業務改善とは〜 業務設計とExcel仕事術で学ぶ実践的アプローチ」。本稿ではその模様をレポートします。

gihyo.jp

Ubuntu 26.04（resolute）の開発; LubuntuとUbuntu BudgieのX11サポートの行方、SpacemiT K3/K1シリーズとNVIDIA Vera Rubinのサポート、HWEカーネルとドライバーの問題

resoluteのリリースまであと2ヶ月ほどとなり、各種フレーバーを含めた「基本的な仕様」の整理のための作業が進められています。

gihyo.jp

Stitch、Webデザインの着想を得るIdeateエージェントを追加 ——どのエージェントからもFigmaへの出力も可能に

Google Labsが提供しているStitchは2026年2月11日、Stitchプロジェクトの開始時に使用できるエージェントとして、Webデザインの着想を得るためのIdeateエージェントを追加したことを発表した。

gihyo.jp

Obsidianをコマンドラインで操作する「Obsidian CLI」早期アクセス版で提供開始

2026年2月10日、MarkdownノートアプリObsidianの最新バージョン1.12.0が、早期アクセス版としてCatalystライセンスをもつユーザ向けにリリースされた。Obsidian 1.12.0ではコマンドラインインターフェース「Obsidian CLI」の機能が新たに追加された。

gihyo.jp

Go 1.26リリース、Green Teaガベージコレクタをデフォルトに

Go開発チームは2026年2月10日、プログラミング言語Goの最新バージョンGo 1.26をリリースした。

gihyo.jp

「コードを書くだけ」の自分を卒業する。ヌーラボが社内外から“起業家”を募る「Nu Source」は、エンジニアのキャリアを、そして、世界をどう変えるのか

「Backlog」や「Cacoo」など、エンジニア発のツールをグローバルSaaSへと成長させてきた株式会社ヌーラボ。同社が開始したのが、今回紹介する「Nu Source（ヌーソース）」です。Nu Sourceは社内外から事業アイデアを公募する新規事業創出プログラムとして、今注目を集めています。

gihyo.jp

第899回　Distroboxを使えば、他のディストリビューションの最新パッケージをUbuntuでも気軽に試せる

今回は、他のディストリビューションのパッケージを気軽に素早く試せる「Distrobox」を紹介します。

gihyo.jp

GoogleマップのGemini統合が示すAI前提のUIの形とは？

皆さんrabbit r1を覚えていますでしょうか？ 2026年1月に入って、rabbit r1の新たな方向性を定めることになる可能性があるアップデートが行われました。

azukiazusa のテックブログ2

Web アプリケーションをツール化する WebMCP

WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。

blog.jxck.io

text-scale によるユーザ指定倍率での文字拡大

小さい文字が見づらい場合、ユーザは OS の文字サイズを大きくすることで、視認性を調整することができる。こうした機能は大抵の OS が備えており、システムフォントのサイズなどに反映される。しかし、その指定がそのまま Web コンテンツにも反映されるかというと、必ずしもそうではない。この問題を解決するために、いくつかの標準が提案され、策定と実装が進んでいる。

gihyo.jp

第264回　MySQL 8.0 → 8.4アップグレードで気をつけるべきポイント

MySQL 8.4はLTS（Long Term Support）として位置づけられており、8.0系からの移行先として検討されるケースが増えています。

gihyo.jp

Linux 6.19リリース、次のメインラインは「Linux 7.0」に決定

Linus Torvaldsは2月8日、2026年最初のメインラインリリースとなる「Linux 6.19」を公開した。

gihyo.jp

Blenderの機能であるドライバーについて、設定方法やコピー方法を見ていこう

前回に引き続きBlenderの「ドライバー」という機能について見ていきます。

azukiazusa のテックブログ2

React で動画を作る Remotion

Remotion は React を使ってプログラム的に動画を作成できるフレームワークです。CSS や SVG、Canvas API などのウェブ技術を活用したり、変数や関数、ループ、条件分岐などのプログラミングの概念を利用して動画を生成できます。この記事では Remotion の基本的な使い方を紹介します。

azukiazusa のテックブログ2

Claude Code のオーケストレーション機能であるエージェントチームを試してみた

Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます。

gihyo.jp

Debian、LLMスクレイピング攻撃でCIデータの公開閲覧を制限

生成AIの普及と進化はサイバー攻撃のスタイルにも急激な変化をもたらしている。そのひとつがAI/LLMによるWebサイトのスクレイピングだ。

gihyo.jp

フロンティアモデル「Claude Opus 4.6」および「GPT-5.3-Codex」がリリース ——ソフトウェア開発はAgentic Engineeringへ

2026年2月5日、AnthropicはClaude Opus 4.6を発表しました。同日、OpenAIもGPT‑5.3‑Codexを発表しました。これらのモデルは両社のフロンティアモデルです。同日にリリースされたため、今回は一緒に取り上げます。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発;Snapshot 3のリリースとArm64向けSteam Snap、25.04のサポート終了、注目すべきセキュリティー的な視点

resolute（Ubuntu 26.04 LTS）はSnapshot 3がリリースされ、順調に「本来の姿」を目指した開発が進められています。

gihyo.jp

GitHub⁠⁠、ClaudeとCodexをエージェントとして直接実行する機能を、Copilot Pro+/Enterpriseユーザー向けにパブリックプレビューで提供開始 ——Visual Studio Codeでも利用可能に

GitHubは2026年2月4日、GitHubにおけるAIエージェント利用戦略「Agent HQ」において、AnthropicのClaudeおよびOpenAIのCodexが、GitHubおよびVisual Studio Code上で直接コーディングエージェントとして利用できるようになったことを発表した。

gihyo.jp

LibreOffice 26.2リリース、Markdownのインポート/エクスポートに対応

Document Foundationは2026年2月4日、LibreOfficeの新バージョン26.2をリリースした。

gihyo.jp

使えないウサギは返上か？ DLAMでrabbit r1は逆転できるのか

皆さんrabbit r1を覚えていますでしょうか？ 2026年1月に入って、rabbit r1の新たな方向性を定めることになる可能性があるアップデートが行われました。

blog.jxck.io

Global Privacy Control という法的効力を持つヘッダ

GPC (Global Privacy Control) の策定と実装が進んでいる。このヘッダは、サービス、ユーザ、ブラウザ、全てにとって「無視することができない特別なヘッダ」となりつつある。たかだか 1 という値を送るだけのヘッダに、何の意味があるのか?失敗して歴史に消えつつある DNT と何が違うのか?解説していく。

gihyo.jp

【AI時代の開発戦略】開発スピードと品質をどう両立させる？ 3社エンジニアの事例に学ぶ

2026年1月15日にカミナシ、キャディ、ENECHANGEという急成長テックベンチャー3社のエンジニアが登壇したオンラインイベント「【AI時代の開発戦略】開発スピードと品質の両立に向けて ー 3社エンジニアの事例から学ぶ」。本稿では、その模様をレポートします。

gihyo.jp

Alibaba、コーディングエージェント向けモデル「Qwen3-Coder-Next」をリリース

AlibabaのQwen Teamは2026年2月3日、コーディングエージェントおよびローカル開発向けに特化して設計されたオープンウェイトの言語モデル「Qwen3-Coder-Next」を発表した。

gihyo.jp

Xcode⁠⁠、26.3 RCで⁠⁠ClaudeやCodexのコーディングエージェントを直接活用してアプリ開発が可能に ——MCPを利用して外部ツールでXcode Previewsのキャプチャ参照も実現

Appleは2026年2月3日、統合開発環境の最新版「Xcode 26.3」のRelease Candidate（RC）の提供を開始した。このリリースでXcode内から直接、AnthropicのClaude AgentやOpenAIのCodexをコーディングエージェントとして活用できる機能を導入したことを発表した。

gihyo.jp

第898回　Ubuntuにおけるミラーサーバーとその付き合い方

Ubuntuイメージを配布する日本のミラーサーバーとして動いていた富山大学のサーバーが、1月末にその役割を終えてシャットダウンされました。今回はUbuntuにおけるミラーサーバーとは何か、そしてより高速にリポジトリへとアクセスするにはどうすればいいのかを紹介します。

gihyo.jp

FirefoxのAI機能を一元管理でブロック可能に ―「AIコントロール」機能を実装

Mozilla Corporationは2026年2月24日にリリースされるFirefox 148で、デスクトップブラウザの設定に「AIコントロール」セクションを設けることを発表した。

gihyo.jp

OpenAI、Codexアプリをリリース ―エージェントのマルチタスクや自動実行、エージェントスキルに対応した“エージェントのコマンドセンター”

OpenAIは2026年2月2日、macOS用Codexアプリをリリースした。

gihyo.jp

Btrfs開発者のChris Mason、カーネル開発のためのAI支援コードレビュープロンプトをアップデート

AI/LLMによるコードレビューの自動化はすでに多くのエンジニアリングの現場で拡がっているが、どうやらLinuxカーネル開発においてもその動きが始まりつつあるようだ。

gihyo.jp

第126回　MySQL 9.6.0リリース、Fujitsu Enterprise Postgres 18リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

MoonBit の宣言 UI ライブラリ Luna を使ってみる

Luna は MoonBit と JavaScript を使用して Web アプリケーションのユーザーインターフェースを構築するための宣言型 UI ライブラリです。この記事では、Luna UI と MoonBit を使用してシンプルなカウンターアプリケーションを作成する方法を紹介します。

azukiazusa のテックブログ2

MoonBit で RESTful API サーバーを構築する

MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。この記事では、MoonBit を使用してシンプルな RESTful API サーバーを作成する方法を紹介します。

gihyo.jp

Mac mini不要、Cloudflare Workers上でMoltbotが動く「Moltworker」オープンソースとして公開

Cloudflareは2026年1月29日、旧名称「Clawdbot」として知られるパーソナルAIアシスタントMoltbotを、同社のサーバレスコンピューティングプラットフォームCloudflare Workers上で動作させるミドルウェア「Moltworker」を、GitHub上でオープンソースとして公開した。

gihyo.jp

狙われるSnap Store ―元CanonicalエンジニアリングマネージャがSnapユーザにマルウェアの注意喚起

人気の高いオープンソースプロダクトは悪質なサイバーセキュリティ攻撃のターゲットにもされやすい。

gihyo.jp

JetBrainsとZed、ACPレジストリを発表 ——GitHub Copilot CLIのACP対応もパブリックプレビューに

JetBrainsとZedは2026年1月28日、「ACPレジストリ（ACP Registry）」をベータ版として公開したことを発表した。

gihyo.jp

Google、ChromeのAI機能の大幅な強化を発表 ―Nano Bananaを統合、Geminiサイドパネル、アプリ連携、エージェントのような自動ブラウズも

Googleは2026年1月28日、Chromeの最新アップデートでGeminiによるAI機能を大幅に拡張することを発表した。

gihyo.jp

どれだけ知っている？ 用途別のAndroid

私たちが日頃接しているのは、スマホやタブレット向けのAndroidです。これ以外にも、用途別に最適化されたAndroidがいくつか存在するので、今回はそのバリエーションをご紹介します。3回目となる「どれだけ知っている？」ですが、どうぞお付き合いください。

gihyo.jp

GitHub、リポジトリページにAgentsタブを追加

GitHubは2025年1月26日、リポジトリのページに新しい「Agents」タブを追加した。これにより、リポジトリに関連するエージェントセッションを直接管理できるようになった。

gihyo.jp

OpenAI、科学論文執筆・共同作業のためのAI搭載LaTeX環境「Prism」を発表

OpenAIは2026年1月27日、科学研究の執筆と共同作業のためのAI搭載LaTeXワークスペース「Prism」を発表した。

gihyo.jp

第897回　GPUに画像の文字を解析させる⁠⁠、あるいはQwen3-VL入門

今回はllama.cppでQwen3-VLを動作させ、看板などの画像の文字を解析させる方法を紹介します。

gihyo.jp

不測の事態に備えて ― Linux 6.19-rc7にカーネル開発の継続性に関するドキュメントが追加

Linus Torvaldsは1月25日、次期Linuxカーネル「Linux 6.19」の7本目のリリース候補版（RC）となる「Linux 6.19-rc7」を公開した。

azukiazusa のテックブログ2

AI とインタラクティブな UI のやり取りを実現する MCP Apps

MCP Apps は MCP にインタラクティブな UI コンポーネントを返す方法を標準化した拡張機能です。この記事では MCP Apps を使用してインタラクティブな UI コンポーネントをエージェントが返す方法について試してみます。

gihyo.jp

オープンソースのマルチモーダルビジュアルモデルKimi K2.5リリース ―100のエージェントを並列実行する「Agent Swarm」もプレビューリリース

中国Moonshot AIは2026年1月27日、同社の最も強力なオープンソースモデルとなるKimi K2.5をリリースした。

gihyo.jp

AIとの会話にインタラクティブなUIを埋め込む「MCP Apps」オープンスタンダードとして公開

MCPプロジェクトは2026年1月26日、MCPツールを使ったAIとの会話内でインタラクティブなUIコンポーネントを返すことができる「MCP Apps」をMCP公式の拡張機能として公開した。

gihyo.jp

Pythonで始めるマルチエージェントAI ―CrewAI入門

今月の「Python Monthly Topics」では、CrewAIを紹介します。

gihyo.jp

知っているようで知らないCLAUDE.mdを深掘りする

今回は知っているようで知らない、Claude Codeの「CLAUDE.md」について深掘っていきます。

gihyo.jp

第263回　go-tpccを使ってMySQLの負荷テストをする

MySQLの負荷試験といえば、sysbenchがよく使われると思います。oltp_read_onlyやoltp_read_writeといったシナリオは準備が軽く、短時間でおおまかな性能傾向を掴むのに便利です。

gihyo.jp

「Claude in Excel」ベータ版としてリリース

Anthropicは2026年1月24日、Microsoft Excel上でClaudeのAIアシスタント機能を利用できる「Claude in Excel」をリサーチプレビュー用のベータ版としてリリースした。

gihyo.jp

Blenderの機能であるドライバーを使って、あるオブジェクトの動きを別のオブジェクトの動きに連動させてみよう

前々回の記事の中で少しだけ触れた「ドライバー」という機能について紹介していきます。

gihyo.jp

主要ブラウザに対応してほしい！2026最新Web技術25選

Misskeyの開発者目線から主要ブラウザに対応してほしい最新のWeb技術を25個厳選しました。

azukiazusa のテックブログ2

はじめての MoonBit

MoonBit は WebAssembly と JavaScript にコンパイル可能な新しいプログラミング言語です。Rust 風のシンタックスと関数型プログラミングの特徴を持ちながら、ガベージコレクションを採用しているという特徴があります。この記事では MoonBit の基本的な使い方をチュートリアル形式で紹介します。

azukiazusa のテックブログ2

新しいデザインツール Pencil を試してみた

Pencil は Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。

blog.jxck.io

Web 技術年末試験 2025 講評 #web_exam2025

2025 年の Web 技術を振り返る試験として、「Web 技術年末試験 2025」を実施した。その問題と想定解答、平均点などを公開する。

gihyo.jp

GitHub、Copilot SDKをテクニカルプレビューとして発表 ——GitHub Copilot CLIも継続的にアップデートしていることを紹介

GitHubは2026年1月14日、GitHub Copilot SDKのテクニカルプレビュー版を公開した。そして1月22日に、このSDKを使うことで、GitHub Copilot CLIにおけるエージェント実行基盤「Copilot agentic core」を、任意のアプリケーションに組み込めるようになったことを発表した。

gihyo.jp

Microsoft、Windowsアプリ開発サイクルを効率化するコマンドラインツール「winapp CLI」をパブリックプレビューリリース

Microsoftは2026年1月22日、Windowsアプリケーション開発のライフサイクルを簡素化するコマンドラインツール「Windows App Development CLI（winapp CLI）」のパブリックプレビュー版を、MITライセンスのもとオープンソースとして公開した。

gihyo.jp

さようならHIPPI ―旧世代のスパコン向けインターコネクトがついにメインラインサポート終了へ

現在開発中の「Linux 6.19」は、作業が順調に進めば2月8日に正式版がリリースされる見込みだ。

gihyo.jp

Anthropic、Claudeの新しい“憲法”を公開

Anthropicは2026年1月22日、同社のAIモデルClaudeの守るべき行動規範となる“憲法”（constitution）を更新し、クリエイティブ・コモンズ（CC0）1.0ライセンスのもと、新たに公開した。

gihyo.jp

Stitch、リモートStitch MCPサーバーを発表 ——Reactコンポーネント化のためのエージェントスキルも公開

Google Labsが提供するStitchは2026年1月20日、各種コーディングエージェントからStitchに接続するための「Stitch MCP Server」のアーリーアクセス版を発表した。

gihyo.jp

Vercel、エージェントスキルのオープンディレクトリ「Skills.sh」を提供開始

Vercelは2026年1月21日、エージェントスキルを一覧で紹介し、ユーザーが見つけたり共有できるオープンなディレクトリ「Skills.sh」を公開した。

gihyo.jp

どれだけ知っている？ AndroidベースのOSたち

Androidは、Googleを主体としてオープンソースで開発が進められており、これをベースに、端末メーカは独自機能を付加して差別化を行なっています。また、Androidをベースにカスタムされたものや、フォークして開発され、独自OSへと進化しているものも存在しています。

gihyo.jp

Google Trends、「調べる」ページでGeminiを活用した検索語句の提案機能を追加

Googleは2026年1月14日、検索トレンド調査ツール「Google Trends」における「調べる」ページを刷新したことを発表した。これによって、インサイト（洞察）を発見しやすくなり、検索トレンドの分析を効率化できるようになるという。

gihyo.jp

第896回　UbuntuからQMK/VIA対応キーボードをカスタマイズする

近年では自作キーボードの流行もあり、QMK/VIAに対応したキーボードが増えてきました。今回はそんな中でも比較的リーズナブルなメカニカルキーボードであるKeychron C1 Pro 8Kを例に、Ubuntu上でQMK/VIA対応キーボードをカスタマイズする手順を紹介します。

gihyo.jp

GitLab Duo Agent Platformの一般提供開始 ―AIエージェントがソフトウェア開発サイクル全体をサポート

GitLabは2026年1月15日、エージェント型AIを使った開発プラットフォーム「GitLab Duo Agent Platform」の一般提供を開始した。

stin's Blog

Claude Code で Shiki のテーマを見比べられるサイトを作った (Jotai もあるよ)

Shiki というコードシンタックスハイライターライブラリがあります。 https://shiki.style/ Shiki は多くのテーマバリエーションを提供しています。それらを並べて見比べたいと思い、Claude Code に作ってもらいました。 https://y-hiraoka.github.io/shiki-...

azukiazusa のテックブログ2

TUI を構築するための Typescript ライブラリ OpenTUI

AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenTUI の特徴と基本的な使い方を紹介します。

gihyo.jp

OpenAI、Responses APIを基盤としたオープンソース仕様「Open Responses」を公開

OpenAIは2026年1月15日、Responses APIを基盤とした、マルチプロバイダー対応かつ相互運用可能なLLMインターフェース構築のためのオープンソース仕様「Open Responses」を公開した。

gihyo.jp

GitHub、Copilot Memoryをパブリックプレビューで提供開始 ——すべてのGitHub Copilot有料プランで有効可能に

GitHubは2026年1月15日、GitHub Copilotの全有料プランを対象に、エージェント用のメモリ機能「Copilot Memory」のパブリックプレビューを開始した。

gihyo.jp

Google、Gemma 3ベース、55言語を網羅したオープンな翻訳モデルTranslateGemmaをリリース

Googleは2026年1月15日、Gemma 3ベースの翻訳モデル「TranslateGemma」を、Apache 2.0ライセンスのもとオープンソースとしてリリースした。

gihyo.jp

CES 2026 Lenovoキーノートで見た、Sphere“イマーシブ演出”の進化

CESは世界最大規模のハイテク展示会の1つで、毎年1月の第2週ごろにラスベガスで開催されています。米国時間2026年1月6日に今年も開幕し、Sphereを使った「イマーシブな（没入感のある）スピーチ」の体験レポートとしてまとめました。

gihyo.jp

Vercel、Reactのベストプラクティスをエージェントスキルとして公開

Vercelは2026年1月14日、同社が10年以上にわたって蓄積したReactによる開発のベストプラクティスを、エージェントスキルとしてGiHub上で公開した。

gihyo.jp

Firefox 147リリース、CSS anchor positioningをサポートし、主要ブラウザすべてで対応に

2026年1月13日、Firefox バージョン147がリリースされた。CSS anchor-positioningのサポートが追加されたことで、主要なブラウザすべてで対応したことになる。

gihyo.jp

今後のDevSecOpsの動向：「一人チーム」による管理領域の拡大

AIは、個々のエンジニアに前例のない影響力をもたらしています。かつてはチーム全体でなければ実現できなかったことを、いまや一人のエンジニアが成し遂げられるようになりつつあります。しかし、ここには見落とされがちなパラドックスがあります。

gihyo.jp

どれだけ知っている？ Androidのアップデート種類

Androidのアップデートには、いくつかの種類があります。アップデートを促す表示がされたら、素直に従う運用でも十分です。しかし、何のために行われているか知っていると意味が違って見えてくるので、今回は少し趣向を変えてアップデートの種類をまとめてみます。

gihyo.jp

第60回　Linuxカーネルのコンテナ機能 ―cgroup v2から使うメモリコントローラ（5）

最近は、Linuxカーネルに実装されるコンテナ関連の機能が高度になり、機能を調べて理解するのが難しくなってきました。

gihyo.jp

第895回　MicroCephで作る、ご家庭向け高可用性分散ストレージ

Cephは非常に便利な分散ストレージですが、分散システム特有の面倒くささもあります。そこでお勧めしたいのが、MicroCephです。MicroCephとは、Canonicalが開発しているCephのオーケストレーションツールです。

gihyo.jp

Claude CodeのAI機能をデスクトップ作業に活用できる「Cowork」、リサーチプレビュー版で提供開始

Anthropicは2026年1月12日、Claude CodeのAI機能を開発以外のさまざまなコンピュータ上の作業に活用できる新サービス「Cowork」を、リサーチプレビューとして提供開始した。

gihyo.jp

Apple、GoogleとAIで提携、将来のApple Intelligence基盤としてGeminiを採用

2026年1月12日、AppleとGoogleは共同声明を発表し、AIに関して複数年の協業契約を締結したことを明らかにした。

gihyo.jp

第262回　MySQLのInnoDBにおけるCheckpointの役割とパフォーマンス最適化を理解する

MySQLのストーレージエンジンであるInnoDBは、高い耐障害性とパフォーマンスを両立するために、バッファプールとredo logを用いた遅延書き込みアーキテクチャを採用しています。その中心にある仕組みが「Checkpoint」です。

azukiazusa のテックブログ2

AI エージェントのために CLI でブラウザを操作する agent-browser

agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な使い方、AI エージェントからの利用方法について紹介します。

gihyo.jp

AI時代到来で新たな革新を起こし始めたBoston Dynamics――2026年は本格的なロボット・ショーとしてのCESの幕開けとなるか

筆者の年代にとってBoston Dynamicsは、長年「胸熱」な企業の1つでしょう。2025年末、そのBoston DynamicsがCES 2026のHyundaiのプレスカンファレンスに登壇すると知り、大変に興味を惹かれました。

azukiazusa のテックブログ2

Claude Code のステータスラインを TUI でカスタマイズできる ccstatusline

Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。

gihyo.jp

Linus、「AIツールはただのツール」とあらためて強調

AIツールによるコーディング支援がひろく普及したことで、LinuxカーネルコミュニティでもAIツールが生成したコードをどう扱うべきかについての議論が続いている。

gihyo.jp

モダンになった「Pebble Round 2」と現代版Blackberry「Clicks Communicator」が発表されました

新年早々に発表されたPebble Round 2とClicks Communicator

gihyo.jp

AI時代の想像力を育むためのLEGOの挑戦 ――LEGO Press Conferenceより

今回はCES 2026の2日目、LEGO初のCES Press Conference。スピーチの細部やデモで示されたことを網羅的にまとめるのではなく、筆者が気になった点にフォーカスしてレポートしてみます。

gihyo.jp

第894回　デスクトップ環境の2025-2026年

新しい年の始めに、Ubuntuで使用できるさまざまなデスクトップ環境について2025年に起こったことと2026年に起こりそうなことを紹介します。

gihyo.jp

速報：注目無人ロボットタクシー「ZOOX」実車体験レポート

CESは世界最大規模のハイテク展示会の1つで、毎年1月の第2週ごろにラスベガスで開催されています。米国時間2026年1月6日に今年も開幕し、筆者にとっての2026年のCESは、まずこのZOOX体験から始まりました。

gihyo.jp

2026年のWebアクセシビリティ

あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2025年のWebアクセシビリティに関連する出来事を振り返りつつ、2026年のWebアクセシビリティの展望について俯瞰していきたいと思います。

azukiazusa のテックブログ2

1 つの Step で完結するバックエンドフレームワーク Motia を試してみた

Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。

gihyo.jp

第125回　MySQLとPostgreSQLの2025年重大ニュース

あけましておめでとうございます。この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

特別編：Blenderで告知動画を作成してみる［後編］ 〜令和八年度版『キタミ式イラストIT塾』シリーズ発売記念

前編で紹介したモデルをもとに書籍の告知動画を作成する過程を見ていきます。特に、どのように動きをつけていったのかをかいつまんで紹介します。

stin's Blog

2026年の目標

あけましておめでとうございました。 2025年の振り返りと2026年の目標を立てていきましょう。 2025年の振り返り 2025年の目標は以下です。 https://blog.stin.ink/articles/new-years-resolutions-for-2025 技術ブログを 12 記事以上書く(媒体は問わな...

blog.jxck.io

Web の維持への寄付

Web は誰のものでもなく、誰でも無料で使える。しかし、その状態を維持するための費用が、かかっていないわけではない。そこで、Web を生業にしている筆者としては、Web が壊れないための「維持コスト」をほんの一部でも負担するという意図をもって、寄付を行っている。

azukiazusa のテックブログ2

Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる

AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。

@sakupi01.com blog

2025 In Review

2025年の振り返り

azukiazusa のテックブログ2

Claude Code のツール検索ツールを有効にして MCP のトークン使用量を削減する

Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。

blog.jxck.io

2025 年を振り返る

例年通り 2025 年を振り返る。

gihyo.jp

Stitch、最新AIモデル搭載でデザイン機能を強化、「バイブデザイン」時代へ ——製品名由来の“複数画面を縫い合わせる”「プロトタイプ」機能を追加

Googleが提供するStitchはAIを活用したWebデザインツールです。この記事では、先月から今月にかけて追加された新機能を中心に改めてStitchについて紹介します。

gihyo.jp

2025年のLinux関連ニュースを振り返る

2025年もあと数日、年末らしくこの1年で起こったLinux界隈のあれこれをざっくりと振り返ってみたい。

azukiazusa のテックブログ2

2025 年に読んでよかった本

AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。

gihyo.jp

統計から異常検知まで 〜実践につながる学習ロードマップ〜

本記事では、統計の基礎からはじめて、異常検知を通じた実践的な知識を身につけ、さらに他分野へも応用できる力を養うための学習ステップとおすすめ書籍を紹介します。

gihyo.jp

Vue Fes Japan 2025レポート ～Evan Youが描く、JavaScript開発ツールの理想郷

2025年11月、東京で開催された「Vue Fes Japan 2025」。本記事では当日の様子をダイジェストで紹介する。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; カーネル6.20の採用

resolute（Ubuntu 26.04 LTS）の開発において、カーネル6.20が採用されることが告知されました。

gihyo.jp

Ruby 4.0.0リリース ーRuby BoxやZJITを実装

Rubyコミュニティは2025年12月25日、Rubyの新バージョンRuby 4.0.0をリリースした。

gihyo.jp

GitLab Epic Tour Japan 2025 レポート ——エージェントとともに加速するソフトウェア開発の統合プラットフォーム戦略

2025年11月28日、「GitLab Epic Tour Japan 2025」が開催されました。本稿では、そのうちGitLab社のセッション内容を取り上げて紹介します。

gihyo.jp

Alibaba、Qwen-Image-Edit-2511をリリース ―LoRA内蔵、一貫性をもった強力な画像編集／合成機能を実現

Alibabaは2025年12月23日、画像生成・編集AI「Qwen-Image-Edit」の最新バージョン「Qwen-Image-Edit-2511」をリリースした。

gihyo.jp

Android 16 QPR3がリリース、そろそろ17の背中も見えてきた

12月18日、GoogleはPixelシリーズ向けに「Android 16 QPR3 Beta 1」の配信を開始しました。

gihyo.jp

第893回　Dockerでオブジェクトストレージ「SeaweedFS」を構築する

今回はセルフホストできるオープンソースのオブジェクトストレージであるSeaweedFSを紹介します。

gihyo.jp

Firefoxを“モダンAIブラウザ”に ―Mozilla新CEOの就任メッセージにブラックボックス化を懸念する声

Chromeなど最近のモダンブラウザはAI機能がデフォルトでオンになっており、クエリを入力するたびに「AIによる概要」が最初に示されることが多い。

gihyo.jp

Claude Codeのコンテキストウィンドウを完全に理解する

「Claude Code」は、CLI上で動くLLMによるAIエージェントツールです。この記事は12月5日に発売された『Claude CodeによるAI駆動開発入門』に書ききれなかった応用的な内容や最新のアップデートについて解説します。

gihyo.jp

第261回　MySQLアップグレードで顕在化したINTと空文字のバグ挙動

MySQL 8.0のサポートが終了し、移行先として8.4を利用するケースは今後ますます増えていくと思います。

gihyo.jp

NotebookLM、Gemini 3上の構築を正式発表。推論とマルチモーダルに対する理解力が大幅に向上 ——データテーブル機能の追加や、Geminiアプリでのノートブックの添付も可能に

Googleが提供する「NotebookLM」は2025年12月20日、Gemini 3を基盤として構築されたものになったことを正式に発表した。

gihyo.jp

GitHub、「Copilotメモリ」をGitHub Copilot Pro/Pro+プランでパブリックプレビュー提供開始 ——エージェントをより活用するためにリポジトリのコンテキストを記憶

GitHubは2025年12月19日、エージェントをより活用するために、リポジトリごとのコードのコンテキストを記憶する「Copilotメモリ」をGitHub CopilotのPro/Pro+プランのユーザー向けにパブリックプレビューとして提供を開始した。

gihyo.jp

Alibaba、画像を複数レイヤーに分解、編集できるAIモデル「Qwen-Image-Layered」をオープンソースとしてリリース

Alibabaは2025年12月19日、入力した画像を複数のRGBA層に分解できるモデル「Qwen-Image-Layered」をリリースした。

@sakupi01.com blog

CSS Masonry のあゆみと現状

CSS Masonry（Grid-Lanes）の仕様策定の経緯と現状のまとめ

azukiazusa のテックブログ2

Claude Code の LSP サポート

Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。

gihyo.jp

VS Code、エージェントセッション一覧がチャットビューに統合、Gitワークツリーでの複数バックグラウンドエージェント動作、スキルを流用可能に

Visual Studio Codeは2025年12月10日、今月の更新版であるNovember 2025（バージョン1.107）をリリースした。

gihyo.jp

カーネル開発に刺激は求めない ―Linus TorvaldsがOpen Source Summit Japan 2025で語ったLinux開発のこだわり

12月9日、Linux Foundation主催の「Open Source Summit Japan」の会場となった東京・虎ノ門ヒルズのフロアは早朝から多くの人々であふれていました。

gihyo.jp

Anthropic、エージェントスキルをオープンスタンダードとして公開

Anthropicは2025年12月19日、AIエージェントに効率よく専門知識を提供する「エージェントスキル（Agent Skills）」をオープンスタンダードとして公開したことを発表した。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; Snapshot 2のリリースと壁紙コンテスト

resoluteのSnapshot 2がリリースされました。並行して部分的なリリースノートの準備も行われています。

gihyo.jp

Google、Gemini 3 Flashをリリース ―上位モデル並みの推論能力とスピードを両立、GeminiアプリやAIモードのデフォルトモデルに

Googleは2025年12月17日、Gemini 3ファミリーの新モデルGemini 3 Flashをリリースした。

gihyo.jp

GitHub、Actionsの料金体系変更を発表 ——フィードバックを受けてセルフホストランナーへの課金は再検討へ

GitHubは2025年12月16日、GitHub Actionsの料金体系を見直すことを発表した。

gihyo.jp

第64回　最近の『らじる★らじる』（その2）

今回は「らじる★らじる」のもう1つの魅力である「聴き逃し配信」を調べてみましょう。

gihyo.jp

スマホ新法開始！ どんな影響が出るの？

12月18日より「スマートフォンにおいて利用される特定ソフトウェアに係る競争の促進に関する法律」いわゆる「スマホ新法」が全面施行されます。

gihyo.jp

OpenAI、画像生成モデルAPI「gpt-image-1.5」を発表 ——新しい画像生成・編集用ページChatGPT Imagesも提供開始

OpenAIは2025年12月16日、これまで同社が提供していた画像生成モデルから大幅に能力を向上させた新しい画像生成モデルとそのAPI「gpt-image-1.5」を発表した。

gihyo.jp

第892回　Nginx Proxy Managerでリバースプロキシを効率よく管理しよう

第881回では、家庭内のサーバーをVPN越しに公開できるリバースプロキシPangolinを紹介しました。今回はもっとシンプルなリバースプロキシ管理ソフトである、Nginx Proxy Managerを紹介します。

gihyo.jp

NVIDIA、オープンモデル「Nemotron 3」ファミリーを発表

NVIDIAは2025年12月16日、オープンソースのAIモデルの新バージョンNemotron 3ファミリーを発表した。

gihyo.jp

サーフェスは怖くない ～複雑な形のモデリング～

Fusionで3Dモデリングをする際にはソリッドタブにある押し出し、回転、ロフトなどでほとんどの形を作れますが、複雑なカーブ、よじれ・ねじれなどは表現することが困難です。そんなとき使えるのがサーフェスタブ内にあるサーフェスモデリング機能です。

gihyo.jp

2026年、日本のソフトウェア開発を変える5つの潮流

AIエージェントについて、今後1年間に起こるだろう、変化を推進する主要因と、日本の組織に対する戦略的影響を、5つの予測として以下に紹介します。

gihyo.jp

第2回 エンジニアの思考は業務設計にも活かせる 〜DDDと構造化思考で読み解くビジネスの設計図〜

業務設計の主役はあくまで業務側ですが、エンジニアが日常的に行っている「複雑な対象を分解し、構造化し、抽象化する」思考は、業務を整理する場面でもそのまま応用できるのです。

gihyo.jp

Linus、日本滞在中にLinux 6.19-rc1を公開、Rust導入は実験が完了し次のフェーズへ

Linus Torvaldsは12月14日、次期Linuxカーネル「Linux 6.19」の最初のリリース候補板となる「Linux 6.19-rc1」を公開した。

gihyo.jp

特別編：Blenderで告知動画を作成してみる［前編］ 〜令和八年度版『キタミ式イラストIT塾』シリーズ発売記念

本連載では、Blender の基本的な知識、機能についてイラストを交えながら紹介しています。第67回目は、作成済みのモデルをアニメーションさせるためにどのような設定をすると良いのかを見ていきます。

gihyo.jp

2025年のMisskey開発ハイライト

本記事ではリリースノートに載らないような「知られざる」内部的な改善のうち、特筆に値するトピックをかいつまんで紹介します。

azukiazusa のテックブログ2

ブラウザから要素を選択してエージェントにコンテキストを提供する React Grab を試してみた

React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。

azukiazusa のテックブログ2

フルスタックフレームワーク TanStack Start を試してみた

TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。

gihyo.jp

OpenAI、最新モデル「GPT-5.2」を発表 ——実務作業・長時間にわたるエージェント作業における能力が向上

OpenAIは2025年12月11日、最新のモデル「GPT‑5.2」シリーズを発表した。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; フレーバーのLTS予定、ROCmとAMD製GPUドライバーの同梱、CES 2026への出展

resoluteの開発にあたって、各種フレーバーを「LTSとしてリリースするか」の現時点での決定が行われています。

gihyo.jp

Adobe Photoshop、Express、AcrobatがChatGPT上で無料で利用可能に

Adobeは2025年12月10日、同社のアプリケーションをOpenAIのChatGPTから利用できる「Adobe Apps for ChatGPT」の提供を開始したことを発表した。

gihyo.jp

第1回 AI・DX導入が失敗する「真の原因」とは？ ――コードを書く前に整理すべき「業務のバグ」

昨今、多くの企業で「DX」や「AI活用」が叫ばれています。しかし、その導入プロジェクトの中で、自信を持って順調に進んでいると言えるケースはどれくらいあるでしょうか。

gihyo.jp

第29回 “ことば”にならない言葉を獲得する――小学生のスクラッチプログラミング

「スクラッチでプログラミングをはじめよう」第29回です。

gihyo.jp

Linux Foundation、Agentic AI Foundation（AAIF）設立を発表 ——MCP・goose・AGENTS.mdが初期の中核プロジェクトに

Linux Foundationは2025年12月9日、Agentic AIの発展を支える新たな組織として「Agentic AI Foundation（AAIF）」を設立したと発表した。

gihyo.jp

第891回　ミドルレンジのグラフィックボードで生成AI入門

今回は、グラフィックボードとしてミドルレンジのGeForce RTX 5060 TiとRadeon RX 9060 XTでllama.cppを使用する方法を紹介します。

gihyo.jp

第260回 MySQL 9.4と9.5の新機能について

MySQLのInnovation ReleaseとなるMySQL 9.4とMySQL 9.5がリリースされました。

blog.jxck.io

3PCA 33 日目: Outro

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の最終日とする。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

gihyo.jp

「PyCon mini Shizuoka 2026」2026/2/21に開催、参加者、登壇者受付中

静岡県を中心に活動するPythonコミュニティによる技術カンファレンス「PyCon mini Shizuoka 2026」が2026年2月21日（土）に開催される。

gihyo.jp

ロードマップ作成の近道と、ぶつかりがちな課題の回避策

第3回となる本稿では、ロードマップ作成に便利なプロジェクト管理ツールの選定ポイントやロードマップ作成にあたってぶつかりやすい課題と対策について論じます。

gihyo.jp

第59回　Linuxカーネルのコンテナ機能 ―cgroup v2から使うメモリコントローラ（4）

第58回では、メモリコントローラでメモリに対する制限や保護を設定した場合、階層構造が考慮される動作を見ました。その中で、ツリー構造を考慮したメモリ保護の動作に違和感を持った方は多いのではないでしょうか。

blog.jxck.io

Background Fetch API が消えそうだった話

「Background Fetch を使っているのが、世界であなたのサイトだけなんだけど、この機能消しても良い?」と、TPAC 2025 の会場で、Chrome の Service Worker チームの開発者と話していた際に言われた。

azukiazusa のテックブログ2

TypeScript 向けの AI フレームワーク TanStack AI を試してみた

TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。

azukiazusa のテックブログ2

Claude のプログラミングによるツール呼び出し

MCP ツールの呼び出しはコンテキスト汚染や推論のオーバーヘッドなどの課題があります。Claude のプログラムによるツール呼び出し機能を利用することで、これらの課題を解決する方法について解説します。

gihyo.jp

WSL向けUbuntu Pro、Dragonwing IQ-9075用Ubuntu、wikiとPlanet UbuntuのリニューアルとAIの導入

WSL上のUbuntu環境において、Ubuntu Proが利用できるようになりました。

gihyo.jp

Django 6.0リリース ―コンテンツセキュリティポリシーやTemplate Partialsをサポート

Django開発チームは2025年12月3日、WebアプリケーションフレームワークDjangoの最新バージョンDjango 6.0をリリースした。

gihyo.jp

Rustで書かれた高速Python型チェッカー「Pyrefly」の紹介

今月の「Python Monthly Topics」は、型チェッカー「Pyrefly」を紹介します。

gihyo.jp

「ChromeOS + Android = Aluminium OS」新OS登場か？

GoogleがChromeOSを置き換える、Androidベースの新しいOSを準備しているとAndroid Authorityが伝えています。

gihyo.jp

Linux 6.18リリース、2025年最後のメジャーアップデート

Linus Torvaldsは11月30日、2025年最後のメジャーカーネルバージョンとなる「Linux 6.18」を公開した。

gihyo.jp

U-22プログラミング・コンテスト2025最終審査会にて各賞が決定 ―経済産業大臣賞〈総合〉は中学生の作品が受賞

U-22プログラミング・コンテスト実行委員会は、2025年11月30日（日）に行われた最終審査会において、入選16作品を審査、経済産業大臣賞をはじめとする各賞を決定した。

gihyo.jp

第890回　手軽に使えるシンプルな監視サーバー「Beszel」を試す

今回は、Netdataからの移行先として注目されはじめているBeszelを紹介します。

gihyo.jp

FreeBSD 15.0リリース ―pkgツールベースのインストール／アップデート方式を採用へ

FreeBSD Projectは2025年12月2日、FreeBSDの最新リリース版FreeBSD 15.0-RELEASEを公開した。

gihyo.jp

Claude Codeを使った初歩的なデバッグとテストコードを記述する際の注意点

最終回となる第4回目では、TODOアプリをフレームワークを使って作成し、その際生じるエラーへの対処もClaude Codeにやってもらいます。最後にClaude Codeにテストコードを書いてもらう方法とCLAUDE.mdへのテストの注意点の記載の仕方について解説します。

gihyo.jp

効果的なロードマップの作成方法

第2回となる本稿では、ソフトウェア開発におけるロードマップの具体的な作成方法、作成時の注意点、作成に用いる手段の選択肢について論じます。

gihyo.jp

「中高生Rubyプログラミングコンテスト2025」受賞者決定！

今回で15回目を迎えた「中高生Rubyプログラミングコンテスト2025」。2025年11月29日に最優秀賞他、各賞が決定した。

gihyo.jp

Blenderでワールドプロパティの設定をしてみよう

第66回目は、ワールドプロパティの設定を変えると何が変わるのかを見ていきます。

gihyo.jp

第124回　MySQL HeatWaveのイープラスでの導入事例、「PostgreSQL Conference Japan 2025」報告

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

Claude のツール検索ツールを試してみた

MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。

azukiazusa のテックブログ2

Claude Code のプランモードがより正確な計画を立てられるようになっていた

Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。

gihyo.jp

「Python Boot Camp」12/20に北九州市で開催

Python Boot Campは、一般社団法人PyCon JP Associationが主催するPythonを学べるチュートリアル講座。

gihyo.jp

Ubuntu 26.04（resolute）の開発; 26.04 LTSのロードマップ

resoluteのロードマップが発表されました。これは「主要なテーマ」とキーとなる日付から構成される、「Ubuntu 26.04 LTSはこうなる」という基本方針です。

gihyo.jp

Waylandの将来に全力を注ぐ ―KDEプロジェクト、PlasmaにおけるX11の完全ドロップとWaylandへの“全振り”を宣言

KDEプロジェクトは11月26日、「Going all-in on a Wayland future（Waylandの将来に全力を注ぐ）」と題したブログを投稿し、将来リリースされる「KDE Plasma 6.8」はWaylandオンリーとなることを明らかにした。

gihyo.jp

AndroidでAirDropが利用可能！ Appleはどう動くか

11月20日、Googleは、Quick Shareを拡張してAndroidとiPhone間でファイル共有ができる機能を発表しました。

gihyo.jp

第889回　Zorin OS 18とは何か

今回はUbuntu派生のLinuxディストリビューション、Zorin OS 18を紹介します。

gihyo.jp

第63回　最近の『らじる★らじる』（その1）

暑くて長い夏がやっと一段落したと思ったら急に冷えこみだし、カレンダーも残りわずかとなりました。

azukiazusa のテックブログ2

読んだ本は忘れていい ― 年間300冊読む私の読書術

以前 YAPC::Fukuoka 2025 で発表した探求の技術では「良いアウトプットを出すためには良いインプットが必要」であるという主張を裏付けるために、私が年間 300 冊の本を読む読書習慣があることを紹介しました。この記事では私がどのような目的で本を読み、どのように本を選び、どのように読書時間を確保し、そして読んだ内容をどのように扱っているのかについて紹介します。

gihyo.jp

第259回　知ってるとちょっと便利なON UPDATE CURRENT_TIMESTAMP

皆さんはDEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMPをご存じでしょうか？

azukiazusa のテックブログ2

MCP におけるインタラクティブな UI を標準化する拡張機能 MCP Apps の提案

MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。

gihyo.jp

トレンドを振り返りながら考える、Web制作の今とこれから――SmartRelease Uが目指すリリース環境の民主化

今回は、その当時からWeb制作に関わる業務を行ってきた5名のパネリストをお招きし、過去のトレンドを踏まえながら「Web制作の今」を考察し、これからについて展望します。 そして、5名がエバンジェリストとして関わる新サービス「SmartRelease U」を紹介します。

gihyo.jp

Google、画像生成モデル「Nano Banana Pro」をリリース

Googleは2025年11月20日、画像生成モデル「Nano Banana」の上位版として、Gemini 3 Proを基にした「Nano Banana Pro（Gemini 3 Pro Image）」を発表した。

gihyo.jp

PHP 8.5.0リリース、組み込みURI拡張の提供、パイプ演算子サポートなど

PHP開発チームは2025年11月20日、PHPの新バージョンPHP 8.5.0のリリースを発表した。

gihyo.jp

WindowsでMCPネイティブサポートのパブリックプレビューを開始 ―ファイルエクスプローラーとシステム設定の組み込みエージェントコネクタも公開

Microsoftは2025年11月18日、テクノロジーイベント「Ignite 2025」にて、WindowsでMCP（Model Context Protocol）のネイティブ サポートをパブリックプレビューとして開始したことを発表した。

gihyo.jp

Ubuntu 26.04（resolute）の開発; RISC-V版Flutterの準備, オープンソースの普及度合いの調査

resoluteの開発が始まってから一ヶ月ほど、実験的なタスクがいくつか開始されています。

gihyo.jp

Blender 5.0リリース ―カラーマネジメント、レンダリング、パフォーマンスなど大幅に強化

Blender開発チームは2025年11月18日、Blenderの最新バージョンBlender 5.0をリリースした。

@sakupi01.com blog

TPAC 2025 @Kobe Diary

TPAC 2025 参加記（Unpolished ver.）

gihyo.jp

Pebble is BACK! Pebble2 Duoレビュー②

今回は、Pebble 2 Duoを1週間みっちり使いこんでみたので、その使用感をレビューします。

gihyo.jp

Google、Gemini 3 Proプレビューを提供開始 ——エージェント活用する新しいIDE「Google Antigravity」もリリース

Googleは2025年11月18日、最新AIモデル「Gemini 3」を発表し、同日よりGemini 3 Proのプレビューの提供を開始した。

gihyo.jp

第888回　【はじめてのUbuntu刊行記念】 あなたのUbuntuはどこから、どこへ？

今回は近日発売される『はじめてのUbuntu』の宣伝も兼ねて、初心者がUbuntuを始める上でどこからスタートすべきなのか、どんな本を手に取ると良いのか考えてみましょう。

gihyo.jp

SUSE、Zig言語でSSHの再実装にチャレンジ

SUSEは毎年、同社に所属するエンジニアのイノベーティブな活動を推進する一環として、「Hack Week」という1週間のイベント期間を設けている。

blog.jxck.io

Web とは何か

見落とされがちだが、「Web とは何か」という仕様はない。Web を定義した W3C のドキュメントもなければ、IETF の RFC もない。Web は仕様ではないのだ。これだけしっかりと標準化された技術の粋を集めた総体が、なぜそんなにもフワっとしているのだろうか?我々は、何を "Web" と呼んでいるのだろうか?

gihyo.jp

ソフトウェア開発におけるロードマップの役割や種類、作成のメリットとは

ロードマップは、ソフトウェア開発に限って使用する取り組みではなく、あらゆるビジネスシーンで活用されています。そこで、第1回となる本稿では、まずはロードマップの役割や種類を整理した後、ソフトウェア開発におけるロードマップの作成・活用、メリットについて紹介します。

gihyo.jp

Kiroの一般提供開始、コマンドライン動作のKiro CLIも登場

AWSは2025年11月17日、AIエージェント型IDE「Kiro」の一般提供を開始した。

gihyo.jp

Visual Studio Code、Agent HQに対応へ、自動承認のサブコマンド検出を改善、エージェント編集ファイルを自動で開く動作をデフォルトでオフに、インライン差分表示で削除コードを選択可能に

Visual Studio Codeは2025年11月12日、今月の更新版であるOctober 2025をリリースした。

gihyo.jp

t-string：テンプレート文字列リテラルの紹介

今月の「Python Monthly Topics」では、Python 3.14の新機能の1つである「テンプレート文字列リテラル（t-string）」について紹介します。

blog.jxck.io

TPAC 2025 参加記録

W3C が毎年開催する国際会議、TPAC 2025 に参加してきた。

gihyo.jp

シンプルなTODOアプリを、Claude Codeを使って5分で作って30分で公開する

第3回目は、Claude Codeにプロンプトを指示して、たったの5分でシンプルなTODOアプリケーションを作ってみます。その後、アプリケーションをGitHub PagesとVercelの両方にデプロイするところまで、Claude Codeと対話しながら行っていきます。

gihyo.jp

Pebble is BACK! Pebble2 Duoレビュー①

桜が咲き始めた3月に予約して、夏が過ぎて秋に入り、冬も目前に迫ったころにようやく手元に到着しました。何のことかと言えば、3月に予約したPebble 2 duoが、11月に入って手元に到着したのでレビューしていきます。

gihyo.jp

Blenderで深度マップを使用して立体的に見えるオブジェクトを作成してみよう～後編～

第65回目は、前回に引き続き深度マップを使用して平面のオブジェクトを立体的に見せる方法を見ていきます。

@sakupi01.com blog

Google Developer Experts にジョインしました

Joined Google Developer Experts (GDE) program as a Web Technologies expert focusing on CSS & UI.

gihyo.jp

Ubuntu 14.04 LTSへの15年サポート・DNSSECのデフォルト化テストと失敗・Ubuntu 25.10リリース記念オフラインミーティング25.11

Ubuntu 14.04 LTSは来年4月で到達する予定だったのですが、今回リリースされたサポート期間の延長により、このサポート期間が15年間になることが確定しました。

azukiazusa のテックブログ2

標準の Web API で URL のパターンマッチングを処理する URLPattern

Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。

gihyo.jp

専門性が高くライフサイクルの長い医療機器のユーザビリティを向上させるために

毎年恒例、HCD-Net認定人間中心設計スペシャリスト／専門家へのインタビュー。2025年は、島津製作所総合デザインセンターのデザインユニット内にあるUX革新グループで、全社の製品開発のUXの向上活動を横断的に支援されている猪股さんに専門性の高い機器のユーザビリティをどのように向上させているか、取り組みの事例を伺いました。

gihyo.jp

OpenAI、GPT-5.1をリリース ——親しみやすさとの両立へ。応答性能も向上し、応答のトーンもさらに選択できるように

OpenAIは2025年11月12日、GPT‑5世代での改良を盛り込んだ新モデル「GPT‑5.1」を発表した。

blog.jxck.io

1Password AC #10: SSH と Git コミット署名

このエントリは、1Password Advent Calendar の 10 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwSSH の鍵を使って、直接サーバにログインするような運用は減っているかもしれない。それでも SSH の鍵を使う場面が無くなったわけではない。今回は、1Password への SSH Key 登録と、Git のコミット署名有効化について解説する。

gihyo.jp

Microsoft、.NET 10をリリース —— Visual Studio 2026も一般提供開始

Microsoftは2025年11月11日、ネット上で開催中のバーチャルイベント「.NET Conf 2025」において、.NETの最新バージョンとなる「.NET 10」のリリースを発表した。

gihyo.jp

第887回　AIボイスチェンジャーであるSeed-VC用に、任意の音声ファイルをトレーニングしてみよう

前回はAIを利用した音声合成ツールである「Seed-VC」の使い方を紹介しました。今回はさらにSeed-VCのトレーニング機能を利用して、より自然な音声を生成してみましょう。

gihyo.jp

今回のテーマは「Future of Web Creation」――MTDDC Meetup TOKYO 2025、11/29に開催

>2025年11月29日、Movable Typeを中心としたWebカンファレンス「MTDDC Meetup TOKYO 2025」が昨年に続きオフライン・オンラインのハイブリッドで開催される。

blog.jxck.io

1Password AC #9: Travel Mode

このエントリは、1Password Advent Calendar の 9 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw

gihyo.jp

第258回　MySQL 8.4で厳格化された外部キー制約仕様

MySQL 8.4（LTS）では、外部キー制約（FOREIGN KEY）の定義ルールに関して、デフォルトの仕様がこれまでから厳格化しました。

blog.jxck.io

1Password AC #8: 1Password CLI

このエントリは、1Password Advent Calendar の 8 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw前回、Group/Vault を整備したため、チームの中で活用する準備が整った。

blog.jxck.io

1Password AC #7: Group と Vault の運用

このエントリは、1Password Advent Calendar の 7 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw今回は、Business アカウントを運用する上で重要な、Group/Vault の概念について解説する。

azukiazusa のテックブログ2

MCP ツールのコンテキスト圧迫の問題とその解決策

MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。

blog.jxck.io

1Password AC #6: Business アカウント特典の無料 Family アカウント

このエントリは、1Password Advent Calendar の 6 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwここでは、1Password Business アカウントに付随する、Family アカウントの無料特典について解説する。要するに、Business アカウントに参加している間は、1Password を無料で使えるという意味だ。

stin's Blog

ts-rest や他色々を試すために Todo アプリを作る

ts-rest という RPC ライブラリを見かけて気になったので、実際に Todo アプリを作って試してみました。 ts-rest とは https://ts-rest.com/ ts-rest は、REST API を型安全に実装するためのライブラリです。サーバーサイドだけでなく、REST API にアクセスするク...

@sakupi01.com blog

Case Study@web.dev - How Cybozu eliminated browser compatibility overhead with Baseline

Baseline の企業レベル導入事例

blog.jxck.io

1Password AC #5: 1Password アカウントへの 2FA

このエントリは、1Password Advent Calendar の 5 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwここでは、1Password アカウントに対する 2FA の有効化について検討する。

gihyo.jp

Mastodon、バージョン4.5をリリース ——元投稿者の引用ポリシーを尊重する引用投稿の投稿が可能に

Mastodon 4.5が2025年11月6日にリリースされた。このバージョン4.5では、元投稿者の引用ポリシーを尊重する引用投稿の投稿が可能になった。

gihyo.jp

3年以内に訪れる、ソフトウェアの自律型AIの未来 ——CISOが今すぐ備えるべき理由

今回はGitLabが日本の経営層を対象に行った調査の結果に基づき、CISOが直面する「AI導入を妨げずにリスクを最小化する方法」という課題に焦点を当て、今すぐ取り組むべき実践的なステップを提案します。

gihyo.jp

Visual Studio Code、GitHub Copilotのインラインサジェスト機能をオープンソース化

Visual Studio Code開発チームは2025年11月6日、VS Codeの拡張機能であるGitHub Copilotのインラインサジェスト機能（inline suggestions）をオープンソース化したことを発表した。

gihyo.jp

Steam SnapのCore24版のテスト開始、Dell PowerEdge XR8000を中心にしたエッジAIやネットワーキング, Azure VM utils

近年のLinuxにおける「新しい常識」として、「Steamのゲームはそれなりに動作する」というものがあります。これはSteam DeckがLinuxベースであること、そしてProtonによる互換性が相応以上に提供されていることによります。

blog.jxck.io

1Password AC #4: Secret Key の運用とアカウントリカバリ

このエントリは、1Password Advent Calendar の 4 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwここまで 1Password における Master Password について解説してきた。記憶に頼る Master Password と異なり、Secret Key は実質的に所有の要素となる。本エントリでは、この Secret Key の扱いについて解説する。

gihyo.jp

systemdフリーのDevuan “Excalibur” 6がリリース

Devuanチームは11月2日、「Devuan GNU+Linux 6.0.0（開発コード：Excalibur）」の安定版（stable）リリースを発表した。

gihyo.jp

Storybook 10リリース ―モジュールシステムをESMに統一しコンパクト化

Storybook開発コミュニティは2025年10月28日、UIフロントエンド開発環境Storybookの最新バージョンStorybook 10をリリースした。

blog.jxck.io

1Password AC #3: Master Password の作り方

このエントリは、1Password Advent Calendar の 3 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw前回は「1Password の Master Password はマルチアカウントで共通して使って良い」という解説をした。1Password の Master Password は使い回すべき理由 | blog.jxck.iohttps://blog.jxck.io/entries/2025-11-05/reuse-master-password.htmlこれは 1Password のマルチアカウントが「単一ユーザ内のスコープ」として設計されていること、そして「Master Password が覚えるべき最後の 1 つのパスワード」であるという設計思想に基づくものだった。つまり、「Master Password」をいかに堅牢に作るかは、1Password ユーザにとって非常に重要だ。「そんな Master Password はどう作ればよいか?」について解説を試みる。

gihyo.jp

「Swift SDK for Android」のプレビュー版がリリース

10月24日、AppleはSwiftを使ってAndroidのアプリが開発できる開発キット「Swift SDK for Android」のプレビューリリース版を公開しました。

gihyo.jp

「中高生Rubyプログラミングコンテスト2025」の最終審査会進出者10組が決定、2025年11月29日三鷹で最終審査会を開催

今回で15回目を迎える「中高生Rubyプログラミングコンテスト2025」。2025年11月29日に三鷹で開催される最終審査会進出者10組が決定した。

gihyo.jp

第886回　AIボイスチェンジャーであるSeed-VCで自分の声を変えてみよう

生成AIでも人気のある機能のひとつが「音声合成」です。今回は任意の参照音声に変換できる「Seed-VC」をUbuntuで動かしてみましょう。

blog.jxck.io

1Password AC #2: Master Password をマルチアカウントで使い回すべき理由

このエントリは、1Password Advent Calendar の 2 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw個人で 1Password を使っている人が、1Password Business を導入している組織にジョインする場合、新しく組織用のアカウントが発行される。つまり、1Password をマルチアカウントで運用することになる。関わる組織が増えていけば、切り替えるアカウントもどんどん増えていくが、1Password はマルチアカウントの UI がよくできているため、負担になることは特にないだろう。このとき、追加する別アカウントの Master Password は、それまで使っているものを「使い回す」ことが推奨されている。「パスワードを使い回すのは避けるべき」というのが、認証において啓蒙し続けられた基本だった。ではなぜ 1Password のマルチアカウントでは、推奨されるのだろうか。

gihyo.jp

Chrome 142、DevToolsのAIアシスタンス機能を強化 ——コード提案機能の追加や、トレース情報を渡すだけでパフォーマンス調査が可能に

Chrome 142が10月28日にリリースされた。今回のリリースでDevTools上でAIアシスタンスを簡単に開けるようになり、コード提案機能の追加や、トレース情報を渡すだけでパフォーマンス調査がおこなえるようになった。

gihyo.jp

Kiro v0.5.0リリース、リモートMCPサーバー、AGENTS.mdをサポート

AWSは2025年10月30日、AIエージェント型IDEの新バージョン「Kiro v0.5.0」をリリースした。

gihyo.jp

Claude Codeの料金体系とインストールからセットアップまで

第2回目は、Claude Codeのやや複雑な料金体系を説明した後、Claude Codeをローカル環境にインストール・セットアップするところまで行います。

gihyo.jp

エンジニアリングチームを戦略的に成長させるための行動指針

スケーリングの方法というのは、すべてのリーダーが考えるべきテーマです。チームや製品、インフラ、そして私たちが管理し活動するエコシステムを、どのように拡大していくべきでしょうか？

gihyo.jp

Blenderで深度マップを使用して立体的に見えるオブジェクトを作成してみよう 〜前編〜

第64回目は、深度マップを使用して平面のオブジェクトを立体的に見せる方法を見ていきます。

gihyo.jp

第123回　企画セミナー「データ活用の現状と近未来」開催報告、MySQL 9.5.0のリリースとMySQL AIの登場、オラクルが運営するPostgreSQLサービス！？

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

blog.jxck.io

1Password AC #1: Business アカウント運用の検証

このエントリは、1Password Advent Calendar の 1 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1password1Password を個人で使うだけでなく、組織全体で利用することで、開発に必要なアカウントを共有したり、CLI を使って自動化するといった、様々なメリットがある。組織で 1Password を展開する際は、1Password を Business プランで契約し、ドメインに所属するメンバーにアカウントを発行することになるだろう。その際、組織でどのようなルールを設け、どのような方法で管理し、どのように組織に合わせた設計を行うかは、多くの人が同じような検証を実施することになると思われる。今回は筆者 (Jxck) が、自分で持っている mozaic.fm のドメインを用いて、ビジネスアカウントを契約し、汎用的な運用方法の素案を検討した。その成果をドキュメントにまとめたので、同じように 1Password の組織展開を考えている際は参考になればと思う。

azukiazusa のテックブログ2

Claude Code のサンドボックス機能を試してみた

Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。

gihyo.jp

Fedora Linux 43リリース、Linux 6.17 ＆ GNOME 49を搭載

Fedoraプロジェクトは10月28日、「Fedora Linux 43」のリリースを発表した。

gihyo.jp

ベクターデザイン、写真編集、ページレイアウトツールを統合、「Affinity」無料で利用可能に

Canvaは2025年10月30日、同社のグラフィックソフト製品群「Affinity」の写真編集、ベクターデザイン、ページレイアウトツールを1つのプラットフォームに統合し、無料で提供することを発表した。

gihyo.jp

RUBIK Pi 3 developer board、シリコン最適化推論Snap、BlueField-4にまつわるCanonicalとNVIDIAとの提携

Qualcomm Dragonwing QCS6490搭載の小型ボード、RUBIK Pi 3が登場しました。また、BlueField-4にまつわるCanonicalとNVIDIAとの提携が発表されています。

gihyo.jp

PyCon JP 2025開催レポート ―コミュニティの大切さを再発見した3日間

9月26日から28日にかけて広島国際会議場で開催された「PyCon JP 2025」の開催後レポートをお届けします。

gihyo.jp

GitHub、エージェントを指揮するための新しいビジョン「Agent HQ」を発表 ——Agentsページの刷新やGitHub Copilotのカスタムエージェントの作成も可能に

GitHubは10月28日、コーディングエージェントを既存のGitHubフローにネイティブに対応させるための新しいビジョン「Agent HQ」と、これを実現するためのGitHubやVS Codeの一連の新機能や改善を発表した。

gihyo.jp

Cursor 2.0リリース、マルチエージェントに対応、エージェント型コーディングモデルComposerを導入

Anysphereは2025年10月29日、同社が開発するAIコードエディタCursorの新バージョンCursor 2.0をリリースした。

gihyo.jp

Gemini内蔵でGalaxy XRが約1,800ドル登場

10月21日、Samsung ElectronicsがXRヘッドセット「Galaxy XR」を米国と韓国で発表し発売を開始しました。

gihyo.jp

みてね写真プリント自動提案システムの裏側に迫る――データ収集からデータ配信まで

みてね×gihyo.jpスペシャル企画。13回目はみてね写真プリント自動提案システムに関して、データ収集からデータ配信までの仕組みについて解説します。

gihyo.jp

第885回　Windows 11にアップグレードできないCPUでもUbuntuが快適に動作するか検証する

今回は古いCPUでUbuntuを動作させ、現在のCPUと比較してどの程度の速度で動作するのかを検証します。

gihyo.jp

「SciPyDataJapan 2026」2026年1月24日に開催 —科学技術とデータの未来をつなぐカンファレンスが再び

2026年1月24日、「SciPyDataJapan 2026」が2025年に続き東京・御茶ノ水で開催されることとなった。

gihyo.jp

AIが事実確認をおこなう百科事典、Grokpediaが登場

xAIは、新しいオンライン百科事典「Grokpedia」のバージョン0.1をリリースしたことを告知した。

gihyo.jp

huggingface_hub v1.0リリース、HTTPライブラリにhttpx採用、コマンドラインインターフェースを一新

Hugging Faceは2025年10月27日、AI開発プラットフォームHugging Face Hubへのアクセスクライアントライブラリhuggingface_hubの新バージョン1.0をリリースした。

gihyo.jp

データ検証ライブラリPydanticの紹介

2025年10月の「Python Monthly Topics」は、データ検証ライブラリのPydanticを紹介します。

gihyo.jp

第257回　MySQL Group Replicationの基礎知識

MySQL Group ReplicationとはInnoDBで利用可能なレプリケーションプラグインです。ここではGroup Replicationの基本的な仕組みや簡単な構築方法について説明します。

gihyo.jp

Fedoraプロジェクト、条件付きで生成AIによるコード貢献を受け入れへ

Fedoraプロジェクトのリーダーシップとガバナンスを担う組織「Fedora Council」は10月22日、生成AIおよび大規模言語モデル（LLM）を活用したコード貢献を許可する決定を下した。

gihyo.jp

Swift SDK for Androidがプレビューリリース

Swift.orgは2025年10月24日、Swiftを使ってAndroid上で動作するプログラムを開発できるSwift SDK for Androidをナイトリープレビュー版としてリリースした。

azukiazusa のテックブログ2

Claude Skills でエージェントに専門的なタスクを実行させる

Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; 開発のスタート, EBC7702・XuanTie C930とUbuntu, OSC 2025 Tokyo/Fall

resolute（Ubuntu 26.04 LTS）の開発が本格的にスタートし、まずは開発環境の準備が行われました。

gihyo.jp

AIでUIをデザインするウェブアプリ「Stitch」、公開共有機能を追加

Googleは、AIを使ってモバイルアプリやウェブアプリのユーザーインターフェース（UI）を生成できる「Stitch」をGoogle Labsで提供している。2025年10月16日、公開共有機能を追加したことを案内した。

gihyo.jp

もう少し使いたいときの救世主、LineageOS 23がリリース

Android 16をベースにした、LineageOS 23がリリースされました。

gihyo.jp

Google AI Studio、ビルドモードでAIアプリをVibe Codingするための新しいUXを提供

Googleは2025年10月21日、Google AI Studioにおいて、Vibe CodingでAIアプリを作成するための新しいユーザーエクスペリエンスを提供開始した。

gihyo.jp

Valkey 9.0リリース、スケーラビリティとパフォーマンスを大幅に向上

Valkey開発チームは2025年10月21日、キーバリューデータベースValkeyの最新バージョンValkey 9.0をリリースした。

gihyo.jp

OpenAI、AI搭載ブラウザ「ChatGPT Atlas」を発表 ——macOS版から提供開始

OpenAIは2025年10月21日、新しいAIブラウザ「ChatGPT Atlas」を発表した。発表時点ではmacOS用のアプリのみが提供される。

gihyo.jp

KDE Plasma 6.5リリース、ビジュアルやユーザビリティが大幅にアップデート

KDEプロジェクトは10月21日、「KDE Plasma 6.5」をリリースした。

gihyo.jp

第884回　ser2netでリモートコンソール環境をさらに便利に使う

第879回の「ser2netで作るリモートシリアルコンソール環境」では、ser2netを用いてリモートからtelnetコマンドでシリアルコンソールにアクセスできる環境を整えました。今回は通信の暗号化や認証を導入してみましょう。

gihyo.jp

3Dプリンターで円柱を出力する際の考え方

今回は、身近なはずなのに奥深い、円柱を出力する必要があると思ったときの考え方をいくつか紹介します。

gihyo.jp

Web上でClaude Codeを実行できる「Claude Code on the web」リサーチプレビュー版で提供開始

Anthropicは2025年10月21日、AIコーディングエージェントClaude CodeをWebから操作できる「Claude Code on the web」をリサーチプレビュー版としてリリースした。

gihyo.jp

DroidKaigi 2025 参加レポート 〜コミュニティが彩るAndroidの祭典〜

9月10日から12日にかけて、ベルサール渋谷ガーデンでDroidKaigi 2025が開催されました。本記事では、現地会場の様子をレポートします。

gihyo.jp

Claude Codeは今までのAI支援開発ツールとは何が違うのか

Claude Code以前のAI支援開発ツールとClaude Codeを比較しながら、Claude Codeの特徴と強みを説明します。

blog.jxck.io

3PCA 32 日目: Privacy Sandbox の後始末

このエントリは、_2023_ 年の 3rd Party Cookie Advent Calendar の 32 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie宙に浮いていた Privacy Sandbox プロジェクトの「後始末」が公開された。

gihyo.jp

Anthropic、Claudeに専門性の高いタスク指示ができる「エージェントスキル」を発表

Anthropicは2025年10月17日、同社のClaudeシリーズに特定のタスク実行を効率的に行うことができるファイルセット「エージェントスキル（Agent Skills）」がプレビューとして利用できるようになったことを発表した。

gihyo.jp

Linux 6.18-rc2リリース、Linus“ご立腹”のRustフォーマットチェック関連も修正

Linus Torvaldsは10月19日（米国時間）、開発中の次期Linuxカーネル「Linux 6.18」の2本目のリリース候補版となる「Linux 6.18‐rc2」を公開した。

gihyo.jp

AIモデル「Hunyuan3D 2.1」を使って画像をもとに頂点数などを調整しながらモデルを作ってみよう

第63回目は、AIモデル「Hunyuan3D 2.1」を使えるウェブサービスを通して、頂点数を調整しながらモデルを生成する方法を見ていきます。

stin's Blog

Hono Conf 2025 に参加してきたので感想を書く

2025年10月18日に開催された Hono Conf に現地参加したので、自分が見たセッションについて覚えている限りで感想を書きます。 https://honoconf.dev/2025 以下、「発表タイトル by 発表者名」で区切って書いていきます。発表資料が見つかったものについてはリンクも貼っておきます。 令和最...

azukiazusa のテックブログ2

Remix v3 を実際に動かして試してみた

2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。

gihyo.jp

「Zorin OS 18」Windows 10サポート終了の10/14にリリース、2日間で10万ダウンロード突破

アイルランドのZorin Groupは2025年10月14日、同社が開発するUbuntuベースのデスクトップOS（Linuxディストリビューション）「Zorin OS」の最新バージョン「Zorin OS 18」をリリースした。

gihyo.jp

Vue Fes Japan 2024レポート ～Vueの未来とJavaScriptツールチェインの再定義

このレポートは昨年2024年10月に開催されたVue Fes Japan 2024の取材内容を、今回2025年10月に公開するものです。当時の熱気と重要な技術トレンドをお伝えします。

gihyo.jp

「TSKaigi Hokuriku 2025」11/23に開催、チケット販売中

2025年11月23日（日）にホテル金沢（石川県金沢市）で開催予定の「TSKaigi Hokuriku 2025」のチケット販売が開始されている。

gihyo.jp

Ubuntu 26.04 LTS “Resolute Racoon”の開発, NVIDIA DGX SparkとUbuntu

25.10（questing）のリリースが完了し、次のリリースのための旅路が始まりました。Ubuntu 26.04 LTSとなるリリースは、Resolute Racoon、「決然としたアライグマ」というコードネームが与えられています。

gihyo.jp

PyCon China 2025 参加レポート ―中国のPython事情を初見聞

Pythonの国際カンファレンスPyConは世界中で開催されています。今回筆者は中国で開催されたPyCon China 2025に初めて参加してきたので、その様子をレポートします。

gihyo.jp

PyTorch 2.9リリース、パフォーマンスアップ、Wheel VariantサポートをROCm、XPU、CUDA 13に拡大

PyTorch Foundationは2025年10月15日、同組織が開発を進めるオープンソースのディープラーニングフレームワークPyTorchの新バージョンPyTorch 2.9をリリースした。

gihyo.jp

Node.js 25が登場 ―V8をアップグレード、JSON.stringifyのパフォーマンス向上、JITパイプライン最適化など

Node.js開発チームは2025年10月15日、Node.jsの最新メジャーバージョンであるNode.js v25.0.0をリリースした。

gihyo.jp

Rust製高速コードエディタ「Zed」がWindowsに対応

Zed Industriesは2025年10月15日、同社が開発するオープンソースのコードエディタZedのWindows版をリリースした。

gihyo.jp

Pixel Watch 2/3向けにWear OS 6が配信開始

Googleは、Android 16をベースとしたWear OS 6をPixel Watch 2と3に対して配信を開始しました。Bluetooth/WiFiモデルとLTEモデルの両方が対象です。

gihyo.jp

PyCon TW 2025カンファレンスレポート

こんにちは、齊藤優です。PyCon TW 2025のスピーカーとして登壇してきたので、参加レポートをお伝えします。PyCon TW 2025は2025年9月5日から7日にかけて台湾の台北で実施されました。

gihyo.jp

GitLab企業経営調査2025・日本版の概要と、開発プロセス全体を効率化するGitLab Duo Agent Platform

GitLabは2025年9月25日、調査レポート「GitLab企業経営調査2025（日本版）ソフトウェアイノベーションによる経済効果」とGitLab Duo Agent Platformを紹介するメディア向けの発表会を行った。発表したのはGitLabのHead of Japanである小澤正治氏。この記事ではその模様をレポートする。

gihyo.jp

第883回　Minisforum AI X1 PROでLLMを高速に動作させる

今回はベアボーンのMinisforum AI X1 PROにUbuntu 24.04.3をインストールし、さらにROCm 6.4.4とllama.cppを組み合わせてLLMを高速に動作させます。

gihyo.jp

Visual Studio Code、コーディングエージェントによるマージコンフリクトの解決アクションの追加、ネストされたAGENTS.mdの設置、AppleアカウントでのGitHub Copilotログイン可能に

Visual Studio Codeは2025年10月9日、バージョン1.105をリリースした。この記事ではいくつかの新機能と改善点を紹介する。

gihyo.jp

第256回　MySQL Group ReplicationのFlow Control

MySQL Group Replicationでは、データベースの更新を行うノードを制御するために、Flow Controlという仕組みが提供されています。

azukiazusa のテックブログ2

Playwright Agents によるテストの自動生成を試してみた

Playwright v1.56 で導入された Playwright Agents は、Planner、Generator、Healer の 3 つのエージェントで構成されており、アプリケーションコードを解析してテストケースの計画、テストコードの生成、失敗したテストの修正を自動化できます。この記事では、Claude Code から Playwright Agents を呼び出して、シンプルなカンバンアプリのテストコードを自動生成する手順を紹介します。

azukiazusa のテックブログ2

ChatGPT 内でアプリを直接操作する Apps SDK に自作のアプリを接続する

Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。この記事では Apps SDK を使用して、実際に ChatGPT 内で動作するシンプルなアプリを作成する手順を紹介します。

azukiazusa のテックブログ2

Claude Code の設定をプラグインで共有する

Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。

gihyo.jp

10回目を迎えた「iOSDC Japan 2025」カンファレンスレポート

今回で10回目の開催となるiOSDC Japan 2025をレポートします。

gihyo.jp

第18回　日常から離れる楽しさ：一般相対論をExcelで

書籍『幾何で見える必ずわかる一般相対性理論』の補講、第18回です。

gihyo.jp

Claude Code、プラグイン機能をパブリックベータで提供開始

Anthropicは2025年10月9日、Claude Codeのプラグイン機能をパブリックベータで提供することを発表した。

gihyo.jp

Ubuntu 25.10 “Questing Quokka”のリリース

10月9日、Ubuntu 25.10 ("Questing Quokka") がリリースされました。

gihyo.jp

Gemini CLIに拡張機能が登場 ―よく使うツールやMCPサーバー、カスタムコマンドをパッケージ化して適用可能に

Googleは2025年10月8日、AIコーディングエージェントGemini CLIのv0.8.0アップデートで拡張機能が使用できるようになったことを発表した。

gihyo.jp

「PyCon mini 東海 2025」11/8に開催、参加登録受け付け中

東海地方のPythonコミュニティによる技術カンファレンス「PyCon mini 東海 2025」が2025年11月8日（土）、名古屋市で開催される。

gihyo.jp

ReactプロジェクトがLinux Foundationに移管され「React Foundation」設立

2025年10月7日、ReactおよびReact NativeがLinux Foundation傘下のReact Foundationに移行することが発表された。

gihyo.jp

Vega OS搭載！Amazonの新製品「Fire TV Stick 4K Select」発表

Amazonの新製品が発表されました。スマートテレビの「Fire TV Omini QLED」「Fire TV 2」「Fire TV 4」、そして、ステック型のストリーミングメディアプレイヤーの「Fire TV Stick 4K Select」です。

gihyo.jp

ノーコードでAIミニアプリ作成できるツール「Opal」、日本でも利用可能に

Googleは2025年10月7日、ノーコードでAIミニアプリを構築できる実験的ツール「Opal」の提供範囲を拡大し、日本を含む15か国にも段階的に提供を開始することを発表した。

gihyo.jp

UI操作に最適化されたモデルGemini 2.5 Computer Useが公開プレビューに

Googleは2025年10月7日、UI操作に最適化された新しいモデル「Gemini 2.5 Computer Use」を公開プレビューで提供開始した。

gihyo.jp

第882回　Ubuntu 25.10の変更点

今回は10月9日にリリースされる予定のUbuntu 25.10の特徴的な変更点をお知らせします。

gihyo.jp

Codexの一般提供開始 ―新しいSlack統合、Codex SDK、管理機能を追加

OpenAIは2025年10月6日、コーディングエージェントCodexの一般提供を開始した。またこれに合わせて、有料プラン向けの3つの新機能もリリースされた。

gihyo.jp

OpenAI、エージェントを構築、デプロイ、最適化するツール「AgentKit」を発表

OpenAIは2025年10月6日、AIエージェントを構築、デプロイ、最適化するためのツールキット「AgentKit」を発表した。

gihyo.jp

Linus、Rustのフォーマットチェックを「無神経でクレイジー」と酷評

10月12日に予定されている「Linux 6.18」のマージウィンドウ終了と最初のリリース候補版の公開に向け、プルリクエストのチェックに大忙しのLinusが、マージウィンドウ期間中はプルリクエストに対するLinusの手厳しい批判が増える時期でもある。

gihyo.jp

ブラウザ上でお手軽動画圧縮

今回は、Misskey v2025.10.0に含まれる予定の「動画圧縮機能」で採用した、ブラウザ上で動画処理を行えるライブラリMediabunnyを紹介します。

gihyo.jp

AIツール「Copilot 3D」を使って作成した3DモデルをBlenderにインポートしてみよう

第62回目は、Microsoftが提供しているAIツール「Copilot 3D」を使用して作成した3DモデルをBlenderにインポートする方法や、編集する方法などを見ていきます。

azukiazusa のテックブログ2

MCP のツールアノテーションでユーザーにヒントを提供する

MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。

gihyo.jp

GitHub、マージコンフリクトをワンクリックで解決可能な新しいUIを提供開始

GitHubは2025年10月2日、プルリクエストの際、マージコンフリクトが発生したときにWebインターフェース上でワンクリックで解決可能なボタンの提供を開始した。

gihyo.jp

U-22プログラミング・コンテスト2025 最終審査に進む32作品を発表

U-22プログラミング・コンテスト実行委員会は2025年10月3日、「U-22プログラミング・コンテスト2025」エントリー332作品のうち、事前審査を通過した32作品を発表した。

gihyo.jp

第十二回 技術書同人誌博覧会（技書博12）、10月26日にソニックシティ（埼玉・大宮）にて開催

技術に関する同人誌の即売会「第十二回 技術書同人誌博覧会（技書博12）」が、2025年10月26日にソニックシティ（埼玉県さいたま市）にて開催される。

gihyo.jp

Google、コーディングエージェントJulesをコマンドラインから操作する「Jules Tools」をリリース

Googleは2025年10月2日、AIコーディングエージェントJulesをコマンドラインで操作できるツールキット「Jules Tools」をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; リリースまであと一週間、26.04へ向けて

questing（Ubuntu 25.10）のリリースまで一週間になりました。

gihyo.jp

Markdownをプログラミング言語として用いる仕様駆動開発の可能性 ——GitHub Blogより

GitHubは2025年9月30日、ブログ記事「Spec-driven development: Using Markdown as a programming language when building with AI」を公開し、Markdownをプログラミング言語として用いる仕様駆動開発の可能性の一端が紹介された。

gihyo.jp

Google、AIを使ってGoogleドライブのランサムウェアを検知しファイルを復元する機能を発表

Googleは2025年10月1日、パソコン版GoogleドライブにAIを活用したランサムウェア検知機能を搭載したことを発表した。

gihyo.jp

Microsoft、エージェント型AIアプリ開発基盤「Microsoft Agent Framework」を発表

Microsoftは2025年10月1日、エージェント型AIアプリを開発するためのSDKとランタイムである「Microsoft Agent Framework」を発表、パブリックプレビューとしてリリースした。

gihyo.jp

来年リリース！？ PC向けAndroidが登場

現状は、PC向けのクライアントOSと言えば、WindowsとmacOSが大半を占めています。しかし、Qualcommが開催したSnapdragon Summit 2025のオープニング基調講演で、この状況を変えるかもしれない未来が語られました。

gihyo.jp

OpenAI、動画生成モデル「Sora 2」とソーシャルアプリ「Sora」を発表

OpenAIは2025年9月30日、動画生成モデルSora 2を発表し、同モデルを使える新しいソーシャルアプリSoraのiOS向けの提供とそ段階的利用を米国とカナダで開始した。

gihyo.jp

Linux 6.17リリース、Ubuntu 25.10／Fedora 43などに搭載へ

Linus Torvaldsは9月28日（米国時間）、当初のスケジュールどおりに「Linux 6.17」を公開した。

gihyo.jp

第881回　IPv6オンリー環境でも家庭内サーバーをインターネットに公開できる、トンネル型リバースプロキシPangolinを構築する

DS-Lite接続のようなキャリアグレードNATな環境では、従来のようにIPv4アドレスで家庭のルーターまで到達できません。こうした問題を解決できるのが、今回紹介するトンネル型リバースプロキシです。

gihyo.jp

第122回　セミナー「データ活用の現状と近未来」開催、MySQL HeatWave 9.4.1および9.4.2リリース、PostgreSQL新メジャーバージョン18リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

Microsoft 365 Copilot、エージェントを使ったバイブワーキング（Vibe working）に対応へ ——Officeアプリにエージェントモード、CopilotチャットにOfficeエージェントを搭載

Microsoftは2025年9月29日、Microsoft 365 Copilotにおいて、エージェントを使ったバイブワーキング（Vibe working）を実現するため、Officeアプリに「エージェントモード」とCopilotチャットでの「Officeエージェント」を搭載することを発表した。

gihyo.jp

OpenAI、ChatGPTにACP（Agentic Commerce Protocol）をベースとしたインスタントチェックアウト機能を導入 ―ACPはオープンソースとして公開

OpenAIは2025年9月29日、ChatGPTにAIエージェントコマースに便利な機能であるインスタントチェックアウト機能を導入し、米国のChatGPTユーザーが利用できるようになったことを発表した。

gihyo.jp

Claude Sonnet 4.5リリース、Claude CodeにネイティブVS Code機能拡張など大幅機能強化

Anthropicは2025年9月30日、同社のAIモデルClaude Sonnetの新バージョンSonnet 4.5をリリースした。

gihyo.jp

Python 3.14の新機能：asyncioタスク可視化機能を使ってみよう

2025年9月の「Python Monthly Topics」は、Python 3.14で追加されるasyncioタスク可視化機能であるasyncio psコマンド、asyncio pstreeコマンドと、asyncio.print_call_graph()関数、asyncio.capture_call_graph()関数を紹介します。

gihyo.jp

第255回　ユーザー定義変数を使ってみよう

MySQL には「ユーザー定義変数（User-defined variables）」と呼ばれる仕組みがあります。

azukiazusa のテックブログ2

Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする

自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。

gihyo.jp

GitHub、プルリクエストの新しいFiles changedページで未変更行へのコメントを可能に

GitHubは2025年9月25日、プルリクエストの新しい「Files changed」ページにおいて、変更されたファイル内の未変更行を含む任意の行へコメントできる機能を追加したことを発表し、リポジトリ単位で段階的に展開していることを案内した。

gihyo.jp

“危険なデスクトップイメージ”を毎日お届け ―Ubuntu Dangerous Daily Desktop images提供開始

2025年10月に予定されている「Ubuntu 25.10」のリリースを間近に控えるなか、Ubuntuリリースチームは9月19日から「Dangerous Daily Desktop（/daily-dangerous）」と名付けたデスクトップイメージの公開を開始した。

gihyo.jp

Cloudflare Workersからメールを直接送信できる「Cloudflare Email Service」発表 ―11月からプライベートベータ版として提供開始

Cloudflareは2025年9月25日、同社のサーバレスアプリケーションプラットフォームCloudflare Workersからトランザクションメールを直接送信できる新機能「Cloudflare Email Service」を発表した。

gihyo.jp

GitHub Copilot CLIが公開プレビューに

GitHubは2025年9月25日、GitHub Copilot CLIの公開プレビュー版を発表した。

gihyo.jp

Sakana AI、ハイパフォーマンスなAIアルゴリズム探索フレームワーク「ShinkaEvolve」をオープンソースとして公開

Sakana AIは2025年9月25日、LLMを用いて桁違いに少ないリソースでアルゴリズムを探索できる新しいフレームワーク「ShinkaEvolve」を発表、Apache 2.0ライセンスの元GitHub上に公開した。

gihyo.jp

Ubuntu 25.10（questing）の開発; ベータリリースとKernel Freeze

questing（Ubuntu 25.10）はベータがリリースされ、10月9日のGAを目指してカーネルも確定され、あと3週間ほどをQA（と、まれに隠し球として投入される新機能）に費やすフェーズになりました。

gihyo.jp

Googleスプレッドシート、日本語でもAI関数によるデータ生成機能をWorkspaceやAIプラン加入者に順次提供へ

Googleは2025年9月23日、日本語を含む7つの言語でもGoogle WorkspaceやGoogle AIプランの加入者向けに、GoogleスプレッドシートのAI関数の提供を始めることを発表した。

gihyo.jp

さくらインターネット、AIモデルを手軽に利用できるAPIサービス「さくらのAI Engine」の一般提供を開始

さくらインターネットは2025年9月24日、生成AI向け推論API基盤「さくらのAI Engine」の一般提供を開始した。

gihyo.jp

NVIDIA、日本の人口統計や地理・文化にもとづいたオープンソースのAI開発向けデータセットを公開

NVIDIAは2025年9月23日、日本における人口統計、地理的分布、性格特性の分布に基づいて合成的に生成されたペルソナのオープンソースデータセット「Nemotron-Personas-Japan」を公開した。

gihyo.jp

第28回 スクラッチで考える生成AIとコンテンツ利用プログラミング

「スクラッチでプログラミングをはじめよう」第28回です。

gihyo.jp

rabbitOS 2で“とっつきにくさ”は解消されたのか②

前回に引き続き、ポケットサイズのAIデバイスrabbit r1向けOSの最新版「rabbitOS 2」について取り上げます。

gihyo.jp

npmjs.com、最近のサプライチェーン攻撃を鑑みて、認証と公開プロセスの強化を計画

npmjs.comを管理しているGitHubは2025年9月24日、npmエコシステムで最近顕在化しているアカウント乗っ取りおよび自己増殖型マルウェアによるサプライチェーン攻撃があったことを鑑みて、認証と公開プロセスを強化する計画を発表した。

gihyo.jp

Figma、リモートMCPサーバーをオープンベータとして段階的に提供開始 ——Figma Makeからのリソース取得、Code Connect UIコンポーネントも追加

Figmaは2025年9月23日、リモートMCPサーバーをオープンベータとして段階的に提供を開始した。

gihyo.jp

Chrome DevTools MCPサーバー、コーディングエージェント向けに公開プレビュー開始

Googleは2025年9月23日、AIコーディングエージェント向けに Chrome DevTools MCPサーバーの公開プレビューを開始した。

gihyo.jp

第880回　GPUに画像の文字を解析させる、あるいはPyTorch入門

今回はAI文章画像解析エンジンであるYomiTokuを通じて、GPUメーカーごとに用意されているPyTorchのインストール方法を紹介します。

stin's Blog

Next.js on Cloudflare Workers (OpenNext) で Drizzle + D1 を使ったユニットテストを書く

OpenNext は Next.js アプリケーションを Vercel 以外に簡単にデプロイするためのツールです。Cloudflare Workers をサポートしています。 Cloudflare 自体も OpenNext によるデプロイを推奨しており、次のコマンドによって OpenNext による Next.js ア...

azukiazusa のテックブログ2

YAML ファイルで AI エージェントを構築する cagent

cagent は Docker 社が開発した AI エージェントフレームワークです。YAML ファイルでエージェントの振る舞い・役割・使用するツールを宣言的に定義でき、コードを 1 行も書かずにエージェントを構築できます。この記事では cagent の概要とインストール方法、YAML ファイルの書き方、実際にエージェントを動作させるまでの手順を解説します。

azukiazusa のテックブログ2

browserslist で Baseline を設定できるようになった

browserslist は、フロントエンド開発において、どのブラウザをサポートするかを指定するためのツールです。これにより、開発者はターゲットとするブラウザの範囲を簡単に定義でき、CSS や JavaScript のトランスパイルやポリフィルの適用を自動化できます。

gihyo.jp

Fedora、Forgejoベースのホスティング/コラボレーションプラットフォーム「Fedora Forge」をソフトローンチ

Fedoraプロジェクトは9月18日、プロジェクト内のサブプロジェクトやSIG（Special Interest Groups）の活動をサポートする新しいコラボレーションプラットフォーム「Fedora Forge」をソフトローンチした。

gihyo.jp

xAI、高コストパフォーマンスの2Mコンテキストウィンドウ・マルチモーダル推論モデル「Grok 4 Fast」をリリース

xAIは2025年9月19日、200万トークンのコンテキストウィンドウを備えたコストパフォーマンスの高い最新の推論モデル、Grok 4 Fastをリリースした。

gihyo.jp

AIツール「Claude」を使ってオブジェクトをたくさん並べてみよう

第61回目は、「Claude」を使って、Blenderのオブジェクトを均等に並べて生成してみたり、ランダムに並べて生成してみたりすると、どのような結果になるのかを見ていきます。

azukiazusa のテックブログ2

GitHub Actions で YAML アンカーを使う

GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます

azukiazusa のテックブログ2

AI エージェントのための Agent Payments Protocol (AP2) を試してみた

現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。

blog.jxck.io

サプライチェーン攻撃への防御策

前回は、Nx の事例をベースに「パッケージを公開する側」の対策について解説した。今回は、「パッケージを使う側」、もっと言えば「OSS を使う上で開発者が考えるべきこと」について考察する。

gihyo.jp

FlutterKaigi 2025、11/13開催、チケット販売中

Flutterに関する年次コミュニティカンファレンス「FlutterKaigi 2025」が2025年11月13日（木⁠）に東京、大手町プレイス ホール＆カンファレンスにて開催される。

gihyo.jp

ワイヤーフレーム作成ツールFrame0、1.1.0をリリース ——エージェント機能を使ったワイヤーフレーム生成などが可能に

Frame0は2025年9月17日、ワイヤーフレーム作成ツールFrame0のバージョン1.1.0をリリースした。今回のアップデートで、Frame0 AI Agentを実験的に追加した。

gihyo.jp

GNOME 49リリース ―Showtime、Papersなど最新のデスクトップエクスペリエンスを提供

GNOMEプロジェクトは9月17日、「GNOME 49“Brescia”」の正式リリースを発表した。

gihyo.jp

Rust 1.90リリース、LinuxのデフォルトリンカとしてLLDを採用

Rustリリースチームは2025年9月18日、Rustの新バージョン1.90.0をリリースした。

gihyo.jp

Google、ChromeにGeminiをより深く統合、AIエージェント型ブラウジングアシスタントやアドレスバーでのAIモード検索を実現へ ―9/18から米国向け英語版Chromeで提供開始

Googleは2025年9月18日、WebブラウザChromeの米国ユーザー向け英語版に複数のレベルでAIモデルGeminiを組み込み、AIによるブラウジング体験を向上させるアップデート版を提供することを発表した。

gihyo.jp

CUDAツールキットとランタイムのUbuntuリポジトリ経由での配布、Ubuntu 25.10（questing）の開発; Test RebuildとRust版Coreutilsの改善

Canonicalが、CUDAツールキットとランタイムのUbuntuリポジトリからの配布が可能になったことをアナウンスしています。

gihyo.jp

Google、Discover上のメディアやクリエイターをフォロー可能に ——YouTube Shortsの動画、𝕏やInstagramの投稿も掲載へ

Googleは2025年9月17日、Googleアプリ内のDiscoverで、ユーザーが関心のあるメディアやクリエイターをフォローできるようにすること、また今後数週間のうちにYouTube Shortsの動画、𝕏やInstagramの投稿を表示対象として追加することを発表した。

gihyo.jp

OpenAI、大学生による学生のためのChatGPT役立つチャット例「100 chats for college students」を公開

OpenAIは2025年9月17日、ChatGPTを大学生が利用する場合に役立つチャット例「100 chats for college students」を公開した。

gihyo.jp

DuckDB 1.4.0リリース、今後のLTSリリースは1つおきに

DuckDB Foundationは2025年9月16日、オープンソースの組み込み型データベースDuckDBの新バージョン1.4.0（コードネーム“Andium”）をリリースした。

gihyo.jp

rabbitOS 2で“とっつきにくさ”は解消されたのか

ポケットサイズのAIデバイスrabbit r1向けOSの最新版「rabbitOS 2」の最新動向について取り上げます。

gihyo.jp

Google、Agent Payments Protocol (AP2)を発表 ——AIエージェント決済を支えるオープンプロトコル

Googleは2025年9月17日、AIエージェントがユーザーに代わって安全に支払いを実行するためのオープンプロトコル「Agent Payments Protocol (AP2)」を発表した。

gihyo.jp

GitHub MCP Registryが公開 ——OSSコミュニティのMCPレジストリとの統合も予定

GitHubは2025年9月16日、MCPサーバーを発見・利用するための新たな拠点として「GitHub MCP Registry」を公開した。

gihyo.jp

第181回　2020年代前半のウェブデザインと今後のトレンド［後編］

2020年から2024年までに取り上げられたデザイン要素から、「ウェブデザインのトレンド」とは何か、それ以降のトレンドがどのような方向へと向かっていくのかを考察していきます。後編です。

gihyo.jp

第879回　ser2netで作るリモートシリアルコンソール環境

今回はシリアルコンソールサーバーを、Ubuntuと適当なマシンを使って安価に作ってみましょう。

gihyo.jp

Java 25リリース――初心者向け機能や起動時間短縮など

2025年9月16日（米国時間）にLTS（Long-Term Support、長期サポート）であるJava 25がリリースされました。

gihyo.jp

GNOME 49、X11サポートを一時的に復活

Linuxデスクトップ環境としてもっとも多くのユーザに使われているGNOMEは現在、X11のサポートを段階的に終了し、Waylandセッションのみをサポートすることを計画している。

gihyo.jp

OpenAI、コーディングエージェントにより最適化した「GPT-5-Codex」をリリース

OpenAIは2025年9月15日、AIコーディングエージェントCodex向けにさらに最適化されたGPT-5の新バージョン「GPT-5-Codex」をリリースした。

gihyo.jp

第254回　知っておくと得するかもしれないMySQLの組み込み関数（その2）

今回は以前紹介した 第248回 知っておくと得するかもしれないMySQLの組み込み関数 の「その2」として、「知っておくと得する」可能性のある関数を、再びいくつかピックアップしてご紹介します。

gihyo.jp

第180回　2020年代前半のウェブデザインと今後のトレンド［前編］

2020年から2024年までに取り上げられたデザイン要素から、「ウェブデザインのトレンド」とは何か、それ以降のトレンドがどのような方向へと向かっていくのかを考察していきます。前編です。

azukiazusa のテックブログ2

pnpm の minimumReleaseAge オプションでサプライチェーン攻撃を防ぐ

最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。

azukiazusa のテックブログ2

自然言語で CI/CD パイプラインを定義する Agentic Workflows

Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。

gihyo.jp

Visual Studio Code、AGENTS.md対応、言語モデルの自動選択機能の追加、拡張機能から言語モデルを提供するAPIを実装 ——Hugging Faceなどの拡張機能からも最新のオープンモデルが使えるように

Visual Studio Code（以下VS Code）は2025年9月11日、August 2025（version 1.104）をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; UI Freezeとrust-coreutilsの投入

questing（Ubuntu 25.10）の開発はUI Freezeが行われ、「ドキュメントのための時間」に突入しました。

gihyo.jp

MCPサーバーの公式オープンカタログ「MCPレジストリ」がプレビュー公開 ―信頼できるMCPサーバーの発見と独自のサブレジストリ展開が容易に

2025年9月8日、MCPコミュニティは、MCP（Model Context Protocol）クライアントに信頼できるMCPサーバーの一覧を提供する公式リスト「MCPレジストリ」をプレビュー版として公開した。

gihyo.jp

ミニマリスト向けの期待の星「Bluefox NX1」

今回は手のひらサイズのミニスマホ「Bluefox NX1」について取り上げます。

gihyo.jp

第878回　VirtualBox 7.2の変更点

今回は8月14日（現地時間）にリリースされたVirtualBox 7.2の変更点について説明します。

gihyo.jp

npmにサプライチェーン攻撃、Chalk、debug、ansi-stylesなど18個のnpmパッケージにマルウェアが注入

2025年9月8日、Chalk、debug、ansi-stylesなど18個の人気npmパッケージにサプライチェーン攻撃の影響があったことが報告された。

gihyo.jp

NotebookLM、レポート作成に「ブログ投稿形式」などをAIが提案する機能が登場、フラッシュカードやテストなど学習支援機能も拡充

Googleは2025年9月8日、同社が提供するAIノートサービス「NotebookLM」で多彩なレポート生成やテスト作成などユーザの学習を支援する新機能をリリースした。

gihyo.jp

初公開から7年、Openwall傘下のセキュリティモジュール「Linux Kernel Runtime Guard 1.0.0」がリリース ―既存のカーネルに後から適用、幅広いカーネル / ディストリビューションに対応

Openwallプロジェクトは9月2日、Linuxカーネルの動作中に脆弱性攻撃や不正な改変を検知するオープンソース（GPLv2）のセキュリティモジュール「Linux Kernel Runtime Guard（LKRG） 1.0.0」をリリースした。

gihyo.jp

Google、検索におけるAIモードで「日本語」対応を発表

Googleは2025年9月9日、検索におけるAIモードで、日本語を含む5つの言語に対応したことを発表した。今後数日で段階的に利用可能になるとみられる。

stin's Blog

Drizzle ORM を使った書き捨てスクリプトから Cloudflare D1 にアクセスしたい

Cloudflare D1 (以下 D1) は Cloudflare のリレーショナルデータベースサービスです。実態はリモートにある SQLite です。 Drizzle ORM は TypeScript で各種データベースに接続するデータベースクライアントで ORM です。テーブルスキーマ管理と型安全性に優れています...

gihyo.jp

AIツール「Claude」を使って画像をもとにBlender上でモデリングしてみよう 〜Hyper3D使用と未使用の比較〜

第60回目は、画像をAIに見せその画像をもとに、Blender上でモデリングを行っていく様子を見ていきます。

azukiazusa のテックブログ2

仕様駆動開発を支える Spec Kit を試してみた

仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。

gihyo.jp

#02 EuroPython 2025 2日目キーノート、3日目突然のLT登壇、そしてクロージング、スプリントへ

プラハで開催されたEuroPython 2025のカンファレンス2日目からクロージング、その後のスプリントまでをレポートします。

gihyo.jp

Ubuntu 25.10（questing）の開発; questing snapshot 4とsudo-rsの実戦投入

8月末にquesting（Ubuntu 25.10）の最後のスナップショット、snapshot 4がリリースされました。

gihyo.jp

Google、デバイス向けオープン埋め込みモデルEmbeddingGemmaをリリース

Googleは2025年9月4日、デバイス埋め込みAI向けに設計された、高効率な新しいオープンモデル「EmbeddingGemma」をリリースした。

gihyo.jp

第877回　リアルタイム文字起こしをローカルマシンで実現できるWhisperLiveKitを使ってみよう

音声認識・文字起こしを実現できるモデルWhisper。ここ数年、それを元にしたさまざまなツールも登場しました。今回紹介するWhisperLiveKitもそのひとつです。

gihyo.jp

Microsoft、「6502 BASIC」をオープンソースとして公開

Microsoftは2025年9月3日、同社が1977年に開発したBASICインタプリタ「6502 BASIC」を、MITライセンスのもとGitHub上にオープンソースとして公開した。

gihyo.jp

自由か、それとも安全か。Androidで開発者認定を導入

8月26日、GoogleはAndroid Developer BlogでPlayストア外からアプリをインストールする「サイドロード」の安全性を高めるために、開発者認証制度（Developer Verification）を導入する計画を発表しました。

gihyo.jp

みてね写真プリントML自動提案の仕組み

みてね×gihyo.jpスペシャル企画。12回目はML自動提案による写真プリントの仕組みについて解説します。

gihyo.jp

9/26、27、広島で開催「PyCon JP 2025」タイムテーブル発表、チケット販売中

2025年9月26日（金）、27日（土）に広島国際会議場で開催されるPyCon JP 2025のタイムテーブルが公開された。

gihyo.jp

GitHub、仕様駆動開発ツールキット「Spec Kit」を紹介 ——コーディングエージェントを利用して仕様を解釈し、開発計画・タスク分解・実装をおこなう

GitHubは2025年9月2日、コーディングエージェントを利用した仕様駆動開発（Spec-Driven Development）のためのツールキット「Spec Kit」を開発し、公式ブログで紹介した。

gihyo.jp

NotebookLM、音声解説の出力形式に「概要」「評論」「議論」の形式を新たに追加

Googleが提供するNotebookLMは2025年9月3日、音声解説の出力形式に「概要」「評論」「議論」を追加したことを発表し、段階的に提供し始めた。

blog.jxck.io

Nx の攻撃から学べること #s1ngularity

Nx リポジトリが攻撃を受け、広範囲にわたるインシデントが発生した。今回の事例は、GitHub Actions を中心に複数のステップが組み合わさった攻撃であり、過去に何度も発生してきた攻撃と本質的には変わらない。しかし、途中で AI が何度か登場するため「AI が書いたコードをマージしたから」などといった表面的な反応もあるが、実態はそこまで単純な話でもない。また、「自分のプロジェクトは Nx を使っていないから関係ない」とも言えない攻撃であるため、特にフロントエンドエンジニアは全員注意と確認が必要となる。この攻撃が何だったのか、そこから学べることは何なのか、解説する。

gihyo.jp

第253回　知っているとちょっと便利なVALUES行コンストラクタ

SQLを書いていると、ちょっとしたテストデータを用意したいときや、固定の値を一時的にテーブルのように扱いたい場面があると思います。

gihyo.jp

Linus、Bcachefsのステータスを「外部メンテナンス」に変更

Linus Tovaldsは8月31日、開発中のLinuxカーネル「Linux 6.17」の4本目のリリース候補版となる「Linux 6.17-rc4」を公開した。

gihyo.jp

11/14、15開催「YAPC::Fukuoka 2025」チケット販売中

2025年11月14日（金）、15日（土）の2日間、Perlを中心としたIT技術に関する年次カンファレンス「YAPC::Fukuoka 2025」が福岡工業大学にて開催される。

gihyo.jp

そこそこエンジニアでもいいんじゃない？

この連載では、それぞれのレベル別にAWSの学び方を紹介します。第4回は、「既にAWSを知っている人が、エンジニアとしてのレベルアップを目指すにはどうすべきか」についていくつかの方策を提案します。

gihyo.jp

AIニュースノート：nano-bananaが話題に、AGENTS.mdの採用広がる、Microsoft Copilotに3Dモデリング機能が追加、ChatGPTでプロジェクト専用メモリー搭載、Claude for Chromeの安全設計など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

第121回　連載10周年記念セミナー第1弾報告、MySQLで自然言語を使った機械学習処理への第一歩、PostgreSQLのセキュリティ脆弱性の修正版を確認

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。

gihyo.jp

「Go Conference 2025」9/27、28に開催、チケットは8/29 19:00販売開始

プログラミング言語Goに関する年次カンファレンス「Go Conference 2025」が、2025年9月27日（土）、28日（日）の2日間にわたってに東京・渋谷のAbema Towersにて開催される。

gihyo.jp

10/4開催「builderscon 2025」チケット販売中

技術分野を限定しないエンジニア向けのカンファレンス「builderscon 2025」が2025年10月4日（土）に埼玉会館で開催される。現在参加チケットが販売中。

gihyo.jp

「ぷよぷよ」を改造してゲームプログラミングを楽しもう！ ——書籍『すぐわかる！ ぷよぷよプログラミング』発売記念イベントより

2025年8月11日（山の日）に開催された『すぐわかる！ ぷよぷよプログラミング　SEGA公式ガイドブック』の発売記念イベントのレポートです。

gihyo.jp

xAI、コーディングに特化した高速なエージェント向け推論モデル「Grok Code Fast 1」をリリース

xAIは2025年8月28日、エージェントコーディング向けに優れた性能をもつ高速でコストパフォーマンスの高い推論モデル「Grok Code Fast 1」を発表した。

gihyo.jp

Ubuntu 25.10（questing）の開発; MySQLのメモリ効率の改善、 NVIDIA Jetson Thorのサポート

データベースワークロードに関連する、興味深い取り組みが行われています。MySQL 8.4のUbuntuパッケージにおいてtcmallocを利用するようにしたことで実現されています。

gihyo.jp

OpenAI、Codexの機能を強化し、VS CodeやCursorから使うための新しい拡張機能を公開 ——Codex CLIでは画像入力、メッセージキューイング、ウェブ検索も可能に

OpenAIは2025年8月27日、Codexの機能を強化し、VS CodeやCursorからの使うための新しい拡張機能をリリースした。またGPT-5のリリース以降、Codex CLIの開発が活発に行われており、今回のアップデートで画像入力、メッセージキューイング、ウェブ検索などの新機能が追加された。

gihyo.jp

PrefectではじめるPythonワークフロー・フレームワーク

2025年8月の「Python Monthly Topics」は、データパイプラインやワークフロー、ETLで利用されるワークフロー・フレームワーク「Prefect」について紹介します。

gihyo.jp

これからのFire OS、どうなるのか見てみよう

今後登場予定のAndroid 16 QPR2で、アプリが持つ主要機能をアシスタントが実行できる「App Functions API」が導入されます。

gihyo.jp

Google、一貫性を維持した画像編集を可能にする「Gemini 2.5 Flash Image」をリリース

Googleは2025年8月26日、新しい画像生成・編集モデル「Gemini 2.5 Flash Image」を発表した。

gihyo.jp

3DPでキューブパズルを自作してみる(2) ～キューブパズルデザインの完成とプリント～

前回はキューブパズルのおおまかな仕組みについて解説しました。今回はその続きの具体的なデザインをしていきます。

gihyo.jp

第876回　夏休み特別企画 自作PCを組もう［後編］ ——組み立てたあとにローカルLLM「gpt-oss-20b」を動かす

今回は自作PCを組み立て、Ubuntuをインストールする特別企画の後編です。前編に引き続き、実際に自作PCを組み、UbuntuをインストールしてLLMを動作させるところまでを行います。

gihyo.jp

NotebookLM、「動画解説」機能の日本語対応を段階的に提供開始

Googleが提供するNotebookLMは8月25日、「動画解説」機能において英語以外の80言語で段階的に1週間以内に利用可能になることを発表した。これにより、日本語で解説動画を作成できるようになる。

gihyo.jp

Google、検索における「AIモード」を日本でも段階的に提供開始 ——まずは英文での応答から

Googleは2025年8月21日、検索サービスにおいてAIが回答をおこなう「AIモード」を日本を含む180以上の国と地域で提供開始することを発表し、日本国内でも展開され始めている。

gihyo.jp

AIツール「Claude」を使ってBlender上でモデリングしてみよう ～さらに複雑な実践編～

第59回目は、AIを使って指示を出し、Blender上でモデリングを行い、そこに自分自身で手を加えていく方法を見ていきます。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 25 / Epilogue

CSS Advent Calendar エピローグ

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 24 / The Future of Web UI is Declarative. - How Design System can bridge Imperative Design?

Design と Web Design の思想を橋渡しする Design System。Semantic Design と Declarative Design System の関係性

azukiazusa のテックブログ2

Claude Code の学習モードで自分の手でコードを書く練習をしよう

コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 23 / Declarative Web Design

Intrinsic Web Design/Every Layout/Utopia と Declarative Design. そして、Container Size Queries の実現

gihyo.jp

AIニュースノート：AGENTS.mdの採用は広がる？（VS Code, cline）, ExcelのCopilot関数でAIを活用, Claude CodeがTeam・Enterpriseプランに対応など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 22 / Intrinsic Web Design - Beyond Responsive and Embrace the nature of the Web

Web というメディアが本来持つ性質/値を最大限に活かす「Intrinsic Web Design」という考え方

gihyo.jp

Ubuntu 25.10（questing）の開発; Feature Freezeと「デンジャラス」Daily Desktop Image

questing（Ubuntu 25.10）の開発はFeature Freezeを迎え、一応の『仕様が確定する』タイミングとなりました。

gihyo.jp

#01 EuroPython 2025開幕までの道のり、Day 1の注目セッション

EuroPythonはヨーロッパ地域で開催されるPythonに関するカンファレンスです。毎年ヨーロッパの各地域で開催され、今年はチェコのプラハで開催されました。

gihyo.jp

Android 16 QPR2でAIアシスタントがアプリを実行する

今後登場予定のAndroid 16 QPR2で、アプリが持つ主要機能をアシスタントが実行できる「App Functions API」が導入されます。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 21 / A Quick History of Web Design

Responsive Web Design までの歴史から見る、Web の制約と特性とデザインの理想

gihyo.jp

OpenAI、AIコーディングエージェントをガイドするための「AGENTS.md」サイトを公開

OpenAIは2025年8月20日、AIコーディングエージェントをガイドするためのシンプルなフォーマット「AGENTS.md」を案内するサイトを公開した。

gihyo.jp

GPT-5、開発に使うための基礎知識　 ——ワンショットでのフロントエンド開発の各モデル比較も

今回はOpenAIの新しいモデルGPT-5を、開発者視点で徹底解説します。APIの新機能やプロンプト設計の要点、フロントエンド開発の作例と他モデルとの比較までを一気に見ていきます。

gihyo.jp

第875回　夏休み特別企画 自作PCを組もう［前編］ ——2025年8月におけるミドルローPCを組むためのパーツの選定

今回は自作PCを組み立て、Ubuntuをインストールする特別企画の前編です。まずはパーツの選定です。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 20 / CSS Scope with backgrounds

CSS Scope の背景と、CSS Scope の提案に至るまでの経緯から考察するメンタルモデル

azukiazusa のテックブログ2

コーディングエージェントが参照するファイルを統一する AGENTS.md

コーディングエージェントを使用する際にはプロジェクトの技術スタックやビルド手順、コーディング規約を記載したドキュメントを用意して、コンテキストに含めるのが一般的な手法です。 しかし、　コーディングエージェントの製品ごとに異なるファイル名で用意しなければいけないという問題がありました。

gihyo.jp

GitHub CopilotがJetBrains、Eclipse、Xcode向けのMCPサポートを一般提供開始

2025年8月14日、GitHub CopilotのMCP（Model Context Protocol）サポートが、JetBrains、Eclipse、Xcode向けに一般提供開始された。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 19 / Cascade Layers in real world use

Cascade Layers に付随して議論されたトピックと、Cascade Layers の具体的なユースケース

gihyo.jp

第252回　MySQL Shellのバイナリログダンプ・ロード機能

MySQLのバイナリログを扱う新しい機能Binary Log Dumping and Loading Utilitiesを構成する要素とその使い方について紹介します。

gihyo.jp

“11年間、魚をどうもありがとう” ―Fedoraプロジェクト前リーダー マシュー・ミラーが語るオープンソースプロジェクトの魅力とチャレンジ

11年の期間に渡ってFedoraプロジェクトを率いてきたマシュー・ミラー氏に、オープンソースプロジェクト運営の魅力と課題についてお話をうかがいました。

gihyo.jp

9/26、27開催「Kaigi on Rails 2025」チケット販売中

2025年9月26日（金）、27日（土）に東京・JPタワー ホール＆カンファレンスとオンラインのハイブリッドで開催予定の、Ruby on Railsを中心としたWeb技術に関するカンファレンス「Kaigi on Rails 2025」のチケット販売が始まっている。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 18 / Cascade Layers with background story

Cascade Layers の背景と、Cascade Layers の提案に至るまでの経緯から考察するメンタルモデル

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 17 / Specificity Architecture is what CSS Architecture is

「詳細度設計」としての「CSS アーキテクチャ」、その未来’

azukiazusa のテックブログ2

LLM へのプロンプトを構造化された文書で管理する POML

POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 16 / Hard Core Scoping of Standard

標準側での「スタイルのカプセル化」

gihyo.jp

Google、超軽量、低消費電力モデル「Gemma 3 270M」をリリース

Googleは2025年8月14日、2億7000万パラメータをもつコンパクトなモデル「Gemma 3 270M」をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; glibcの更新とUnstable kernel採用の確定、Ubuntu 24.04.3 LTSのリリース

questingの開発は「リリースまであと2ヶ月」、「大物の更新をできるだけ入れ、残りの計画をある程度整理しておく」というシーズンに入りました。

gihyo.jp

第58回　Linuxカーネルのコンテナ機能 ―cgroup v2から使うメモリコントローラ（3）

前回はメモリ保護の動きを確認しました。今回は、ここまで紹介したメモリ制限やメモリ保護において、階層構造が考慮されることを、実際に試しながら確認します。

@sakupi01.com blog

Unlocking Parent Style Inheritance✨/ Nested で Dynamic で Adoptive なスタイルを実現する `inherit()`

「親要素の任意プロパティ」にアクセスする手段として、`inherit()` の仕様が CSS Values and Units Module Level 5 で策定されています。これにより、Custom Properties を経由せず、親要素のプロパティを子要素から直接自己参照でき、長年望まれてきた非常に多くのユースケースが一挙に解決されることが期待されています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 15 / CSS meets npm Ecosystem - the second shot - Component Based CSS

Declarative UI の登場による CSS エコシステムの変遷

gihyo.jp

AIニュースノート：Google検索：AIの影響, Microsoft 365 Copilot、GPT-5搭載, Claude Sonnet 4、APIで100万トークンのコンテキストに対応, Kaggle Game Arena：ゲーム対戦による新ベンチマークなど

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

Gemini CLI、VS Codeとの連携強化 ―コンテキストを認識しエディタ内差分表示が可能に

Googleは2025年8月13日、コマンドラインAIコードアシスタントGemini CLIをVS Codeに統合し、より連携を強化した開発ができるようになったことを発表した。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 14 / Thoughts on CSS Architecture

npm エコシステムと並行して、進化してきた CSS アーキテクチャ

gihyo.jp

Visual Studio Code、チャットにおけるGPT-5の利用とチェックポイント復元機能を追加 ——ターミナルコマンドの自動承認機能は設定方法を変更、AI使用状況の統計表示も

Visual Studio Codeは2025年8月7日、 バージョン1.103（July 2025）の一般提供を開始した。このバージョンでは、チャット（Copilot Chat）を中心に多数の新機能や改善が施された。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 13 / CSS meets npm Ecosystem - the first shot ... AltCSS

AltCSS とも言える SassとPostCSS の登場、エコシステムへの影響

gihyo.jp

Linux 6.17-rc1公開、RISC-VとBcachefsの変更をLinusが“却下”

Linus Torvaldsは8月10日、次期Linuxカーネル「Linux 6.17」の最初のリリース候補版となる「Linux 6.17-rc1」を公開した。

gihyo.jp

AIツール「Claude」を使ってBlender上でモデリングしてみよう～初歩的な実践編～

第58回目は、AIを使って指示を出し、Blender上でモデリングを行う方法を見ていきます。

gihyo.jp

「EuroPython ＆ PHPers Day 2025 参加報告会」8/26に開催 ―海外カンファレンス参加者の体験や学びを共有

2025年7月14日～20日にチェコで開催された「EuroPython 2025」と、2025年5月24日にポーランドで開催された「PHPers Day 2025」にそれぞれ日本から登壇、参加したメンバーが現地の体験を共有する報告会が、2025年8月26日（火）にハイブリッド形式で開催される。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 12 / Web Apps are demanded! - The Emergence of SPA

アプリケーションとしての Web の進化と SPA

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 11 / The Birth of Responsive Design

iPhone の登場と、Web デザインにおける適応性の黎明

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 10 / Interoperability in CSS, &c.

CSS におけるブラウザの負債とエコシステム側の解決策

azukiazusa のテックブログ2

AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI

MCP UI は Model Context Protocol (MCP) を拡張して、AI エージェントがインタラクティブな UI コンポーネントを返すことを可能にする仕組みです。これにより、AI エージェントとのチャットの返答としてグラフや画像ギャラリー、購入フォームなどを表示できます。この記事では MCP UI の SDK を利用して、AI エージェントがインタラクティブな UI コンポーネントを返す方法を試してみます。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 9 / Standards and Ecosystem

CSS 標準から、CSS 標準外の変化への転換

gihyo.jp

Webフォントの現在地とWebタイポグラフィの拡がり —⁠—『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』 著者 飯塚修平さんに聞く

2025年8月8日に『Webフォント実践ガイド—Google Fontsではじめる 美しく機能的なタイポグラフィ』を上梓された飯塚修平さんに話を伺いました。

gihyo.jp

OpenAI、GPT‑5をリリース ——これまでで最高の性能で、ハルシネーションの大幅低減も達成、Codex CLIでもGPT-5が利用可能に

OpenAIは2025年8月7日、これまでで最も優れたAIシステムであるGPT‑5を発表した。

gihyo.jp

第874回　Debian 13 "Trixie"登場！ Ubuntuユーザーが押えておくべき新機能と変更点

今回のUbuntu Weekly Recipeでは、来たる2025年8月9日にリリースされる安定版Debian 13 "Trixie"の主な変更点について紹介します。

gihyo.jp

Ubuntu 25.10（questing）の開発; 「錆びさせる」機能の現状とSnapshot 3

questing（Ubuntu 25.10）の開発は順調に進んでおり、Snapshot 3がリリースされました。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 8 / Basics of Style Resolution

何重ものフィルタリングと計算処理を経て、適用されるスタイルが決定するまでの仕組み

gihyo.jp

AIニュースノート：EU AI Act：General-Purpose AIモデル規則の適用開始, Jules⁠：非同期AIコーディングエージェントの正式公開, Crush⁠：ターミナル特化型AIコーディングエージェントなど

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

Gemini CLI GitHub Actionsが登場 ―AIエージェントが開発ワークフローを強力にアシスト

Googleは2025年8月5日、AIが開発ワークフローの自動化をアシストする「Gemini CLI GitHub Actions」をベータ版としてリリースした

gihyo.jp

MCPサーバーとMCPクライアントを作る

AIの活用では、MCPという言葉が注目を浴びています。連載の最後に、JavaでMCPサーバー／クライアントを実装してみて、MCPへの理解を深めます。

gihyo.jp

モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］

今回のテーマは「スクロール」に関するモダンな機能群です。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 7 / The Cascade for Cascading Style Sheets - The Whole Cascade Universe v1

Origin の続きと、Cascade Sorting Order の全体像

gihyo.jp

Android XRとGeminiの組み合わせで起こる化学変化とは

Android XRは、Project Moohanの名前で呼ばれており、Samsungがデバイスを開発中で、2025年内（Q3からQ4）には発売されるとされています。

gihyo.jp

コンテクストから始まるプレイドのAI技術戦略――AIを最大活用するための技術とエンジニアチーム

「データによって人の価値を最大化する」をミッションに掲げるプレイドは、企業への支援を通じて、そこで生成・解析されるデータを生活者一人ひとりの体験価値に還元していくことを目指し、データと技術を最大限活用したプロダクトやソリューションを日々開発している。 同社はAI専任のチームを立ち上げ、AIを活用した単なる業務効率化ではなく、顧客の「コンテクスト」を深く理解し、新たな顧客価値の創造を支援することを目的としている。 今回はプレイドのAI専任チーム「Data Mind（データマインド）」の開発サイドをリードする牧野祐己氏、小林篤史氏、西村優汰氏が「コンテクスト」を中心とした価値創造につなげるAI技術戦略、そして共に未来を創るエンジニア像について語る。

gihyo.jp

OpenAI、o3-miniと同等以上のオープンモデル「gpt-oss」をリリース ——ハーモニーレスポンス形式を扱うトークナイザーやレンダラーもオープンソースで公開

OpenAIは2025年8月5日、2つのオープンモデル「gpt-oss-120b」と「gpt-oss-20b」をリリースした。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 6 / Cascade for Cascading Style Sheets - UA Origin in Cascade

Cascade Sorting Order と UA Origin の解剖

gihyo.jp

Debian、22年越し“因縁の？バグ”修正

Debianプロジェクトはまもなく32回目のアニバーサリーを迎えるが、これほど息の長いオープンソースプロジェクトになると、バグトラッカーの追跡をかいくぐり、10年20年に渡って駆除を免れているバグも存在する。

gihyo.jp

Alibaba、画像生成AIモデル「Qwen-Image」をリリース ―精度の高い画像生成・編集機能と強力なテキストレンダリング機能を両立

Alibabaは2025年8月4日、200億パラメータをもつ新たな画像生成AIモデル「Qwen-Image」を公開した。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 5 / Cascade for Cascading Style Sheets - Behind the Scenes of Importance

Cascade の登場と Importance の裏側

gihyo.jp

第251回 Group Replicationのマルチプライマリモードにおける外部キーの制限

MySQL 8.0のGroup Replicationは、複数ノード間でトランザクションを複製・認証して整合性を保つことにより、MySQLクラスタを構築するプラグインです。

gihyo.jp

オープンソースの2FAアプリ「Proton Authenticator」リリース

スイスProton AG.は2025年7月31日、さまざまなプラットフォームで利用可能なオープンソースの2要素認証（2FA）アプリ「Proton Authenticator」をリリースした。

gihyo.jp

Android Studio Narwhal Feature Dropの安定版が登場 ―Geminiを使ったエージェントモードが利用可能に

Googleは2025年7月31日、Android開発用の公式IDEであるAndroid Studioの最新バージョン「Android Studio Narwhal Feature Drop」を安定版としてリリースしたことを発表した。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 4 / The Initial Cascade

Cascade Layers 以前の Cascade

gihyo.jp

SUSE アジア市場CTO Vishal Ghariwala氏に聞く、日本におけるクラウドネイティブの普及状況とSUSEの戦略

Fastlyの創業者の1人であり、現在はFellowを務めるTyler McMullen氏に、同社の強みやAIへの取り組み、オープンソースコミュニティへの支援活動などについてお話を伺いました。

azukiazusa のテックブログ2

コーディングのための LLM モデル Qwen3-Coder を試してみた

Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 3 / CSS is Optional. Protect the Content!

ヒントとしての CSS、あるいはコンテンツを守るための Web の設計思想

azukiazusa のテックブログ2

コーディングエージェントの能力を拡張する Serena を試してみた

LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 2 / CSS “to save HTML”

CSS 以前のドキュメントスタイル手法の提案 - Prevent the Web from becoming a giant fax machine!!

azukiazusa のテックブログ2

SvelteKit の remote functions でコンポーネント内で非同期にデータを取得する

SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。

gihyo.jp

AGNTCYプロジェクトがLinux Foundationに移行 ―AIエージェントの連携インフラ開発を加速

Linux Foundationは2025年7月29日、AIエージェントの相互連携インフラの構築をめざすAGNTCYプロジェクトが、寄贈によりLinux Foundation傘下に移管されたことを発表した。

gihyo.jp

Google、AIを使って非構造化テキストから構造化データを抽出するオープンソースPythonライブラリ「LangExtract」をリリース

Googleは2025年7月30日、非構造化テキストから構造化データを抽出するオープンソースのPythonライブラリ「LangExtract」をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; linux-modules-extraの廃止と6.17カーネルに向けた更新とTPM/FDE

questing（Ubuntu 25.10）の開発では、6.17カーネルの搭載が予定されています。

gihyo.jp

Function Calling (Tool use)とRAGで外部情報を利用する

前回は、LangChain4jを使ってAIチャットを作りました。今回は、処理を呼び出して動的な情報を取り込む仕組みFunction Callingと外部から取り込んだ情報を元に返答を生成するRAGを実装します。

gihyo.jp

第120回　連載10周年！！MySQL 9.4.0イノベーション・リリース、PostgreSQLバージョン18ベータ2リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 1 / Pre-Styling Era

1989年の WorldWideWeb ブラウザから始まる、CSS 誕生前の Web の歴史の振り返り。スタイルのない時代から IMG タグ、FONT タグの登場。

blog.jxck.io

企業向け Web Bootcamp 2025 開催後記

2025 年 6 月初旬に、副業で Web 技術アドバイザをしている企業の Web チームエンジニア向けに、4 日間の Web Bootcamp を実施した。

gihyo.jp

Gemini CLIでカスタムスラッシュコマンドのサポートを開始

Googleは2025年7月31日、コマンドライン型AIアシスタント「Gemini CLI」で再利用可能なプロンプトを定義できる「カスタムスラッシュコマンド」をサポートしたことを発表した。

gihyo.jp

AIニュースノート：America’s AI Action Plan、ChatGPT学習モード、Qwen3-30B-A3B-Instruct-2507-FP8など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

クラスメソッド、Claude Codeを使った開発を体系化、効率化するフレームワーク「Tsumiki」をオープンソースとして公開

クラスメソッドは2025年7月29日、AnthropicのAIコーディングツールClaude Codeを使った開発を体系化・効率化するフレームワーク「Tsumiki」（積み木）をオープンソースとして公開した。

gihyo.jp

伝説のスマートウォッチ「Pebble」の復活まで秒読み段階

2025年1月、Pebble OSがオープンソースになったのを受けて、Pebble復活のプロジェクトが始動したことを本連載でも取り上げました。その復活が秒読み段階に入ったのでご紹介します。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 0 / Prologue

CSS Advent Calendar Prologue

gihyo.jp

KubeCon + CloudNativeCon Japan 2025 参加レポート

2025年6月16・17日、KubeCon + CloudNativeCon Japan 2025がヒルトン東京お台場にて開催されました。KubeCon + CloudNativeCon（以下、KubeCon）は世界最大のクラウドネイティブ技術の国際カンファレンスであり、この分野の日本国内のエンジニアにとって待望のイベントでした。

gihyo.jp

NotebookLM、Studioパネルを刷新。動画解説の作成も可能に（ただし動画解説は英語のみ）

NotebookLMは2025年7月29日、ノートブック上のStudioパネルをより使いやすくするために刷新したことを発表し、ユーザーに展開し始めた。

gihyo.jp

Linux 6.16リリース ― NVIDIA GPUサポート強化、Intel APXサポート

Linus Torvaldsは7月27日（米国時間）、「Linux 6.16」を公開した。

gihyo.jp

第873回　sosコマンドでUbuntuシステムの情報をあらいざらい収集しよう

今回は「誰かに相談」するときに、過不足なく「こんな環境なんだけど」と伝えるのに役立つ「sosコマンド」を紹介します。

gihyo.jp

Anthropic、Claude ProとMaxで新たな“週次レート制限”の導入を予告

Anthropicは2025年7月29日の𝕏へのポストで、同社のClaude ProおよびClaude Maxプランのユーザーに対して、8月下旬から週ごとの使用レート制限を行うことを予告した。

gihyo.jp

Microsoft Edgeに「Copilot Mode」が登場 ―WebブラウジングをAIがより強力にサポート

Microsoftは2025年7月28日、WebブラウザMicrosoft EdgeにAI搭載のブラウザ機能「Copilot Mode」が実験的に導入されたことを発表した。

gihyo.jp

技術資格に「合格する」ための勉強法 ——IPA&AWS試験で成果を出した“実践ノウハウ”を公開

2025年7月10日に開催された、ハイヤールー社主催の勉強会「Study Hack」では「資格で人生を変える勉強法」というテーマを取り上げました。登壇したのは、IPAとAWS認定資格のすべての区分に合格したENECHANGE社の岩本さんです。試行錯誤を重ねて培った勉強のノウハウをもとに「合格する」ための勉強法のエッセンスが紹介されました。

gihyo.jp

Alibaba、オープンモデルとして最高レベルの推論能力をもつQwen3-235B-A22B-Thinking-2507をリリース

Alibabaは2025年7月23日、同社が開発するLLM「Qwen3」シリーズの最新推論モデルQwen3-235B-A22B-Thinking-2507をオープンソースとしてリリースした。

gihyo.jp

第62回　grubテーマの遊び方（その3）

地区の田植えやそれに伴なう各種作業に手を取られ、前回からちょっと間が空いてしまいましたが、今回はgrubの起動画面の中心を占める「ブートメニュー」を中心に紹介します。

azukiazusa のテックブログ2

Claude Code でカスタムサブエージェントを作成する

Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。

azukiazusa のテックブログ2

Cookie を管理する非同期 API CookieStore

従来の JavaScript では Cookie の管理は `document.cookie` を使用して文字列で行われていました。しかし、文字列での Cookie 管理は面倒で間違いやすいです。また `document.cookie` は同期的に動作するため、Cookie の更新が完了するまでイベントループがブロックされてしまいます。さらに `document` オブジェクトに依存しているため、Web Worker や Service Worker などの非同期環境では使用できません。 このような問題を解決するために、非同期 API `CookieStore` が導入されました。`CookieStore` は非同期的に Cookie の読み書きを行うことができ、さらに Cookie の属性をオブジェクトとして扱うことができます。

gihyo.jp

Claude Codeにカスタムサブエージェント機能が登場 ―複数のサブエージェントによるタスク特化の「エージェントチーム」を作成可能に

Anthropicは2025年7月24日、同社のコーディングAIツールClaude Codeでカスタムサブエージェント（Custom Sub Agents）機能が追加されたことをアナウンスした。

gihyo.jp

Ubuntu 25.10（questing）の開発;Raspberry Piデスクトップイメージの軽量化と壁紙コンテスト、linux-qcomカーネルフレーバー

questingの開発では、Raspberry Piのデスクトップイメージの軽量化のための試みが開始されました。

blog.jxck.io

1Password と遺言保管制度を用いたデジタル終活

筆者のように、インターネット上での生活が長く、かつエンジニアとして生きてきた人間には、一般の人には伝わりにくいデジタルの遺品が多く存在する。仮に自分が死んだ場合に、これらをどのように遺族に処分してもらうかは、なかなか難しい問題だ。筆者はこの「デジタル終活」をどうするかを、長いこと模索してきた。今回は、「1Password」と法務局が行う「自筆証書遺言保管制度」を用いた方法を思いついたため、検証を試みる。

gihyo.jp

数理モデルの力を引き出す書籍ガイド

データサイエンスを用いてビジネスで価値を創出したい、と考えたとき、多くの人が「どうやって分析するか」「どの機械学習モデルを使うか」といった「解き方」に注目しがちです。しかし、ビジネスの現場で本当に重要なのは、目の前にある曖昧な「課題」を、どのようにしてデータサイエンスで扱える具体的な「問題」に落とし込むか、というプロセスです。

gihyo.jp

9/10～12開催「DroidKaigi 2025」チケット販売中

Android開発者コミュニティによる年次カンファレンス「DroidKaigi 2025」が、2025年9月10日（水）～12日（金）の3日間、東京・ベルサール渋谷ガーデンで開催される。

gihyo.jp

Wayback 0.1リリース ―“X on Wayland”めざすプロジェクトが始動1ヵ月で最初のプレビュー版

Wayland上でのX11互換レイヤ構築をめざすオープンソースプロジェクト「Wayback」は7月23日、最初のプレビューリリースとなる「Wayback 0.1」を公開した。

gihyo.jp

Google Analytics MCPサーバー、オープンソースとしてリリース

Googleは2025年7月23日、Google AnalyticsのAPIと連携するローカルMCP（Model Context Protocol）サーバーの実験版を、Apache 2.0ライセンスに基づくオープンソースソフトとして公開した。

gihyo.jp

GitHub Spark、Copilot Pro+ユーザー向けパブリックプレビューとして提供開始

GitHubは2025年7月23日、自然言語でアプリを開発できるツール「GitHub Spark」をCopilot Pro+ユーザー向けにパブリックプレビュー版として提供したことを発表した。

blog.jxck.io

親にエンディングノートを書いてもらう

親の年齢に限らず、生きているうちにやってもらった方がいい、たった 1 つのこととして、エンディングノートの作成がある。終活は、それをどのくらい準備しておくかで、本人以上に遺族の負担が格段に減るからだ。

gihyo.jp

Chrome OSとAndroidの統合、Made by Googleイベントなど

今週は、小ネタながらAndroid関連の話題がいくつかあったので、気になるものをピックアップしていきます。

gihyo.jp

LangChain4jを使ってみよう

今回は、LLMへの接続に必要な処理を共通化する定番ライブラリであるLangChain4jを使ってチャットアプリを作っていきます。

gihyo.jp

Alibaba、エージェントを活用するコーディングのためのオープンモデル「Qwen3-Coder」を発表 ——高性能なオープンモデル「Qwen3-235B-A22B-Instruct-2507」も公開

Alibabaは2025年7月22日、エージェントを活用したコーディングのためのオープンモデル「Qwen3-Coder」を新たに発表した。

gihyo.jp

「中高生Rubyプログラミングコンテスト2025」開催決定、作品募集開始～2025年9月30日まで

2025年7月16日、「中高生Rubyプログラミングコンテスト2025」第15回大会の開催が発表されました。15回目となる今回も、昨年に続き会場（三鷹産業プラザ）での対面開催が予定されています。

gihyo.jp

第872回　百度（Baidu）の新しいMoEモデルを、安価なGPUで動作させる

今回は百度（Baidu）が6月30日にリリースした新しいMoEモデル、ERNIE 4.5を使用するために、llama.cppをビルドします。そしてあまり高性能ではないGPUで動作させます。

blog.jxck.io

Passkey への道 #10: 1Password 導入セミナー

先日、Passkey 啓蒙の一環で、まだパスワードマネージャを導入してない人に対する「1Password 導入セミナー」を実施した。その内容を再収録したものを公開する。ざっくりと、前半が一般ユーザ、後半が開発者向けの内容となっている。動画及び資料は、啓蒙目的であれば自由に使ってもらって構わない。なお、筆者は 1Password との利害関係は一切無い。

gihyo.jp

“すべての良いことには終わりがある” ―Intel、Clear Linux OSの終了を発表

Intelは7月18日、同社が独自に開発/保守を行ってきたローリングリリース型のLinuxディストリビューション「Clear Linux OS」の提供を終了することを発表した。

gihyo.jp

Docker MCP ToolkitでLM Studioが利用可能に

Dockerは2025年7月21日、Docker MCP Toolkitが、MCPクライアントとしてLM Studioをネイティブにサポートすることを発表した。

gihyo.jp

第250回　MySQLの統計情報更新

MySQLでクエリを実行する場合、クエリオプティマイザがテーブルやインデックスの統計情報を使用して、最適な実行計画を選択します。

gihyo.jp

AIツール「Claude」を使ってBlender上でモデリングしてみよう～準備編～

第57回目は、AIツールを使って指示を出し、Blender上でモデリングを行うための準備をしていきます。

azukiazusa のテックブログ2

私のキャリアに影響を与えたコンピューター・IT の定番書籍

現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。この記事では私のキャリアにおいて影響を与えたであろうコンピューター・IT の定番書籍を紹介します。

gihyo.jp

GitHub、機能プレビューとして提供していた「コマンドパレット」を8月に廃止予定と告知 ［記事更新：廃止はいったん取りやめに］

GitHubは2025年7月16日、機能プレビューとして提供していた「コマンドパレット」を8月6日をもって廃止予定することを発表した。

gihyo.jp

JetBrains、Eclipse、XcodeでGitHub Copilotエージェントモードの一般提供開始

GitHubは2025年7月16日、JetBrains、Eclipse、Xcode向けのGitHub Copilotエージェントモードの一般提供を開始した。

gihyo.jp

OpenAI、ChatGPTエージェントを発表 ―ブラウザ、ターミナル、APIからアクセス可能な自律型AIエージェント

OpenAIは2025年7月17日、AIエージェントがさまざまな作業を自律的に行う「ChatGPTエージェント」を発表した。

gihyo.jp

Web APIのテストデータを自動生成してくれるツール「Schemathesis」の紹介

今月の「Python Monthly Topics」は、Web APIのテストデータを自動生成してくれるツール「Schemathesis（スキーマセシス）」を紹介します。

gihyo.jp

Ubuntu 25.10（questing）の開発; ドキュメントの充実, ESWIN EBC77 SBCの登場

questingの開発は夏休みシーズンに突入し、少しだけペースが落ちた気配があります。大きな変化は限定的なものの、SRUポリシーの明確化のためのドキュメントが準備されています。

gihyo.jp

手首にAIで久々の革命か？ GeminiがWear OS搭載をサポート

7月9日、GoogleはWear OS搭載のスマートウォッチでGeminiが利用できるようになったと発表しました。

gihyo.jp

JavaでLLMにアクセスしてみよう

この連載では数回にわたってJavaでAIエージェントを作る基本になるLLM操作のプログラムを作っていきます。今回は導入しやすいLM Studioを使ってLLMにアクセスしてみましょう。

gihyo.jp

GitHub、Googleアカウントでログイン可能に

GitHubは2025年7月15日、Googleソーシャル認証情報を使ってGitHubアカウントにサインアップ、ログイン可能となったことを発表した。

blog.jxck.io

Passkey への道 #9: ユーザに求められる令和のアカウントリテラシ

サービスは、ユーザを守るために Passkey をサポートし、ユーザの移行を促す努力をする必要があった。このプロセスに対して、ユーザはまったくの受動的態度でいることはできない。では、ユーザはいったい何をリテラシとして身につけ、どう自分の身を守っていくべきなのだろうか?

gihyo.jp

第871回　Ubuntu 25.04リリース記念オフラインミーティング開催レポート

2025年の7月12日、グリー株式会社主催のもと、六本木にて「Ubuntu 25.04リリース記念オフラインミーティング」が開催されました。今回はいつもと趣向を変えて、このイベントの様子をレポートします。

azukiazusa のテックブログ2

AWS の エージェント IDE Kiro を使ってみた

Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。

gihyo.jp

Anthropic、ワンクリックでClaudeに接続できるツールディレクトリを公開

Anthropicは2025年7月15日、Claudeに接続するツールの新しいディレクトリを公開した。

gihyo.jp

NotebookLM、共有機能を活用した公式厳選の「おすすめのノートブック」を提供開始

Googleは2025年7月14日、調査アシスタントサービス「NotebookLM」において、公式が厳選した「おすすめのノートブック」の提供をおこなうことを発表した。

gihyo.jp

Red Hat、ビジネス開発者向けのRHEL無償プログラム「RHEL for Business Developers」の一般提供を開始 ―最大25インスタンスをセルフサービスで利用可能

Red Hatは7月9日、同社が開発者向けに提供する無償プログラム「Red Hat Enterprise Linux（RHEL） for Developers」の新しいサブスクリプションメニューとして「RHEL for Business Developers」を提供開始した。

gihyo.jp

Threads、メッセージ（DM）機能を日本でも展開 ——興味深いトピックを目立たせる「ハイライター」機能も導入

Metaは2025年7月15日、同社の提供するソーシャルサービスThreadsにおけるメッセージ（DM）機能を日本でも展開をはじめた。

gihyo.jp

AWS、AIエージェント型IDE「Kiro」をリリース ―プロトタイプ作成から本番環境までAIがサポートする“スペック駆動開発”が可能に

AWSは2025年7月14日、新しいAIエージェント機能を備えたIDE、「Kiro」をプレビューリリースした。

blog.jxck.io

Passkey への道 #8: サービスにとって「移行」のゴールは何か?

パスワード + TOTP は限界を迎え、Passkey へ移行しなければ、サービスがユーザを守りきれなくなった。逆を言えば、サービスがユーザを守りたいと思うのであれば、Passkey を提供しないわけにはいかない時代に突入している。では、令和のこの状況において、サービスはどう対応していくべきだろうか?

gihyo.jp

Moonshot AI、1兆パラメータのオープンソースLLM「Kimi K2」をリリース ―商用モデルに匹敵する性能

中国Moonshot AI（月之暗面）は2025年7月11日、同社が開発するオープンソースLLMの新バージョンKimi K2をリリースした。

blog.jxck.io

Passkey への道 #7: そして Username-Less へ

Apple が突如発表した Passkey。実態は「WebAuthn の秘密鍵を iCloud で共有」するサービスだった。そして、業界は本格的な Password-Less に向けて進んでいく。

azukiazusa のテックブログ2

サンドボックス環境を MCP サーバーで提供する Container Use

AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。

blog.jxck.io

Passkey への道 #6: タブーを破った Apple

TOTP/WebAuthn は、バックアップコードの適切な保管方法が示されないまま、移行だけが推し進められた。YubiKey などの物理 Authenticator の扱いとして、「二本登録して、片方は普段使い、もう片方は貸金庫へ」などと、かなり無理のあるベストプラクティスが啓蒙されたりもしていた。それらをスマホに移行して、登録は便利だが壊したら詰むでは、ユーザは安心して使えない。いや、正確には「よくわからないまま使って、詰んでから Apple のサポートに連絡する」という状態だったのだろう。ここに解決策が提示されたのが、WWDC 2021 だった。

azukiazusa のテックブログ2

v0 の SDK を試してみる

v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK を使用して、v0 のプラットフォーム API を試してみます。

blog.jxck.io

Passkey への道 #5: 2FA/WebAuthn

Infostealer は、ユーザの権限でインストールされ、ユーザがアクセスできるあらゆる情報を盗んで去っていく。そこから、どんなに暗号化して保存しても、使用時には平文にしないといけない「パスワード」という文字列を守り抜くのは非常に難しい。であれば、最初から文字列に頼らなければ良い。それが WebAuthn と FIDO だった。

azukiazusa のテックブログ2

Claude Code で前回の会話の続きを開始する

Claude Code でうっかりセッションを閉じてしまった経験が一度はあるのではないでしょうか？一度セッションを終了すると会話のコンテキストが失われてしまいますが、Claude Code では前回の会話の続きを開始する方法があります。

gihyo.jp

Visual Studio Code、Copilot Chatのターミナルコマンドの自動承認機能を実験的に追加 ——MCPサーバーの管理はmcp.jsonとして設定へ

Visual Studio Codeは2025年7月10日に、バージョン1.102（June 2025）の一般提供を開始した。多数の新機能と改善を含んでおり、特にターミナルコマンドの自動承認機能が実験的に追加されている。

gihyo.jp

Ubuntu 25.10（questing）の開発; Raspberry Piのブートシステムの変更

例年の開発パターンに比べて「かなり前のめり」な傾向のあるquesting（Ubuntu 25.10）の開発においては、さまざまなものに新しいアプローチが導入されています。今週新しく登場したものは、Raspberry Piの新しいブート方式でした。

gihyo.jp

DTPあるあるのCSS組版的解決法

株式会社ディジタルグロースアカデミア リブロワークス部デザイン室の峠坂あかりと松澤維恋です。今回の記事では、入門書から少しステップアップした、これまでの制作経験から得られたノウハウをご紹介します。

blog.jxck.io

Passkey への道 #4: 文字列の限界

パスワードと TOTP の問題は、「人間が入力する必要がある」ことだった。対策は Autofill であり、そのためにもパスワードマネージャ相当が必要になる。では、パスワードマネージャを使っていれば、パスワードと TOTP で十分なのだろうか?

gihyo.jp

アジャイルプランニング本来の価値を、AI搭載のDevSecOpsプラットフォームで取り戻す

アジャイルプランニングが登場してから25年、アジャイルの概念を体現する次世代のツールを見出すことが重要です。

gihyo.jp

openSUSEプロジェクト、8/9の20周年祝賀企画に向け準備中

20周年という記念すべきアニバーサリーまで1ヵ月を切ったことから、openSUSEプロジェクトはコミュニティメンバーに写真やマイルストーンの共有を呼びかけている。

gihyo.jp

xAI、Grok 4を発表 ―主要なベンチマークで競合AIベンダのフラッグシップモデルを凌駕する性能

xAIは2025年7月10日、同社が提供するライブストリー上でAIモデルの最新バージョンGrok 4を発表した。

gihyo.jp

Google、Gemmaの新たなオープンモデルをリリース ―エンコーダ・デコーダモデルT5Gemmaと医療分野特化のマルチモーダルモデルMedGemma＋MedSigLip

Googleは2025年7月9日、軽量言語モデルGemmaファミリーの新しいモデル2種を発表した。

gihyo.jp

Hugging Face、AI実験ができるオープンソースロボット「Reachy Mini」プレオーダー開始

Hugging Faceは2025年7月9日、Pollen Roboticsとともに開発した、オープンソース小型ロボット「Reachy Mini」の先行予約販売（プレオーダー）を開始した

gihyo.jp

ソラコム、MCPサーバーを提供開始へ ―IoTプラットフォームとAIの融合を目指すサービスも発表

ソラコムは2025年7月9日、翌週に行われる同社の年次カンファレンス「SORACOM Discovery 2025」に先立ちメディア向けの説明会を開催、同社のIoTプラットフォームと生成AIを組み合わせた新たなサービス、戦略を発表した。

blog.jxck.io

Passkey への道 #3: 手入力の限界

パスワードだけでの認証に限界が訪れ、TOTP を用いた 2FA が普及した。しかし、これでもまだ、全くもって不完全であることが、フィッシング詐欺の増加によって証明された。

gihyo.jp

はじめの一歩。SwiftがAndroidを公式にサポートへ

Appleのソフトウェア エンジニアリング マネージャーで、主にSwiftの開発に関わるMishal Shah氏が、Swift.orgのフォーラムにてAndroidを公式にサポートすることを目的とした「Android Workgroup」の発足を発表しました。

gihyo.jp

ローカルLLM実行環境LM Studio、企業・組織での商用利用を無料に

Element Labsは2025年7月8日、同社が提供しているローカルLLM実行環境「LM Studio」を企業利用においても無料で使えるように方針を変更したことを発表した。

gihyo.jp

第870回　Microsoft Editをデフォルトのエディターにする

今回は、MicrosoftがリリースしているEditを、Ubuntuのデフォルトエディターにする方法を紹介します。

blog.jxck.io

Passkey への道 #2: 2FA/TOTP

「パスワード」が認証の最重要要素で、いかにそれを死守するかを「サービス側」「ユーザ側」双方で考え続けてきたのが、平成の認証だった。ところが、それは早々に破綻し、「パスワードだけでの認証」に限界が来た。そこで、導入されたのが二要素認証(2FA: 2-Factor Auth)だ。

gihyo.jp

Fastly、TollBitと提携しAIボットのアクセスを収益化するサービスを提供へ

Fastlyは2025年7月1日、TollBitと提携し、同社のユーザーコンテンツに対するAIボットアクセスを収益化するサービスの提供を発表した。

blog.jxck.io

Passkey への道 #1: 平成の Password 感

まず、今使われているパスワード認証について、これがなぜ問題で、なぜ Password-Less が求められているのかを振り返っていこう。

gihyo.jp

モダンなフロントエンドにおけるテストについて ［Modern Featured Test］

Webフロントエンドを対象にしたテストのツールや手法も増えてきました。今回は、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します。

gihyo.jp

第249回 MySQLに格納した複雑なJSONから値を検索する

MySQLのJSON型は、柔軟なデータ構造をそのまま格納できる点で非常に便利です。ただし、複雑なJSONデータをそのまま詰め込んだ場合には注意が必要です。

gihyo.jp

レガシーXをWayland上で再構築 ―Alpine Linux開発者が軽量“X on Wayland”コンポジタ「Wayback」をローンチ

現在、メジャーなLinuxディストリビューションのほとんどがディスプレイソフトウェアのデフォルト実装をX.OrgからWaylandへとシフトしている。

gihyo.jp

Blenderの機能の一つであるUV展開を行ってテクスチャを描こう

第56回目は、Blenderで用意されている機能であるUV展開を行う方法を見ていきます。

blog.jxck.io

Passkey への道 #0: Intro

フィッシング詐欺や Infostealer を用いた金融サイトの乗っ取り詐欺などは、その被害総額が 5000 億円 を突破してもなお拡大し続けている。米国で発生した 2024 年のオンライン詐欺被害は 166 億ドル に達した。証券や銀行サービスからは「FIDO 認証登録のお願い」のようなメールが絶えず届き、最近では Gmail のような 20 億以上のユーザがいる大手サービス や、警視庁サイバー犯罪対策課まで「Passkey を利用しましょう」と移行を促すアナウンスをするところまできている。まだ、多くの人が "Passkey" という名前すら知らないか、聞いたことはあるがきちんと移行まではしていないという状況だろう。新しい技術とはいえ、Passkey の普及があと 1 年早かっただけで、防げた被害は計り知れないだろうと痛感する。一方、Passkey を知っていながら、誤解のある人も少なくないようだ。複雑なパスワードを登録しているから移行する必要はない2FA を設定しているから必要ない登録したいサービスに、指紋を渡すのは嫌だGoogle や Apple に認証までロックインされたくない変なことしてログインできなくなるのが怖いetc etcまた、移行する必要性を認識しながら、パスワードマネージャ等保存先が十分に浸透していなかったり、サービス側の Passkey 対応が普及途上な側面もある。

azukiazusa のテックブログ2

値の補間計算を簡潔に記述できる CSS の `progress` 関数

CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。

@sakupi01.com blog

From 7 Hours Behind

DISCLAIMER: Non-Tech. Pure life stuff here. Don't read if you expect tech.

gihyo.jp

Google、年齢認証を支援するゼロ知識証明（ZKP）技術をオープンソースとして公開

Googleは2025年7月3日、年齢認証などに利用するためのZKP（Zero-Knowledge Proof：ゼロ知識証明）ライブラリをApache 2.0ライセンスの元、オープンソースとして公開した。

gihyo.jp

GitHub Copilotの便利なカスタマイズリソースをまとめたAwesome GitHub Copilot Customizationsリポジトリ公開

Microsoft/GitHubは2025年7月2日、GitHub Copilotをカスタマイズして最大限に活用できるためのコンテンツ／リソースをまとめた「Awesome GitHub Copilot Customizations」リポジトリをリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; Questing Snapshot 2のリリース、Canonical builds of OpenJDK

questing（Ubuntu 25.10）の開発は、節目となるSnapshot 2がリリースされました。また、OpenJDKのサポートビジネスに、Canonicalもチャレンジすることが発表されています。

gihyo.jp

レベルアップ！つよつよエンジニアを目指すには？

この連載では、それぞれのレベル別にAWSの学び方を紹介します。第3回は、「既にAWSを知っている人が、エンジニアとしてのレベルアップを目指すにはどうすべきか」についていくつかの方策を提案します。

gihyo.jp

Cloudflare、AIクローラー制御の新方針を掲げる「Content Independence Day」を発表 ——報酬のないAIクロールのブロック制御機能をすべてのユーザーに提供

Cloudflareは2025年7月1日、同社が運用するCDNサービスにおけるAIクローラーによるウェブコンテンツの利用について、「コンテンツ作成者に報酬を支払わない限り、AIアクセスをブロックできる方針」へと大きく舵を切り、その制御機能をすべてのユーザーに導入することを発表した。

gihyo.jp

データベーススペシャリストへの道 〜試験勉強は実務に役立つ！

都内のとあるIT会社、時計の針は午後9時。オフィスにはまだ何人かが残り、それぞれの席で仕事を続けている。その一人であるA は、自分のディスプレイを見つめながらつぶやいた。AいつになったらB先輩 のようなデータベースエンジニアになれるのかな……。

gihyo.jp

『［作って学ぶ］ブラウザのしくみ』『［作って学ぶ］OSのしくみⅠ』発売記念イベントレポート

書籍発売記念イベントである「［作って学ぶ］OSとブラウザ～IT基礎技術を手を動かしながら学ぼう！」が、2025年6月6日に書泉ブックタワーで開催されました。イベントでは、著者の土井麻未さんとhikaliumさんの2人による、本書の読み方やこれら基礎技術への取り組みが語られました。本稿ではその模様をレポートします。

gihyo.jp

Google Chromeにまつわるアレコレ

今回は、Google Chromeに関する動きがいくつかあったので、まとめておきます。

gihyo.jp

第27回 これからの大学入試とプログラミングの必要性

「スクラッチでプログラミングをはじめよう」第27回です。

gihyo.jp

Docker MCP Catalog、機能強化とオープンな登録受付を発表

Docker社は2025年7月1日、MCPサーバーのDockerイメージを一元的に発見・取得できるカタログ「Docker MCP Catalog」の機能強化と、一般ユーザーによるサーバー登録申請の受付開始を発表した。

gihyo.jp

Sakana AI、フロンティアモデルの「集合知」と「試行錯誤」で難問解決力・推論精度の向上を発表

Sakana AIは2025年7月1日、既存のフロンティアモデルを利用して「集合知」と「試行錯誤」を組み合わせ、難問に対する推論精度を高める新手法AB-MCTSおよび、複数のモデルを動的に使い分ける拡張版であるMulti-LLM AB-MCTSを発表した。

gihyo.jp

第869回　WSLでもcloud-initを活用する

今回は、WSL上のUbuntuの環境構築をcloud-initに任せて、Ubuntu環境を手軽に構築する方法を解説します。

gihyo.jp

U-22 プログラミング・コンテスト2025応募受付開始 ―コード生成AIを使った作品も応募可に

U-22 プログラミング・コンテスト2025の応募受付が2025年7月1日に開始された。締切は8月29日。

azukiazusa のテックブログ2

Claude Code の Hooks で作業が終わった後にフォーマッターを実行する

Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。

gihyo.jp

AIコードエディタCursorのエージェント機能がモバイルでも利用可能に

Anysphereは2025年6月30日、同社が開発するAIコードエディタCursorのエージェント機能ががモバイル環境で利用できるようになったことを発表した。

gihyo.jp

第119回　MySQLでの非同期タスクのサポート、PostgreSQLエンタープライズ⁠⁠・コンソーシアムの成果報告、そして次回は10周年！

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

#03 Python Steering Councilの活動の今 ―PyCon USカンファレンス3日目/スプリントレポート

第3回は、カンファレンス3日目とカンファレンス後のスプリントの話題をレポートします。

gihyo.jp

Microsoft、Windowsメモ帳アプリでMarkdown形式の書式機能を一般提供へ

MicrosoftはWindows 11の最新アップデートで「メモ帳」アプリに軽量な書式設定機能を導入、GUIで書式を指定できるほか、Markdown形式で書式を設定できるようになった。

gihyo.jp

プライベートクラウドFlavaや開発フレームワークArk Developerなどを公開――LINEヤフー初となる対外テックカンファレンス「Tech-Verse 2025」初日基調講演速報レポート

2025年6月30日、7月1日の2日間、LINEヤフーとして合併してから初となる、対外向けのテックカンファレンス「Tech-Verse 2025」が開催されている。

azukiazusa のテックブログ2

ワンクリックで MCP サーバーをインストールする .dxt ファイル

Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。

azukiazusa のテックブログ2

MCP の Structured tool output を試してみる

MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。

gihyo.jp

Anthropic、ワンクリックでローカルMCPサーバーをインストールできる「Desktop Extensions」をリリース

Anthropicは2025年6月25日、Claude Desktop上でボタンをクリックするだけでローカルMCP（Model Context Protocol）サーバーをインストールできるパッケージツール「Desktop Extensions」をリリースした。

gihyo.jp

GMOペパボ、ECサイト運営者を対象にした参加費無料のオンライントークイベント「COLOR ME SHOP DAY 2025」を7月24日に開催

GMOペパボ株式会社が運営するネットショップ作成サービス「カラーミーショップ byGMOペパボ」は、ECサイト運営者を対象にした参加費無料のオンライントークイベント「COLOR ME SHOP DAY 2025」を、2025年7月24日（木）に開催する。

gihyo.jp

Google、Gemma 3nをリリース ―エッジデバイスでの動作効率が大幅アップ、フレキシブルなマルチモーダルモデル

Googleは2025年6月26日、軽量AIモデル「Gemma」の新バージョンGemma 3nを正式リリースした。

gihyo.jp

MediaTek Genio向けのUbuntu Core、Ubuntu 25.10（questing）の開発; 新しいゴミ箱アイコンとServer Seedの見直し

UbuntuのIoT向けの展開がさらに広がります。MediaTekとCanonicalから、MediaTek Genio IoTシリーズ向けのUbuntu Coreイメージの提供開始がアナウンスされています。

gihyo.jp

最大の差別化要因はWebAssemblyの採用 ―― Fastly共同創業者Tyler McMullen氏に聞く次世代CDNの最前線

Fastlyの創業者の1人であり、現在はFellowを務めるTyler McMullen氏に、同社の強みやAIへの取り組み、オープンソースコミュニティへの支援活動などについてお話を伺いました。

gihyo.jp

Anthropic、「アーティファクト」に作成アプリへのAI搭載機能と成果物共有のための専用スペースを追加

Anthropicは2025年6月25日、Claudeのコンテンツ作成機能であるアーティファクト（Artifacts）に、成果物の作成、ホスティング、共有のための専用スペースと、作品自体にAIを搭載させる機能を追加したことを発表した。

gihyo.jp

Google、Geminiをコマンドラインから利用できるGemini CLIをオープンソースとして公開

Googleは2025年6月25日、AIアシスタントGeminiをコマンドラインから操作できる「Gemini CLI」をオープンソースとして公開した。

gihyo.jp

Pythonで理解するMCP（Model Context Protocol）

2025年6月の「Python Monthly Topics」では、LLMと外部ツールやデータソースを簡単に接続するためのプロトコル「MCP（Model Context Protocol）」を取り上げます。

gihyo.jp

オーバープロビジョニングと制約の欠如 ——セキュリティチームが自律型AIの混乱を最小限に抑える3つの方法

AIエージェントの出現は、現在のSaaSプラットフォームにおける認可システムにとって大きなリスクとなる可能性があります。しかし、セキュリティチームとITチームが適切な視点で積極的に対応すれば、そのリスクを防げます。

gihyo.jp

Google Tensor G5に関わるアレコレのまとめ

Google Pixel 6シリーズ以降は、独自SoC「Google Tensor」が搭載されているのはご存知のとおりです。夏ごろ発売のPixel 10シリーズには、Tensor G5が搭載されると予想されています。今回は、これに関わる話題をいくつかピックアップしてみました。

gihyo.jp

Cloudflare、エッジで動作するコンテナ基盤「Cloudflare Containers」をパブリックベータで提供開始

Cloudflareは2025年6月24日、同社のエッジネットワーク上でコンテナを動かすための「Cloudflare Containers」機能をパブリックベータで提供開始した。

gihyo.jp

Google Colab、AIファーストとなった新バージョンをすべてのユーザーに提供開始 ——ターミナル機能も開放

Googleは2025年6月24日、AIファーストに再設計したGoogle Colabをすべてのユーザーに提供開始したことを発表した。

gihyo.jp

#02 今だから聞きたい「ダイバーシティ＆インクルージョン」パネル、「遊び」の大切さを説くキーノート ーPyCon USカンファレンス2日目レポート

PyCon US 2025カンファレンス2日目のレポートです。

gihyo.jp

第868回　UbuntuでAMD Radeon RX 9060 XTを使用する

今回はASRock DeskMeet X300にRD-RX9060XT-E16GB/DFを取り付け、Ubuntu 24.04 LTSを使用する方法を紹介します。

gihyo.jp

3DPでキューブパズルを自作してみる(1) ～構造の理解～

今回から数回にわたり、私がルービックキューブを模したおもちゃを3DPで自作した際の工程を紹介します。

gihyo.jp

Linux Foundation、Agent2Agentプロジェクトを始動 ——GoogleがA2Aプロトコルを寄贈

Linux Foundationは2025年6月23日、Googleが4月に公開したAgent2Agent（A2A）の寄贈を受けたこと、そしてこのA2Aプロトコルを基盤とした新しい「Agent2Agentプロジェクト」を立ち上げたことを発表した。

gihyo.jp

9/19～21開催「iOSDC Japan 2025」チケット販売開始

2025年9月19日（金）～21日（日）にハイブリッド形式で開催されるiOS関連技術をテーマとした技術カンファレンス「iOSDC Japan 2025」のチケット販売が開始された。

gihyo.jp

「描き続けること」の小さな闘い ——『それっぽく描くコツ』誕生前史 著者96こげさんに聞く

『イラストをそれっぽく描くコツ』の著者、96こげさんのイラスト人生を振り返りながら、本書に込めた思いを赤裸々に語っていただきました。

gihyo.jp

参加総数2500名超え！ 世界一のTypeScriptカンファレンス「TSKaigi 2025」レポート

2025年5月28日、29日の2日間にかけてベルサール神田で世界最大級のTypeScriptをテーマとした技術カンファレンスTSKaigi 2025が開催されました。

gihyo.jp

Java on Azure Day 2025 基調講演レポート――Oracleとの戦略的協業、AI時代のJava開発生産性向上・レガシーモダナイズ・AIアプリ基盤の最新動向

2025年6月17日、日本マイクロソフトは、毎年恒例となった「Java on Azure Day 2025」を開催しました。

gihyo.jp

第248回 知っておくと得するかもしれないMySQLの組み込み関数

MySQLでは標準でさまざまな組み込み関数を用意しています。今回は、その中でも「知っておくと得する」可能性のある関数をいくつかピックアップしてご紹介します。

gihyo.jp

“次のディナーもあるかもね” - Linus、Bill Gatesと「歴史的」初顔合わせ

6月20日、Microsoft AzureのCTOを務めるMark RussinovichはLinus Torvalds、Bill Gates、Dave Cutler、そしてRussinovich本人が写っているスリリングな写真を投稿した。

gihyo.jp

オープンソースのEメールマーケティングプラットフォームBillionMaill V3.0がリリース ―“スパム判定を避ける機能”をベータ版実装

香港aaPanel Ltd.は2025年6月19日、同社が開発するオープンソースのメールサーバー兼EメールマーケティングプラットフォームBillionMailの新バージョンBillionMail V3.0をリリースした

azukiazusa のテックブログ2

Claude Code でカスタムスラッシュコマンドを作成する

Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。

azukiazusa のテックブログ2

ブラウザから MCP サーバーに接続する use-mcp React フック

use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。

gihyo.jp

Visual Studio Code、厳選したMCPサーバーの一覧ページを公開 ——一覧ページ上からのワンクリックインストールにも対応

Visual studio Codeは6月19日、MCPサーバーをVS Codeにワンクリックでインストールできる、厳選したMCPサーバーの一覧ページを公開した。

gihyo.jp

オープンソースのAIコーディングエージェントopencodeが一般利用可能に

ターミナル上で動作するオープンソースのAIコーディングエージェント「opencode」は2025年6月20日、Claude Pro/Maxへの対応や、75以上のLLMプロバイダに対応して一般利用できるようになったことをアナウンスした。

gihyo.jp

Ubuntu 25.10（questing）の開発; RISC-VのRVA23への切り替え・OpenSSL 3.5.0の導入

questing（Ubuntu 25.10）の開発では、Rivosのパートナーシップのもと、RISC-VアーキテクチャにおいてRVA23プロファイルへの対応が進められる予定です。

gihyo.jp

OpenAI、Agents SDKを利用したカスタマーサービスとアプリケーションテスト向けのAIエージェントのデモを公開

OpenAIは2025年6月、Agents SDKを活用したカスタマーサービスおよびアプリケーションテスト向けのAIエージェントのデモアプリをGitHubで公開した。

gihyo.jp

Claude Code、リモートMCPサーバーをサポート

2025年6月19日、Anthropicは同社のAIコーディングエージェントClaude CodeがリモートMCPサーバーをサポートしたことを発表した。

gihyo.jp

オープンソースのAI開発エージェント基盤にコマンドライン版「OpenHands CLI」が登場

2025年6月17日、オープンソースのAIソフトウェア開発エージェントプラットフォームOpenHandsをターミナルからコマンドラインで操作できる「OpenHands CLI」が公開された。

gihyo.jp

9/26、27開催「PyCon JP 2025」キーノートスピーカー発表

2025年9月26日（金） 、27日（土）に広島国際会議場で開催されるPyCon JP 2025のキーノートスピーカーが発表された。

gihyo.jp

KDE Plasma 6.4リリース、Waylandサポート強化が進む

KDEプロジェクトは6月17日、「KDE Plasma 6.4」のリリースを発表した。

gihyo.jp

デザイン・通知・健康が新しいAndroid 16がリリースされました

6月10日に、Android 16（コードネーム Baklava）の正式版がリリースされ、Google Pixelシリーズから順次OTAでの配信が開始されました。年内には、さらに多くのスマートフォンへ展開される予定です。

gihyo.jp

Threads、「フェディバース」フィードとフェディバースアカウントの検索機能を追加 ——別途、ネタバレ注意機能やDM機能も一部アカウントでテスト中

Threadsは6月17日、「フェディバース」フィードと、Fediverseアカウントの検索機能を追加したことを発表した。

gihyo.jp

＃01 PyCon US 2025カンファレンス開幕まで/1日目レポート ―初めてのトーク登壇へ

2025年5月14日～22日にアメリカのピッツバーグで開催された、プログラミング言語Pythonの国際カンファレンス「PyCon US 2025」に参加してきたので、その様子をレポートします。

gihyo.jp

日本企業のオープンソース／クラウドネイティブへの関心の高まりと、CNCFのこれまでと現在 ——KubeCon + CloudNativeCon Japan 2025 記者発表会より

6月16日、17日に東京で開催された「KubeCon + CloudNativeCon Japan 2025」。16日に、Linux Foundationの日本担当VPである福安徳晃氏と、Cloud Native Computing Foundation (CNCF) のCTOであるChris Aniszczyk氏による記者発表会が行われました。本稿ではこの模様をレポートします。

gihyo.jp

第867回　「後で読む」サービスのWallabagをUbuntuでセルフホストする

今回はUbuntu 24.04 LTSのサーバー版の上に、オープンソースの「後で読む」サービスであるWallabagを構築する方法を紹介します。

gihyo.jp

Blenderの機能の一つであるUV展開について知ろう

第55回目は、Blenderで用意されている機能であるUV展開の概要について見ていきます。

azukiazusa のテックブログ2

A2A プロトコルの JavaScript SDK を試してみる

A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。

blog.jxck.io

CSS の ident() による動的な custom-ident の生成

CSS で Custom Ident 値を動的に生成する ident() が提案されている。策定中の仕様をベースに解説する。

gihyo.jp

GitHub、リモートGitHub MCPサーバーをパブリックプレビューで提供開始

GitHubは6月12日、リモートGitHub MCP Serverをパブリックプレビューとして提供を開始した。

gihyo.jp

Ubuntu 25.10（questing）の開発 ; BazaarとXorgにさよならを

Ubuntuの開発では、Launchpadにコードホスティングやバグトラッキング、翻訳などを依存する形で生態系が構築されています。

gihyo.jp

ObsidianとAIを組み合わせて図表を手軽に作成する

今回はObsidianのノート内に図表を入れるときに、AIと連携して作成するための具体的なプロンプト例を紹介します。

azukiazusa のテックブログ2

バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう

バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。

gihyo.jp

GNOMEプロジェクト、インフラ全体をAWSクラウドに移行

GNOME Foundationは6月10日、これまでオンプレミス（OpenShift）で運用してきたWebインフラストクラクチャをAWSクラウドに移行したことを発表した。

gihyo.jp

「CMSが集まる場所」――MTDDC Meetup TOHOKU 2025、7月26日宮城県・仙台市で開催

2025年7月26日、Movable Typeを中心としたWebカンファレンス「MTDDC Meetup TOHOKU 2025」がTKPガーデンシティ仙台（宮城県・仙台市）にてオフラインで開催されます。

gihyo.jp

第866回　IPEX-LLMを使用してIntelの内蔵/外部GPUでOllamaを高速化する

今回はIPEX-LLMを使用してOllamaを高速化する方法を紹介します。

gihyo.jp

OpenAI、推論モデルo3-proをリリース ——推論スタックの最適化により、API経由のo3の価格は80%値下げに

OpenAIは6月10日、最新の推論モデルo3-proをリリースした。

gihyo.jp

Apple、macOS上でLinuxコンテナを直接実行できる「container」をオープンソースとして公開

Appleは、Mac上で軽量仮想マシンを使ってLinuxコンテナを作成・実行するためのツール「container」を開発し、Apache License 2.0のもとGitHub上にオープンソースとして公開した。

gihyo.jp

Linux 6.16‐rc1が公開、NVIDIA Hopper/Blackwellに対応、正式リリースは2025年7月末の予定

Linus Torvaldsは6月8日、次期Linuxカーネル「Linux 6.16」の最初のリリース候補版となる「Linux 6.16-rc1」を公開した。

azukiazusa のテックブログ2

OpenAI Agents の TypeScript SDK

OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。

azukiazusa のテックブログ2

フロントエンドアプリケーションがエージェントに接続する方法を標準化する AG-UI

AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。

stin's Blog

resend-local というツールを作った

Resend というメール送信サービスがあります。 そのAPIエミュレーターをローカルで起動する npm パッケージを作りました。次のコマンドでサーバー http://localhost:8005 で起動します。 Resend SDK は Base URL を環境変数経由で変更できます。.envなどで次のように指定すれ...

azukiazusa のテックブログ2

Claude Code のタスクの完了を通知する方法

AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。

azukiazusa のテックブログ2

コーディングエージェントの現状の整理とエンジニアの仕事の変化について

AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。

@sakupi01.com blog

[Thoughts Are Appreciated!] Baseline という指標の活用可能性に関する考察

Baseline という指標の活用可能性に関する考察

azukiazusa のテックブログ2

Claude Code Action で Claude Code を GitHub に統合しよう

Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。

azukiazusa のテックブログ2

Mastra の A2A プロトコルサポート

Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、Mastra のクライアント SDK を使用して A2A プロトコルの仕様に従い通信を行う方法を紹介します。

azukiazusa のテックブログ2

TypeScript で AI エージェントを構築する VoltAgent

VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。

azukiazusa のテックブログ2

React Router の Server Components 対応

React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。

blog.jxck.io

大フィッシング攻撃時代における攻撃手法と自衛手段の考察

GW のさなか、有名投資家のテスタ氏を中心に、大規模な乗っ取り攻撃の存在が報告された。当初 900 億円程度と試算された被害額は、数日のうちに 3000 億円を超えると修正され、富裕層のみならず一般市民も無視できない状況となっている。今、一体何が起こっているのか。金融資産を預かるサービスはどのようにユーザを守るべきか。我々ユーザはどのように自衛するべきか。判明している情報をもとに考察する。

azukiazusa のテックブログ2

Vercel で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。

azukiazusa のテックブログ2

Cloudflare で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。

azukiazusa のテックブログ2

Error インスタンスかどうか判定する Error.isError() メソッド

Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。

azukiazusa のテックブログ2

Docker の MCP Toolkit を試してみる

Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。

azukiazusa のテックブログ2

ESLint を MCP サーバーとして実行する

ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。

azukiazusa のテックブログ2

actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す

actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。

azukiazusa のテックブログ2

UI の一部を非表示にする React の Activity コンポーネント

React の新しい実験的なコンポーネントとして `` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。

@sakupi01.com blog

The Outline Algorithm Utopia

本エントリでは、Document Outline Algorithm というユートピアと、その中で繰り広げられた HTML の歴史を振り返ります。また、Outline Algorithm の後継として実現が検討されている Heading Level Concept についての現状を記します。

azukiazusa のテックブログ2

AIと本音トーク：エンジニアの仕事、これからどうなる？

「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。

blog.jxck.io

3PCA 31 日目: 3rd Party Cookie 廃止の廃止

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 31 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieこのエントリもいよいよ終わりに近づいてきたようだ。

azukiazusa のテックブログ2

Ink を使って CLI アプリを React で書く

Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。

azukiazusa のテックブログ2

MCP サーバーの Streamable HTTP transport を試してみる

MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。

blog.jxck.io

閲覧履歴があってもリンクの色が変わらないケースについて

4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。

azukiazusa のテックブログ2

AI エージェントの連携を標準化する A2A プロトコルを試してみる

AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。

azukiazusa のテックブログ2

コーディング AI エージェントを自作してみよう

好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。

blog.jxck.io

Web における Security, Safety, Trust の相対性

我々は、インターネット上において「信頼」できるサービスを、「安全」に使うことに、「安心」を求める。プライバシーは守られ、不正な取引には加担せず、詐欺被害も受けたくない。技術的に言えば、通信は暗号化し、個人は匿名化し、データは秘匿し、それによって Secure で Safety で Trustworthy な Web が手に入る。それを突き詰めた先に、「自由」で理想的なインターネットがある。本当だろうか?

blog.jxck.io

悪いのは全部 Eve だと思ってた

いつも本ブログを読んで頂いている皆様、そしてセキュリティ関係者の皆様へ。この度は、筆者による "Eve" に対する不適切な引用、および、原稿内における不名誉な扱いについて、この場を借りて謝罪させていただきます。

azukiazusa のテックブログ2

Vercel AI SDK で MCP クライアントをツールとして利用する

MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。

@sakupi01.com blog

Standardizing User Intent with Interest Invokers ! (... and it's complicated)

本エントリでは、Interest Invokers の仕様策定において重要な「Show Interest」という概念と、 HIDs (Human Interface Devices) の「Show Interest」に係る議論の現状を解説します。

azukiazusa のテックブログ2

::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る

カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。

azukiazusa のテックブログ2

Vercel AI SDK を使って Next.js アプリに AI 機能を追加する

Vercel AI SDK は TypeScript 向けの AI 機能を活用するプロダクトを構築するためのツールです。AI SDK は AI モデルのプロバイダー間における API の違いを抽象化することで、開発者はアプリケーションの開発に集中できるようになります。この記事では Vercel AI SDK の使い方を確認し、最終的に Next.js で構築した Web アプリケーションに AI 機能を追加する方法を紹介します。

azukiazusa のテックブログ2

TypeScript で MCP サーバーを実装し、Claude Desktop から利用する

MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。

azukiazusa のテックブログ2

TypeScript 製の AI エージェントフレームワーク Mastra

Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。

azukiazusa のテックブログ2

ブログで llms.txt を提供してみた

従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題となっています。LLM に適したコンテンツを提供するために Answer.AI の共同創業者である Jeremy Howard 氏により `llms.txt` というファイルが提案されました。

blog.jxck.io

CSS における if と function の提案

CSS に if() および @function が提案されている。仕様がこれで確定したとは言い切れないため、背景および現状にフォーカスして解説する。なお先に言っておくが、関数の再帰は初期仕様から外されているため、「CSS がプログラミング言語になった」という話ではない。

blog.jxck.io

OWASP に Cookie Theft 対策 Cheat Sheet を執筆した

OWASP に Cookie Theft 対策の Cheat Sheet を提案し、マージされた。

azukiazusa のテックブログ2

インラインで条件分岐する CSS の if() 関数

if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。

blog.jxck.io

Web における Beacon の変遷 (sendBeacon(), fetch() keepalive, fetchLater())

ページを閉じる際に何かしらの情報をサーバで収集したいケースがある。これを Beacon の送信(Beaconing)と呼び、ブラウザではページ表示中に収集したパフォーマンス統計の収集や、広告タグによるトラッキングなどに用いられる。しかし、「ページが閉じる直前に、サーバにリクエストを送信する」を確実に実行するのは実は難しく、これを標準技術で実現する過程で、複数の API が生まれるに至った。各 API の策定経緯と、挙動の違いについて解説していく。

azukiazusa のテックブログ2

ブラウザで非同期イベントストリームを処理する Observable API

Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。

azukiazusa のテックブログ2

ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール

Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。

azukiazusa のテックブログ2

アップグレードされた CSS の `attr()` 関数を使う

`attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。

azukiazusa のテックブログ2

ボタンが押し込まれた状態を表す Press Button の提案

UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。

azukiazusa のテックブログ2

Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる

Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。

azukiazusa のテックブログ2

Prisma で OpenTelemetry のトレースデータを計装する

Prisma は OpenTelemetry の仕様に準拠したトレースデータを計装するためのパッケージを提供しています。この記事では、Prisma で OpenTelemetry のトレースデータを計装する方法について紹介します。

azukiazusa のテックブログ2

Vitest で型のテストを書く

Vitest では `expectTypeOf` や `assetType` を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに利用できます。

@sakupi01.com blog

Safari 18.2 「view-transition-name: auto;」への警鐘

Safari 18.2でShipされた`view-transition-name: auto;`は、未だに議論の余地が残るため、仕様をよく理解した上での利用が必要な理由を解説します

azukiazusa のテックブログ2

スキーマバリデーションライブラリの標準インターフェース standard-schema

スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。

azukiazusa のテックブログ2

CSS で関数を定義できるようになる

Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、`@function` ルールを使用して開発者が関数を定義できるようになります。

azukiazusa のテックブログ2

パスキーによる認証をブラウザで実装してみる

パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。

azukiazusa のテックブログ2

React Server Components を手軽に扱うフレームワーク react-server

react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。

azukiazusa のテックブログ2

Bun v1.2 では package.json にコメントを書ける

`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始まるキーを使用してコメントを書くハックが生まれるなど、様々な方法が考案されていたのが思い出されます。

azukiazusa のテックブログ2

TypeScript 5.8 で追加される erasableSyntaxOnly フラグ

TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではない」構文をエラーとして検知するためのものです。

blog.jxck.io

&quot;Less Password&quot; 時代のアカウント防災訓練

震災の直後、復興のさなかに水害が起こり、再び全てが流される。能登の人々にとっては大変な 2024 年だったと思う。首都直下型や南海トラフはいつ起こってもおかしくないと言われ、戦火すら他人事ではなくなっている。家に災害用の備蓄を用意するのと同様、定期的に「アカウント防災訓練」を個人的に実施するようになって数年経つ。観点は「今、持っているものを全て失っても、リカバリできるだろうか?」だ。現代のアカウントの管理は、"Password Less" を目指す過渡期で、中途半端に複雑だ。Password は無くなっているというより、集約された "Less Password" 状態であり、残る「最後の Password」を起点にどう全体を復元するかが、災害時リカバリの課題となる。これに失敗して全てが詰むと、仮に無事避難できたとしても、相当な喪失を味わうだろう。現状の選択肢と設計方針を振り返りつつ、災害時にデジタルアカウントをどう守るかについて考えたい。

@sakupi01.com blog

Customizable Select ElementにおけるParser RelaxationのアップデートとShipの背景

長年の議論を経て、ようやく仕様が固まった、CustomizableなSelect要素の現状について、Parser Relaxationのを軸に解説します

azukiazusa のテックブログ2

型安全にクエリパラメーターを扱う nuqs

フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。

blog.jxck.io

Web 技術年末試験 2024 講評 #web_exam2024

2024 年の Web 技術を振り返る試験として、「Web 技術年末試験 2024」を実施した。その問題と想定解答、平均点などを公開する。

azukiazusa のテックブログ2

ダイアログの Light dismiss を有効にする `<dialog closedby>` 属性

`` 属性はダイアログの外側をクリックした際にダイアログを閉じる Light dismiss 機能を実現するための属性です。closedby 属性は `any`, `closerequest`, `none` の 3 つの値を受け付けます。

azukiazusa のテックブログ2

React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する

`` コンポーネントは React の実験的なバージョンとして導入されました。これは View Transition API を 宣言的な方法で使用できるようにするものです。

azukiazusa のテックブログ2

MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール

View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。

azukiazusa のテックブログ2

scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す

scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。

azukiazusa のテックブログ2

ユーザーにヒントを表示するための `popover=hint` 属性

ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。Chrome Beta 133 では 3 番目の値として `hint` が追加されました。`popover=hint` はユーザーに対してヒントを表示する「ツールチップ」として動作します。この記事では `popover=hint` 属性について詳しく見ていきます。

blog.jxck.io

Cookie Theft 対策と Device Bound Session Credentials

Chrome チームより提案された Device Bound Session Credentials の実装が進み、Flag 付きで試すことができる。この提案の背景と、解決する問題、現時点での挙動について解説する。

azukiazusa のテックブログ2

Node.js で TypeScript を直接実行できるようになった

Node.js v23.6.0 から `--experimental-strip-types` フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。

azukiazusa のテックブログ2

AI エディター Cursor を試してみる

AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。

stin's Blog

2025年の目標

あけましておめでとうございました。すでに 6 日が経過してしまいましたが、2024年の振り返りと2025年の目標を立てます。 2024年の振り返り 2024年の目標は以下の通りでした。 https://blog.stin.ink/articles/new-years-resolutions-for-2024 技術ブログ...

azukiazusa のテックブログ2

GitHub Actions で再利用可能なワークフローを作成する

GitHub Actions で CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。この記事では、GitHub Actions で再利用可能なワークフローを作成する方法と、実際に再利用可能なワークフローを作成する手順を紹介します。

stin's Blog

ハロー！プロジェクトファンクラブのデジタル会員証があまりに杜撰なので、正しい実装を考える

ハロー！プロジェクトのファンクラブ(以下FC)サイトが2024年11月にリニューアルされました。 https://www.upfc.jp/helloproject/news\_detail.php?@uid=s32dbjT7VpPSK55H リニューアル内容のひとつにデジタル会員証があります。 今までプラスチックカード...

@sakupi01.com blog

2024 In Review

2024年の振り返り

blog.jxck.io

2024 年を振り返る

例年通り 2024 年を振り返る。

stin's Blog

指定したWebページを動く状態でクローンする方法

ふと、指定したURLのWebページをクローンして別の環境で再現する方法がないかと考えました。 HTMLとそれが参照するCSS, JavaScript, 画像ファイルなどをダウンロードして保存しておき、静的ファイルとして配信すれば同じWebページを再現できるはずです。 wget を使う wgetコマンドを使えば、HTML...

azukiazusa のテックブログ2

2024 年に読んでよかった本

私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 25 / Epilogue

OpenUI Advent Calendar エピローグ

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 24 / Global Design System Part2

Open UIが提唱するデザインシステム、Global Design Systemとその未来

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 23 / Global Design System Part1

デザインシステムの開発を加速させる、堅牢で柔軟なGlobal Design Systemの提唱

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 22 / Customizable Select Element Ep.20

Customizable Select Elementのまとめ

azukiazusa のテックブログ2

カード UI の入れ子のリンクの問題を解決する Link Area Delegation の提案

多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。しかし、このような UI では HTML 仕様に違反していたり、ハッキーな手法で実装されていることがあります。Open UI コミュニティでは Link Area Delegation という提案を行っており、標準化された方法で入れ子のリンクを実装することで UX やアクセシビリティを損なうことを防ぐことを目的としています。この記事では Link Area Delegation の内容について紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day21 / Customizable Select Element Ep.19

Customizable Select Elementの関連仕様: `` - 子Node変更検知タイミングの仕様決定（現時点で）

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 20 / Customizable Select Element Ep.18

Customizable Select Elementの関連仕様: `` - 「同期タイミング」でクローンを作成の方針で決定。`cloneNode()`の制限が浮き彫りになる

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 19 / Customizable Select Element Ep.17

Customizable Select Elementの関連仕様: `` - UAによるLight DOMへのNodeクローンタイミングの検討

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 18 / Customizable Select Element Ep.16

Customizable Select Elementの関連仕様: `` - Light DOMへのクローン追加実装に関して、CSSWGとの合意形成。UAによるLight DOMへのNodeクローンタイミングに関する懸念を深掘る

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 17 / Customizable Select Element Ep.15

Customizable Select Elementの関連仕様: `` - `slot`属性と`behavior`属性が使用廃止を受け、CSE Anatomyが改訂。HTML史上初となる、UAからLight DOMへ変更を加える実装検討へ

stin's Blog

Honoの捉え方、またはNext.jsとの組み合わせ方

この記事は「Hono Advent Calendar 2024 シリーズ 2」17日目の記事です。 https://qiita.com/advent-calendar/2024/hono HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 Hono...

@sakupi01.com blog

Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは

本エントリでは、インタラクティブな要素がネストされたUIを、標準的な方法で実現しようという「Link Area Delegation」Proposalについて紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 16 / Customizable Select Element Ep.14

Customizable Select Elementの関連仕様: `` - 「選択された``を``にスロットしてカスタマイズできるようにする」唯一の手段、`slot`属性と`behavior`属性が使用廃止へ

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 15 / Customizable Select Element Ep.13

Customizable Select Elementの関連仕様: `` - ``の内部コンテンツ自体を``に反映する仕様の検討

azukiazusa のテックブログ2

MSW で Web Socket のリクエストをモックする

Mock Service Worker (MSW) の v2.6.0 から Web Socket のリクエストをモックすることができるようになりました。Web Socket のサポートのリクエストは 2020 年から存在しており、多くの議論の末 4 年の歳月を経てリリースされた機能となります。この記事では、MSW で Web Socket のリクエストをモックする方法を紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 14 / Customizable Select Element Ep.12

Customizable Select Elementの関連仕様: `` - `part`属性をCSEのUA実装で使用することの問題から、`part`属性を`behavior`属性にリネームへ。``のvalueのみならず、内部コンテンツ自体を``に反映する仕様策定の示唆

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 13 / Customizable Select Element Ep.11

Customizable Select Elementの関連仕様: `` - ``提案のきっかけと、選択された``のvalueとスタイルを反映する初期の仕組みとして、`part`属性と`slot`属性について

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 12 / Customizable Select Element Ep.10

Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker()`のデフォルト色から深掘る、system-color/ color-scheme/ prefers-color-schemeの関係

blog.jxck.io

3PCA 30 日目: 2024 年の 3rd Party Cookie まとめ

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 30 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieこのアドベントカレンダーを開始した 2023 年末の時点では、2024 年(つまり今年)の年始に Chrome による 1% Deprecate が始まり、2024 年をかけてその範囲を広げ、今頃は Post 3rd Party Cookie の世界が訪れている見通しだった。しかし、その予定は大きく変更され、これからどうなるのかも不透明だ。つまり、この話は 2025 年も継続することになってしまったため、2024 年の現状を一旦まとめておくこととする。

azukiazusa のテックブログ2

Testing Library の debug で出力される行数を多くする方法

Testing Library では要素の取得に失敗した場合にレンダリングされた HTML がコンソールに表示されます。しかし、デフォルトで出力される行は 7000 に制限されているため目的の要素が表示される前に表示が終了してしまうことがしばしばあります。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 11 / Customizable Select Element Ep.9

Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker-icon`のデフォルトスタイルはどうやって決まったのか

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 10 / Customizable Select Element Ep.8

Customizable Select Elementの関連仕様: `appearance: base-select;` - 選択された``のデフォルトチェックマークのスタイルはどうやって決まったのか

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 9 / Customizable Select Element Ep.7

``のその後：``から``に至るまで

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 8 / Customizable Select Element Ep.6

``のその後：``に至るまで

azukiazusa のテックブログ2

Zod を使って OpenAI の構造化された出力を扱う

OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day7 / Customizable Select Element Ep.5

Open UIでCSEのResearchが行われる。同時期にMSで``Explainerの作成。Explainerに基づいて、``がIntent to Prototypeに

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 6 / Customizable Select Element Ep.4

Open UIでCustomizable Select Elementの初期提案

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 5 / Customizable Select Element Ep.3

Web標準化の動きが進んでもなお、CustomizableでないForm Controlの紹介。Customizable Select Element提案の契機となるサーベイ

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 4 / Customizable Select Element Ep.2

ブラウザ戦争の激化と、OSに依存したコントロールの問題の顕在化。打開する動きとして、WaSPによるWeb標準の台頭への動き、モダンブラウザの登場、より柔軟なスタイリングを可能にするCSS3の登場

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 3 / Customizable Select Element Ep.1

Form Controlの歴史と、ブラウザやOSに依存するForm Controlのスタイルについて

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 2 / Web UIの抱える課題とOpen UIの発足背景

Web UIの抱える課題とOpen UIの発足背景について

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 1 / Open UIについて

Open UIの概要と、その調査方法

azukiazusa のテックブログ2

Tailwind CSS v4 で導入される CSS First Configurations

Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 0 / Prologue

OpenUI Advent Calendar プロローグ

stin's Blog

記事をPicture-in-Pictureで読めるようにしてみた

Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 https://developer.mozilla.org/en-US/docs/Web/API/Document\_Picture-in-Pict...

azukiazusa のテックブログ2

アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう

Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。

azukiazusa のテックブログ2

Node.js では標準モジュールで Promise timer が使える

人為的な遅延を発生させるために、`setTimeout` を Promise をラップする方法がよく使われています。これにより、`await` を使って任意の秒数処理を遅らせることができます。

azukiazusa のテックブログ2

新しいパッケージマネージャーの vlt を使ってみる

vlt は npm と互換性のあるパッケージマネージャーです。`npm` と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。

blog.jxck.io

Dialog と Popover #12

Toast 相当を実装する場合、時間が経ったら自動で消えるタイムアウトを設定することがないだろうか?今回 Popover の一連を調べる中であった、これが WCAG 違反だという議論を紹介する。

azukiazusa のテックブログ2

Next.js で OpenTelemetry を使用した計装を行う

この記事では Next.js で OpenTelemetry を使用した計装を行う方法について紹介します。Next.js では `instrumentation.ts` ファイルを使用して監視ツールやログツールの計装を設定できます。

stin's Blog

Next.js 15にアップデートした

このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容 パッケージのアップデート 使っているNext.js関連のパッケージを一気にアップデートします。 注意点は、Next.js自体はv15が正式リリースされています...

azukiazusa のテックブログ2

Next.js の "use cache" ディレクティブによるキャッシュ制御

Next.js の App Router はデフォルトでキャッシュされる設計でリリースされました。一方でデフォルトでキャッシュされることに対して不満を持つ開発者も多かったように思います。このようなフィードバックを受けて、Next.js 15 ではいくつかのキャッシュ戦略が変更されました。さらに現在 canary チャンネルで提供されている dynamicIO フラグを有効にすることで、"use cache" ディレクティブを用いてキャッシュを制御できるようになります。

blog.jxck.io

Dialog と Popover #11

今回考えたいのは、GitHub の Issue や User アイコンをマウスでホバーすると、Issue の詳細や User Profile が表示されるアレだ。挙動としては想像通り、対象要素に Anchoring した <div popover> を表示し、中に好きなようにコンテンツを入れれば良い。ただし、UI のセマンティクスに関しては、複数の議論が行われており、方針もいくつか考えられる。今回は、それらの現状を整理しつつ、考えうる選択肢をいくつか提示する。その中で要件に合わせて何を選ぶかは実装者に委ねたい。

azukiazusa のテックブログ2

JavaScript でスタイルシートを構築する CSSStyleSheet

CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。

@sakupi01.com blog

📝note: What is web accessibility?

Practical Accessibility のメモ

blog.jxck.io

Dialog と Popover #10

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

azukiazusa のテックブログ2

react-to-web-component を使って React コンポーネントを Web Components に変換する

@r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。

azukiazusa のテックブログ2

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM

宣言型 Shadow DOM は `` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。

blog.jxck.io

Dialog と Popover #9

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

stin's Blog

Rust始めてみた。JSONフォーマッターを作ってみた

唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由 始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで...

azukiazusa のテックブログ2

Chrome の組み込み AI の Language Detection API で言語を判定する

Language Detection API は Chrome に組み込まれた AI により、クライアントサイドで言語を判定するための提案です。この API を利用することで、テキストの言語を判定することが可能になります。

azukiazusa のテックブログ2

Chrome の組み込み AI の Summarization API を試してみる

Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。

blog.jxck.io

Dialog と Popover #8

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

blog.jxck.io

Dialog と Popover #7

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

azukiazusa のテックブログ2

Storybook と Vitest の統合したコンポーネントテスト

Storybook v8.3 以降、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。Vitest を使用することで複雑なセットアップが不要になります。また、推奨されているブラウザモードを使用することで、実際のブラウザでの挙動をより正確に再現できます。

blog.jxck.io

Dialog と Popover #6

ついに <toast> -> <popup> -> popup -> popover として、要素から属性になり名前も決まった。とはいえ実装は popup とそんなに変わらないので、popup でやっていた Origin Trials を継続しながら、徐々に実装を進めていくフェーズが 2022/12 くらいの話だ。Intent to extend Origin Trial: Popover APIhttps://groups.google.com/a/chromium.org/g/blink-dev/c/kZXexHhH7EA/m/UmQYwGW3DAAJしかし、popover を実用するには足りていない議論があった。それが Animation だ。

blog.jxck.io

Dialog と Popover #5

このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。popup が紆余曲折を経て popover 属性になり、2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、popover の実装は各ブラウザで一気に話が進む。Release Notes for Safari Technology Preview 166https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/News from WWDC23: WebKit Features in Safari 17 betahttps://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/そして、2024/4 ごろに発表された Baseline 2024 に popover がエントリしたことで、2024 年は全ブラウザで互換性を高めていくことに合意し、作業を進めていくことになる。俗に言う「元年」というやつと言えるだろう。Popover API lands in Baselinehttps://web.dev/blog/popover-api今回は、この popover の議論と、仕様が完成していくまでをまとめる。

blog.jxck.io

Dialog と Popover #4

ここまでで <dialog> 要素が標準化され、Modal/non-Modal な Dialog がネイティブで出せるようになった。今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。Top Layerinert:modal / ::backdropCloseWatcherFocusable Scrollersetcしかし、<dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、<dialog> の標準化の裏で並行して行われた。

azukiazusa のテックブログ2

UI を閉じる動作を処理する CloseWatcher API

CloseWatcher API は UI を閉じる動作を処理するための API です。キーボードの `Esc` キー、Android の戻るボタンなどのデバイス固有のメカニズムによって閉じるイベントを提供します。

stin's Blog

React useで非同期処理を簡単に扱う

先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 https://stinbox.github.io/lz-...

blog.jxck.io

Dialog と Popover #3

前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。今回は <dialog> の API としての使い方について、具体的に解説していく。

blog.jxck.io

Dialog と Popover #2

showModalDialog() は今から考えれば、確かにひどい API だった。しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、Cookie バナー、ログインなど多々ある。そういった場面では、ライブラリなどを用いて実装する必要があったが、Modal を実装するのは実際にはそんなに簡単ではなかった。

blog.jxck.io

Dialog と Popover #1

HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。

azukiazusa のテックブログ2

ユーザーのカラースキーマ設定を上書きする web preferences API の提案

ユーザーのカラーテーマの設定によりスタイルを変更するためには、`prefers-color-scheme` メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、`prefers-color-scheme` メディアクエリを使用せずに、`class` 属性を使ったスタイルの切り替えが行われます。

azukiazusa のテックブログ2

スタイルをカスタマイズ可能な新しい `<select>` 要素

従来の `` 要素は CSS を利用したスタイルを適用することができないため、多くの開発者にとって課題となっていました。この問題を解決するために新しい既存の `` 要素をカスタマイズする手段が提案されました。この疑似要素を利用することで、開発者は `` 要素のスタイルをカスタマイズをオプトインできるようになります。

azukiazusa のテックブログ2

`calc-size()` や `interpolate-size: allow-keywords;` で `height: auto;` な要素のアニメーションをサポートする

CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。この記事では calc-size() 関数を使って height: auto; な要素のアニメーションを実装する方法を紹介します。

blog.jxck.io

Web Developer Conference 2024 開催後記 #wdc2024

2024/9/7 に、Web Developer Conference を開催した。Web Developer Conference 2024 開催告知 #wdc2024 | blog.jxck.iohttps://blog.jxck.io/entries/2024-06-12/web-dev-conf-2024.htmlConnpasshttps://web-study.connpass.com/event/321711/Togetterhttps://togetter.com/li/2430964

azukiazusa のテックブログ2

アクセシビリティが考慮された React Aria のドラッグアンドドロップ

React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。

stin's Blog

React.FCを使うよ、理に適っているからね

唐突に、React.FCの是非についてポジションを示そうと思ったので書きます。積極的に使う派閥です。 React.FC vs Normal Function Reactで関数コンポーネントを宣言するとき、TypeScriptの型の付け方として大きく次のような２つの書き方があります。 React.FCを使うパターン コン...

azukiazusa のテックブログ2

フィーチャーフラグの標準規格 OpenFeature の React SDK を試してみる

OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由に選択できるようになります。この記事では OpenFeature の React SDK を使ってフィーチャーフラグを評価する方法を紹介します。

azukiazusa のテックブログ2

React Aria でアクセシブルなコンポーネントを作成する

React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリティを最優先した設計となっているのが特徴です。ヘッドレス UI ライブラリを用いて UI コンポーネントを実装することで、開発者はビジネスロジックやデザインに集中することができます。

azukiazusa のテックブログ2

@axe-core/playwright によるアクセシビリティテストの自動化

axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。

azukiazusa のテックブログ2

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。

stin's Blog

viteがプラグインなしでできることを探る

pluginを使わずにviteだけで始めてみることで理解が深まったらいいと思い、やってみる。 セットアップ 適当なディレクトリ内で、git初期化してnpm初期化してviteとTypeScriptをインストールする。 package.jsonのtypeはmoduleにして、scriptsにnpm run buildを追加...

azukiazusa のテックブログ2

CSS の `reading-flow` プロパティで要素の読み上げ順を制御する

Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `reading-flow` プロパティ個の問題を解決するためのプロパティです。見た目上の順序に従って読み上げ順を制御することができます。

blog.jxck.io

3PCA 29 日目: Privacy Sandbox の方針転換は何を意味するか

このエントリは、3rd Party Cookie Advent Calendar の 29 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie先日、Google より Privacy Sandbox の方針転換について発表があった。本当は、まだ記事を書くには情報が足りていないため、あまり書く気はなかったが、今後出てくる発表に備えて経緯をまとめるために、「何がまだ分かっていないか」の現状を書いておくことにする。

azukiazusa のテックブログ2

CSS でランダムな値を扱う `random()` と `random-item()` 関数

`random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数は引数に渡したリストの中からランダムに 1 つの値を返します。

azukiazusa のテックブログ2

新しいビルドツールの Farm

Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundling というものを採用しており、モジュールのネットワークリクエスト数を削減するため、20 ~ 30 のファイルにバンドルするという特徴があります。

stin's Blog

真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く

このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法 一般に、ダークモードの実装方法は3...

@sakupi01.com blog

新人研修の内容・感想など: 備忘録

2024/4から24卒として新人研修を受けてました。終わってから配属などあり、ようやく落ち着いてきたので、ざっくりと研修の内容を書いたり感想を書いたりします。まとまりはないです。

azukiazusa のテックブログ2

CSS の `@property` ルールでカスタムプロパティを定義する

CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カスタムプロパティに誤った値が代入されることを防いだり、グラデーションのアニメーションなど、従来は実装が難しかった機能をサポートすることができます。

azukiazusa のテックブログ2

スタイルの適用範囲を限定する CSS の `@scope` ルール

`@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。

blog.jxck.io

なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待

Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。Ladybirdhttps://ladybird.org/これがいかに価値のある取り組みなのか、Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。

azukiazusa のテックブログ2

CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する

CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。

blog.jxck.io

「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024

9/7 開催予定の Web Developer Conference 2024 では、「1 分 de Web 標準」という LT 大会を予定しています。CFP も募集中ですが、(筆者の周り以外では)聞き馴染みのないやり方だと思うので、この LT のやり方を解説します。プロポーザル | Web Developer Conference 2024 - fortee.jphttps://fortee.jp/web-dev-conf-2024/proposal/all

azukiazusa のテックブログ2

TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全

JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `undefined` 型が返されることはありません。これはランタイムエラーを引き起こす恐れがあります。

azukiazusa のテックブログ2

CSS で条件分岐を行う `@when/@else` ルール

`@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。

azukiazusa のテックブログ2

SVG アイコンの表示に mask-image CSS プロパティを使用する

mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。

blog.jxck.io

URL.parse を Chromium で Ship するまで

Chrome 126 で筆者が実装した URL.parse が Ship された。Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。

blog.jxck.io

Web Developer Conference 2024 開催告知 #wdc2024

夏に Web 開発周りの話をするカンファレンスをやります。参加は Connpass で募集しています。Web Developer Conference 2024 - connpasshttps://web-study.connpass.com/event/321711/Session と LT の募集を fortee で今日から開始したので応募を待ってます。Web Developer Conference 2024 - fortee.jphttps://fortee.jp/web-dev-conf-2024

azukiazusa のテックブログ2

Chrome の 組み込み AI Gemini Nano を試してみる

Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。開発者は JavaScript から Chrome に組み込まれた Gemini Nano にアクセスして生成 AI の機能を実装することができます。

azukiazusa のテックブログ2

CSS トランジションの開始時のスタイルを定義する `@starting-style` ルール

`@starting-style` ルールは、CSS トランジションの開始時のスタイルを定義するためのアットルールです。CSS トランジションの既定のルールでは前回のスタイル変更イベントでレンダリングされていなかった要素では、アニメーションが適用されない、`display: none` から他の値に変更した場合にアニメーションが適用されないといった問題があります。`@starting-style` ルールを使用することでこれらの問題を解決できます。

azukiazusa のテックブログ2

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。

azukiazusa のテックブログ2

SvelteKit チュートリアル - 記事投稿サイトを作ってみよう

SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。

azukiazusa のテックブログ2

Svelte v5 で導入されるスニペット機能

Svelte v5 ではスニペットと呼ばれる新しい機能が導入されます。スニペットとは、コンポーネント内で使用できる再利用可能なマークアップのことです。`#snippet` ディレクティブを使用してスニペットを定義し、引数を受け取ることができます。スニペットを呼び出す際には `@render` ディレクティブを使用します。またスニペットは単なる値として扱われるため、コンポーネントの Props として渡すことができます。

azukiazusa のテックブログ2

楽観的更新を行うための React の useOptimistic フック

React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。

blog.jxck.io

Reverse HTTP Transport が描く新しい Web サービスデプロイ構成

IETF の httpbis で、Reverse HTTP Transport という仕様が提案されている。Reverse HTTP Transporthttps://www.ietf.org/archive/id/draft-bt-httpbis-reverse-http-01.htmlこの仕様は、Origin サーバの前に何かしら Intermediaries (Loadbalancer, Reverse Proxy, CDN etc)があるのが一般的な現代の Web サービス構成において、非常に革新的なアイデアを取り入れたプロトコルと言える。まだ v01 という初期段階ではあるが、発想が非常に面白かったので、読書メモを残す。

blog.jxck.io

Referrer-Policy の制限を強めると安全になるという誤解

Referrer-Policy は、送信される Referer の値を制御することが可能だ。このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか?前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.iohttps://blog.jxck.io/entries/2024-04-26/csrf.html

azukiazusa のテックブログ2

Svelte v5 における イベントハンドラの変更点

Svelte v5 では、イベントハンドラの書き方が一新され、いくつか非推奨となった書き方があります。この記事では、Svelte v4 と Svelte v5 のイベントハンドラの書き方の違いについて見ていきます。

azukiazusa のテックブログ2

Svelte v5 で導入された Runes によるリアクティビティシステム

Svelte v5 で導入された Runes によるリアクティビティシステムについて解説します。従来の Svelte は純粋な JavaScript のコードのみを使用してリアクティビティを実現していましたが、アプリケーションが大規模になると複雑性が増すという問題がありました。Runes は Svelte のリアクティビティシステムをより柔軟にし、アプリケーションの規模が大きくなってもシンプルさを保つことを目指しています。

azukiazusa のテックブログ2

エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS

Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。

azukiazusa のテックブログ2

Next.js 型安全なルーティングを使う

Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。

azukiazusa のテックブログ2

React v19 から forwardRef が不要になる

今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を直接渡すことができるようになりました。

azukiazusa のテックブログ2

Remix v2.9 で導入された Single Fetch

Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機能です。Single Fetch は v2.9 ではフィーチャーフラグとして提供されており、v3 以降ではデフォルトの挙動となります。

blog.jxck.io

令和時代の API 実装のベースプラクティスと CSRF 対策

CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。

azukiazusa のテックブログ2

Math.max() にスプレッド構文で大きな配列を渡すとエラーになる恐れがある

`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引数の数が多すぎるとエラーになることがあります。

azukiazusa のテックブログ2

コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）

コンテナクエリ単位とは、コンテナ要素に基づいてスタイルを定義するための相対的な長さを表す単位です。例えば `1cqw` はコンテナ要素の幅の 1% に相当します。

azukiazusa のテックブログ2

CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素

`::file-selector-button` 疑似要素を使用することで、`` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

azukiazusa のテックブログ2

ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning

CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。

stin's Blog

Remix を Cloudflare Pages にデプロイするまでやってみる

Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx コマンドでさっとテンプレートを作る。プロジェクト名は remix-on-clo...

azukiazusa のテックブログ2

Promise や Context から値を読み取る use React フック

React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値を同期的に読み取ることができます。その他の React フックと異なり、`if` 文やループ内で呼び出すことができる点が特徴として挙げられます。

azukiazusa のテックブログ2

親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS

CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。

azukiazusa のテックブログ2

CSS: ダークモードで値を切り替える light-dark 関数

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

blog.jxck.io

RFC の URL はどのドメインで貼るのが良いか

IETF の RFC は、いくつかの場所で同じものが公開されている。どの URL が最適なのか、という話。結論は www.rfc-editor.org だ。

blog.jxck.io

Chromium にコントリビュートするための周辺知識

Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。

azukiazusa のテックブログ2

CSS から React コンポーネントを生成する MistCSS

MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。

azukiazusa のテックブログ2

単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader

Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうかをテストできます。なお、Virtual Screen Reader はあくまでスクリーンリーダーの挙動を模倣したものであり、現実で使われているスクリーンリーダーによるテストを代替するものではないことに注意してください。

azukiazusa のテックブログ2

TypeScript 5.5 で関数による型の絞り込みが改善される

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。

blog.jxck.io

mozaic.fm 10 周年記念イベント開催後記

2014 年 3 月に開始した mozaic.fm が、気づいたら 10 周年を迎えた。これを機に、10 周年記念イベントとして、初のオフラインイベントをゲンロンカフェで開催した。Podcast でのみ告知し、当日まで情報制限をかけていたにもかかわらず、チケットもグッズも無事完売することができた。イベントを振り返りつつログを残す。

azukiazusa のテックブログ2

フォームのアクセシビリティを考える

今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。

azukiazusa のテックブログ2

CSS メディアクエリで比較演算子が使える

CSS のメディアクエリで比較演算子（``, `=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利です。

azukiazusa のテックブログ2

React Server Components を使うためのミニマムなフレームワーク Waku

Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。Waku もまた React Server Components に対応しているため、最小限の構成で React Server Components を使いたい場合に適しています。

@sakupi01.com blog

内定者アルバイトを終えて

チーム開発何もわからんだった私が、チームワークを大切にする会社の内定者アルバイトに参加して思ったことをつらつら書きます。まとまりはないです。

azukiazusa のテックブログ2

1 つの AbortController で複数の fetch をキャンセルできる

`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。

azukiazusa のテックブログ2

CSS の reverse 系の値は可能な限り使わない

CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。

azukiazusa のテックブログ2

新しい UI テストの手法を提供するテストライブラリ SafeTest

SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。

azukiazusa のテックブログ2

技術の素振りのために記事を書く

技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際のプロジェクトで使えるかどうか調査するといった事項があげられるでしょう。ただ素振りするだけではぼんやりと頭に知識が入っている状態になりがちですが、他者への説明というアウトプットを意識することで、コードを書くことによって得られた知見を整理できるようになります。

azukiazusa のテックブログ2

初心者向けの単純なルールを作る

新しい物事を始めるときは複雑な理屈は抜きにして、単純なルールが規定されていることが初心者にとって大切です。この理屈は開発時の設計やコーディングルールにも当てはまると思います。単純なルールとして lint を設定したり、コンポーネント化して複雑な部分を隠蔽することですべての開発者にとってコードをコミットしやすくなります。

azukiazusa のテックブログ2

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform

Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions や Remix に対応しています。

azukiazusa のテックブログ2

フルスタック Web フレームワーク HonoX を使ってみる

HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。

blog.jxck.io

Promise.withResolvers によるイベントの Promise 化

Promise.withResolvers() は、Stage 4 であり ES2024 の候補となった。すでにブラウザでの実装も進んでいるため、その活用方法を解説する。

blog.jxck.io

TC39 に新設された Stage 2.7 について

TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。これは何だろうと思った人が検索で辿り着けるよう、その経緯と目的をまとめる。

azukiazusa のテックブログ2

Tailwind CSS を使う時に一緒に入れたいライブラリ

Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します

azukiazusa のテックブログ2

Hono で Server-Sent Events によるストリーミングを実装する

Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。

azukiazusa のテックブログ2

npm は isntall でもコマンドを実行できる

npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。

blog.jxck.io

Apple によるブラウザエンジン規制の緩和

以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。Apple announces changes to iOS, Safari, and the App Store in the European Union - Applehttps://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ストアやペイメントの緩和もあるが、ここでは WebKit に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。筆者が公開情報を読んで解釈したものなので、内容は保証しない。

azukiazusa のテックブログ2

クラス名の結合をする軽量ライブラリの clsx

clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。

azukiazusa のテックブログ2

TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec

TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエンドポイントを定義します。

azukiazusa のテックブログ2

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に `calc(infinity)` を指定すると、絶対に最前面に表示させることができます。

azukiazusa のテックブログ2

Node.js esm の dirname と filename

commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0 で `import.meta.dirname` と `import.meta.filename` が追加されました。

blog.jxck.io

Web 技術年末試験 2023 講評 #web_exam2023

2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。その問題と想定解答、平均点などを公開する。

azukiazusa のテックブログ2

Bun でクロスプラットフォームなシェルスクリプト

Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやりとりが可能であることが特徴です。

azukiazusa のテックブログ2

MSW v2 では　Web 標準の Fetch API をサポート

Mock Service Worke（MSW） v2 では　Web 標準の Fetch API をサポートしました。

azukiazusa のテックブログ2

Remix の SPA モード

Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。

azukiazusa のテックブログ2

TypeScript で任意の文字列を受け取りつつエディタの補完を効かせる型

すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red` や `blue` などの特定の文字列を指定します。

azukiazusa のテックブログ2

React でコンポーネントの Props の型を取得する

プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。

azukiazusa のテックブログ2

配列をグループ化する Object.groupBy 静的メソッド

Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。

azukiazusa のテックブログ2

TailwindCSS で複数行のテキストを省略するとき

TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。

azukiazusa のテックブログ2

tabIndex には 0 と -1 だけを指定する

tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。

azukiazusa のテックブログ2

Svelte の Props 省略記法

Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。

azukiazusa のテックブログ2

GitHub Copilot Chat の inline chat のキーボードショートカットを無効にする

GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショートカットに慣れていた人にとっては、inline chat が表示されるのは意図しない動作でしょう。

azukiazusa のテックブログ2

details 要素の name 属性による排他的アコーディオン

`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。

azukiazusa のテックブログ2

GitLens で特定のコミットを除外する

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

azukiazusa のテックブログ2

大きさが自動で変わる textarea を CSS だけで実現

テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。

azukiazusa のテックブログ2

TailwindCSS の data 属性

TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。

azukiazusa のテックブログ2

静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind

Pagefind は、静的サイト向けの全文検索エンジンと UI ライブラリです。特定のフレームワークに依存しない JavaScript ライブラリとして実装されており、静的サイトジェネレーターで生成された HTML ファイルに対して検索機能を追加できます。

stin's Blog

2024年の目標

あけましておめでとうございました。すでに 5 日が経過してしまいましたが、2024 年の目標を立てます。 技術ブログを 20 記事以上書く(媒体は問わない) 個人開発アプリを 1 つリリースする 引っ越す 加えて、達成する目標とはちょっと違いますが、行動指針として「思い立ったらすぐに行動する」を掲げます。 2023 年...

blog.jxck.io

2023 年を振り返る

例年通り 2023 年を振り返る。

azukiazusa のテックブログ2

2023 年に読んでよかった本

年末なので 2023 年のまとめっぽい記事を書きたくなりました。今年は 1 年間でおおよそ 300 冊の本をよんだようです（そのうち 3 割ほどはラノベなのですが...）。その中でも特に印象に残った本を紹介します。

blog.jxck.io

3PCA 最終日: 3rd Party Cookie 亡き後の Web はどうなるか?

このエントリは、3rd Party Cookie Advent Calendar の最終日である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここまで、3rd Party Cookie との 30 年にわたる戦いと、ITP 以降それが Deprecation されるに至った流れ、そして Privacy Sandbox の API について解説してきた。最終日は、ここまでを踏まえて、来年以降の Web がどうなっていくのかを考えていく。

blog.jxck.io

3PCA 27 日目: FedCM

このエントリは、3rd Party Cookie Advent Calendar の 27 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、散々壊れるユースケースとして解説してきた「認証連携」をカバーする FedCM について解説する。

stin's Blog

react-markdown をやめて remark から自力でレンダリングするようにした話

Intro このブログサイトの記事ページではこれまで react-markdown というライブラリでマークダウンを HTML に変換して表示していました。この度、react-markdown を剥がして remark を直接使って記事をレンダリングするように変更しました。 前回の記事で Playwright で VR...

blog.jxck.io

3PCA 26 日目: Related Website Sets

このエントリは、3rd Party Cookie Advent Calendar の 26 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日からは、Privacy Sandbox の「広告」以外の API を解説していく。

blog.jxck.io

3PCA 25 日目: Measurement

このエントリは、3rd Party Cookie Advent Calendar の 25 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、広告の測定について解説する。

blog.jxck.io

3PCA 24 日目: Retargeting

このエントリは、3rd Party Cookie Advent Calendar の 24 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日はリターゲティングをカバーする Protected Audience API について解説する。

stin's Blog

ブログに Playwright で VRT を導入した

Intro 記事ページのスタイルを維持したまま内部実装に大きめの変更を加えたかったので、Visual Regression Test(VRT)を導入しました。 といってもあまりに簡易的な内容です。CI で自動化とか Chromatic とか大規模なことはしていません。ただローカルPCで Playwright を動かして...

blog.jxck.io

3PCA 23 日目: Interest Based Advertising

このエントリは、3rd Party Cookie Advent Calendar の 23 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回からは、Privacy Sandbox の API を、ジャンルごとに分けて概要を解説していく。個々の API は非常に複雑であり、また今後も細かい点が変わっていくだろう。どうせガッツリ使うのであれば、仕様を読む必要があるため、ここでは「何がしたいのか」「何ができるのか」に絞って解説する。

blog.jxck.io

3PCA 22 日目: Privacy Sandbox

このエントリは、3rd Party Cookie Advent Calendar の 22 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日からいよいよ Privacy Sandbox の話に入っていく。

azukiazusa のテックブログ2

input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案

スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。

blog.jxck.io

「議論だけ」のカンファレンスの作り方

「議論だけ」のカンファレンスを、長いこと開催してきた。個人的には好きなので、他にもあったらいいと思っているが、そういうカンファレンスは他に見ない。カンファレンス自体を、筆者のような個人が手弁当でやれるのは、もう最後かもしれないと今回ひしひしと感じたので、これまでどうやってきたのかを残しておくことにする。

blog.jxck.io

次世代 Web カンファレンス 2023 開催後記

2023/12/16(土) に、以下で告知した「次世代 Web カンファレンス」を開催した。次世代 Web カンファレンス 2023 開催告知 | blog.jxck.iohttps://blog.jxck.io/entries/2023-11-16/next-web-conf-2023.html次世代 Web カンファレンス 2023 - connpasshttps://nextwebconf.connpass.com/event/300174/

blog.jxck.io

3PCA 21 日目: SameSite Cookie

このエントリは、3rd Party Cookie Advent Calendar の 21 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieGoogle が 3rd Party Cookie を Deprecate していく方針を発表してから、最初に始めたのが SameSite Lax by Default だった。これが何のために行われたのかを解説する。

azukiazusa のテックブログ2

OpenTelemetry Collector をカスタムビルドする

本番環境では OpenTelemetry Collector Contrib を使用せず、必要なコンポーネントのみを含むようにカスタムビルドすることが推奨されています。この記事では、OpenTelemetry Collector をカスタムビルドする方法について紹介します。

blog.jxck.io

3PCA 20 日目: 3rd Party Cookie Deprecation

このエントリは、3rd Party Cookie Advent Calendar の 20 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここまで ITP について見てきたが、これはあくまで Safari が独断で行っていたことだ。それに対して、他が追従するかどうかはブラウザ次第だっただろう。では、他のブラウザはどのような反応をしたか。この反応には、その時の情勢も鑑みる必要がある。

blog.jxck.io

3PCA 19 日目: Super Cookie

このエントリは、3rd Party Cookie Advent Calendar の 19 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は Super Cookie の解説をする。迂回手段ゾーンとしては、最後に紹介する手法だ。

blog.jxck.io

3PCA 18 日目: Cloaking

このエントリは、3rd Party Cookie Advent Calendar の 18 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、ITP の迂回で注目された Cloaking について解説する。

azukiazusa のテックブログ2

CSS だけで動くスクロールドリブンアニメーション

Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。

blog.jxck.io

3PCA 17 日目: Fingerprinting

このエントリは、3rd Party Cookie Advent Calendar の 17 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、Cookie に頼らない Tracking 手段としての、Fingerprinting について解説する。

stin's Blog

ポケモンBGMループ再生サイトの音声ファイルをキャッシュするために色々調べた

Intro 以前の記事でポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた話をつらつらと書きました。 https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare この記事が多くの方にご覧頂けて非常に嬉しい限りです。 そ...

blog.jxck.io

3PCA 16 日目: Bounce Tracking

このエントリは、3rd Party Cookie Advent Calendar の 16 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は 3rd Party Cookie の迂回としてトラッキングに用いられた、Bounce Tracking について解説する。

blog.jxck.io

3PCA 15 日目: Work Around

このエントリは、3rd Party Cookie Advent Calendar の 15 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は ITP が始まったことで試行された、迂回方法について見ていく。

blog.jxck.io

3PCA 14 日目: Partitioning

このエントリは、3rd Party Cookie Advent Calendar の 14 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は Safari, Firefox で導入され、その後 Chrome によって標準化されつつある、Partitioning という概念を解説する。

blog.jxck.io

3PCA 13 日目: ITP

このエントリは、3rd Party Cookie Advent Calendar の 13 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

blog.jxck.io

3PCA 12 日目: 終わりの始まり

このエントリは、3rd Party Cookie Advent Calendar の 12 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

blog.jxck.io

3PCA 11 日目: Cookie Banner

このエントリは、3rd Party Cookie Advent Calendar の 11 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、各国で法律が整備されていった流れや、主な法律の特徴を解説した。しかし、法律はあくまで法律であり仕様ではないため、「どう実装するべきか」は各サービスに委ねられている(ガイドラインなどはあるが)。多くの場合、これを Web の実装に落とし込むと、いわゆる「Cookie バナー」相当になるわけだ。今回は、実世界でどのようなバナーが提供されているのかを見ていく。

stin's Blog

ポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた

Intro https://pokemon-soundlibrary.stin.ink/ このポケモンのBGMを無限ループで再生できる Next.js 製サイトは、これまで Vercel にデプロイしていました。しかし Vercel にデプロイすることはいくつか問題点を抱えていました。 大量の音声ファイルを publi...

blog.jxck.io

3PCA 10 日目: なぜ Cookie には同意が必要なのか?

このエントリは、3rd Party Cookie Advent Calendar の 10 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、この話をする上で避けては通れない、規制や法律について触れておく。しかし、筆者はあくまでエンジニアであり、この分野は専門外だ。内容については、素人が適当に書いており、信頼性は AI 以下だと思って読んでほしい。

azukiazusa のテックブログ2

Storybook v8 の React Server Components サポート

Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してるわけではなく、非同期コンポーネントをクライアントでレンダリングしているに過ぎないことに留意すべきです。

blog.jxck.io

3PCA 9 日目: DNT

このエントリは、3rd Party Cookie Advent Calendar の 9 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、P3P の後に提案され、非常に似たコンセプトで、かつ最近まで使われていた DNT について解説する。

blog.jxck.io

3PCA 8 日目: P3P

このエントリは、3rd Party Cookie Advent Calendar の 8 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、Cookie2 が失敗した後に、別のアプローチでこの課題に挑んだ P3P を解説する。

blog.jxck.io

3PCA 7 日目: Cookie2

このエントリは、3rd Party Cookie Advent Calendar の 7 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここからは第二幕、人類と 3rd Party Cookie の闘いの歴史を見ていく。「歴史の話はいらない、早くコードを見せろ」と思っている読者の気持ちもわかるが、残念ながら背景がわかっていないとまともな闘いはできないだろう。

blog.jxck.io

3PCA 6 日目: トラッキングの問題

このエントリは、3rd Party Cookie Advent Calendar の 6 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、3rd Party Cookie にはネガティブ/ポジティブを含め、さまざまなユースケースがあるという解説をした。では、なぜ 3rd Party Cookie は今「問題」になっているのだろうか?

blog.jxck.io

3PCA 5 日目: 認証の連携

このエントリは、3rd Party Cookie Advent Calendar の 5 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、3rd Party Cookie を使った広告のリターゲティングの仕組みを解説した。「あの気持ち悪い広告の正体は 3rd Party Cookie だったのか」と思った人もいるかもしれない。そんな諸悪の根源である 3rd Party Cookie など「さっさと無効にしてしまえばいいのでは?」と思うかもしれないが、それは簡単なことではない。なぜなら、3rd Party Cookie のユースケースは、ネガティブなものだけではないからだ。その一例として、今回は認証連携のユースケースを解説する。

stin's Blog

Next.js App Router の Static Exports の可能性を探るためにブログでやってみた話

Next.js Advent Calendar 2023 の12月4日の記事です。 https://qiita.com/advent-calendar/2023/next Static Exports とは Next.js の Static Exports は Next.js のビルド結果として完全に静的な HTML,...

blog.jxck.io

3PCA 4 日目: 3rd Party Cookie の正体

このエントリは、3rd Party Cookie Advent Calendar の 4 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は「サブリソースにまで Cookie が送られて何が嬉しいのか」という話だった。今回はそのユースケースについて考えていく。

blog.jxck.io

3PCA 3 日目: 自動で送られる Cookie

このエントリは、3rd Party Cookie Advent Calendar の 3 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は「Cookie は 区別 と 識別 の用途があり、区別 だけのユースケースもある」という解説をした。今回も、もう少し Cookie の性質を振り返っていく。

stin's Blog

stin.ink を Google Domains から Cloudflare Registrar に移管した

Cloudflare Registrar に移管した このブログもサブドメインとして使用されている stin.ink は、僕が持つ唯一のドメインです。Google Domains で取得して、色々サブドメインを生やして使っています。 半年ほど前ですが、Google Domains がサービスを終了して事業譲渡されること...

azukiazusa のテックブログ2

MSW v2 で `HttpResponse.json()` の型がおかしいときの対処法

MSW v2 の `HttpResponse.json()` の第 2 引数の型は `Response` オブジェクトの初期化時に渡すオプションを指定できます。しかし、tsconfig.json の設定によっては、この型がおかしくなることがあります。その場合には、`tsconfig.json` の `compilerOptions.lib` に `dom` を追加するのが一時的な対処法です。

blog.jxck.io

3PCA 2 日目: Cookie による区別と識別

このエントリは、3rd Party Cookie Advent Calendar の 2 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

blog.jxck.io

3PCA 1 日目: 3rd Party Cookie Advent Calendar Agenda

このエントリは、3rd Party Cookie Advent Calendar の 1 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

stin's Blog

個人ブログ開発でとても便利な Contentlayer を導入してみた

またまた自分のブログサイトを改修した報告です。自分のブログサイトを改修してはそれをネタに記事を書くのを繰り返していて、なんか面白いですね。 このブログはソースコードと同じリポジトリに Markdown 記事を保存しています。サイト自体は Next.js で、Markdown はただの .md ファイルです。 これまで気...

blog.jxck.io

なぜ HTML の form は PUT / DELETE をサポートしないのか?

10 年ほど前に同じことを調べたことがある。なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codeshttps://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。この問題についてあらためて記す。

azukiazusa のテックブログ2

React Server Components のテスト手法

現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年　11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。

stin's Blog

Chakra UI は "use client" なしで使えるようになった「だけ」

Chakra UI が自分で "use client" を付けている 最近 Chakra UI が "use client" を付けずとも Next.js の App Router で使えるようになったと話題になりました。しかし調べてみると、どうやら JS 非依存なコードに書き換えられた訳ではなく、Chakra UI ...

stin's Blog

ブログの記事ページに Table of Contents を設置したので実装方法などを書く

画面幅 991px 以上で閲覧すると、記事ページの右側に目次リンクが表示されるように実装しました。 目次生成ライブラリ tocbot tocbot というライブラリを使用しました。 https://tscanlin.github.io/tocbot 今までこちらのライブラリの存在を知らずに、どうやって実装しようか迷子に...

azukiazusa のテックブログ2

HTML 標準でコンボボックスを実現する `<combobox>` 要素の提案

コンボボックスとは、テキストボックスとドロップダウンリストを組み合わせた UI コンポーネントです。コンボボックスはユーザーがテキストボックスに入力した文字列に基づいて、ドロップダウンリストのアイテムをフィルタリングできます。`` 要素は、HTML の標準でコンボボックスを実現することを目的としています。

blog.jxck.io

次世代 Web カンファレンス 2023 開催告知

2023/12/16(土) に、3 回目となる「次世代 Web カンファレンス」を開催します。次世代 Web カンファレンス 2023 - connpass名称: 次世代 Web カンファレンス 2023日時: 2023/12/16(土) 11:00-20:00場所: サイボウズ参加費: 無料配信: なしアーカイブ: 未定懇親会: なし入場規制: ありハッシュタグ(全体): #nwc_all

stin's Blog

ポケモンBGMループ再生サイトをアップデートした

https://pokemon-soundlibrary.stin.ink ポケモン公式が公開している「ポケットモンスター ダイヤモンド・パール」の BGM をループ再生できるようにしたサイトを以前作りました。その後公式から「ポケットモンスター 赤・緑」の BGM も配布されたので、追加分も再生できるようにアップデート...

azukiazusa のテックブログ2

なぜ Server Actions を使うのか

Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。特に `` の `formAction` 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。Server Actions の是非について語る時、導入の背景にユーザー体験の向上があるという観点を忘れてはいけません。また、セキュリティ上の観点についてどのように考えるべきでしょうか？

azukiazusa のテックブログ2

パッケージマネージャーを npm に移行するときには `npm install --package-lock-only` コマンドを使うとよい

既存のプロジェクトで npm に移行する際に `npm install --package-lock-only` を使うことで、依存パッケージのバージョンを変更することなく lock ファイルを移行できます。

stin's Blog

ブログのデザインを刷新した

このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。 変更した理由 最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意識的に見るようになったという意味)。このツールで実装できるサイトのダークモードデ...

blog.jxck.io

ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ

こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。

azukiazusa のテックブログ2

Server Actions の戻り値には JSX を使える

Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server Actions の戻り値に JSX を使うことができます。ただし、公式にサポートされている仕様ではないので、思わぬバグを踏む、将来追加される機能に対応しないおそれがあることを理解した上で、使うかどうかを判断する必要があります。

azukiazusa のテックブログ2

Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する

Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。

azukiazusa のテックブログ2

GitLens で特定のコミットを除外する

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

azukiazusa のテックブログ2

JavaScript なしでインタラクションを追加する Invokers

Invokers は JavaScript なしでインタラクションを追加するための提案です。`` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `` などの要素の開閉状態を切り替えることが可能となります。

azukiazusa のテックブログ2

URL が有効かどうかを判定する `URL.canParse()` メソッド

`URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `try...catch` 文による判定よりも簡潔に記述できます。

azukiazusa のテックブログ2

:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う

ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。

azukiazusa のテックブログ2

focusgroup で矢印キーによるフォーカスナビゲーションを実装する

カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。`focusgroup` の提案は、このようなキーボード操作を独立して使用できるプリミティブとして提案されています。この機能を利用することで、開発者は JavaScript を用いることなく一貫したフォーカスナビゲーションを実装できます。

azukiazusa のテックブログ2

`<details>` 要素の `name` 属性による排他的なアコーディオンの実装

`` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。

azukiazusa のテックブログ2

よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素

`` 要素は、デザインをカスタマイズできなかった従来の `` 要素の問題を解決するために Open UI グループにより提案されている要素です。`` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。

azukiazusa のテックブログ2

`history.replaceState()` にはブラウザによって呼び出し回数制限がある

`history.replaceState()` は、ブラウザの履歴を変更するための API です。使用例としてユーザーのアクションによる UI の状態の変更に合わせて、URL のクエリパラメータを変更することが挙げられます。この API はブラウザにより呼び出し回数に制限が設けられており、使い方を誤ると予期せぬ挙動が発生するおそれがあります。

azukiazusa のテックブログ2

モーダルの開閉状態を URL で管理する

モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。

azukiazusa のテックブログ2

Bun の Web フレームワーク ElysiaJS のチュートリアル

ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事では、ElysiaJS を使って簡単なタスク管理アプリの Web API を作成してみます。

azukiazusa のテックブログ2

Bun workspace で始めるモノレポ生活

Bun では `package.json` の `workspaces` を使用することでモノレポの管理が可能です。この記事では Bun によるモノレポを試してみます。

azukiazusa のテックブログ2

Bun のマクロを使ってフィーチャートグルを実装する

Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装してみましょう。

azukiazusa のテックブログ2

Bun の Plugins で CSV ファイルを直接 import する

Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル（.rs）を直接 import できる仕組みも作れることが紹介されています。

azukiazusa のテックブログ2

OpenTelemetry Collector の Connector を使ってログをメトリックに変換する

OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に Connector を使用します。例えば、あるパイプラインはログのパイプラインのエクスポーターとメトリックのパイプラインのレシーバーとして動作します。このような場合、Connector はログをメトリックに変換する役割を担います。

azukiazusa のテックブログ2

最小限のコードで動く最も汚いコードから始める

コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。

azukiazusa のテックブログ2

OpenTelemetry を使用して Node.js アプリケーションを計装する

OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化されたプロトコルとツールを提供していることが特徴です。この記事では Node.js アプリケーションを計装して Prometheus にデータを送信する方法を紹介します。

azukiazusa のテックブログ2

await は Promise 以外のオブジェクトでも値を取り出せる

await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく thenable オブジェクトを対象としているのは、ライブラリの相互運用のためです。

blog.jxck.io

Cookie2 とは何か

タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。

azukiazusa のテックブログ2

【React】メモ化したコンポーネントに children を渡すと効果がなくなる

React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.memo の使い方を誤ると意図しない再レンダリングが発生してしまうことがあります。ここではメモ化したコンポーネントに children を渡すと効果がなくなるというケースについて説明します。

azukiazusa のテックブログ2

アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか

prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。

azukiazusa のテックブログ2

【書評】RustとWebAssemblyによるゲーム開発は Rust 開発における設計を学べる良書

本のタイトルは「Rust と WebAssembly によるゲーム開発」となっていますが、反して WebAssembly についての話題はほとんど出てきません。主に Rust における開発の設計についての話題が中心となっています。

azukiazusa のテックブログ2

グラフのアクセシビリティについて考える

`` や `` 要素で描画されたグラフは、スクリーンリーダーを使用するユーザーにとって内容を正しく理解することが難しいです。この記事では、グラフの内容をスクリーンリーダーを使用するユーザーに伝える方法について考えてみます。

blog.jxck.io

Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化

Chrome で Compression Dictionary Transport の Experiment が行われている。Intent to Experiment: Compression dictionary transport with Shared Brotlihttps://groups.google.com/a/chromium.org/g/blink-dev/c/NgH-BeYO72Eこの提案の仕様および本サイトへの適用について解説する。

azukiazusa のテックブログ2

React.memo でメモ化したコンポーネントはモック関数が使えない

テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation のようなモック関数が使えません。

azukiazusa のテックブログ2

Document Picture in Picture で任意の要素を Picture in Picture する

Document Picture-in-Picture は、`` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロールを使用したり、プレイリストとともに動画を PiP することが挙げられます。

azukiazusa のテックブログ2

スナップショットテストとアサーションテスト

この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。

azukiazusa のテックブログ2

pnpm でパッケージにパッチを当てる

`pnpm patch` コマンドを使うと、依存パッケージのコードを直接書き換えることができます。

azukiazusa のテックブログ2

aria-label を使いすぎない

aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。

azukiazusa のテックブログ2

スクリーンリーダーに配慮したテキスト表記

文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。

blog.jxck.io

Cookie Store API による document.cookie の改善

JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。

azukiazusa のテックブログ2

ポップオーバー API で JavaScript を使わずにポップアップを表示する

Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。

azukiazusa のテックブログ2

Vue.js でジェネリックコンポーネントを使う

Vue.js 3.3 から `` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができます。

blog.jxck.io

AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal

最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備されてきた。これら API のモチベーションと設計を中心にまとめる。

azukiazusa のテックブログ2

GIF アニメーションの使用を控える

技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。

blog.jxck.io

URL バーの表示の変遷

ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、Chrome から発表された。思えば、URL バーの見た目も、だいぶ変わってきたように思う。URL バーの表示の変遷を一度まとめておく。

stin's Blog

localStorage に同期する React State を作るカスタムフック

React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ名前のカスタムフックが入っていることは知っていますが、インターフェイスも内部実装...

azukiazusa のテックブログ2

list-style: none スタイルを指定した ul 要素には list ロールを指定すべき

WAI-ARIA における role 属性を使用する際のプラクティスとして、暗黙のロールを明示しないというものがあります。しかし、` ` 要素は暗黙のロールとして `list` ロールを持っていますが、明示的に `list` ロールを宣言するべきです。

blog.jxck.io

IETF RFC における ABNF と Parsing Algorithm の関係

HTTPBis では、RFC 8941: Structured Field Values (以下 SFV) の更新作業が行われている。RFC 8941: Structured Field Values for HTTPhttps://www.rfc-editor.org/rfc/rfc8941.html機能面では Date 型が追加されるという点が大きいが、個人的にはその裏で行われるもっと興味深い議論に注目したい。それは、「RFC における ABNF の立ち位置」に関するものだ。

stin's Blog

ブログサイトを Next.js App Router に移行したので学びを書く

このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行 このブログサイトのスタイリングは vanilla-extrac...

azukiazusa のテックブログ2

Vitest のブラウザテスト

Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在します。

azukiazusa のテックブログ2

Next.js の Server Actions について

Next.js の Server Actions はサーバーサイドのデータのミューテーション、クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。

blog.jxck.io

技術書籍をシンタックスハイライトする話

「連載するけど、代わりにコードはハイライトさせてほしい」それが Web+DB Press 編集長に俺が出した条件だった。

azukiazusa のテックブログ2

SvelteKit のフォーム操作

SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリッチなユーザー体験を追加できます。例えば、フォームを送信した後ページ全体の再読み込みを行わずに、フォームの送信結果を表示することができたり、バリデーションメッセージを即座に表示できたりします。

azukiazusa のテックブログ2

Array.prototype.with() とは

`Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は変更されず、新しい配列のコピーが返されます。

azukiazusa のテックブログ2

Tailwind CSS のダークモードで System, Light, Dark を切り替える

ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できるメリットがあります。

azukiazusa のテックブログ2

Next.js の Interception Routes について

Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。

azukiazusa のテックブログ2

Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた

Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を発揮します。

azukiazusa のテックブログ2

HTML の仕様に search 要素が追加された

HTML Standardに新しい``要素が追加された。これまで、ARIAには``に相当するHTML要素がなかったため、` `しか代替要素がなかった。新たに``要素を使用することにより、WAI-ARIA を使用せずともsearchランドマークを定義できるようになった。通常、``要素は少なくとも1つの入力要素を含んでおり、検索を開始するためのボタンもあることが期待されている。

blog.jxck.io

OpenAI API を用いた文書校正(誤字脱字検出)

OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。

azukiazusa のテックブログ2

ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう

ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され、回答は通常、「例」に基づいた形式で得られる。

azukiazusa のテックブログ2

TypeScript で網羅性をチェックする

パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラーとなります。TypeScript にはパターンマッチがないため、網羅性の検査は行われません。ですが、TypeScript では `never` 型を利用することで網羅性の検査を行うことができます。

azukiazusa のテックブログ2

SvelteKit で環境変数を使う

SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使用すると、型安全に環境変数を参照できる、公開してはいけない値をクライアントから参照できなくなるなどのメリットを得られます。

blog.jxck.io

誇りを被った仕様の針に意図を通す

Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与える場合がある。一方それらは Web 開発者が使う時点では解決されており、基本的に気にされることはない。だからといって、気にする必要がないわけではない。ということを象徴する事件が、今回も裏で起こっていた。

azukiazusa のテックブログ2

React は javascript スキームを使った XSS を防ぐことができない

React を使用していた場合に引き起こす可能性がある XSS 脆弱性の例として、javascript スキームを使った XSS があります。この記事では、javascript スキームを使った XSS についての説明とその対策について紹介します。

azukiazusa のテックブログ2

TypeScript + ESModules の開発環境をシュッと作る

ほぼ設定なしで TypeScript + ESModules の開発環境をシュッと作る時のレシピです。

azukiazusa のテックブログ2

Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎

ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。

azukiazusa のテックブログ2

React Hook Form で Zod を使う時の 5 つパターン

React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します

azukiazusa のテックブログ2

SvelteKit でページ遷移時のプログレスバーを表示する

SPA で画面遷移をする場合、MPA の場合と違い、ブラウザがローディングの表示を行ってくれません。リンクをクリックしてから画面遷移が完了するまで何も表示されないので、ユーザーからすると何も反応していないように感じてしまいます。 SPA で画面遷移した時にプログレスバーを表示したい場合には NProgress が最適です。コンパクトな JavaScript ライブラリでフレームワークを選ばず利用できます。この記事では SvelteKit で NProgress を使用する方法を紹介します。

azukiazusa のテックブログ2

アクセシビリティに考慮したツールチップを実装する

ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの操作をブロッキングするものではありません。ユーザーがマウスのホバー外すかフォーカスが外れた場合にツールチップは非表示となります。

stin's Blog

個人ブログから Chakra UI を剥がして vanilla-extract を入れた(剥がした理由編)

すてぃんのブログから Chakra UI を剥がして vanilla-extract を導入しました。見た目はほとんど変わっていませんが、Chakra UI でスタイリングされていたものをすべて vanilla-extract で 1 から作り直しました。 ライブラリの変更理由は以下の通り。 最近 vanilla-ex...

azukiazusa のテックブログ2

focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる

:focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。 それでは、JavaScript の focus()メソッドによりフォーカスされた場合には、`:focus-visible` 擬似クラスは適用されるのでしょうか？実はこれは最後 `focus()` メソッドが呼ばれる前に要素にフォーカスがあったかどうかにより異なります。

azukiazusa のテックブログ2

テストコード内では条件分岐を書かないようにする

誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコードの中に入り込んだ例を見てみましょう。

azukiazusa のテックブログ2

無効にしたボタンにフォーカスさせたいときには aria-disabled を使う

例えばフォームの項目になにか入力されるまで、送信ボタンを無効にしたい状況があるかと思います。このような場合には `` に `disabled` 属性を与えることでフォームの送信を無効にできます。`disabled` 属性はデフォルトでコントロールを無効にする一般的に期待されるすべての機能を提供するため、多くの場合はこの属性を使用するべきです。しかし `disabled` 属性には 1 つ問題点が存在します。それは Tab キーによるフォーカスができなくなるという点です。

azukiazusa のテックブログ2

単体テストの単位はコードではなく振る舞いである

単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る舞いが壊れていないことを保証してくれる度合いです。この耐性が高ければ、開発者は安全にコードを変更できます。 この記事では、単体テストをコード単位で書いた場合と振る舞い単位で書いた場合をそれぞれ提示して、リファクタリングに対する耐性がどのように異なるのかを見ていきます。

blog.jxck.io

次世代 CSS 仕様が与えるコンポーネント時代の Web への影響

SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。コンポーネントを敷き詰めるコンテナ側の設計は、Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも大いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。現在、提案/実装が進んでいる CSS の新機能群には、この「コンポーネントベースの Web 開発」に大いに影響を与えるポテンシャルを持つものが多い。今回は、2023 年の予習として、それらの仕様を「開発スタイルに与えうる影響」の側面から俯瞰し妄想したものをメモに残す。

stin's Blog

2022 年振り返りを書き散らし

Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。 生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを壊しかけた。自分が過敏なだけかもしれないとメンタルクリニック的なところにも行くか...

blog.jxck.io

2022 年を振り返る

例年通り 2022 年を振り返る。

azukiazusa のテックブログ2

今すぐできる Web アクセシビリティ改善

アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。 ですが、完璧な対応を目指すのではなく、少しづづ改善できるところから進めることこともできます。実際にやってみると、簡単な HTML や CSS のコードの修正でもよい改善を得られたりします。 この記事では比較的低コストで実践入門できるアクセシビリティの改善を紹介します。

azukiazusa のテックブログ2

Web フロントエンドの実装において本来の機能を損なってはいけない

データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。

azukiazusa のテックブログ2

Satori + SvelteKit で OGP 画像を自動生成する

Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生成する手間は取れないわけで、このOGP 画像を生成する工程を自動化する仕組みが必要となります。Satori は記事のタイトルなどをもとに動的 OGP 画像を生成するユースケースのために使用できます。

azukiazusa のテックブログ2

TailwindCSS のダークモードでページ読み込み時に一瞬ライトモードで表示されてしまうときの対応法

ユーザーの OS の設定や LocalStorage の値をもとにダークモードかどうか判定する場合、コンテンツが読み込まれる前にスクリプトの実行が完了している必要があります。

azukiazusa のテックブログ2

Pa11y CI でアクセシビリティテストを GitHub Actions で実行する

Pa11y とは Web Content Accessibility Guidelines (WCAG) をベースに HTML のアクセシビリティを検査するツールです。適合レベル AA を対象にテストします。Pa11y にはいくつかの種類がありますが、その中でも Pa11y CI は CI 上で実行することにフォーカスしています。

azukiazusa のテックブログ2

モノレポで GitHub Actions の jest coverage report を動かす

jest coverage reportは GitHuba Actions のワークフローの1つで Jest で実行したテストのコードカバレッジをプルリクエスト上にコメントしてくれます。 この記事では yarn workspaces 使用して作成したモノレポ構築のレポジトリで jest coverage report を動かしてみます。

azukiazusa のテックブログ2

TypeScript 4.9 で in 演算子による型の絞り込みが改善された

TypeScript において `in` 演算子を `unknown` 型に対して使用した際の挙動が改善されました。

azukiazusa のテックブログ2

React Router の defer で重要なデータを先に描画する

あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに付随するコメントやいいねの数はそれほど重要ではないので、それらのデータの取得を待つ必要がありません。 この記事では React Router の loaderを使用して重要なデータの完了のみを待機する方法を試してみます。

azukiazusa のテックブログ2

【React】アクセシビリティに考慮したタブを実装する

タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択することで表示されるタブパネルがタブに関連するものに切り替わります。

azukiazusa のテックブログ2

【React】アクセシビリティに考慮したアコーディオンを実装する

アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーディオンは1つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく　使用されます。例えば、「よくある質問」のようなページで使われていることを見たことがあるかと思います

blog.jxck.io

CORB から ORB へ

CORB (Cross Origin Read Blocking) が Fetch の仕様から消え、後継の ORB (Opaque Response Blocking) が策定作業中である。ここでどのような変更が起こっているのかを調査し、記録する。

azukiazusa のテックブログ2

【React】アクセシビリティに考慮したリストボックスを実装する

リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。

azukiazusa のテックブログ2

Qwik City でブログアプリを作る

Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。

stin's Blog

@vercel/og を使ってブログに動的 og:image 生成を実装した

Vercel で og:image の動的生成するなら一択 先日 Vercel から HTML\&CSS で画像を生成できるライブラリ @vercel/og が発表されました。 https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dyn...

stin's Blog

Firebase Auth, Firestore, Functions for Firebase でサクッと管理者権限を割り振る

Firebase のユーザーに個別に権限を割り振りたい要件は多そう。すでに似たような記事はたくさんありますが、自分も実装方法を調べたので文章にしておきます。 実装イメージ Firebase Auth のカスタムクレームを使用します。Firebase ユーザーオブジェクトに独自のプロパティを生やすことができる機能です。 ...

azukiazusa のテックブログ2

イベントのバブリングは DOM ツリーではなく React ツリーに従う

イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。

azukiazusa のテックブログ2

【React】state のリフトダウンパターン

React において不要な再レンダリングを避けるためのいくつかのパターンを紹介します

blog.jxck.io

XMLHttpRequest とはなんだったのか

Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。

azukiazusa のテックブログ2

Jest で beforeunload イベントをテストする

beforeunload イベントをテストする方法を紹介します

azukiazusa のテックブログ2

CSS 擬似クラス「:focus-within」

:focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。

azukiazusa のテックブログ2

アクセシブルなダイアログに必要なこと

ダイアログをアクセシビルに実装するための要件を確認しましょう。

azukiazusa のテックブログ2

Sanitizer API で HTML を安全に使用する

ユーザーが入力した情報をそのまま表示するとクロスサイトスクリプティング（XSS）脆弱性につながる問題があることはよく知られています文字列の無害化はこのようにライブラリの実装に頼っている状況でしたが、WING により Sanitizer API という仕様が策定されました。Sanitizer API により外部ライブラリの依存無しで XSS の対策が可能となります。

azukiazusa のテックブログ2

Hono + Cloudflare Workers で REST API を作ってみよう

Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。 Hono の特徴としては以下の点が挙げられています。 - ウルトラファスト - 依存関係なし - ミドルウェア - TypeScript - マルチプラットフォーム

blog.jxck.io

HPKE とは何か

HPKE (Hybrid Public Key Encryption) が RFC 9180 として公開された。RFC 9180: Hybrid Public Key Encryptionhttps://www.rfc-editor.org/rfc/rfc9180.htmlHPKE は、公開鍵暗号方式と共通鍵暗号方式を組み合わせて(ハイブリッド)任意の平文を暗号化するための、汎用的な枠組みとして標準化されている。この仕様は、多くのユースケースが想定されており、RFC になる前から ECH (Encrypted Client Hello), MLS (Message Layer Security), OHTTP (Oblivious HTTP) など、さまざまな仕様から採用を検討されている。本サイトで書く予定の他の記事でも HPKE は頻出する予定であり、今後より多くの場面でこの仕様を見ることになると思われるため、一度この仕様の概観について解説する。(筆者は暗号の専門家ではないため、解釈や語彙使用の間違いがあるかもしれない。)

azukiazusa のテックブログ2

Fetch Upload Streaming でチャットアプリを作ってみる

Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の `body` に ReadableStream を渡せるようになります。

azukiazusa のテックブログ2

AngularJS のチュートリアルを React にリプレイスしてみた③

それではいよいよ、AnguarJS のルーティングモジュールである `ngRoute` を置き換えましょう。この置き換えが完了したら AngularJS を完全に取り除くことができます。

azukiazusa のテックブログ2

AngularJS のチュートリアルを React にリプレイスしてみた②

AngularJS のチュートリアルを React にリプレイスします。今回の記事では AngularJS のコンポーネントをすべてリプレイスして、angular-resorce の代わりに API クライアントを実装します。

azukiazusa のテックブログ2

AngularJS のチュートリアルを React にリプレイスしてみた①

AngularJS のチュートリアルを React にリプレイスします。

azukiazusa のテックブログ2

pnpm は npm と何が違うのか

pnpm は npm、yarn と並ぶ JavaScript のパッケージマネージャーです。pnpm と言う名前は「performant npm」に由来します。

azukiazusa のテックブログ2

MSW の実践活用例

msw の実践で活用する例を紹介します

stin's Blog

React + TypeScript 用の eslint セットアップメモ書き

Vite で立ち上げた React + TypeScript プロジェクトには eslint のセットアップはされていない。プライベートでちょっとライブラリを試すみたいなケースでしか Vite を使っていなかったので eslint なしで作業していたが、やっぱり useEffect の依存配列の渡し漏れをして混乱するこ...

azukiazusa のテックブログ2

Volar で Vuetify2.x の補完を効かせる

Volar + Vuetify 2.x を利用する場合、型定義ファイルを作成してグローバルコンポーネントを定義する必要があります。

azukiazusa のテックブログ2

【TypeScript】Zod でスキーマ宣言とバリデーションを実施する

[Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。

azukiazusa のテックブログ2

おまえら禁じられたインデックスアクセスを平気で使ってんじゃねえか！わかってんのか？『ランタイムエラー』が生まれたのは人間がコンパイラオプションに甘えたせいだろうがよ！

TypeScript 4.1 から noUncheckedIndexedAccess オプションが追加されました。このオプションは上記のような配列のアクセスやオブジェクトのプロパティのアクセスをより厳密にします。 具体的には、配列に対するインデックスアクセスやインデックスシグネチャを通じたプロパティのアクセスは常に `undefined` とのユニオン型となります。

stin's Blog

React でキーボードショートカットを設定するためのカスタムフックを実装する

以前、『ポケットモンスターダイヤモンド・パール』の BGM をループ再生できる Web サイトを作成しました。 https://dp-soundlibrary.stin.ink/ この Web サイトの実装については過去に Zenn に投稿しているのでそちらも御覧ください。 https://zenn.dev/stin/...

azukiazusa のテックブログ2

Deno Web フレームワーク Fresh チュートリアル

Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また、Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。

blog.jxck.io

HTTP 関連 RFC が大量に出た話と 3 行まとめ

2022/06/06 ~ 9 あたりに、長きに渡って策定作業が行われていた HTTP 関連の RFC が大量に公開された。RFC 9110: HTTP SemanticsRFC 9111: HTTP CachingRFC 9112: HTTP/1.1RFC 9113: HTTP/2RFC 9114: HTTP/3RFC 9163: Expect-CT Extension for HTTPRFC 9204: QPACK: Field Compression for HTTP/3RFC 9205: Building Protocols with HTTPRFC 9209: The Proxy-Status HTTP Response Header FieldRFC 9211: The Cache-Status HTTP Response Header FieldRFC 9213: Targeted HTTP Cache ControlRFC 9218: Extensible Prioritization Scheme for HTTPRFC 9220: Bootstrapping WebSockets with HTTP/3RFC 9230: Oblivious DNS over HTTPSいったい何が起こっているのか、それぞれの経緯と開発者が知っておいた方がいいこと、そうでもないことを解説する。

stin's Blog

WebSocket を使ってみたくて簡単なチャットアプリを作って Google Cloud Run にデプロイしてみる

WebSocket でリアルタイム通信したいんじゃ WebSocket 通信を使ってみたいので調べた学習ノート。Node.js 用ライブラリの ws を使わずに WebSocket サーバー実装とかできたらかっこいいけどとりあえずライブラリに甘えます。 ws による最小構成 サーバーを起動する最小構成。 このコードをコ...

azukiazusa のテックブログ2

Atomic CSS エンジン - UnoCSS

UnoCSS はフレームワークではなく、Atomic CSS エンジンです。全ては柔軟性とパフォーマンスを考慮して設計されています。UnoCSS にはコアユーティリティはなく、すべての機能はプリセットで提供されます。

azukiazusa のテックブログ2

Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire

Histoireはフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。Vite にネイティブ対応、Vue の SFC 形式で Story を書けるといった特徴があります。

blog.jxck.io

JavaScript のメディアタイプと RFC 9239

長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、RFC 9239 として公開された。これにより、推奨される MIME タイプが text/javascript に統一されることになった。かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。

azukiazusa のテックブログ2

Jest Preview がけっこーすごい

Jest Preview とは Jest で実行中のテストに debug() 関数を仕込むことで、実行中のテストが作成した HTML をブラウザでプレビューしながらデバッグできるライブラリです。

azukiazusa のテックブログ2

Playwright でコンポーネントテスト

Playwright は E2E テストのための Node.js フレームワークです。v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまりもともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。

stin's Blog

Google AdSense を Next.js 製ブログに入れるのに一手間かかる話

ブログに広告を入れてみたので許してください ブログにちょっとでも広告収入あると嬉しいなと思っていたものの、Adsense は審査が厳しいと聞いていたので手を出していませんでした。でもふとダメ元で申請してみたらなんと承認されて広告を貼り付けられるようになったので導入しました。煩わしく感じない程度の広告数にしておくのでどう...

azukiazusa のテックブログ2

Tailwind CSS ベースの UI フレームワークという選択肢

この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大な工数の削減に貢献しています。 その一方で、細かなスタイルの調整に手間取り余分に時間を取られ苦労を経験している方も多いのではないでしょうか？

stin's Blog

見た目が同じなだけのコンポーネントを共通化すべきでない

WET is better than DRY https://twitter.com/stin\_factory/status/1522521205080989696 こんなツイートをしたらちょっと反響がありました。 大した事ないツイートがプチバズりしているの不思議 ではありますが、みんな似た経験をしているのでしょう。...

stin's Blog

『プロを目指す人のためのTypeScript入門』読書感想文

https://twitter.com/stin\_factory/status/1520251902877118464?s=20\&t=ObJNlQRqSKg5E02UCk5xOw 尊敬する TypeScript の師匠(勝手に思ってるだけ)である uhyo さんが書いた『プロを目指す人のための TypeScript...

azukiazusa のテックブログ2

Node.js の標準 API にテストランナーが追加された

JavaScript のテストランナーといえば、Jest　がデファクトスタンダードと言えるでしょう。最近は Vitest と呼ばれる新たなテストランナーも登場していますが、しばらくは Jest が使われ続けられることでしょう。 そんな中、Node.js 18 から標準 API としてテストランナーが組み込まれました。まだ実験的な機能ではありますが、サードパーティのライブラリを使用せずに扱えることもあって注目を集めています。

azukiazusa のテックブログ2

Rust の魅力に感じた点

最近は [Rust](https://www.rust-lang.org/) と呼ばれるプログラミング言語を趣味として触っています。[SWC](https://swc.rs/) や [Rome](https://rome.tools/) のように Rust で作成されたフロントエンドツールが増えていることから興味を持ったのですが、実際に触ってみて Rust が高い人気を誇る理由がよく分かるようになりました。 この記事では私が Rust を触ってみて魅力に感じた点を列挙していきます。

stin's Blog

HTML 解体新書 読書感想文

https://twitter.com/stin\_factory/status/1516718102813511680 https://www.borndigital.co.jp/book/25999.html Amazon で予約開始してすぐに予約していたものが先日届いて 1 周読み切ったので読書感想文的なものを書...

azukiazusa のテックブログ2

markuplint で構文チェックを始めよう

HTML の構文チェックを実施するには適切なツールを導入するのがよいでしょう。この記事では markuplint と呼ばれる HTML の静的解析ツールを紹介します。markuplint は JSX(React),Vue,Svlete のようなテンプレートエンジンにも対応しています。

blog.jxck.io

Navigation API による「JS での画面遷移」と SPA の改善

従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。これは、History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。この API の目的と仕様を解説しつつ、実装のメモを残す。

azukiazusa のテックブログ2

Node.js のバージョン管理には Volta がよい

皆さん Node.js のバージョン管理ツールには何を使っておりますでしょうか？上記の中でも私がオススメするのは [volta](https://volta.sh/) です。volta は 1.0 がリリースされたのが2020年12月と比較的新しいツールです。

azukiazusa のテックブログ2

npm workspace で始めるモノレポ生活

workspace は複数のパッケージ（`package.json`）をレポジトリを管理するために使用されます。このようなレポジトリは**モノレポ**として知られています。

stin's Blog

Next.js ～RSS フィードの実装方法探訪記、或いは、 getServerSideProps での res.end() の考察について～

この個人ブログに RSS フィード機能を実装しました。 RSS フィードとはブログの記事のタイトルや公開日などの情報を XML 形式で配信するものです。 実装方法自体はググって出てきた記事を参考に行いましたが、その中で一つ疑問があったので調べてみました。 参考記事 https://zenn.dev/catnose99/...

azukiazusa のテックブログ2

君は return と await return の違いを理解して使っているか

`Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。

stin's Blog

ブログに next-seo を導入した

適当にやってた meta タグ設定をちゃんとしました Next.js のプロジェクトの meta タグ類を設定してくれるライブラリ next-seo をインストールしました。 今まで適当に meta タグをセットしていて、特に OGP 系は必須プロパティとかも入れずにやっていましたが、今回 next-seo を導入する...

stin's Blog

Twitter シェアボタン React 作り方

Twitter のシェアボタンをブログに設置しました 記事ページの下部に Twitter のシェアボタンと Buy me a coffee のリンクを設置しました！ Twitter のシェアボタンを作るに当たって考えたことを書いていきます。 コード https://github.com/y-hiraoka/stin-b...

azukiazusa のテックブログ2

import type { ... } from "./module" とは何者何か

TypeScript のプロジェクトにおいて `import type { ... } from "./module"` という記述を見たことはないでしょうか？ これは Type-Only imports and export と呼ばれる機能で TypeScript3.8 より導入されました。これは名前の通りモジュールから型情報のみをインポートするために使用されます。これは通常の利用用途ではあまり考慮する必要はないのですが、特定の問題に立ち向かうために利用されることがあります。

stin's Blog

Twitter ツイート埋め込み機能完全に理解した

Tweet URL を Tweet 埋め込みに変換して表示するように実装しました Tweet の URL だけを Markdown に記述すると ↓ Tweet 埋め込みの iframe が展開されるようにブログを実装しました！↓ https://twitter.com/jack/status/20 この記事では Tw...

stin's Blog

ブログをフルリニューアルした！

すてぃんブログレボリューション 21 (updated) このブログサイトをフルリニューアルしました！(5 記事しか書いていなかったのにもうリニューアルとかｗｗというのはそれはそう) 今回はこのリニューアルについて、こだわりポイントと技術的な内容の 2 つを書こうと思います。 こだわりポイント Web デザイン リニュ...

azukiazusa のテックブログ2

anonymous default export はやめたほうがいいかもね

`anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。

azukiazusa のテックブログ2

msw でリクエストを検証する方法

msw 使ってテストを記述した時期待したリクエストが送信されているのか検査したくなるかもしれません。リクエストを検証する方法と、それを回避する方法を紹介します。

blog.jxck.io

Markdown の Table 記法を CSS で実現する

本ブログは Markdown で原稿を書き、それを HTML に変換して表示している。このとき、CSS を用いて Markdown のシンタックスに似せた Style を適用している。例えば以下のように h2::before に content: '##' を指定するといった具合だ。しかし、これまで <table> だけはうまく Markdown 記法を再現する CSS が書けないでいた。そこで、周りの CSS 強者に実現できないか聞いてみたところ、@shqld, @araya, @yoshiko 達の協力を得て、かなりの完成度にすることができた。実現方法を記録する。

azukiazusa のテックブログ2

Storybook 単体でインタラクションテストを実施する

Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのインタラクションな操作を表現することができます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行することができるようですのでこちらを試してみます。

azukiazusa のテックブログ2

Web フロントエンドエンジニアなら当然 Rust も書けますよね？？

本記事では Yew を利用して Web アプリケーションを作成してみたいと思います。Yew は React や Vue などと同じくコンポーネントベースのフレームワークでインタラクティブな UI を作成できます。

azukiazusa のテックブログ2

Q：v-for の key に 配列のインデックスを使うのは犯罪ですか？#Shorts

結論： - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。

azukiazusa のテックブログ2

Q：TypeScript の関数の返り値の型を明示的に書かないのは犯罪ですか？#Shorts

TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。

azukiazusa のテックブログ2

Node.js に fetch がやってきた

Node.js で fetch が使えるようになる

blog.jxck.io

サイトの HTTP3 化と DNS HTTPS RR および Alt-Svc Header によるアドバタイズ

本サイトを HTTP3 対応し、Alt-Svc ヘッダおよび DNS HTTPS Resource Record によってそれをアドバタイズする構成を適用した。色々ハマったので作業のログを記す。

azukiazusa のテックブログ2

アクセシビリティを自動で検査する仕組みを整える

様々な方法でアクセシビリティを自動で検査します

azukiazusa のテックブログ2

Storybook の interaction testing と jest を組み合わせる

Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 `play()` 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを `Jest` など他の領域においても再利用できることです。

azukiazusa のテックブログ2

Vite だと require() が使えないよ〜

皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。

azukiazusa のテックブログ2

フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されているのか見ていきましょう。

blog.jxck.io

画像最適化戦略 AVIF 編

本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最適化シリーズ第 6 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編> 画像最適化戦略 AVIF 編

azukiazusa のテックブログ2

【Vue.js】ref vs reactive

さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨する方法がありませんので、どちらを使用するべきか迷ってしまうところです。 `reactive` と `ref` のそれぞれのメリット・デメリットを確認してみましょう。

blog.jxck.io

2021 年をふりかえる

例年通り 2021 年を振り返る。

azukiazusa のテックブログ2

Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな

Vitest は Vite ベースの JavaScript のテスティングフレームワークです。

azukiazusa のテックブログ2

Vuetify 3 Alpha の主な変更点

[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の Vuetify 3 が公開されています。開発スケジュールは以下のとおりになっています。

azukiazusa のテックブログ2

Nuxt3 の新しい機能いろいろ

現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。

blog.jxck.io

Web のセマンティクスにおける Push と Pull

筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。「自分は今 Push で実装しているのか、Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。(本エントリでの Ossification は、一般に言われている Protocol Ossification よりも、もう少し広義に捉えていることに注意)抽象的な話が続くため、なるべく具体例を交えて解説を試みる。

azukiazusa のテックブログ2

CSS で印刷用のスタイルを設定できる

大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示することを目的としているので印刷には不向きなものです。 とはいえ Web ページを印刷したいというニーズは少なからずあるとは思います、そのようば場合には `@media print` などのような印刷用の CSS を利用することで見た目を整えることができます

blog.jxck.io

自作 Markdown プロセッサベースの blog.jxck.io v2 リリース

本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。必要だった要件や、意思決定を作業ログとして記す。

azukiazusa のテックブログ2

フォーカストラップとは? 〜アクセシブルなモーダル〜

フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使われることが多いです。実際に例を交えて確認してみましょう。

azukiazusa のテックブログ2

Webpack5 Module Federation ではじめるマイクロフロントエンド

Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。

azukiazusa のテックブログ2

Youtube すごい裏ワザ！！！

Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を達成する方法として上げられています。

azukiazusa のテックブログ2

npm の人気パッケージ 「coa」と「rc」にマルウェアが埋め込まれた

2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。

azukiazusa のテックブログ2

ボックスモデル

CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それらのボックスが組み合わさることによってページ全体が表現されます。 ボックスは CSS において最も基本的な概念であり、ボックスを理解することは CSS でレイアウトを構成したり要素同士を揃えるための手助けとなることでしょう。

azukiazusa のテックブログ2

【TypeScript】type-challenges 中級編

[type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。

blog.jxck.io

ABNF Parser の実装

IETF の RFC では ABNF 形式の表現がよく使われ、たまに実装することがある。しかし、実装するたびに前のコードを引っ張り出して思い出す、を繰り返しているので、自分用にメモとしてやり方をまとめる。完全に我流であり、目的は「その ABNF が正しいかを確認すること」なので、高速化や効率性を求める実用実装とは目的が違う点は先に言っておく。

azukiazusa のテックブログ2

【TypeScript】type-challenges で学ぶ高度な型

type-challengesを知っていますか？ これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。 問題の回答はPlayground上で行えるので実際に手を動かしながら問題を解くことができます。型パズルを通じてTypeScript の高度な型について学んでいきましょう。

stin's Blog

react-router の型定義が知らない間にきれいになっていたので使い方を再考する

@types/react-router v5.1.9 から型定義がきれいになっていた react-router の型定義は受け取るパスが全て文字列のため、以前は TS コンパイラでパスの間違いを検出できませんでした。 そのため僕は typed-path-builder というライブラリを作って次の記事を書きました。 h...

azukiazusa のテックブログ2

lodash-es lodash 違い

[lodash-es](https://www.npmjs.com/package/lodash-es) とは [lodash](https://lodash.com/) を `ES module` 形式で提供しているライブラリです。

stin's Blog

Immutable.js で React ステートのモデルクラスを作る

Immutable.js で React ステート用モデルクラスを作る 昨今の React は関数コンポーネント一辺倒になり、 React エンジニアがクラス定義する場面はかなり減ってきているんじゃないかと思います。 関数コンポーネント内部で取り回されるステートもクラスインスタンスではなくプレーンなオブジェクトで、それ...

azukiazusa のテックブログ2

Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ #Shorts

質問来てた👉 Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ 結論：犯罪になる場合がある。 まず、配列の引数に `readonly` を付与しておけば以下の利点を得られます。 - うっかり関数の内部で引数の値を変更してしまうコードを書いてしまったときにコンパイルエラーが得られる - 関数の利用者が安心して関数を呼び出せる

azukiazusa のテックブログ2

【Vue.js】script setup 構文がすごくすごい

Vue.js 3.x から script setup 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。

azukiazusa のテックブログ2

Vuex 5 でどのように変わるのか。

現在リリースされている最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのものであり、 Vuex 3 と同じ API となっています。 Vuex 5 は Vue 3 において　Composition API による Reactivity API が登場したことにより Reactivitty API によってどのように Vuex をどうさせるか再考されたバージョンとなっています。

blog.jxck.io

Private Relay と IP Blindness による Fingerprint 対策

iOS15 がリリースされたため、Private Relay のベータを試すことができた。このようなサービスが提供されるようになった背景を踏まえ、挙動を簡単に確認しつつ、解説する。

azukiazusa のテックブログ2

【Vue3.2】styleタグ内でJavaScript変数をバインドできる

Vue.js3.2からは、JavaScriptの変数をCSS変数としてバインドできるようになりました。 つまりは、CSSの値を動的に設定できるということです。 ものは試しのやってみましょう。

azukiazusa のテックブログ2

Vue2のプロジェクトをVue3へマイグレーションsする

Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。

azukiazusa のテックブログ2

【Vue.js】Mixinを使うのはもうやめよう

禁止まで言ってしまうとなんだか強い言葉のように聞こえてしまいますが、mixinは基本的にあまり良いアプローチとは考えられません。 実際に、Reactにも過去にはMixinが存在していましたが現在は廃止されています。

azukiazusa のテックブログ2

あの日見たaxiosの機能を僕達はまだ知らない。

axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。 axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。

azukiazusa のテックブログ2

VuetifyのテーマをCSS変数として使用する

VuetifyのテーマをCSSの変数として生成して使用します。

blog.jxck.io

mouseover 中に表示される DOM のデバッグ

先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっていたのを見て、たまには小ネタもということで、いくつかのテクニックを紹介する。実際には、発生しているイベントを制御するというテクニックなので、応用すると色々使えるだろう。

azukiazusa のテックブログ2

青春JSDocはTypeScript先輩の夢を見ない

時には、TypeScriptという概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんなJavaScriptしか利用できない状況で代替手段となるのが、JSDocです。JSDocのアノテーションによって型を付与することによって最低限の支援を受けることができます。

azukiazusa のテックブログ2

【TypeScript】型定義をする際にもDRY原則を守る

DRY原則は非常に有名な原則ですし、普段から特に考えずとも自然と重複をさけるようなコードを書いている方も多いことでしょう。 とはいえ、TypeScriptにおいて`interface`や`type`などを用いて型定義を行う際に重複した型定義を行ってしまうことはないでしょうか？ TypeScriptには型定義をする際に重複を抑える手段は確かに存在します。そのようないくつかの方法を紹介します。

blog.jxck.io

Cross Origin iframe からの alert/confirm/prompt 呼び出しの無効化

直近で話題になっている Chrome の挙動変更についてまとめた。Reverse OT による延命はあるが、もともとが「セキュリティ的な理由でできなくする」のが目的のため、OT 期間中に修正が必要そうであることを先に述べておく。なお、これはあくまで筆者が調べた結果に基づいた見解であるため、該当する開発者は常に公式のアナウンスなどに注意し、最新の情報を踏まえて自身で判断すべきである。

azukiazusa のテックブログ2

Jest setTimeout()のようなでタイマー関数をテストする

JavaScriptには、setTimeout()のような時間に関する便利な機能が用意されています。しかし、これらの関数はユニットテストを記述する際に厄介です。Jestのタイマーモックはこのような場合に利用できる便利な機能です。

azukiazusa のテックブログ2

【TypeScript】型アノテーションと型アサーションの違い

型アノテーションと型アサーションによる変数宣言は、一見同じ結果をもたらすように見えます。しかし、型アサーションには明確な欠点が存在します。

azukiazusa のテックブログ2

【mongoose】日付のカラムで時間ごとにグループ化してドキュメント数をカウントする

タイトルのとおりです

azukiazusa のテックブログ2

【mongoose】Cannot overwrite 'Model' model once compiled. エラーの直し方

mongooseで遭遇するCannot overwrite 'Model' model once compiled. エラーの解消方法です

azukiazusa のテックブログ2

JSONオブジェクトのあれこれ

`JSON`オブジェクトはJavaScriptにおいて、JSONをパースしたり値をJSONに変換するためにもっぱら使われます。 普段使っている`JSON.stringify()`や`JSON.parse()`にはオプショナルな引数を渡すことによってその振る舞いを変更することができます。

azukiazusa のテックブログ2

【JavaScript】Objectがプリミティブに変換されるとき

JavaScriptがプリミティブな値に変換されるとき、string型に変換されようとするか、number型に変換されようとするかで挙動が変化する

blog.jxck.io

本サイトの AMP 提供の停止とここまでの振り返り

前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期待しないで欲しい。

azukiazusa のテックブログ2

ReactのErrorBoundaryで内部のエラーをキャッチする

Error Boundaryとは、自身の子コンポーネントツリーで発生したJavaScriptのエラーをキャッチ・記録しフォールバックのUIを表示するコンポーネントです。 例えるなら、`try/catch`構文を行うコンポーネントのようなものと言えます。

azukiazusa のテックブログ2

仕事で役に立つかもしれないHTML5のマイナー要素

HTMLは書いたことがありますか？プログラミング初心者が最初の一歩として書き出すのに好まれる言語ですが、セマンティクスを追求すると奥深い言語だとわかります。タグの種類も数多くあり、全てを把握している人はそう多くなないでしょう。 今回は、そんなHTMLの普段の仕事では余り見かけないであろう要素を紹介していきます。

azukiazusa のテックブログ2

Nuxt Sentryでユーザーフィードバックを受け取る

Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。 Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、このエラーコンポーネントにダイアログを表示させる処理を書いていきます。

azukiazusa のテックブログ2

Node.js(Express)でcsvを生成してダウンロード

Node.js(Express)でCSVファイルを生成してダウンロードさせます。

blog.jxck.io

Non AMP SXG による Prefetch 対応と AMP 提供の停止

本サイトを (Non AMP) SXG に対応した。これにより、Google のモバイル検索では、結果を表示した時点でこのサイトの SXG が Prefetch され、結果を選択したら Cache から素早く表示されつつ、アドレスバーにも本サイトのものとして表示される。この、Non AMP SXG 対応にあたって、本サイトの AMP の提供も停止することになった。移行の作業ログと、関連する流れについて記す。

azukiazusa のテックブログ2

CKADにも合格した

開発者向けのK8sの試験であるCKADにも合格したので同様に合格体験記を記載したいと思います。 といっても、大枠の部分はCKAのときとあまり変わらないのでCKAと異なる部分を中心に記載したいと思います。

azukiazusa のテックブログ2

Vue CLIで作成したプロジェクトをViteに置き換える

Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。

blog.jxck.io

IE11 サポート終了の歴史

IE11 が役目を終えていく流れを記録として残す。特に MS からのアナウンスや、それに準じた各サービスの反応、特に IE サポート終了アナウンスをまとめることで、IE11 というブラウザがどのように終了していったのかを記録することを目的とする。もともとは Google Docs にまとめていたものである。日付はアナウンスの公開日サポート終了日ではないサポート終了日も書いておけばよかったけど今からやり直す気力はない、、赤字 は MS 関連もしくはサポート終了の影響が大きそうなアナウンスWindows における IE11 自体のサポート終了については以下を参照https://www.atmarkit.co.jp/ait/articles/1503/11/news134.htmlできればある程度の結論が出るまでこのエントリを更新していきたい

azukiazusa のテックブログ2

KubernetesのapiVersion

Kubernetesのマニフェストを作成するときには、`apiVersion`フィールドを指定する必要があります。 例えば`Pod`の場合には`v1`を、`Deployment`の場合には`apps/v1`を指定しますが、これらはどのようなルールで記述するのでしょうか。

azukiazusa のテックブログ2

etcdのバックアップとリストア

etcdは、kubernetesのクラスターの情報を保存するkey-valueストアです。

azukiazusa のテックブログ2

kubectl JSONpath

kubectlはアウトプットの形式としてJSONPathをサポートしています。

blog.jxck.io

Public Suffix List の用途と今起こっている問題について

Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。最近、このリストへの追加リクエストがあとを絶たず、問題になっている。そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。

azukiazusa のテックブログ2

Vue.jsでIE11対応

人生でときにはIE11に対応させなければいけない時があるでしょう。Vue.jsでIE11に対応しなけらばいけなくなったときに読むものを記載しておきます。

azukiazusa のテックブログ2

e2eテスティングフレームワークCypress

Cypressは、JavaScript製のE2Eテスティングフレームワークです。 実行速度が早い、HTTPリクエストの実行を待つなどテストが壊れにくい仕組みが整っています

azukiazusa のテックブログ2

Kubernetes Tips

知っていると時間を短縮できるようなkubectlコマンドのtipsです。

azukiazusa のテックブログ2

Sassの基礎文法

SassはCSSのメタ言語です。CSSに比べてコード量が減り、保守性が優れるといった開発体験を向上させてくれる特徴があります。

azukiazusa のテックブログ2

Kustomizeとは

Kustomizeとは、Kuberbetsコミュニティのsig-cliが提供しているマニフェストのテンプレーティングツールです。環境ごとにマニフェストを生成したり特定のフィールドを上書きするといった機能が提供されています。

azukiazusa のテックブログ2

KubernetesのパッケージマネージャーHelm

Helmは、Kubernetsのパッケージマネージャーです。 例えば、npmを利用して第三者が作成したパッケージをレポジトリで管理して検索・インストールするように、Helmではチャート(Chart)と呼ばれる設定ファイルをレポジトリで管理しています。

azukiazusa のテックブログ2

Kubernetes用語集

仕事上kubernetesを学ぶ必要が出てきました。 筆者のレベルは、Docker・kubernetesの概念・必要性をやんわりと理解している状態です。 勉強をすすめる上で、わからない用語が次々と出てきたて頭の中がパンクしそうになったので、簡潔に随時まとめることとしました。

azukiazusa のテックブログ2

DenoでREST API

この記事では、Denoを使い簡単なCRUD操作を行うREST APIを構築します。

blog.jxck.io

Web Font のメトリクス上書きによる CLS の改善

WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、Layout Shift が発生してしまう。これを防ぐ方法として、CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。

stin's Blog

React Context を export するのはアンチパターンではないかと考える

Context を export するな みなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React C...

azukiazusa のテックブログ2

TailwindCSSでダークモード

昨今のアプリケーションでは、ダークモードを提供しているのがもはや当たり前になってきました。 OSのレベルでダークモードを設定することができ、ダークモードが提供されていないサイトは眩しく感じしてしまって敬遠してしまうなんて経験はあるのではないでしょうか？ そんな一般化されたダークモードの提供をTailwind CSSで実装します。

azukiazusa のテックブログ2

はじめてのGraphQL

GraphQLとは、Facebookが開発したAPI向けのクエリ言語です。RESTに変わるサーバーとクライアントの通信手段として注目を集めています。 リクエスト・レスポンスの型の定義ができる、フロント側から取得するデータを選択することができるなどの特徴があります。 GraphQL自体はSQLのようなクエリ言語としての位置づけなので、Java、Node.js、Ruby、JavaScript、Pythonなど様々な言語で利用することができます。

azukiazusa のテックブログ2

Sapper + contentful + VercelのJamstackで高速なブログを構築する

JamstackのJamはJavaScript/APIs/Markupの頭文字です。 従来の手法と比較して、高速化・堅牢なセキュリティ。より簡単なスケーラブル・開発体験の向上という特徴を持っています。実行時にAPIから取得したデータを動的にレンダリングせずに、ビルド時にAPIから取得して静的なHTMLとして出力されます。

blog.jxck.io

Cache-Control: must-understand ディレクティブとは何か

IETF が策定する HTTP の仕様が更新されようとしている。ここには、Cache の仕様も含まれており、そのなかで must-understand という Cache-Control のディレクティブが追加されている。このディレクティブが追加された経緯と仕様について解説する。

azukiazusa のテックブログ2

【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル

この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。 - Svelteの基礎文法 - Svelteのルーティング - Svelteのストア HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。

stin's Blog

Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える

Fragment をコンポーネントのトップに置くな 「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 これは、この MyComponent が生成する HTML 要素が h1 と p のふたつあるということを意味します。 この書き方がアンチパターンではない...

azukiazusa のテックブログ2

Vue3 コンポーネントのテスト

コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。

blog.jxck.io

Structured Field Values による Header Field の構造化

HTTP Header の値を構造化する Structured Field Values の仕様が RFC になった。RFC 8941: Structured Field Values for HTTPこの仕様の詳細について、筆者の実装を交えて解説する。

azukiazusa のテックブログ2

TailWindCSSとは

TailWindCSSはBootStrap・Materialize CSSなどに代表するCSSフレームワークの一つです。 その特徴として、**Utility First**を掲げています。

azukiazusa のテックブログ2

JavaScriptライブラリ Svelteとは

Svelteとは、ReactやVue.jsのような宣言的UIライブラリの一種です。その最大の特徴は、ReactやVue.js・Angularと異なりSvelteはコンパイラであることを謳っているところです。Svelteによってコンパイルされたコードは、すべてVanilla JS - ネイティブのJavaScript- にで生成されます。 そのため、コンパイル後のファイルサイズも小さくパフォーマンス上での利点が期待されています。

stin's Blog

個人ブログを作ったので初記事を書く

個人ブログを開発しました 「開発」という単語がふさわしいのか不明です。 開発 作成 制作 開発というと大げさな気がします。作成というと軽い気がする。 制作は工作とか美術っぽい。 CMS 使わずにフルスクラッチなので開発でいいでしょう。 stin's blog を支える技術 「〇〇を支える技術」っていう言い回しを使ってみ...

azukiazusa のテックブログ2

Firebase Functions https.onCall()トリガーでアプリから簡単に呼び出す

Firebase Functionsとは、Firebaseの提供するサーバレスフレームワークです。HTTPSリクエストによって関数を実行したり、FireStore・Cloud Storage・AuthenticationのCRUDイベントをトリガーに関数を実行することができます。使用できる言語はJavaScript・TypeScriptに限られているというデメリットはあるものの、手軽にデプロイでき簡単にプロジェクトの他のFirebaseの機能と統合できるメリットがあります。

blog.jxck.io

2020 年をふりかえる

例年通り 2020 年を振り返る。

blog.jxck.io

AMP SXG 対応

本サイトを AMP SXG に対応した。その作業ログを記す。

azukiazusa のテックブログ2

JavaScript テストフレームワークのJestのモックがすごくすごい

Jestは、JavaScriptのシンプルなテスティングフレームワークです。ゼロコンフィグを謳っており、細かい設定なしに動作させることが可能です。 Jestの中でも特に強力な機能がモッキングです。Jestのモックを利用すれば、外部ライブラリであろうとモジュール外のオブジェクトを簡単にモック化することができます。 実際に、テストコードの例を見ていきましょう。

azukiazusa のテックブログ2

Vue.js Composition APIでTODOアプリ作成

Vue3 Composition APIを使って、ハンズオン形式でTODOアプリを作成していきます。

azukiazusa のテックブログ2

イマドキのJavaScriptの書き方

JavaScriptはES2015以降から言語自体が大きく変化しました。 ES2015以降も、毎年JavaScriptはアップデートが行われており、最新の使用はES2020となっています。 このように、JavaScriptという言語は日々進化を遂げています。ES2015より前の書き方の多くが非推奨となっており、過去のWebや本の情報は現在ではあまり役に立たなくなっています。 そんなJavaScriptのイマドキの書き方を見ていきましょう。

blog.jxck.io

CSS Layout API で Masonry Layout

Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。上の例の場合は、Height が不揃いの画像を並べる上で、左から敷き詰め、折り返したら既にある画像の高さに合わせて 2 列目が始まるというロジックになる。これを実現するには、割と複雑な CSS を書く必要があり、様々なサイトで CSS ライブラリや、Grid などを用いて再現する方法が紹介されている。これをそのまま CSS の標準にする作業が Layout API の文脈で行われており、既に一部が(主に Firefox で)実装されている。仕様は以下だ。CSS Grid Layout Module Level 3https://drafts.csswg.org/css-grid-3/従来の CSS Grid は、縦横が揃った Grid を展開し、そこに対して要素を割り当てるのが基本だが、それでは縦が揃わないため Masonry は実現できない。そこで、grid-template-rows / grid-template-columns へ masonry を追加し、これを指定すると Masonry レイアウトが実現できるようになる。省略すると grid: masonry / ${column} になるため、column に repeat などを指定すれば Pinterest のようなレイアウトが実現できる。3 列の Masonry Layout は以下だ。<style>.grid { display: inline-grid; grid: masonry / repeat(3, auto); border: 1px solid; gap: 1vw; masonry-auto-flow: pack; width: 32vw;}img { width: 10vw;}</style><div class=masonry> <img> <img> <img> ...</div>敷き詰めるためのアルゴリズムは仕様で決まっている。https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithmデフォルトでは、敷き詰める際に一番余白が空いているところに画像が挿入される。これを制御するプロパティとして masonry-auto-flow が定義されており、next にすると画像の HTML 上での出現順に積み上げるようにすることもできる。masonry-auto-flow: pack;masonry-auto-flow: next;他の値もあるがまだ定義が明示されていないようだ。このあたりのアルゴリズムは要件によって多様だと思われるため、仕様の策定とともに変わる可能性は高いだろう。https://drafts.csswg.org/css-grid-3/#masonry-auto-flow

azukiazusa のテックブログ2

すぐに使える！JavaScriptの華麗な配列操作

JavaScriptで配列操作をする際には、まずはJavascriptが持つ配列のメソッドを眺めて見るとよいでしょう。JavaScriptはライブラリに頼らなくとも自前で高度な操作を可能にしてくれます。 組み込みの配列メソッドはたくさんありますが、その中で私がよく使うメソッドを紹介します。

blog.jxck.io

Web 技術の調査方法

「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。スコープとしては、ライブラリ、ツール、フレームワークなどではなく、Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。

azukiazusa のテックブログ2

Go言語 テスト

Go言語の提供するテストはシンプルです。テストのために覚えることは多くはありません。 Go言語の単体テスト用の機能は`testing`という標準パッケージとして提供されています。ベンチマークやカバレッジ、標準出力のテストなどをカバーしています。 また、テストは`go test`コマンドによって実行されます。サードパーティのツールなどは必要ありません。まずはこの`testing`パッケージの内容を見ていきます。

azukiazusa のテックブログ2

Go 言語　標準パッケージでHTTPサーバー

Go言語は、標準パッケージでHTTPサーバーと基本的なHTTPクライアントを提供します。 使用するのは、net/httpというパッケージです。

azukiazusa のテックブログ2

Go言語 ポインター

Go言語には、ポインタがあります。 ポインタとは、メモリのアドレスのことです。アドレスは`0xc0000b4008`のような16進数で表されます。

azukiazusa のテックブログ2

Go言語 構造体・インターフェース

構造体(Struct)とは、フィールドの集まりです。JavaScriptのオブジェクトよく似ており、データをまとめて1つの集まりの値として表現します。 例えば、座標を表すには緯度と経度がフィールドとして必要になるでしょう。緯度と経度をそれぞれ別の変数として宣言することはできますが、間違いが生じやすく面倒な処理になってしまいます。

azukiazusa のテックブログ2

Go言語　コレクション（配列・スライス・マップ）

配列は決まった長さを持つ要素を並べた順序のあるコレクションです。 Go言語の配列は固定長になっており、宣言時に長さと要素型を指定します。 長さは後から変更することはできません。 Go言語の配列は柔軟性に欠けるため、実際にはあまり使用されません。可変長であるスライスがよく使われます。 マップはキーと値によって宣言されます。これは、連想配列のようなものです。

azukiazusa のテックブログ2

Go言語　型・関数・メソッド

Go言語は静的型付け言語であり、全ての変数は何らかの型に属し、異なる型同士の演算といった問題点の多くはコンパイル時に検出されます。 関数の宣言にはfuncキーワードを使用します。関数の引数と戻り値には型を指定します。戻り値を複数持たせられる、戻り値に名前をつけることができるといった特徴があります。 クラスやオブジェクトはないですが、メソッドはあります。メソッドは型に紐付けられます。

azukiazusa のテックブログ2

Go言語基礎文法

Go言語(Golang）は、2009年にGoogleによって開発されたオープンソースの静的型付け、コンパイルされるプログラミング言語です。Go言語はコンパイルされるプログラミング言語です。 Go言語はシンプルで、信頼性が高く、効果的なソフトウェアを構築します。

azukiazusa のテックブログ2

CSSの設計

今この文章を読んでいる人ならば、少なくともCSSには触れたことがあると思います。CSSはとても簡単に記述できますが、それゆえにCSSは「壊れやすい」のです。なぜCSSは壊れやすくなってしまうのでしょうか。CSSには「すべてがグローバルスコープ」「複雑化するWeb開発」といった問題点があげられます。そのような状態に対する解決策として、CSSの設計が誕生しました。

blog.jxck.io

Puppeteer で静的サイトの Font Subsetting

Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。

blog.jxck.io

WebCodecs と WebTransport でビデオチャット

ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。これにより、映像や音声の変換などといったユースケースへの応用も可能だ。本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。

blog.jxck.io

img の srcset 指定時に選択される画像

<img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。

blog.jxck.io

Webbundle によるサブリソース取得の最適化

WebBundle を用いてサブリソースのみを Bundle する、Subresource Bundle の策定と実装が進んでいる。これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。現時点での仕様と実装を解説する。Intent to Prototype: Subresource loading with Web Bundles

blog.jxck.io

ローカル開発環境の https 化

Web の https 化が進み、それに伴って https を前提とする API も増えてきた。そうした API を用いた開発をローカルで行う場合、localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。特に推奨するつもりはない。

azukiazusa のテックブログ2

Express + TypeScript + MondoDBでやる

Expressは、Node.jsのWebアプリケーションでもっとも利用されているフレームワークです。Expressは、HTTPによるWeb上の相互作用とNOde.jsプラットフォームの中間に位置するので、ある種のミドルウェアと言えます。 Expressを利用して、MVCモデルのアプリケーションを開発してみます。 データベースにはMongoDBを利用し、さらにTypeScriptで書いてみます。

blog.jxck.io

QuicTransport によるアプリケーションレイヤでの QUIC 活用

WebTransport の Quic 実装である QuicTransport の開発が Chrome で行われている。Chrome で Origin Trials が開始されたので仕様と実装を解説する。

azukiazusa のテックブログ2

Node.js - サーバーサイドのJavaScript

Node.jsは、V8 Javascriptエンジン上に構築されたJavaScriptの実行環境です。サーバーサイドのJavaScript環境であり、非同期、イベント駆動といった特徴があります。

azukiazusa のテックブログ2

Firebase④ Cloud FireStore - クエリ

Firebase4回目の記事です。 前回は、Firebaseにおける単一のドキュメントに対するCRUD操作までを取り扱いました。 今回は複数のコレクションから取得するためのクエリについて説明していきます。

blog.jxck.io

Site Isolation 及び Web のセキュリティモデルの更新

Origin は Web におけるセキュリティモデルの一つとして、コンテンツ間の Communication に関する境界を定義し、リソースを保護してきた。しかし、Spectre の発覚以降、Communication に関する制限だけではなく Isolation によるメモリレベルでのアクセス制御が必要となった。そこで現在作業されているのが、CORB, CORP, COEP, COOP といった仕様群であり、これは Web におけるセキュリティモデルの更新作業と見ることができる。概要と現状について解説する。

azukiazusa のテックブログ2

Denoとはなにか - 実際に使ってみる

Denoは、Node.jsの製作者であるRyan Dahlによって作られた、新しいJS/TSランタイムです。簡単に説明すると、Node.jsのイケてなかったところを改良したものがDenoになります。

blog.jxck.io

mozaic.fm v3 リリースと Podcast の PWA 化

mozaic.fm をリニューアルし v3 としてリリースした。今回の更新は以下のような変更/修正を実施している。PWA 化before install promptBackground FetchPeriodic Background SyncContent Index APIBadging APIPlayer UI の刷新Pure WebcomponentsMedia Session APIWAI-ARIAPortal PreviewScreen Wake LockSecurityCSP v3 (not Report-Only)Cross Origin Resource PolicyCross Origin Opener PolicyCross Origin Embedder PolicyExpect-CTNELReferrer Policyその他Transpile LessScroll To Text Fragment SearchSpotifyWIPTemplate InstantiationHTML ModulesDocument PolicySilent PushWASM ID3SXG実施したモチベーションおよび、実施内容について記す。先に言っておくが、実装も仕様も全く安定してないものを、エミュレータだけでエスパー実装しているので、実機で動く保証もなく、しょっちゅう壊れる。サイトが壊れて聴けなかったらご愛用の Podcast アプリで聞いてほしい。

azukiazusa のテックブログ2

Firebase③ Cloud Storage

Firebase3週目の記事です。 今回は、主に画像などのデータを保存するストレージ機能を提供するCloud Storageを取り扱います。 Vue.jsを利用したブログにサムネイル画像を設定する機能をもとに説明していきます。

azukiazusa のテックブログ2

JavaScript ECMAScriptとかBabelとか

JavaScript ECMAScriptとかBabelとか

azukiazusa のテックブログ2

Firebase④ Cloud FireStore

Cloud FireStore(以下FireStore)とは、FireBaseの提供するドキュメント指向型 のNoSQLデータベースです。 NoSQLとしての特徴としてのスキーマレス、スケーラブルといった特徴のほかにリアルタイムアップデート、セキュリティルール、オフラインサポートといった独自の特徴を備えており、特にバックエンドを介さずにクライントサイドから直接操作できるという点が大きなポイントです。 また、β版から正式リリースされたのが2019年2月ということもあり、比較的新しい技術です。

blog.jxck.io

Periodic Background Sync 及び Web を Install するということ

メールクライアントや RSS リーダーのようなユースケースを PWA で実装する場合、バックグラウンドで定期的にタスクを実行したいケースがある。このユースケースに特化した API として提案されているのが、Periodic Background Sync(PBS) だ。しかし、この API を取り巻く議論は「Web にアプリのような API を持ち込む上での難しさ」を物語っている。この API が Web において正当化できるかどうかは、Project Fugu に代表される Application Capabilities を Web に持ち込む場合の試金石になりそうだ。現時点での、仕様、実装、議論について解説する。

azukiazusa のテックブログ2

Firebase② Firebase Authentication

Firebase第二弾です。 Firebase Authenticationのメールアドレスによるログインと、FireStorageについて説明していきます。

azukiazusa のテックブログ2

firebaseとは

Firebaseは、Googleが提供するバックエンドサービスです。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。 認証、データベース、ストレージなどたくさんの機能が使用できます。

blog.jxck.io

Scroll to Text Fragment を用いたサイト内検索の実装

Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。

blog.jxck.io

牧歌的 Cookie の終焉

Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。冷静に考えればふざけてるとしか思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。そんな Cookie が今どう使われ、3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。

blog.jxck.io

3rd Party Cookie 調査のための Web 広告導入

昨今、特に広告サービスを中心に 3rd Party Cookie を用いたトラッキングについての議論が多く行われている。Safari による ITP や、Chrome による Privacy Sandbox への移行など、技術的な変化も著しい。こうした技術の変遷を観測し、調査検証を行うために、これまで避けていた Web 広告を本サイトに導入することにした。

blog.jxck.io

Service Worker の Background Fetch によるメディアのキャッシュ

Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。これにより、通常 Range Request で取得するような、大きなファイルを事前にダウンロードしておくことができるようになる。この API と、Service Worker およびブラウザにおける Range Request/Partial Response の扱いについて記す。

blog.jxck.io

ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver

Web サービスにおいては通常、Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。しかし、Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。

blog.jxck.io

2019 年をふりかえる

例年通り 2019 年を振り返る

blog.jxck.io

WebBundle によるコンテンツの結合と WebPackaging

依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様であり、組み合わせれば WebBundle に対して署名することでコンテンツの配信を通信と分けて考えることができる。Signed HTTP Exchange に比べると格段に簡単な仕様なので、現状のフォーマットと挙動について解説する。draft-yasskin-wpack-bundled-exchanges-latest

blog.jxck.io

Intel NUC で自宅 Ubuntu 開発環境構築と SSH Port Forwarding によるアクセス

家では Mac を使っていたが、やはり Ubuntu 開発環境を作ることにした。前々から気になっていた Intel NUC をベースに Ubuntu 環境を構築。また、外出時もアクセスできるように SSH Port Forwarding を使って、固定 IP の無い家に外からアクセスできるようにした。備忘録を兼ねて記す。

blog.jxck.io

Scroll To Text Fragment と :~:text

ページ内の特定の位置へのスクロールは、URL フラグメントと HTML の ID 属性を用いて行われていた。しかし、ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。

blog.jxck.io

Noto Sans Hinted と font-feature-settings: &apos;palt&apos;

Noto Sans のサブセット生成を見なおし、Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。作業と検証の記録を兼ねて、実施結果を記す。

blog.jxck.io

Promise.allSettled と Promise.any

Promise.allSettled() と Promise.any() の仕様策定が進んでいる。両者は近いレイヤの仕様では有るが、作業の進捗には差がある。Promise.allSettled は Stage 4 であり、Chrome や Safari TP には実装もされているPromise.any は Stage 2 であり、実装はまだないここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。

blog.jxck.io

WebTransport と WebCodecs そして Web はどこまで &quot;ゲーム化&quot; するか

Transport として HTTP over TCP を基本としていた Web のあり方は大きく変わり、転送するメディアも HTML だけに止まらなくなってきた。その対角線上にあるユースケースとして、UDP でバイナリデータを双方向にやり取りする「ゲーム」があるだろう。WebSocket/MSE/WebRTC/WASM など、Web で Game を行うためのパーツは徐々に揃いつつあり、過去に比べればだいぶ状況は改善してきていると言える。しかし、できることが増えればこそ、それぞれのパーツの不足する部分が浮き彫りになる。WebTransport と WebCodecs は、主にそんな Web Game の需要から「本当に必要としているもの」を再考した結果をまとめた提案と言えるだろう。これが、単に Web Game 開発の需要を満たすだけで終わるものか、ゲーム以外の Web の開発にどこまで影響を及ぼすか。現状の仕様の提案とそのモチベーションを元に、考察していく。

blog.jxck.io

Nullish Coalescing と Optional Chaining

JS における null/undefined の扱いを改善するための 2 つの機能が提案されている。Nullish Coalescing Operator (stage 3)Optional Chaining Operator (stage 3)いずれも Stage 3 に進み、実装も始まっているので、現時点での解説を行う。

blog.jxck.io

Display Locking によるレンダリングの最適化と Async DOM

React や lit-html などにより、DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。これは、現在の標準 API には、規模が大きく処理が複雑なアプリケーションを開発する際に、足りてないものがあると考えることが可能だ。課題の 1 つとして「DOM 操作が同期処理である」という点に着目し、Async DOM という文脈でいくつかの提案が行われた。今回は、その提案の 1 つであり Chrome で実装が進んでいる Display Locking について現状を解説する。

blog.jxck.io

画像最適化戦略 Lazy Loading 編

長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。ここでは、特に画像 <img> に注目し、Lazyloading の議論の変遷を踏まえた上で現状を解説する。画像最適化シリーズ第 5 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編> 画像最適化戦略 Lazy Loading 編

blog.jxck.io

mozaic bootcamp 2019

2019/4/28 - 5/1 の 4 日間で、mozaic bootcamp 2019 というひたすら Web 技術を叩き込むイベントを開催した。その内容やモチベーションについては、以下で話している。ep48 Monthly Web 201901 | mozaic.fmこのイベントの概要と目的について記録する。

blog.jxck.io

Web における技術の解釈とエコシステムによる合意形成プロセスについて

「ユーザが意図する挙動」とは何か。技術的に可能であるが「やらない方が良いこと」は、誰がどう決めるのか。Web には仕様、実装、デプロイ、そしてユーザの利用とフィードバックによって、そうした合意がゆるやかに形成されていく仕組みがあると筆者は考えている。しかし、これは明文化されているわけでもなく、その全体像を把握するのは一般には難しいだろう。今回は、ちょうど何度目かの議論が再発している ping 属性を例に、この合意形成の概観について解説を試みる。

blog.jxck.io

Private Class Field の導入に伴う JS の構文拡張

ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。提案されている構文や、挙動について解説する。

blog.jxck.io

安全な文字列であると型で検証する Trusted Types について

脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。WICG/trusted-typesIntent to Experiment: Trusted Types

blog.jxck.io

Cache Digest と HTTP2 Server Push の現状

httpbis のチェアである mnot から、Cache Digest についての現状確認が ML に投稿された。もしこのまま反応がなければ、Cache Digest は終わり、対ブラウザキャッシュの Server Push は現実的ではなくなる。

blog.jxck.io

次世代 Web カンファレンス 2019 開催後記

2019/1/13(日) に、以下で告知した「次世代 Web カンファレンス」を開催した。次世代 Web カンファレンス 2019 開催告知 | blog.jxck.io前日に初雪が観測されて心配したが、天気にも恵まれ、開催趣旨の通り予定していたセッションを全て終えることができた。次世代 Web カンファレンス - connpass各セッションはこれから録画を見るが、登壇者達に聞いた感触としては、概ね熱い議論ができていたようなので、場を設けた価値はあったと思う。録画や togetter はすでに上がっている。

blog.jxck.io

2018 年をふりかえる

例年通り 2018 年を振り返る

blog.jxck.io

WebPackaging の Signed HTTP Exchanges

WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。Signed HTTP Exchanges: Signing (コンテンツに署名する)Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる)Loading Signed Exchanges: Loading (そのコンテンツをロードする)本エントリでは、各仕様を Signing/Bundling/Loading と記す。現状、Signing および Loading の仕様策定が進んでおり、Chrome は Experimental な実装を行っている。全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。

blog.jxck.io

prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features

macOS Mojave は OS レベルで Dark Mode に対応した。しかし、Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。これを用いた Dark Mode 対応と、本ブログの Dark Mode 対応、および策定中の User Preference Media Features について解説する。

blog.jxck.io

Cookie の性質を利用した攻撃と Same Site Cookie の効果

Cookie はブラウザによって保存され、紐づいたドメインへのリクエストに自動で付与される。この挙動によって Web におけるセッション管理が実現されている一方、これを悪用した攻撃方法として、CSRF や Timing Attack などが数多く知られており、個別に対策がなされてきた。現在、提案実装されている SameSite Cookie は、そもそもの Cookie の挙動を変更し、こうした問題を根本的に解決すると期待されている。Cookie の挙動とそれを用いた攻撃、そして Same Site Cookie について解説する。

blog.jxck.io

Referrer-Policy によるリファラ制御

リファラはリンクなどでページを遷移する際に、遷移元の URL をリクエストの Referer ヘッダに載せる仕様である。この付与はブラウザが自動で行うため、場合によっては非公開として扱っている URL が意図せず漏れることがある。この挙動を制御することができる、Referrer-Policy ヘッダについて解説する。

blog.jxck.io

次世代 Web カンファレンス 2019 開催告知

2019/1/13(日) に、「次世代 Web カンファレンス」を開催します。名称次世代 Web カンファレンス日時2019/1/13(日) 9:00-17:30場所法政大学富士見ゲート 4F 401, 402, 403後援法政大学情報科学部配信Youtube募集Connpass参加費無料(参考) 2015 年実施のログは以下です。bloghttp://jxck.hatenablog.com/entry/next-web-conf-2915connpasshttps://nextwebconf.connpass.com/event/19699/録画405, 406, 407

blog.jxck.io

Clear-Site-Data Header

Clear-Site-Data Header の実装が進んでいる。このヘッダについて解説する。

blog.jxck.io

Element.toggleAttribute

非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。この仕様について解説する。

blog.jxck.io

Monthly Web の作り方 2018 年版

筆者がやっている Podcast である mozaic.fm の中で、Monthly Web という月ごとの Web の動向をまとめる回をやっている。未だに落ち着いたとはいえないが、2017 年 7 月に初めてから 1 年続けたので、結果として現状どうなっているかをログに残す。

blog.jxck.io

Web Authentication API で FIDO U2F(YubiKey) 認証

Web Authentication(WebAuthN) API の策定と実装が進んでいる。これを用いると、FIDO(Fast IDentity Online) U2F(Universal Second Factor) 認証が可能になる。今回は YubiKey 認証の実装を通じて、ブラウザ API の呼び出しと、サーバ側で必要な処理について解説する。https://w3c.github.io/webauthn/

blog.jxck.io

Layered APIs と High Level API の標準化指針

Extensible Web Manifest 以降、標準化作業は Low Level API にフォーカスし、一定の成果が出ている。そこで、これらをベースとし、よりアプリレイヤの需要を満たすための High Level API をどう標準化するか、という点について指針が提案された。基本は、Low Level API を元に Polyfill を作り、そこからのフィードバックにより策定を進めるという方針だ。合わせて ES Modules の Import を用いて、polyfill とネイティブ実装をスムーズに切り替える拡張が提案されている。本記事では Layered APIs (LAPIs) と呼ばれる、この一連の枠組みについて解説する。また、同等の話を 東京 Node 学園 #tng30 で行った資料は以下である。Web over Layered APIs

blog.jxck.io

Linux で出力を別の shell に pts 経由で表示する

tmux, screen, terminal のタブなど、shell を複数起動する方法はいくつかある。Linux では、pts を経由すれば、ある shell の出力を簡単に別の shell で表示することができる。これを応用すると、簡易ダッシュボードを作り色々便利に使うことができる。

blog.jxck.io

Certificate Transparency の仕組みと HPKP から Expect-CT への移行

本サイトは HPKP (public-key-pins-report-only) に対応していた。しかし、HPKP はその運用性の問題などもあり、Chrome はすでに deprecate するアナウンスを出している。代替の仕様として、Certificate Transparency (CT) のエコシステムと、それを利用する Expect-CT の策定/実装が進んでいる。CT エコシステムの概要、Log の登録/検証、HPKP から Expect-CT への移行などについて解説する。

blog.jxck.io

Feature Policy による Permission Delegation

ブラウザの機能を制限する Feature Policy の実装が進みつつある。Feature Policy は、ブラウザが持つ機能について選択的に許可/制限を行う API だ。AMP のように特定の機能を制限する目的にも使えるが、クロスオリジン iframe に対する権限移譲のための API としても使用される。Feature Policy のモチベーションおよび適用方法について、類似する CSP や iframe sandbox と合わせて解説する。なお、今回解説する内容は、まだブラウザの実装に反映されていない部分があるため、注意されたい。

blog.jxck.io

WebFont の WOFF2 対応によるサイズ最適化

Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。本サイトは WOFF 形式での Web Font を提供しているが、WOFF2 形式では WOFF よりも 12% 程度圧縮率が高いため、本サイトでも WOFF2 に移行することとした。フォーマット変更による効果について解説する。

blog.jxck.io

Safari による User-Agent 固定化と Web における Feature Detection

少し前に Safari Technology Preview 46 がリリースされた。Service Worker のアナウンスに目がそちらに盗まれている一方、しれっと以下の一文がある。Froze the user-agent string to reduce web compatibility risk and to prevent its use for fingerprinting--- Release Notes for Safari Technology Preview 46すぐには無理だろうと思ったが、TP47 でもこれを打ち消すアナウンスはなかったため、これを取り上げることにした。TP はあくまで Preview であり、これが このままリリースされるとは限らない 点に注意したい。今回は、これがそのままリリースされた場合の影響について考察するため、現在の User-Agent の使われ方を解説する。

blog.jxck.io

Apple の AOM 加盟と AV1 への期待

Apple が Alliance for Open Media に加盟したという報道があった。もし、このまま Safari が AV1 をサポートするまで至れば、WebRTC のコーデック戦争に一旦の落ち着きが出ると思われる。Apple joins alliance to shrink your online videos - CNETこの動向について解説する。

blog.jxck.io

record to map in Erlang

Record を Map に変換するだけのマクロ

blog.jxck.io

Form で submit されたデータの収集と FormData &amp; URLSearchParams

<form> の onsubmit をフックして、入力された値を <input> から集めて送るといった処理はよくある。このとき、submit されたデータの収拾方法はいくつかある。submit に限らず、そのイベントに付随する情報は、基本的にイベントオブジェクトに内包されている。Form を例に、イベントオブジェクトを意識したコーディングについて解説する。

blog.jxck.io

Bookmarklet という一番身近な自動化技術

「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。そんな時代にこそ、今更だれも解説しないであろう、bookmarklet という技術についてもう一度書いておく。

blog.jxck.io

SDP の Unified Plan と Plan B

新年早々、Blink Dev で Unified Plan の Intent to Implement という嬉しい知らせが届いた。Intent to Implement: WebRTC Unified Plan SDPSDP の互換性についてインパクトの大きいこの変更について簡単に解説する。

blog.jxck.io

2017 年を振り返る

例年通り、今年を振り返る。

blog.jxck.io

ResizeObserver による変更検知と Element Query

ResizeObserver の ship が進みつつある。この仕様の解説および、ElementQuery / ContainerQuery について解説する。Resize Observer 1

blog.jxck.io

WHATWG の IPR Policy と Governance Structure

WHATWG が IPR Policy と Governance Structure についての更新を発表した。おおまかな流れと、これによって引き起されそうな変化について解説する。

blog.jxck.io

Font Display プロパティを用いた FOIT/FOUT 最適化

Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。フォントファイルサイズが大きい場合は、FOIT/FOUT の問題が顕著になり、JS を用いた回避策が利用されることも多かった。これを解決するため、CSS に font-display プロパティが作成され、実装が進んでいる。各プロパティの違いと挙動、そして本サイトへの適用について解説する。

blog.jxck.io

Houdini Paint API

Houdini で議論されている CSS Paint API が Chrome Canary で flag 付きで実装されている。デモの実装を通して、関連仕様を含めた以下の 4 つのドラフトを解説する。CSS Painting API Level 1CSS Properties and Values API Level 1CSS Typed OM Level 1Worklets Level 1

blog.jxck.io

CSS Rhythmic Sizing で Vertical Rhythm

タイポグラフィに関連したデザイン手法の 1 つに Vertical Rhythm がある。そして、現在 CSS でそれを簡単に実現するための CSS Rhythmic Sizing という仕様が提案されている。Chrome にフラグ付きで実装されたこの仕様を用いて、本サイトへの適用を行ったので、解説する。CSS Rhythmic Sizing

blog.jxck.io

予約済みドメイン (.example, .localhost, .test) について

特別なドメインとして予約され、特定の用途で使用可能なドメインとして、.example .localhost .test などがある。localhost の Draft や、gTLD である .dev が Chrome で Preload HSTS になったなどの動きを踏まえ、これらの意味や用途を解説する。

blog.jxck.io

ブラウザで適当なランダム文字列

テストや仮実装で、適当なランダム文字列が欲しい場合に便利なスニペット。

blog.jxck.io

Foreign Fetch が削除されそうな理由と Cookie の double keying

以前、本ブログでも紹介した Foreign Fetch が、仕様から削除される方向で進んでいる。Foreign Fetch による Micro Service Workers | blog.jxck.ioこれは、Safari などが進めている Cookie の double keying が影響しているらしいので、現状についてまとめる。

blog.jxck.io

Brotli を用いた静的コンテンツ配信最適化と Accept-Encoding: br について

High Sierra に乗る Safari 11 で Brotli 対応がされるということで、メジャーブラウザの Brotli 対応が概ね揃うことになる。そこで、本サイトも Brotli による静的コンテンツ配信に対応した。

blog.jxck.io

.mjs とは何か、またはモジュールベース JS とエコシステムの今後

長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、.mjs という拡張子が採択された。この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。

blog.jxck.io

Promise.prototype.finally

Promise.prototype.finally の仕様が TC39 stage 3 となり、Safari TP37 で先行実装が入った。tc39/proposal-promise-finally

blog.jxck.io

Service Worker の Navigation Preload による表示遅延回避

Service Worker で Fetch を Proxy する場合、Fetch 発生時に SW が起動していなければ、その起動を待つ必要が出る。そして、この SW の起動には無視できない時間がかかる場合があった。これを改善する Navigation Preload について解説する。

blog.jxck.io

Fetch の中断と Promise のキャンセル方法の標準化

XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。最近、やっと話が前進したので、ここまでの経過を解説する。

blog.jxck.io

ネットワーク中立性について #NetNeutrality

US では #NetNeutrality について話題になっている一方、日本ではさほど話題になってないように思う。インターネットを基盤としている Web 開発者にとっても、いつまで他人事でいられるか怪しい。事態そのものがあまり知られてないかもと思い、決して精通しているわけではないが紹介する。

blog.jxck.io

EventTarget の継承可能化による EventEmitter の代替

念願 だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。これにより、いわゆる EventEmitter のブラウザ移植が不要になることが期待される。Allow constructing and subclassing EventTarget

blog.jxck.io

ES Modules への橋渡しとしての nomodule 属性

ブラウザにおける新機能の利用においては、非対応ブラウザの考慮も必要となる。ES Modules の利用においても、いかに非対応ブラウザでフォールバックの手段を提供するかが課題となっていた。今回は、Modules の対応/非対応を切り分けるための仕様である nomodule 属性を解説する。

blog.jxck.io

Web Budget API と Web に導入されつつある Budget と Cost の概念

PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget API の策定が進んでいる。基本概念と現時点での API 外観について解説する。

blog.jxck.io

Safari 11.0 will support WebRTC

Safari 11 のアップデートに、待望だった WebRTC がリストされた。

blog.jxck.io

WebRTC 1.0 に向けたロードマップ

Google の Product Manager である Huib Kleinhout が、discuss-webrtc の ML に以下のような投稿をした。Completing WebRTC 1.0WebRTC 1.0 を年内に終わらせるためのロードマップ(Chrome の改善を含む)を提示している。このロードマップに期待を寄せ、簡単に現状を振り返りつつ紹介する。

blog.jxck.io

gen_fsm から gen_statem へ

Erlang/OTP 19 から、gen_fsm の後継として gen_statem が導入された。OTP の内部でも ssl などはすでに gen_statem に移行している。このビヘイビアの概要について記す。gen_statem APIgen_statem Behaviorすでにかなり安定はしているが、軽微といえども非互換な変更が OTP 20 以降に発生する可能性があることがドキュメントに言及されている。本記事は 19 時点での API ドキュメントをベースにしている。

blog.jxck.io

Web Share API

Web Share API が Origin Trials を卒業したという知らせが届いた。コンテンツを他のサービスなどと連携するこの API について紹介する。

blog.jxck.io

JavaScript における文字コードと「文字数」の数え方

textarea などに入力された文字数を、JS で数えたい場合がある。ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。なお、文字コードの仕組みを詳解すること自体が目的では無いため、BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。

blog.jxck.io

Monthly Web 2017/02

今月の Web メモ

blog.jxck.io

Polyfill のあり方と Web の進化と協調するためのガイドライン

W3C の TAG から、主にブラウザ API の Polyfill に関するドキュメントが公開された。Polyfills and the evolution of the WebPolyfill は便利な一方で、時として標準化の妨げになってしまう場合があるため、それを避けるために、Polyfill 実装者、利用者、仕様策定者などが、どう振る舞うべきかという趣旨である。今回はこの内容を元に、Web の進化と協調する Polyfill のあり方について、主に「実装者」がどうすべきかに着目し記す。

blog.jxck.io

CSP Report 収集と実レポートの考察

このブログで CSP レポートの収集を開始してもうすぐ 1 年になる。現状、対象ドメイン内で <input> は一切提供しておらず、大半が静的に生成されたページであるが、この条件でも、かなり多くのレポートが集まった。今回は、収集した実際のレポートを例に、攻撃ではないと思われるレポートとしてどういったものが送られて来たかを中心に、その内容やレポーティングサーバ、CSP の運用に関する現時点の考察についてまとめる。

blog.jxck.io

Monthly Web 2017/01

月一メモ

blog.jxck.io

mixed contents 対応を促進する CSP ディレクティブ

HTTPS 移行の問題点の一つに、mixed contents への対応がある。逆に mixed contents の発生を恐れ、HTTPS に移行できないサービスもあるだろう。本エントリでは mixed contents の正しい理解と、その検出や解消に利用できる可能性のある、CSP の Upgrade-Insecure-Request および、Block-All-Mixed-Contents を解説する。

blog.jxck.io

2016 年を振り返る

例年通り、今年を振り返る。

blog.jxck.io

HTTP の新しいステータスコード 103 Early Hints

これは、http2 Advent Calendar 2016 の 16 日目の記事である。HTTP に新しいステータスコード 103 Early Hints が追加されようとしている。HTTP/1.1 および HTTP2 双方と関わり、リソース配信の最適化に利用することができる。いったい何のために必要なのか、どういうメリットが考えられるかを解説する。

blog.jxck.io

Foreign Fetch による Micro Service Workers

Service Worker に Foreign Fetch という機能が提案されている。この機能があるとクロスオリジンへの fetch をフックできる Service Worker を、その対象オリジンから提供できるようになる。一体どういう仕組みなのか、これによって何が可能になるのかについて、デモを交えて記す。

blog.jxck.io

Link rel=serviceworker ヘッダによる API やアセットの Offline 対応

Service Worker を登録する方法は現状 3 つある。HTML meta タグでの追加ならば、Service Worker を追加するためだけの JS であれば不要になる。HTTP ヘッダでの追加ならば、HTML を持たない API にも Service Worker を追加した対応が可能である。次の記事で foreign fetch について解説する予定であるため、その前提知識として本機能を分離し紹介する。

blog.jxck.io

Node v7 で入った WHATWG URL 実装について

Node v7.0.0 が公開され、今回のリリースで WHATWG URL の実装が Experimental として入った。既に標準で含まれていた url module との違いや、URL API などについて解説する。

blog.jxck.io

Web 標準化のフィードバックサイクルを円滑にする Origin Trials について

ブラウザに追加される新しい機能に対して、Vendor Prefix の代替となる Origin Trials の導入が徐々に始まっている。今回は、これまでの Vendor Prefix の問題点と、代替として提案された Origin Trials のデザインや導入方法などについて記す。

blog.jxck.io

Google Developer Experts (GDE) になりました

Google の中の人からお声がけ頂き、Google Developer Experts (GDE) に Web Technologies の Expert として Join することになりました。

blog.jxck.io

「Socket.IO は必要か?」または「WebSocket は通るのか?」問題について 2016 年版

「Socket.IO 使ったほうがいいですか?」 という主旨の質問をもらった。これは、WebSocket が繋がらない環境に向けて、フォールバック機能を有する Socket.IO にしておいた方が良いのかという意味である。WebSocket が出てきた当初と比べて、Web を取り巻く状況は変わったが、変わってないところもある。念のためと Socket.IO を使うのもよいが、「本当に必要なのか」を問うのは重要である。Rails も ActionCable で WebSocket に対応し、ユーザも増えるかもしれないことも踏まえ、ここで、もう一度現状について、把握している範囲で解説しておく。

blog.jxck.io

SQL でファイル検索するコマンド selects を書いた話

UNIX コマンドを SQL で抽出できるツール qq を作った。 というエントリを読んで、そういえば似たようなものを作ってたなと思い出した。自分の dotfiles の中にある、便利コマンド集の中にある selects についてである。このコマンドは SQL という検索を記述的に表現する共通言語をファイル検索に応用し、Ruby の動的言語として表現力を使って実装したものといえる。その実装方法と実行例などについて記す。

blog.jxck.io

Fetch での Stream を用いたプログレス取得とキャンセル

WHATWG が定義する Fetch API は、出たばかりの仕様では、途中でのキャンセルや、プログレスイベントの取得が含まれていなかった。しかし、後の更新で fetch 結果の Response Body が WHATWG Stream API を実装することになったため、現在の仕様ではプログレスを取ることもキャンセルをすることも可能となっている。今回は、こうした API のアップデートについて記す。

blog.jxck.io

Cache-Control の Immutable 拡張によるリロード時のキャッシュ最適化

ブラウザはリロード時に、max-age に満たないキャッシュを持っていても Conditional GET によってキャッシュの Validate (有効性の問い合わせ)を行う。Cache-Control Extension として提案されている Immutable 拡張は、キャッシュが max-age 内であればリロード時もキャッシュヒットさせる拡張である。このヘッダの効果と、本サイトへの適用について記す。

blog.jxck.io

Intersection Observer を用いた要素出現検出の最適化

スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。この API の使い方と、本サイトへの適用について記す。

blog.jxck.io

mozaic.fm の v2 のリリースと Podcast の実装と移行

mozaic.fm をリニューアルし、v2 としてリリースした。今回の更新のモチベーションは大きく分けて 2 つある。tumblr を捨てたかったfeedburner を捨てたかったこれによる breaking change 含む変更の内容と、実装のメモを記す。

blog.jxck.io

リンクへの rel=noopener 付与による Tabnabbing 対策

本サイト以下全ての target=_blank 付きのリンクに rel="noopener noreferrer" の付与を実施した。このプロパティの意味と、これが無い場合のフィッシング詐欺攻撃の可能性について解説する。

blog.jxck.io

Passive Event Listeners によるスクロールの改善

DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。今回は、この仕様が解決する問題と、本サイトへの適用を解説する。Passive Event Listeners Spec

blog.jxck.io

中級者向け Service Worker Tutorial

Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。しかし、Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います。そこで特に難しい部分、そして分かっていないと実際にデプロイした際に難しいと思う部分について、実際に動きを確認しながら解説したいと思います。なお、Service Worker の基本的な概念などについては、他のチュートリアルなどを見て理解している前提で進めます。思いつきで撮ったので色々ミスも有ります、また Chrome Dev Tools の UI はどうせ変わるのでそのつもりで見てください。TODO になっている動画は、そのうち撮って追加します。

blog.jxck.io

Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新

システムにおいてキャッシュの設計は永遠の課題であり、Web のパフォーマンスにおいても非常に重要である。Web では、HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。このヘッダの概要と、本サイトへの適用を解説する。

blog.jxck.io

HTTP Strict Transport Security(HSTS) 対応

本サイトにて HTTP Strict Transport Security (HSTS) を有効化した。includeSubdomains を用いた *.jxck.io 全体への適用および、ブラウザへの Preload 登録も検討したが、本サイトの特性上それは見送った。導入に必要な設定や、注意点についてまとめる。

blog.jxck.io

Public Key Pinning for HTTP(HPKP) 対応と report-uri.io でのレポート収集

本サイトにて Public Key Pinning for HTTP を有効化した。CSP 同様、まずは Report-Only を設定し、HPKP Report についても、report-uri.io を用いて収集することにした。導入に必要な設定や、注意点についてまとめる。なお、本サイトへの導入はあくまで 実験 である。運用や影響も踏まえると、一般サービスへの安易な導入は推奨しない。また、本来は HSTS と併用することが推奨されている。(必須ではない)そちらも追って対応する予定である。

blog.jxck.io

Content Security Policy(CSP) 対応と report-uri.io でのレポート収集

本サイトにて Content Security Policy を有効化した。まずは Report Only にて導入し、段階的にポリシーとコンテンツを修正していく方針をとる。CSP Report については、report-uri.io を用いて収集することにした。導入に必要な設定や、注意点についてまとめる。

blog.jxck.io

画像最適化戦略 SVG/Font 編

本サイトで使用している UI アイコン系の画像を、ギリギリまで最適化した手書き SVG に置き換えた(ただしソースは 観賞用 なので、インデントは残す)。また、装飾に画像ではなく CSS の content を利用することで、ローカルフォントデータを利用し、画像転送を減らす工夫にも言及する。画像最適化シリーズ第 4 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編> 画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

画像最適化戦略 WebP 編

本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最適化シリーズ第 3 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編> 画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

画像最適化戦略 Picture 編

本サイトで使用している PNG/JPEG 画像を、対応デバイスと、Device Pixel Ratio に対して最適なサイズで出し分けるために、<picture> 要素を適用した。画像最適化シリーズ第 2 回目のエントリである。画像最適化戦略 PNG/JPEG 編> 画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

画像最適化戦略 PNG/JPEG 編

本サイトで使用している PNG/JPEG 画像に対し、メタデータ削除、減色、リサイズなど基本的な最適化処理の適用戦略と、その方法および結果について。画像最適化シリーズ第 1 回目のエントリである。> 画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

Noto Sans の Web Font 対応とサブセットによる最適化

このサイトのフォントに Web Font を適用することにした。フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。

blog.jxck.io

Preload を用いたリソースプリローディングの最適化

Preload を指定する <link rel=preload> の仕様が公開されており、現在 Chrome Canary に実装されている。この仕様のモチベーションについて、Chrome 開発者の Yoav Weiss 氏のブログも公開された。今回は、この仕様の特徴と用途を解説し、本サイトへの適用について検討する。W3C Preload SpecIntent to Ship: <link rel=preload>Preload: What Is It Good For?

blog.jxck.io

JSON-LD と Open Graph で構造化メタデータ対応

本サイトのメタ情報を整理するため、HTML のメタタグの整理、JSON-LD による schema.org 対応、Facebook, Twitter を主とした Open Graph 対応を実施した。これにより、既に AMP 対応していた本サイトが、Google のモバイル検索でキャッシュの対象となる(クロール待ち)。

blog.jxck.io

zopfli で静的コンテンツの gzip 配信と Content/Transfer-Encoding について

HTTP では Accept-Encoding と Content-Encoding でのネゴシエーションにより、gz などで圧縮したコンテンツを転送することができる。本サイトでは zopfli を用いて gzip 形式の配信に対応した。

blog.jxck.io

HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について

Chrome が予定している <link rel=stylesheet> の挙動の変更について、Google Chrome チームの Jake が、興味深いブログを上げている。The future of loading CSSこの内容は、単に Chrome に対する変更だけではなく、HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。今回は、この内容を意訳+補足解説し、本サイトに適用していく。

blog.jxck.io

Resource Hints API でリソースの投機的取得

Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。https://w3c.github.io/resource-hints/主に以下がある。dns-prefetchpreconnectprefetchprerender今回は本サイトでこれを適用した話。

blog.jxck.io

Atom の RSS Feed 対応

このブログの Atom feed を吐くようにした。右上の feed アイコン から登録できる。

blog.jxck.io

h2o で https/2 のデプロイと設定

土台がだいたいできたので、このサイトを h2o にデプロイした話。

blog.jxck.io

AMP HTML 対応

Google が推奨する仕様である AMP HTML に、このブログを対応した。言いたいことは色々あるが、とりあえず非常に難しかったため、その対応方法や感想などを残す。

blog.jxck.io

HTML の省略によるサイズ最適化

本サイト blog.jxck.io 以下については、Markdown から静的ファイルを生成するスタイルで作成している。この変換時に以前から思っていた HTML の最適化 を実施することにした。しかし、md->html 変換時にそれをできるツールが見当たらないため、Markdown の AST から HTML を構築する過程で、省略を施すスクリプトを自作した。ただし、ソースはあくまで観賞用なので、インデントやコメントは残している。チューニングではなく単なる実験としてサイト全体にこれを適用し、その結果を記す。

blog.jxck.io

Blog を移転しました

長いこと はてな blog をメインにし、他にも Qiita や Tumblr を使って色々書いて来たが、そろそろ自分のドメインに全部集約していこうかと思う。