はじめに こんにちは、ソフトウェアエンジニアの mosson です。株式会社estie（エスティ）では Rust でウェブアプリケーションの開発をしています。 さて、Rust でウェブアプリケーションを開発していると、アプリケーションの起動処理にこのようなコードを見かけます。 #[tokio::main] async fn main() { tracing_subscriber::fmt().init(); run_server().await; } init() はこのスコープで完結しています。戻り値を変数に束縛すらしていません。それなのに、まったく別の関数の中で...
今回は、Android 17でリリースされる予定の新機能をまとめとともに、開発サイクルやリリース時期に関する考察を深く掘り下げます。
enumとmatchの組み合わせが好きだ Rustを書いていて「この言語よくできてるな」と感じる瞬間はいくつかありますが、個人的に一番好きなのが enum と match の組み合わせです。 この記事では、その良さを伝えるためにJSONの 字句解析器（Lexer） を書きます。フル実装はせず、プリミティブな値（文字列・数値・真偽値・null）を切り分ける最小の Lexer に絞ります。構文解析（パーサ）と入れ子構造は、続編に回します。 字句解析と構文解析を分ける テキストを構造化データに変換する処理は、伝統的に2段階に分けます。 字句解析: 文字列をトークン列に切り分ける ...
リトライ Google LabsのFlowで作成したNano Banana 2の漫画をChatGPT Images 2.0で再挑戦してみました。 https://zenn.dev/tkithrta/articles/92393e2c56e80e https://zenn.dev/tkithrta/articles/79236c84c2161d https://openai.com/index/introducing-chatgpt-images-2-0/ Google LabsのFlowで作成した時はi2iでNano Banana 2特有の絵柄のクセをなくしましたが、今回はt2iで作成し...
前回は、管理用 CLI を導入して、 tables describe <table> artifacts <table> inspect-db を追加し、DB の状態を人が直接確認できるようにしました。 ここまで来ると、かなり「触れる」DB になってきます。 table 一覧を見られる schema を見られる manifest / WAL / snapshot / index snapshot を見られる dirty marker まで見られる すると次に自然に欲しくなるのは、その状態を外へ持ち出すことです。 たとえばこういう場面です。 テスト用に t...
開発日誌 #6 です。前回はMagic Pipelineの設計について書きました。 ※検証環境は8年前のMacBook Airです。 今回は「見えないセキュリティ」を2つ紹介します。 Forensic Deep Purge：PDFからメタデータや隠しデータを物理的に抹消する Stealth Watermark：肉眼では見えないが、流出経路を特定できる透かしを埋め込む Forensic Deep Purge：「削除」では足りない PDFを「名前を付けて保存」しても、元のファイルの痕跡が残ることがあります。 具体的には： 作成者名・ソフトウェア名・作成日時などのメタデータ 削...
結論：OSの設定をいじらず「専用レイヤー」で制御せよ [[Zorin OS]] や [[Ubuntu]] などの [[Linux]] 環境で、Alt キーを組み合わせた高度なショートカットを実現したい場合、OS標準の設定画面や [[Mozc]] のプロパティではAltを装飾キーとして設定することができません。 最も合理的で確実な方法は、Rust製の高速リマッパー [[xremap]] を使い、YAML形式の設定ファイルで入力を直接制御することです。これにより、[[JIS配列]] と [[US配列]] が混在する環境でも、全く同じ操作感を維持できます。 なぜこの解決策が最強なのか...
教材 書籍「Rustの練習帳」を使って、教養としての Rust を勉強。 https://www.oreilly.co.jp/books/9784814400584/ 構造体と列挙型 前回登場した Option 型の理解がまだ深まっていないので、いったん Rust における構造体と列挙型の違いをAIと壁打ちして理解を深めることにした。 Gemini くんにお願いして図解してもらったのがこちら。 図：Rustのデータ型の可視化 同じ列挙型という言葉を使っていても、言語によって随分と構造が異なるのね… ! Javaのような「共通のフィールド」を持つスタイルは、「共通の性質（継承）」...
はじめに Go 1.24 以降で HTTPS サーバーを動かしているなら、すでに耐量子暗号が効いてるらしい。 何も設定していないのに。 耐量子暗号という響きがかっこよく、このテーマで記事を書こうと思いたち、2024年も4月にタイトルとリンクだけ張っただけで放置してからはや2年。 気を取り直して最新の状況を確認しようと思ったら、Goのマイナーバージョンは2つも進んでいました。 こんな感じで自分でも深堀りしたいテーマが数多く、Zennの下書き状態で眠り続けています。早く起こさねば…。 というわけで、PQC（Post-Quantu...
はじめに Pollardのρ法は素因数分解や離散対数問題を高速に計算する乱択アルゴリズムとして知られています。本稿ではPollardのρ法の動作原理を解説し、とくにPRNGに対する十分条件を与えます。 本稿ではp \le qを素数とし、半素数N = p qの素因数分解を考えます。また、実装上のテクニックは他に譲ります。 Pollardの\rho法 誕生日のパラドクス 誕生日のパラドクスは「無作為に人を23人以上集めると、50\%の確率で誕生日が被る」という事実が直感に反することを言います。これを一般化すると、「N以下の自然数から無作為に\Theta(\sqrt{N})個選ぶと...
Google Labsは2026年4月21日、AIデザインツールStitchで用いるDESIGN.mdのドラフト仕様をオープンソースとして公開した。
OpenAIは2026年4月21日、最先端の画像生成モデルを発表した。ChatGPTでは「ChatGPT Images 2.0」として、開発者向けAPIでは「GPT Image 2」として展開する。
TL;DR 1行もコードを書かずにDesktop/Web Browser Extension/Androidアプリ対応のサーバーレスパスワードマネージャーをAIに作らせた。 開発期間は3〜4週間、Claud Pro (途中からMAX 5xプラン) を契約してClaude Codeで開発。 成果物 こちらの記事で紹介しているパスワードマネージャー。 主な機能 マルチデバイス対応 スマートフォン、ウェブブラウザ拡張、デスクトップアプリで使ってもデータが自動的に同期される クロスプラットフォーム対応 DesktopアプリはTauri 2.0で開発し、Linux/macOS...
4月23日にリリースされる予定のUbuntu 26.04 LTS。今回は、25.10からの特徴的な変更点をお知らせします。
本サイトの Web UI における CSS 設計のプラクティスを、全体像と基盤となるスタイルを中心に紹介します。本エントリは個人連載の一部です。
こんにちは、CSC の CloudFastener というプロダクトで TAM のポジションで働いている平木です！ 突然ですが、皆さんは深夜 2 時に GuardDuty のアラートが飛んできたとき、誰が調査しますか？ 今までは翌朝確認して調査したり、24365で人員を配置し対応にあたっていたかもしれません。 そんな中、人が頑張らずAIに任せられる日が来たかもしれない、と思わされるサービス AWS DevOps Agent が 2026 年 3 月 31 日に GA となりました。 AI がアラートを受信した瞬間から自律的に調査を開始し、翌朝には調査ジャーナルと推奨アクションが揃っている...
はじめに ある日、App Store にリリースしたアプリが起動直後にクラッシュしているという報告が届きました。 自分が所属しているiOSチームではリリース前にテストを徹底しているので、そんなはずはない!!と心のなかで思っていました。 しかし、実際にAppStoreからインストールしてみると、起動直後にクラッシュしました。 困惑しつつも、そのバージョンをTestFlightで社内メンバー向けに配布しましたが、再現しませんでした。 同じコード、同じ Xcode 26.4、同じビルド設定なのに、なぜかApp Store 版だけが落ちます。 結論から言えば、原因は Xcode 26.4（S...
前回は、read-only system metadata API を導入して、 inspect_database describe_table inspect_table_artifacts を追加し、複数テーブル DB の状態を安全に観測できるようにしました。 ここまで来ると、内部的にはかなり見通しが良くなっています。 catalog が table 名 / schema / prefix を持つ manifest が generation を持つ snapshot / WAL / index snapshot の存在状態が見える dirty marker / orphan t...
開発日誌 #5 です。前回は1000ページPDFをフリーズなく表示するTurbo View Engineの話を書きました。 今回は Magic Pipeline、複数の処理を1クリックで連鎖させるワークフローエンジンの設計です。 ※検証環境は8年前のMacBook Airです。 なぜ作ったか PDFの定型作業って、毎回同じ手順を繰り返すことが多いです。 例えば： スキャンしたPDFを開く OCRをかけてテキストを抽出 ファイルサイズを圧縮 特定のフォルダに保存 これを毎回手動でやるのは面倒。かといって複雑なスクリプトを書くほどでもない。 Magic Pipelineはこの「定型...
教材 書籍「Rustの練習帳」を使って、教養としての Rust を勉強。 https://www.oreilly.co.jp/books/9784814400584/ Option の unwrap メソッド 書籍の 2.2.4 にある以下の記載が一読してよくわからなかった。 Option::unwrap メソッド（https://oreil.ly/4bPoA）は、Some<T>から値を取り 出してT を取得します。 これは 本来使いたい Some<T> の値を取り出すよ、と素直に解釈すればよいのか、それとも、何が包まれているかわからない場合に T 型...
はじめに GitHub Copilot を日常的に使っていると、「ターミナルで動く Copilot CLI」 と 「VS Code の Copilot Chat Agent Mode」 という、似ているようで性格の異なる 2 つの選択肢が手元に揃ってきます。どちらも自然言語で指示を出すと、ファイルを読み書きし、コマンドを実行し、タスクを進めてくれる「エージェント」です。 本記事は C# / .NET 開発者（ASP.NET Core、Blazor、コンソール、ライブラリなど）を想定読者にしています。実際に両方を C# プロジェクトで回してみると、得意な仕事の粒度が明確に違うことに気付...
はじめに Claude Code をはじめとする AI コーディング支援ツールの高度化により、マークダウンで構造化された仕様書を AI に渡して実装を進める、いわゆる仕様駆動型の開発スタイルが広まりつつあります。 実装速度は目に見えて向上し、かつてであれば数日かかった作業が数時間で完了するケースも珍しくありません。 一方で、現場で開発に携わっていると、速度向上だけでは説明しきれない違和感が蓄積していきます。残業は減った、納期も守れている、上層部からの評価も悪くない。 それなのに、現場の開発者の間に静かな疲労感が漂っている ― そんな状況を見聞きすることが増えてきました。 この記事では...
はじめに ユニットテストが浸透してきています。それでも、テストがないプロダクトのコードをメンテナンスするケースもあります。そうすると絶望的な気持ちになることもあると思います。 今回、そのようなコードにテストを追加するための道筋を示したいと思います。 場合によっては年単位の長い時間が掛かる可能性がありますが、ステップ毎にだんだん不安が減っていくようにしてあります。最後のステップではリファクタリング済みのコードを示しています。 仕様が不明なコードに絶望する必要がないと感じられたら嬉しいです。 サンプルコード 本来、ここで想定しているのは次のようなコードです。 500ステップを超える...
graphql-rubyで開発中の中級者に向けた、設計判断のための実践ガイド。GraphQL Spec・Relay Spec・graphql-js・graphql-rubyの4つのレイヤーを意識しながら、実行パイプラインの内部構造から型設計、Mutation、認可、パフォーマンス、運用まで体系的に解説します。
Progate でエンジニア見習いをしている横江( @yokoe24 )です！ 先月から業務委託でお手伝いさせていただいております。 CLAUDE.md が物足りない問題！ Progate はバックエンドとフロントエンドのリポジトリがしっかり分かれていて、 その両方の実装が必要な時があります。 しかし、フロントエンドのリポジトリをさわっているときに違和感がありました。 「なんか…… Claude Code の実行が遅いし、精度が低い気がする……」 バックエンドでの Claude Code 体験が高くて 「うおおお、すぐに実装できて最高ぉぉおお！！🏃➡️🏃➡️🏃➡️」 となってい...
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ TypeScriptをそのままネイティブバイナリにコンパイルできる「Perry」が話題になっていたので、実際に試してみました。 今回はそのファーストインプレッションをお届けします。 https://www.perryts.com/ ! perry version: 0.5.112を元にした内容です。 Perryとは？ Perryは、TypeScriptのコードをそのままネイティブバイナリにコンパイルできる、Rust製のコンパイラです。 TypeScriptで書いたC...
中国Moonshot AIは2026年4月21日、同社のフロンティアモデルの最新バージョンKimi K2.6をリリースした。
Gemini in Chromeの日本国内の展開と同時に、よく使用するプロンプトを再利用しやすくスキルとして活用できる機能「Skills in Chrome」が実験的に利用可能になっている。
本日、HiyokoBar を Product Hunt でローンチしました！ 👉 https://www.producthunt.com/products/hiyokobar 応援していただけると嬉しいです🐤 HiyokoBarとは macOSメニューバーに常駐する、エンジニア向けAlways-on HUDです。 シェルスクリプト・Python・JSを定期実行し、結果をすりガラスのカードで表示。エラーが発生するとGemini AIが自動で原因を解析し、「AI Insight」パネルを表示します。 技術スタック バックエンド: Rust / Tauri 2.0 / T...
はじめに 2026年2月20日に、Thariq氏がXで「Lessons from Building Claude Code: Prompt Caching Is Everything 」というタイトルの記事を公開し、話題になりました。 https://x.com/trq212/status/2024574133011673516 それを踏まえて、この記事では、Claude Codeを日常的に使っているユーザーの視点から、プロンプトキャッシュの仕組みを整理します。 API直叩きでエージェントを作る人向けの話は省き、あくまでClaude Codeを使う側として知っておきたいことに絞ります...
はじめに この記事は、先日Rehab for JAPANのエンジニア月次定例で話した内容の外向け版です。社内向けに用意したスライドをもとに、要旨をあらためて整理し直しました。 テーマは「これからのITエンジニア」。AIコーディングが実務で使えるものになってきた今、エンジニアの仕事は「コードを書く人」から「AIとプロダクトを動かし、成果に責任を持つ人」へと、少しずつ移り始めているのではないか、という話です。 話しながら、自分自身にも同じ問いを投げかけているような感覚がありました。「このままの働き方でいいのか」を、個人と組織の両方に置いてみた、という位置付けに近いと思います。似たような迷...
こんにちは。ソフトウェアエンジニアのyasuandです。株式会社estieのデータマネジメントグループ（DMG）という部署で、不動産登記データの管理システムを作っています。 前回の記事では、多くの方が勘違いしやすい、建物を中心とした不動産データのモデリングについて紹介しました。 https://zenn.dev/estie/articles/39efe1ebf6b188 今回は、建物ではなく土地のお話です。 近年、行政データのオープン化が進む中で、不動産領域においても機械処理可能なデータが整備されつつあります。その一つが、法務省の「登記所備付地図データ」です。 このデータは、各土地の筆界...
Googleは2026年4月21日、WebブラウザGoogle Chromeに直接組み込まれたAIアシスタントGeminiを使うことができる「Gemini in Chrome」の機能を日本を含む複数地域向けに拡大して提供することを発表した。
Compression Dictionary Transport は、圧縮に用いる辞書を HTTP 上で共有するプロトコルであり、2025 年 9 月に RFC 9842 として標準化された。本サイトの対応を行ったので、方式の概要とデプロイ方法について解説する。
MySQLの管理者権限といえば、やはりSUPERを思い浮かべる方が多いのではないかと思います。
はじめに 最近趣味でterm-survivorsという、ターミナル上でプレイできるヴァンサバライクなゲームを作っているので紹介します。 term-survivorsとは 先述した通り、term-survivorsはターミナル上でプレイできるヴァンサバライクなゲームです。OSSとして公開しています。 https://github.com/kimulaco/term-survivors 「ヴァンサバライク」というゲームカテゴリはVampire Survivorsというゲームにインスパイアされたゲームで、移動しながらランダムにキャラを強化し、一定時間生存したりボスを倒すゲームを指してい...
はじめに AIエージェントにはハルシネーションという恐ろしい特性があることは皆様ご存じかと思います。それっぽい適当なことを言ったりするあれです。私が運営しているAIだけで自律的にスクラムを回しているAIチームもその例外ではありません。（AIスクラムチームの詳細は以下のシリーズ記事をご覧ください。） https://zenn.dev/microsoft/articles/6576552d9c4f45 ただし、スクラムのプロセスの中で、複数エージェントによるレビューや振り返りなどの仕組みを元より実施していたので、これまではハルシネーションが問題になることもなく、紆余曲折はありつつも順調に...
はじめに Claude Code を長く使っていると、CLAUDE.md が太ります。過去の失敗パターン、ワークフロー、ツールの使い方を書き足すたびに、ファイルが肥大化していきます。 気づいたら 2000 行近くまで育ち、どんな小さな作業でも毎セッションで全文を読み込ませていました。タスクに取りかかる前から、過去の注意書きだけでコンテキストの大部分を使っている状態でした。 この記事では、そこから 起動時のコンテキスト消費を約 83% 削減 するまでの試行錯誤を書きます。結論だけなら「rules/ と skills/ に切り分けた」ですが、2 ヶ月かけて行きつ戻りつしながら削った記録...
前回は、最小の RENAME TABLE を導入して、 rename_table(old_name, new_name) を追加する catalog entry の名前と prefix を更新する table prefix に属する artifact 群を付け替える rename 後に open_table(old_name) を失敗させる reopen 後も rename 結果を維持する という path を整えました。 ここまで来ると、複数テーブル DB としての lifecycle はかなり揃ってきます。 create open list drop rename しかも ...
教材 書籍「Rustの練習帳」を使って、教養としての Rust を勉強。 https://www.oreilly.co.jp/books/9784814400584/ App構造体はどうなった？ clap v4 では App構造体は廃止されたのかを Claude Code くんに質問。 ! 経緯: clap 2.x: App が CLI 定義のメインの構造体 clap 3.x: App が Command に改名。移行期間として App は Command の型エイリアスとして残されていた(非推奨) clap 4.x: 型エイリアスも削除され、Command のみに統一 した...
Cloudflareは2026年4月17日、WebサイトのAIエージェント対応状況を診断するWebツール「isitagentready.com」を公開した。
TL;DR ・macOSメニューバーに常駐するエンジニア向けHUD ・シェルスクリプト・Python・JSを定期実行してカード表示 ・エラー時はGemini AIが自動解析して「AI Insight」を表示 ・JSONを1行も書かずにフルGUIで設定できる ・$39 / ¥5,980 買い切り 作った背景 「今Dockerは動いてる？」「GitHub PRは何件ある？」「サーバーは生きてる？」 こういった情報を確認するたびに、ターミナルを開いてコマンドを叩いていました。 Raycastも使っていましたが、あれはPull型——「確認したいときに自分から呼び出す」ツールです。 欲しかったのは...
第75回目は、Blenderで作成したオブジェクトの頂点をスライドさせたり、一直線上に並べる方法を見ていきます。
GitHubは2026年4月16日、GitHub CLIでエージェントスキルの検索、プレビュー、インストール、更新、公開を行える新コマンドgh skillをパブリックプレビューとして公開した。
開発日誌 #4 です。前回はAES-256-GCMとZero Leak Architectureの話を書きました。 今回は「重いPDFをサクサク表示する」という、一見地味だけど実装が一番大変だった部分の話です。 問題：普通にやるとすぐ固まる 最初の実装はシンプルでした。PDFを開いたら全ページをレンダリングしてDOMに突っ込む。 100ページくらいまでは問題なし。 300ページを超えたあたりから重くなり始め、1000ページになるとアプリが数秒固まります。 原因は明白で、見えていないページまで全部レンダリングしているからです。 解決策：仮想化スクロール Webフロントエンドでは...
「私たちがストーリーと呼んでいるものは、しばしば事件である」とはE.M.フォースター等のナラトロジー分野でよく言われることです。 ココナラのDevOpsグループCREチームのy.s.（@inu_no_hou）です。 言語化という言葉があまり好きではなく、日頃使わないようにしているのですが、その理由は概念の網の目が荒すぎて、多くの場合役に立たないからです。言葉とは一面においてツールであり、ツールが使いにくいならツールを変更するのが正当な手続きだと考えます(もちろん、ツール以外の側面もあるのが難しく面白いところである)。 言語化能力を上げるぞとぬんと力んだところで大して成果が得られないのはそ...
Ollamaは2026年4月19日、最新バージョンのOllama 0.21でGitHub Copilot CLIをサポートしたことを発表した。
Webアプリ https://wado-wasm.vercel.app/ はじめに https://developer.mozilla.org/ja/docs/WebAssembly/Guides/Rust_to_Wasm MDNのWebAssemblyチュートリアルを眺めていたところ、RustでJavaScriptパッケージを構築するためのツールであるwasm-packを使用して何かやってみたくなりました。 ちょうどプログラミング言語Wadoのコンパイラがwasm32-unknown-unknownターゲットに対応していたので、コンパイラをコンパイルするというブートストラップじ...
個人開発プロジェクトのアクセス解析をしていると、必ずぶつかる壁がある。GitHub Traffic APIが返すデータは直近14日分だけという仕様だ。毎日確認していれば問題ないが、少し放置すると古いデータが消えてしまい、長期的なトラフィック推移を追うことができない。 この記事では、GitHub Traffic APIの制約を理解した上で、トラフィック履歴を永続的に蓄積するための実装パターンを解説する。TypeScript + GitHub Actionsの構成で、実際にコードを動かしながら確認できる内容にした。 GitHub Traffic APIの制約を正確に理解する まず公式仕様...
はじめに Linuxでゲームをするとき、Steamをインストールすると32bitライブラリやら依存パッケージやらがドッと入ってきて、システムが少しずつ汚れていく。 「ゲームは遊びたい、でも環境は汚したくない」 そんなわがままを叶えるために、rootless Podmanコンテナの中でSteamを動かす仕組みを作った。 コンテナを消せばSteamの痕跡はゼロ。データも1つのディレクトリに閉じ込めてあるので、フォルダごと消せば完全にクリーンな状態に戻る。 https://github.com/yuma-seno/podman-steam セットアップは2コマンド chmod +x r...
はじめに：AIで無双できると思っていた時期がありました 最近、AIを使ったコーディングがすっかり当たり前になってきました。 AIに指示を出せばコードが組み上がり、開発効率が飛躍的に上がると感じています。 私自身も、要件定義から実装まで一気通貫でAIに任せる開発スタイルを試してきた結論を先にお伝えします。 ! AIコーディングを突き詰めると、人間が認知できる仕様の数というボトルネックに辿り着き、「ドメイン設計」と「分散システム」に取り組み始める 本記事では、AI開発における「順調だったフェーズ」と「崩壊したフェーズ」、そしてそこから導き出した解決策について、順を追って整理します。 ...
TL;DR AIコーディングはコード生産速度を上げるが、レビュー・セキュリティのボトルネックも同時に増大する 修正パッチのタイミングが一番危ない。最初の緊張感はAIには引き継がれない 非エンジニアがコードを読むのは現実的じゃない。だからセキュリティエンジニアをSKILLに憑依させた SKILL.mdをGitHubに公開したので持ってけ 他人事じゃなかった 先日、NYTにこんな記事が出た。 AIコーディングツールを導入した金融企業で、月のコード生産量が2.5万行から25万行に10倍化。結果、レビュー待ちのコードが100万行以上積み上がった。 「AIで効率化したのに人手不足...
AI の技術記事は食傷気味なんですが、さすがにこれは効くと思ったパターンを見つけたので紹介します。 tl;dr プロンプト (skill / slash command) を書いた直後は「これで伝わるはず！」と思うのに、別のセッションで使うと暗黙知が不足していて、再現性がなくなる 思い込みは当人に修正できないバイアスなので、別の AI に実際にやらせて詰まった箇所をレポートさせる これを繰り返す。プロンプトが段階的に洗練される (TDD のテストと同じ位置づけ) 実際に手元 8 個の skill で試して、初稿 50 点が (AI 主観で) 80〜90 点まで上がった。ただし、モ...
こんにちは、フリーランスとして働いてるハルクです 最近自分の会社を立ち上げたことで、「AI時代にフィットしたwebフレームワークとは何か」を考えるようになりました。 私はRubyでコンピューターサイエンスの世界に入ってから、最近流行りのTypescript(Next.js, Nuxt.js)、Go、Rustなどを使ってサイドプロジェクトを立ち上げてきましたが、 結局のところ、RubyやRuby on Railsが最も自分のユースケースにフィットすることがわかりました。 そして、その評価は、AIコーディングが発達してきた2026年においても変わりません。 今回は、私がなぜAI時代にRuby...
GitHub CLI に `gh skill` コマンドが追加され、GitHub 上のエージェントスキルを簡単にインストール・検索・管理できるようになりました。この記事では `gh skill` コマンドの使い方について紹介します。
この記事では、開発が進んできた統合ブラウザ機能と、「Visual Studio Code Agents - Insiders」を主に取り上げる。後者は現在のところVS Code Insidersでのみ利用でき、VS Code本体とは別アプリとして起動する。
OpenAIは2026年4月16日、Codexのメジャーアップデートをリリースした。
resolute（Ubuntu 26.04 LTS）のリリースまであと一週間となりました。
apm は Microsoft が開発した AI エージェント向けパッケージマネージャーです。npm や pip のように依存関係を解決しながら、エージェントのスキルや MCP をパッケージ化して管理・共有できます。この記事では apm の基本的な使い方を紹介します。
OpenAIは2026年4月15日、エージェントを開発するためのフレームワークである「Agents SDK」のPython版の大規模なアップデートを発表した。
Googleは2026年4月15日、テキスト読み上げモデルの新バージョン「Gemini 3.1 Flash TTS」をリリースした。
2026年も4月に入り、Google I/Oの足音が近づいてきました。今週は、開発者版の検証を通じて明らかになった、Android 17で「ART（Android Runtime）」が大幅に進化しているので、今回はこれにフォーカスします。
Linus Torvaldsは4月14日、カーネルメンテナーのIngo Molnar（Red Hat所属）が提出したLinux 7.1に向けたパッチ「x86-platform-2026-04-13」をマージした。
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などの機能を持つ。
Cloudflareは2026年4月14日、プライベートネットワークを相互接続し、AIエージェントなどに安全なアクセスを提供する「Cloudflare Mesh」を発表した。
OpenAIは2026年4月14日、サイバー防衛に携わる個人やチーム向けプログラム「Trusted Access for Cyber（TAC）」の拡張を発表した。
Anthropicは2026年4月14日、Claude Codeで複数プロジェクトのセッションを並列で進めやすくするため、Claude CodeデスクトップアプリのUIを再設計したバージョンをリリースした。
FDEはFull Disk Encryptionの略で、ディスク全体を暗号化する仕組みのことです。来週リリース予定の26.04 LTSからはいよいよFDEが実用できそうな段階まできました。そこで今回はリリースに先だって紹介します。
GitHubは2026年4月13日、プルリクエストをレイヤーごとのプルリクエストのチェーンとして管理する「GitHub Stacked PRs」をプライベートプレビューで限定公開した。
Cloudflareは2026年4月13日、AIエージェントに関するさまざまな新技術を発表する「エージェントウィーク」中に、Cloudflare製品全体で使用できるCLIをプレビュー版として発表した。またあわせて、ローカル開発時にリソースを確認、編集できる「Local Explorer」をオープンベータ版として公開した。
Linus Torvaldsは4月12日、「Linux 7.0」を公開した。
この記事では、2026年4月8日に行われたOpenAI JapanのDeveloper Experience Engineer、瀬良和弘氏への取材をベースに、OpenAIの公式ブログなどの情報を交えて構成を整え、Codexが変えつつある開発スタイルを紹介します。
第3回目となる今回は、プラットフォームエンジニアリングを効果的に導入するために必要な手順について見ていきます。
Claude に新たに追加された advisor tool を使用すると、通常のタスクは軽量モデルに任せつつ、必要に応じて高性能モデルに相談することで、性能とコストのバランスを最適化できます。この記事では Claude Code 内で advisor tool を活用する方法について紹介します。
HTML in Canvas API は WICG で提案されている API で、Canvas 内に直接 HTML を描画できるようにするものです。現在の `` 要素にはリッチテキストや HTML コンテンツを描画する標準的な方法が存在しないという課題があります。この記事では HTML in Canvas の使用方法やユースケースについて説明します。
Betaがリリースされた後、Kernel Freezeなどの各種「最後に完成するもの」が投入されるタイミングになりました。カーネル7.0パッケージが準備され、来週のFinal Freezeに向けた準備が進められています。
Claude Managed Agents は Claude を自律的なエージェントとして動作させるためのハーネスとインフラストラクチャーを提供します。長時間かかるタスクや非同期のタスクを実行するために使用するのが想定されています。この記事では実際に Claude Managed Agents を試してみた内容を紹介します。
Movable Typeに深刻な脆弱性が存在することが判明し、シックス・アパート株式会社は2026年4月8日にその脆弱性を修正した最新版Movable Typeを公開しました。
Googleは2026年4月8日、AIを統合した新しいGoogle Financeを100か国以上で順次展開することを発表した。
Googleは2026年4月8日、Geminiアプリに、複数のプロジェクトを整理し、過去のチャットや関連ファイルをソースとして追加することで、特定の作業向けの専用スペースを持てる機能「notebooks」の導入を発表した。
Metaは2026年4月8日、新たなAI戦略に基づいて開発されたMuseファミリーの第一弾となるネイティブなマルチモーダル推論モデル「Muse Spark」を発表した。
2026年4月に入り、Android開発者の間で1つの大きな期限が強く意識されるようになりました。それは、約半年後の2026年9月に迫った「開発者認証」の完全義務化です。
Anthropicは2026年4月7日、世界で重要なソフトウェアのセキュリティ確保を支援する緊急の取り組みとして、「Project Glasswing」を発表した。この取り組みは、未公開のフロンティアモデル「Claude Mythos Preview」を基盤としている。
今回はAIアシスタントのWitsyを紹介します。
LinuxカーネルエンジニアのIngo Molnar（Red Hat所属）は3月30日、i486 CPUのM486、M486SX、およびAMD ELAN（MELAN）のビルドオプションをKconfigから削除するパッチを開発ブランチに投稿した。
今回はGitLabが日本の経営層を対象に行った調査の結果に基づき、CISOが直面する「AI導入を妨げずにリスクを最小化する方法」という課題に焦点を当て、今すぐ取り組むべき実践的なステップを提案します。
本稿では、pt-oscの--alter-foreign-keys-methodに着目し、その内部挙動と運用上の注意点を整理します。
U-22プログラミング・コンテスト実行委員会は、公式WebサイトにてU-22プログラミング・コンテスト2026の応募要領を公開した。
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をベースにした入門書。
第74回目は、Blenderで作成したオブジェクトに常にワイヤーフレームを表示する方法について見ていきます。
コーディングエージェントの自動承認の範囲をどこまで許可するかは、ユーザー体験とセキュリティのバランスを取る上で重要な設計指針の1つです。Codex ではサンドボックス機能を提供することで、エージェントが安全に自律的に動作できる環境を実現しています。この記事では、Codex のサンドボックスの仕組みと、サンドボックス外でコマンドを実行する際の承認プロセスについて説明します。
スケルトンローダーは、コンテンツが読み込まれる前に表示されるプレースホルダーで、ユーザーに対して読み込み中であることを視覚的に示すためのものです。Boneyard はスケルトンローダーの手動の計測と更新の手間を解消するためのフレームワークです。この記事では、Boneyard を使用してスケルトンローダーを簡単に実装する方法について説明します。
デフォルトの `workspace-write` サンドボックスではネットワークアクセスは無効です。外部通信を許可したい場合は、`config.toml` で明示的に有効にします。
Codex では `hooks` を使って、特定のタイミングで任意のコマンドを実行できます。例えば応答が終わるたびに通知したい場合は `Stop hook` を使います。
コーディングエージェントに多く承認を求められると、本当に確認が必要なコマンドの実行を見落とす確率が高まります。Codex には `smart_approvals` という設定があります。これは承認が必要になったとき、その一部をそのままユーザーに投げるのではなく、まず `guardian reviewer` というサブエージェント経由で扱うための実験的な機能です。
国立情報学研究所（NII）の大規模言語モデル研究開発センター（LLMC）は2026年4月3日、約86億パラメータの「LLM-jp-4 8Bモデル」と約320億パラメータのMoEモデル「LLM-jp-4 32B-A3Bモデル」をオープンソースライセンスで公開した。
Anysphereは2026年4月2日、AIコーディングエディタCursorの新バージョンCursor 3をリリースした。
resolute（Ubuntu 26.04）のBetaがリリースされ、タイミングをあわせたTest Rebuildも行われています。
Googleは2026年4月2日、軽量言語モデルGemmaの最新バージョン「Gemma 4」を、Apache 2.0ライセンスの元オープンモデルとしてリリースした。
「スクラッチでプログラミングをはじめよう」第30回です。
v2.1.85 で、Claude Code の hooks で if フィールドを指定できるようになりました。if フィールドには、フックが呼び出される条件を指定できます。条件に一致しない場合はプロセス自体が起動しないため、オーバーヘッド削減にもなります。
difit はローカルの git 差分を GitHub スタイルのインターフェースで確認できる CLI ツールです。difit-review スキルを使用することでエージェントがコードの変更点にコメントを残した状態で difit を起動できます。この記事では、difit-review スキルを使用してエージェント自身にコードの変更点をコメントしてもらう方法を紹介します。
Cloudflareは2026年4月1日、メジャーなCMSであるWordPressの機能をTypeScriptで実装した「EmDash」を、MITライセンスの元GitHub上に公開した。
SUSEのChief Strategy Officer（CSO）であるFrank Feldmann氏に、現在の技術トレンド、AI時代のインフラのあり方、そしてエンジニアに求められる役割について話を聞きました。
Google I/Oを控えたこの時期、Androidへはマイナーアップデートが配信される一方で、かつて「スマートフォン・キラー」と呼ばれた専用AIデバイス、rabbit r1が実用性を身に付け始めています。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
今回はVRAMの容量別でおすすめのローカルLLMのモデルを動作させる方法を紹介します。
4/1 なので、本サイトを IPv6 のみのアクセスに限定することにした。背景を解説する。
Codex プラグインを使用すると、Claude Code から Codex を呼び出してコードレビューをしたり、タスクを委任するといったことが簡単にできるようになります。この記事では、Codex プラグインの使用方法と、どのような方法で Codex を呼び出しているのかといった内部の仕組みについて紹介します。
OpenAIは2026年3月31日、Claude CodeからCodexを使えるようにするプラグインをリリースした。
2026年3月の「Python Monthly Topics」では、Python 3.14で追加されたInterpreterPoolExecutorを紹介します。
本稿では、リソースを効率的に活用する「パラレルクエリ」と、クエリ評価をネイティブコード化する「JITコンパイル」、さらにメンテナンスを劇的に速める「パラレルVACUUM」を紹介します。理論と実行計画の両面から高速化の真髄に迫ります。
第2回となる今回は、プラットフォームエンジニアリングがDevSecOpsおよびサイト信頼性エンジニアリング（Site Reliability Engineering）とどのように関連しているか、また組織内でプラットフォームエンジニアリングを効果的に実装する方法について詳しく見ていきます。
Cline Kanban は人間が数十個のエージェントを運用するうえで正気を保つためにはどうすればいいか、という問いに対する 1 つの答えとして、Cline が開発したツールです。Cline Kanban はカンバン方式のビューを提供します。各カードは稼働中のエージェントを表しており、どのエージェントが実行中で、どのエージェントが作業がブロックされているのか、どのエージェントが完了しているのかを一目で把握できるようになっています。
2026 年 3 月末、Figma の MCP サーバーに Figma のキャンバスを直接操作できる `use_figma` ツールが追加されました。`use_figma` ツールは Figma Plugin API を通じて Figma ファイル上で JavaScript を直接実行する汎用ツールとして設計されている点が特徴です。この記事では、実際に `use_figma` ツールを使用して Figma のキャンバスを操作する方法を試してみます。
Googleは2026年3月26日、AIオーディオおよび音声モデルの最新バージョンGemini 3.1 Flash Liveをリリースした。
resolute（Ubuntu 26.04）の開発はベータリリースに進み、あわせて「変更することだけが決まっている」項目が徐々に確定しつつあります。
連載最終回（第三回）である本記事では、AIエージェントのGRC・ガバナンスに焦点を当てます。
日本初となるLaravelの公式カンファレンス「Laravel Live Japan」が2026年5月26日、27日に東京・立川ステージガーデンで開催される。
オープンソースアイコンライブラリ「Lucide」は2026年3月23日、バージョン1となる1.0.1を公開した（現在の最新バージョンは1.7.0）。
Anthropicは2026年3月25日、Claude Codeがコマンド実行やファイル変更する前のユーザー承認プロセスをより安全に自動化する「オートモード」をリサーチプレビューとして提供開始した。
2026年3月16日、GoogleはAndroidアプリ向けのデザインガイドラインを更新して、デスクトップ体験（Desktop Experience）に焦点を当てた新しいデザインガイドラインを加えています。
Storybook MCP は Storybook と AI エージェントを接続し、エージェントがコンポーネントドキュメントを参照しつつコードを生成したり、ストーリーを作成して UI コンポーネントをテストしたりできるようにする機能です。この記事では、Storybook MCP を実際に試してみた内容を紹介します。
Hugging Faceは2026年3月24日、同社のStorage Bucketsや、（Hugging Face上の）モデル／データセットのリポジトリをローカルファイルシステムとしてマウントするhf-mountを公開した。
OSSのデジタルペイントツールKritaは2026年3月24日、バージョン5.3.0および6.0.0を同時リリースした。
Sakana AIは2026年3月24日、日本仕様に適応させたオープンなフロンティアモデルを使ったAIチャットサービス「Sakana Chat」を公開した。
Microsoftは2026年3月23日、TypeScriptのメジャーバージョンアップとなるTypeScript 6.0をリリースした。
本記事ではJava 26の機能を紹介するとともに、JavaOne 2026でのトピックについてもレポートします。
MySQL Group Replicationには、Single-Primary modeとMulti-Primary modeの2つの動作モードがあります。
TypeScriptに関するあらゆるテーマを扱う国内最大級のカンファレンス「TSKaigi 2026」が2026年5月22日（金）、23日（土）の2日間、東京・ベルサール羽田空港とオンラインのハイブリッド形式で開催される。
本連載では、Blenderの基本的な知識、機能についてイラストを交えながら紹介しています。第73回目は、Blenderで作成したオブジェクトをスムーズに見せる方法について見ていきます。
Web サービスをデプロイする際に、CA から証明書を取得し HTTPS で暗号化するのが一般的となった。かつては "SSL 証明書" として、メールでやり取りし有料で購入するのが常識だったが、自動/無料で取得することが増えた。かつては 5~10 年あった有効期限もどんどん短くなり、今では 6 日の証明書も発行されている。このように、証明書を取り巻く変遷は目覚ましく、それは Web を取り巻く環境の劇的な変化を色濃く反映した結果と言える。http:// が https:// になった裏で何が起こり、これからどうなっていくのか。まとめていく。(極力ソースを付記するが、既に消えて WebArchive にも残っていないものも多く、筆者の記憶に頼る情報も多い。)
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パターンをサポートしている。
Claude Code v2.1.80 から Research Preview 版として Claude Code channels（以下、チャンネル）が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Claude Code と Discord 連携がどのように動作しているのか、その仕組みを解説します。
Claude Code v2.1.80 から Research Preview 版として Claude Code channels（以下、チャンネル）が利用できるようになりました。チャンネルとは実行中の Claude Code のセッションに対して、外部からイベントを送ることができる MCP サーバーのことです。この記事では、Discord からチャンネルを通じて Claude Code とやり取りする方法を紹介します。
連載第二回である今回は、そのアーキテクチャを支える技術基盤のひとつであるAgentCore Observabilityに焦点を当てます。
Google Labsは2026年3月18日、バイブデザインを支援するStitchの大幅アップデートを発表し、提供を開始した。
GNOMEプロジェクトは3月18日、オープンソースの統合デスクトップ環境「GNOME」の最新バージョンである「GNOME 50 “Tokyo”」の正式リリースを発表した。
Anthropicは開発者向けカンファレンス「Code with Claude」を、サンフランシスコ（5/6）、ロンドン（5/19）、東京（6/10）で開催する。
NVIDIAは2026年3月17日、AIチャットアシスタントOpenClawのプライバシーとセキュリティを強化し、安全に利用できるようにするオープンソースのプラグイン「NVIDIA NemoClaw」を早期プレビューとしてリリースした。
3月10日、GoogleはAndroidのパフォーマンス向上を狙った技術「AutoFDO （Automatic Feedback-Directed Optimization）」をAndroid OSのカーネルに導入したことを明らかにしました。
2026年3月4日、TOC有明で、開催されたEM（エンジニアリングマネージャー）向けカンファレンス「EMConf JP 2026」をレポートします。
本記事では、2月に刊行した『独学で鍛える数理思考2〜次世代AIを生み出す数学の基礎』の全6章のうち第1章から第4章を中心に執筆において特に参考にした書籍・論文を紹介します。
systemd開発チームは3月17日、「systemd 260」を公開した。
今回は、グラフィックボードとしてミドルレンジのIntel Arc B580でllama.cppを使用する方法を紹介します。
Node.jsのメンテナーであるMatteo Collina氏は2026年3月16日、Node.js向けのユーザーランド仮想ファイルシステム@platformatic/vfsを発表し、あわせてNode.jsのコアに仮想ファイルシステムを統合する予定があることを明かした。
Vite開発チームは2026年3月12日、高速フロントエンドビルドツールViteの新バージョンVite 8.0をリリースした
年末年始の行事や雑用が重なって前回から少し間が空いてしまいましたが、今回も「らじる★らじる」の「聴き逃し配信」を楽しむ方法の続きです。
AIがソフトウェア開発を大きく変革しつつある一方で、多くの組織は新たな課題にも直面しています。それは、本来であればソフトウェア開発者が戦略的かつ革新的な業務に割くべき時間が、かえって単調で付加価値の低い作業に費やされてしまっているという点です。
ライブラリのメンテナが Agent Skills を生成・検証して npm パッケージに同梱することを支援するツールである `@tanstack/intent` を使用して、ライブラリの使用者側と、メンテナ側の両方の観点から Agent Skills を利用する方法を紹介します。
Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。
本記事は、複数のAIエージェントと複数の検索データストアが本番稼働する環境を対象とし、LLMOps(AIエージェントの品質管理)とDataOps(検索データストアの品質管理)の統合運用に焦点を当てます。
Canonicalとルネサスの協働によって、ルネサスRZ/G2L、RZ/G2LCプラットフォームにおいてcertified Ubuntu 24.04 LTS と Ubuntu Core 24のイメージの提供が行われるようになりました。
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ツールに対応している。
要素が画面内に入った時にアニメーションを開始するスクロールトリガーアニメーションは、これまでは JavaScript を使用して `Intersection Observer API` を利用する方法が一般的でした。JavaScript を使わずに CSS だけで実装を完結できるようになる `animation-trigger` という新しい CSS プロパティが登場しました。
OpenAIは2026年3月4日、Windows向けCodexアプリの一般提供を開始した。
Googleは2026年3月10日、Geminiアーキテクチャを基盤とする同社初のマルチモーダル埋め込みモデル「Gemini Embedding 2」をパブリックプレビューとしてリリースした。
Fedoraプロジェクトは3月10日、「Fedora Linux 44」のベータ版を公開した。
3月3日、GoogleはAndroidエコシステム全体へ提供する新機能と、Pixelデバイス向けの「Pixel Feature Drop」を発表しました。
Ubuntu 25.10から、Ubuntu標準の新しい端末ソフトウェアとして「Ptyxis（てぃくしす）」が採用されました。これまでの「GNOME端末」に比べると、インターフェースがよりモダンになり、かゆいところに手が届く細かい機能も増えています。今回はこのPtyxisについて紹介しましょう。
Anthropicは2026年3月9日、AIコーディングアシスタントClaude Code用のコードレビュー機能がリサーチプレビュー版として利用可能になったことを発表した。
DuckDB開発チームは2026年3月9日、オープンソースの組み込み型データベースDuckDBの新バージョン1.5.0（コードネーム“Variegata”）をリリースした。
今回は、メモリコントローラ関係のイベントを監視する際に使えるファイルについて説明します。
第260回 MySQL 9.4と9.5の新機能について にもある通り、MySQL 9.4にて「JSON Duality View」という機能が追加されています。
今回は、予測三角形(prediction cone)を用いて、ネストしたポップアップメニューのUXを向上させる手法を紹介します。
OpenAIは2026年3月6日、AIセキュリティエージェント「Codex Security」をリサーチプレビュー版として公開した。
第72回目は、Blenderで作成したオブジェクトを整理する方法や、特定のオブジェクトを触らないようにする方法を見ていきます。
オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は skill-creator と呼ばれるスキルの作成と改善のプロセス、パフォーマンス測定を支援するツールを提供しています。この記事では skill-creator を使用してスキルを作成・改善を行うプロセスを実際に体験してみます
OpenAIは2026年3月5日、同社のフロンティアモデルの最新バージョンGPT-5.4をリリースした。
resoluteのSnapshot 4がリリースされました。SnapshotはQuesting（25.10）から開始された試みで、「リリース直前までの各月末に、リリース版と同じプロセスで生成されるISOイメージを作ってみる」というものです。
2026年3月4日、Google Workspaceのサービスをコマンドラインから操作できる「Google Workspace CLI」が、Apache 2.0ライセンスの元、GitHubとnpmレジストリで公開された。
本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。
Googleは、MWC 2026に合わせるかのように「Android 17 Beta 2」をリリースしました。今回のアップデートは「ユーザの使い勝手」を左右するUIの刷新が目立つので、これに触れた後で、MWC 2026をターゲットとしてお披露目された気になるモノをピックアップします。
WebHaptics は、Web アプリケーションで触覚フィードバックを実装するための JavaScript ライブラリです。iOS Safari でも触覚フィードバックを提供することができます。この記事では、WebHaptics ライブラリの概要と、どのようにして iOS Safari で触覚フィードバックを実現しているのかについて解説します。
OpenAIは2026年3月3日、ChatGPTでもっとも多く利用されているモデルのアップデートとして、GPT-5.3 Instantを発表した。
Chromeは2026年3月3日、2021年に始まった現在の4週間のChromeリリースサイクルを、2026年9月から2週間へと移行することを発表した。
効果的なログ設計は、信頼性が高いアプリケーションの開発・運用に不可欠です。この記事では主要な設計原則を整理し、実効性を重視した具体的な指針と実装の勘所を提示します。クラウドネイティブな運用とオブザーバビリティの観点から、従来の設計を見直してみましょう。
今回はFirefoxが持つAI機能の1つ、チャットボット、特にページの要約機能で使用するLLMをローカルLLMに変更する方法を紹介します。
この連載で扱わざるを得ないエポックメイキングな機能が2026年2月5日にv2.1.32のClaude Opus 4.6のリリースと同時に発表されました。それが「Claude Code Agent Teams」です。今回は、何がそんなに衝撃だったのか、結局Agent Teamsは何ができて何が欠点なのか、その現在地を触りながら、今後の可能性を探求していきたいと思います。
フリー（株）は2026年3月2日、同社のサービス「freee」で提供されているAPIをAIエージェントが直接操作できるMCPサーバー「freee-mcp」をオープンソースとして公開した。
「毎時何時に実行」や「何時間ごとに実行」といった、タスクスケジューリングを実装する機会は少なくない。タスクを実装し cron に登録すれば、動くものを実装するのは難しくない。しかし、ひとたびタスクが思うように動かなかった途端、隠れていた要件が牙を剥く。一度でも痛い目を見た人は、それを経験的に疑い「まず色々と前提を確かめよう」という気持ちになり、例外処理を事前に固めることができる。今回は、実装方法そのものというよりも、「実装する前に確認すべき例外事項」を個人の経験を元に解説していく。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
レスポンシブデザインにおいてメディアクエリを使用して異なる画面サイズに対して異なるフォントサイズを指定する方法は一般的ですが、いくつかの課題点もあります。`clamp()` 関数を使用することで、画面幅の変化に対してフォントサイズが滑らかに変化するようにできます。また煩雑なメディアクエリの管理を減らすことができます。
第1回となる本稿では、プラットフォームエンジニアリングの定義と、注目されている背景にある、ソフトウェア開発現場が抱える課題について解説します。
GitHubは2026年2月25日、GitHub Copilot CLIを、すべての有料プランのユーザーに向けて一般提供を開始した。開発に関連する様々な作業をこなすコーディングエージェントをターミナルから操作できるようになる。
Googleは2026年2月26日、画像生成AIモデルの最新バージョン「Nano Banana 2（Gemini 3.1 Flash Image）」をリリースした。
resolute（Ubuntu 26.04 LTS）のFeature Freezeが完了し、3月12日のUI Freezeまでの「仕上げと調整」のシーズンに入りました。
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などのフレームワークで利用できる。
Paper は AI エージェントを通じてコードとキャンバスを双方向に接続するデザインツールで、AI にデザインの作成やコードへの変換を任せることができます。Paper の MCP サーバーのツールを組み合わせることでキャンバス上のノードの情報を取得したり、デザインを挿入・編集したりすることができます。この記事では実際に Paper を試して、コードからデザインへ、デザインからコードへの双方向のワークフローがどのように実現されているのかを紹介します。
Cloudflareは2026年2月24日、ReactのフレームワークNext.jsをフロントエンドビルドツールViteで動作させるプラグイン「vinext」を、MIT Licenseの元GitHub上に公開した。
2026年2月の「Python Monthly Topics」は、Python向けAIエージェントフレームワーク「Pydantic AI」について紹介します。
2026年2月13日、Googleは次期OS「Android 17」の最初のベータ版がリリースされました。
Chat SDK は TypeScript で記述されたライブラリで、1 つのコードベースで複数のチャットプラットフォームに対応するチャットボットを開発できるようになります。イベント型アーキテクチャを採用しており、メンション, メッセージ, リアクション, スラッシュコマンドなどのイベントに型安全なハンドラーを定義できます。この記事では実際に Chat SDK を使用して、Slack 向けのチャットボットを実装する方法を紹介します。
Google Labsは2026年2月24日、AIワークフローを組み立てて実行できるノーコードビジュアルビルダーOpalにおいて、これまで具体的なモデルを選択する必要があったGenerateステップでエージェントを選択できるようになったことを発表した。
シンプルな監視ツールであるUptime Kumaを紹介し4年が経過しました。Kumaのバージョンは2系に進化し、様々な仕様変更や機能強化がなされています。今回はバージョン2系の最新版を使い、シンプルな家庭内監視システムを構築してみましょう。
http://localhost:3000 での開発には限界がある。しかし、本番と同じように https://example.com でアクセスできる環境をローカルに作るには、ドメインの解決、証明書の発行、443 での起動など、少し手間がかかる。そこで、必要な全てを 1 つのツールで行い、様々な開発環境を再現するためのツールを開発したので、紹介する。Jxck/sptth: reverse https proxy (https - sptth) for local developmenthttps://github.com/Jxck/sptth
WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザーがテキストサイズを拡大してもコンテンツが拡大されないという問題が長年存在していました。この記事では、この問題の原因と解決策について解説します。
draw.ioは2026年2月23日、Claude Code向けの「Draw.io Skill」を公開した。
Linus Torvaldsは2月22日、次期LinuxカーネルLinux 7.0の最初のリリース候補版（RC）となる「Linux 7.0-rc1」を公開した。
llama.cppの開発を牽引してきたggml.aiは2026年2月20日、Hugging Faceへの合流を発表した。
Anthropicは2026年2月20日、Web版Claude Code上でAIがコードをスキャンして、セキュリティ脆弱性を検出しパッチを提案する新機能「Claude Code Security」を限定リサーチプレビュー版として公開した。
Swallow LLM Projectは2026年2月20日、OpenAI GPT-OSSおよびAlibaba Qwen3の日本語能力と思考力を強化した推論型言語モデル「GPT-OSS Swallow」と「Qwen3 Swallow」をリリースした。
第71回目は、Blenderで作成したオブジェクトを、別のBlenderファイルに読み込む方法について見ていきます。
MySQL 8.0で導入された再帰CTE（WITH RECURSIVE）は、階層構造の走査やグラフ探索に使われることが多い機能です。
Git Worktree を作成するとき、.gitignore に指定している .env ファイルなどがコピーされないという問題があります。この問題を解決するために Claude Code のデスクトップバージョンでは .worktreeinclude で .gitignore で除外されているファイルを含めることができます。
Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。
GitHubは2026年2月19日、高速に動作するエディタZedにおけるGitHub Copilot対応を一般提供で開始した
Gentoo Linuxの開発チームは2月16日、Gentoo Linuxのリポジトリミラーを従来使っていたGitHutからCodebergへと移行する作業を開始した。
resoluteの開発において、比較的大きな「転換点」が生じました。具体的には“Software & Updates”（software-propertiesパッケージ）を整理するという方向性です。
Googleは2026年2月19日、Gemini 3シリーズを元に推論機能をさらに進化させたモデル「Gemini 3.1 Pro」プレビュー版をリリースした。
KDEプロジェクトは2月17日、デスクトップ環境「KDE Plasma」の最新バージョンとなる「KDE Plasma 6.6」をリリースした。
NVIDIAは2026年2月18日、軽量で高度な日本語理解能力を持つ言語モデルNVIDIA Nemotron-Nano-9B-v2-Japaneseを公開した。
プログラミング言語Rubyに関する年次国際カンファレンス「RubyKaigi 2026」が2026年4月22日（水）～24日（金）の3日間、北海道函館市の函館アリーナ/函館市民会館で開催される。
ワイヤーフレームを作成して、それをテキストとして出力するツールが相次いで登場した。2026年2月16日に「Mockdown」が、2月13日に「Wiretext」の2つのツールがそれぞれ別の開発者から公開されている。
Claude Code to Figma はコードから Figma デザインを生成するための機能です。Figma MCP サーバーの `generate_figma_design` ツールを使用して、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。
Anthropicは2026年2月17日、同社の最新モデルClaude Sonnet 4.6をリリースした。Sonnetのモデルとして全面的なアップデートであり、多くの分野でOpusクラスの能力に近づいている。
NotebookLMは2026年2月17日、プロンプトを使ったスライド修正機能と、PowerPoint形式の出力機能を追加するアップデートを発表した。
今回はUbuntu 24.04向けにアップデートした、ClamAVのオンアクセススキャンの使い方を紹介します。
PHPユーザが技術的なノウハウやPHP愛を共有するための年次イベント「PHPerKaigi 2026」が、2026年3月20日（金）～22日（日）に東京、中野セントラルパークカンファレンスとニコニコ生放送のハイブリッド形式で開催される。
コロナ禍が明け、カンファレンス文化も再開し、コロナ前と同等かそれ以上の頻度で多くのカンファレンスが企画されるようになりました。しかし、コロナ禍による断絶でノウハウの継承が途絶えた部分もあり、後発のイベントが既知の失敗を重ねている場面も見られます。そこで、カンファレンス主催者の有志が集まり、それぞれのノウハウを持ち寄ってまとめた「カンファレンス開催ノウハウ」を作成しました。📔 カンファレンス開催ノウハウ - Google ドキュメント複数人で書いたため、この公開に合わせて複数の有志がそれぞれのブログなどで告知します。
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として利用できる
GitHubは2026年2月13日、Issueのトリアージやコードの修正、CIエラーの分析といったリポジトリ内の作業を自動化する「GitHub Agentic Workflows」をテクニカルプレビューとして公開した。
Visual Studio Codeは2026年2月12日、安定版の最新アップデート、バージョン1.109.3をリリースした。新機能として、メッセージのキューイングとステアリング、フック、Claude互換性、そしてスラッシュコマンドとしてのスキルが導入されている。
パーソナルAIアシスタントOpenClaw（旧名称Clawdbot）の作者であるPeter Steinberger氏は2026年2月16日、OpenAIに入社することを明らかにした。
3DPに興味がある人たちの中でMakerChipという文化が浸透し始めています。
Entire CLI は AI エージェントのセッションを Git 互換のデータベースとして保存するためのツールです。Git レポジトリで Entire を有効にすると、AI エージェントのセッションをチェックポイントとして保存できるようになります。チェックポイントではユーザーのプロンプトや AI エージェントの応答、ツールの使用履歴、AI がコードを書いた割合などを確認できます。
Cloudflareは2026年2月12日、ウェブページをエージェント向けにMarkdownにして提供できる機能「Markdown for Agents」を発表した。この機能はPro/Business/EnterpriseプランおよびSSL for SaaSで、ベータ機能として無償で提供される。
GoogleのDeep Thinkチームは2026年2月12日、推論モード「Gemini 3 Deep Think」のモデルを更新したことを発表した。
2026年1月29日に書泉ブックタワーで開催された書籍2冊をテーマにしたイベント「本当に効く、真の業務改善とは〜 業務設計とExcel仕事術で学ぶ実践的アプローチ」。本稿ではその模様をレポートします。
resoluteのリリースまであと2ヶ月ほどとなり、各種フレーバーを含めた「基本的な仕様」の整理のための作業が進められています。
Google Labsが提供しているStitchは2026年2月11日、Stitchプロジェクトの開始時に使用できるエージェントとして、Webデザインの着想を得るためのIdeateエージェントを追加したことを発表した。
2026年2月10日、MarkdownノートアプリObsidianの最新バージョン1.12.0が、早期アクセス版としてCatalystライセンスをもつユーザ向けにリリースされた。Obsidian 1.12.0ではコマンドラインインターフェース「Obsidian CLI」の機能が新たに追加された。
Go開発チームは2026年2月10日、プログラミング言語Goの最新バージョンGo 1.26をリリースした。
「Backlog」や「Cacoo」など、エンジニア発のツールをグローバルSaaSへと成長させてきた株式会社ヌーラボ。同社が開始したのが、今回紹介する「Nu Source（ヌーソース）」です。Nu Sourceは社内外から事業アイデアを公募する新規事業創出プログラムとして、今注目を集めています。
今回は、他のディストリビューションのパッケージを気軽に素早く試せる「Distrobox」を紹介します。
皆さんrabbit r1を覚えていますでしょうか？ 2026年1月に入って、rabbit r1の新たな方向性を定めることになる可能性があるアップデートが行われました。
WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。
小さい文字が見づらい場合、ユーザは OS の文字サイズを大きくすることで、視認性を調整することができる。こうした機能は大抵の OS が備えており、システムフォントのサイズなどに反映される。しかし、その指定がそのまま Web コンテンツにも反映されるかというと、必ずしもそうではない。この問題を解決するために、いくつかの標準が提案され、策定と実装が進んでいる。
MySQL 8.4はLTS（Long Term Support）として位置づけられており、8.0系からの移行先として検討されるケースが増えています。
Linus Torvaldsは2月8日、2026年最初のメインラインリリースとなる「Linux 6.19」を公開した。
前回に引き続きBlenderの「ドライバー」という機能について見ていきます。
Remotion は React を使ってプログラム的に動画を作成できるフレームワークです。CSS や SVG、Canvas API などのウェブ技術を活用したり、変数や関数、ループ、条件分岐などのプログラミングの概念を利用して動画を生成できます。この記事では Remotion の基本的な使い方を紹介します。
Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます。
生成AIの普及と進化はサイバー攻撃のスタイルにも急激な変化をもたらしている。そのひとつがAI/LLMによるWebサイトのスクレイピングだ。
2026年2月5日、AnthropicはClaude Opus 4.6を発表しました。同日、OpenAIもGPT‑5.3‑Codexを発表しました。これらのモデルは両社のフロンティアモデルです。同日にリリースされたため、今回は一緒に取り上げます。
resolute（Ubuntu 26.04 LTS）はSnapshot 3がリリースされ、順調に「本来の姿」を目指した開発が進められています。
GitHubは2026年2月4日、GitHubにおけるAIエージェント利用戦略「Agent HQ」において、AnthropicのClaudeおよびOpenAIのCodexが、GitHubおよびVisual Studio Code上で直接コーディングエージェントとして利用できるようになったことを発表した。
Document Foundationは2026年2月4日、LibreOfficeの新バージョン26.2をリリースした。
皆さんrabbit r1を覚えていますでしょうか？ 2026年1月に入って、rabbit r1の新たな方向性を定めることになる可能性があるアップデートが行われました。
GPC (Global Privacy Control) の策定と実装が進んでいる。このヘッダは、サービス、ユーザ、ブラウザ、全てにとって「無視することができない特別なヘッダ」となりつつある。たかだか 1 という値を送るだけのヘッダに、何の意味があるのか?失敗して歴史に消えつつある DNT と何が違うのか?解説していく。
2026年1月15日にカミナシ、キャディ、ENECHANGEという急成長テックベンチャー3社のエンジニアが登壇したオンラインイベント「【AI時代の開発戦略】開発スピードと品質の両立に向けて ー 3社エンジニアの事例から学ぶ」。本稿では、その模様をレポートします。
JSer.info #763 - Yarn 6のプレビュー版が公開されました。 Yarn 6 Preview | Yarn Yarn 6はRustでの書き直しが行われ、パフォーマンスの改善が行われています。 yarn switchコマンドの追加、package.jsonの変更時に自動でインストールを行うLazy Installsがデフォルトで有効化されます。 WebAssemblyの誕生から10年を振り返る記事が公開されています。 Bytecode Alliance — 10 Years of Wasm: A Retrospective 2013年のasm.jsから始まり、MozillaのLuke WagnerとGoogleのBen Titzerの協力によってWebAssemblyが誕生した経緯を紹介しています。2015年に主要ブラウザが同時に対応を発表し、2017年には全ブラウザが対応を完了しました。その後、WASIやComponent Modelの開発によりブラウザ外での利用が広がっており、WASIをPOSIXのコピーとしなかった点などについても触れられています。 State of JavaScript 2025のアンケート結果が公開されています。 State of JavaScript 2025 JavaScriptの言語機能、フレームワーク、ライブラリ、ツール、テスト、AI活用などについてのアンケート結果がまとめられています。 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 · FullHuman/purgecss github.com/FullHuman/purgecss/releases/tag/v8.0.0 CSS Tools ReleaseNote PurgeCSS v8.0.0リリース。 --preserve-pathsオプションの追加、CSS変数で参照されるアニメーションの保持の改善など Bun v1.3.7 | Bun Blog bun.com/blog/bun-v1.3.7 Bun ReleaseNote Bun v1.3.7リリース。 Bun.JSON5、JSON Linesを扱うBun.JSONL、ANSIテキストのラップを行うBun.wrapAnsi()の追加。 --heap-prof-md/--cpu-prof-mdフラグの追加。 Buffer.from(array)/async-await/array.flat()などのパフォーマンス改善、HTTP/2の互換性の修正など。 Release v4.11.7 · honojs/hono github.com/honojs/hono/releases/tag/v4.11.7 Hono ReleaseNote security Hono v4.11.7リリース。 IP制限MiddlewareのIPv4アドレス検証バイパス Cache Middlewareでprivateやno-storeなレスポンスがキャッシュされる問題 Serve Staticミドルウェア(Cloudflare Workers adapter)での内部アセットへのアクセス問題 hono/jsxのErrorBoundaryでのXSS Release v0.0.58 · microsoft/playwright-mcp github.com/microsoft/playwright-mcp/releases/tag/v0.0.58 playwright MCP Tools ReleaseNote playwright-mcp v0.0.58リリース。 playwright-cliコマンドが追加され、コマンドでPlaywrightを操作できるように。 Node.js — Node.js 25.5.0 (Current) nodejs.org/en/blog/release/v25.5.0 nodejs ReleaseNote Node v25.5.0リリース。 --build-seaフラグの追加。 fs.watch()にignoreオプションを追加、SQLiteのdefensive modeをデフォルトで有効化。 node:testにexpectedFailureオプションの追加など Yarn 6 Preview | Yarn yarn6.netlify.app/blog/2026-01-28-yarn-6-preview/ yarn Rust ReleaseNote JavaScript Yarn 6プレビュー版の公開。 yarn switchの追加、package.jsonの変更時に自動でインストールを行うLazy Installsがデフォルトに。 Lodash Rolls Out Major Security Overhaul | OpenJS Foundation openjsf.org/blog/lodash-security-overhaul lodash JavaScript library security ReleaseNote Lodash 4.17.23リリース。 _.unsetと_.omit関数のPrototype Pollutionの脆弱性を修正。 Release v1.58.0 · microsoft/playwright github.com/microsoft/playwright/releases/tag/v1.58.0 playwright testing ReleaseNote playwright v1.58.0リリース。 _react/_vueセレクタ、:lightセレクタエンジン、devtoolsオプションの削除。 Bun v1.3.8 | Bun Blog bun.com/blog/bun-v1.3.8 Bun ReleaseNote Bun v1.3.8リリース。 Bun.markdownを追加。 bun build --metafile-mdでLLMフレンドリーなモジュールグラフのメタデータを出力できるように。 npm install -g bunのリグレッションを修正。 Release Version 28.0.0 · jsdom/jsdom github.com/jsdom/jsdom/releases/tag/28.0.0 JavaScript DOM library ReleaseNote jsdom 28.0.0リリース。 <iframe>/<frame>要素でのMIMEタイプスニッフィングのサポート。 XMLHttpRequestやWebSocketのリクエストが新しいリソースローディングのカスタマイズでインターセプト可能に。 document referrerの修正、XMLHttpRequestのバグ修正など アーティクル Bytecode Alliance — 10 Years of Wasm: A Retrospective bytecodealliance.org/articles/ten-years-of-webassembly-a-retrospective WebAssembly history article WebAssemblyの誕生から10年を振り返る記事。 Custom DuckDB Wasm builds for Cloudflare Workers - tobilg.com tobilg.com/posts/custom-duckdb-wasm-builds-for-cloudflare-workers/ cloudflare WebAssembly duckdb article Cloudflare Workers上でDuckDB WebAssemblyを動作させるためのカスタムビルドについて。 tobilg/ducklings: A minimal DuckDB Wasm build for browsers and serverless environments like Cloudflare Workers State of JavaScript 2025 2025.stateofjs.com/en-US JavaScript Survey State of JavaScript 2025のアンケート結果が公開された。 ソフトウェア、ツール、ライブラリ関係 LibPDF-js/core: A modern PDF library for TypeScript. Parse, modify, and generate PDFs with a clean, intuitive API. github.com/libpdf-js/core PDF TypeScript library JavaScript ブラウザやNode.jsなどで動くPDFの編集、作成ライブラリ。 PDFの解析、修正、生成をサポートし、RC4/AES暗号化、デジタル署名、フォーム入力、ページのマージ/分割、テキスト抽出などに対応している。
AlibabaのQwen Teamは2026年2月3日、コーディングエージェントおよびローカル開発向けに特化して設計されたオープンウェイトの言語モデル「Qwen3-Coder-Next」を発表した。
Appleは2026年2月3日、統合開発環境の最新版「Xcode 26.3」のRelease Candidate（RC）の提供を開始した。このリリースでXcode内から直接、AnthropicのClaude AgentやOpenAIのCodexをコーディングエージェントとして活用できる機能を導入したことを発表した。
Ubuntuイメージを配布する日本のミラーサーバーとして動いていた富山大学のサーバーが、1月末にその役割を終えてシャットダウンされました。今回はUbuntuにおけるミラーサーバーとは何か、そしてより高速にリポジトリへとアクセスするにはどうすればいいのかを紹介します。
Mozilla Corporationは2026年2月24日にリリースされるFirefox 148で、デスクトップブラウザの設定に「AIコントロール」セクションを設けることを発表した。
OpenAIは2026年2月2日、macOS用Codexアプリをリリースした。
AI/LLMによるコードレビューの自動化はすでに多くのエンジニアリングの現場で拡がっているが、どうやらLinuxカーネル開発においてもその動きが始まりつつあるようだ。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
Luna は MoonBit と JavaScript を使用して Web アプリケーションのユーザーインターフェースを構築するための宣言型 UI ライブラリです。この記事では、Luna UI と MoonBit を使用してシンプルなカウンターアプリケーションを作成する方法を紹介します。
MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。この記事では、MoonBit を使用してシンプルな RESTful API サーバーを作成する方法を紹介します。
Cloudflareは2026年1月29日、旧名称「Clawdbot」として知られるパーソナルAIアシスタントMoltbotを、同社のサーバレスコンピューティングプラットフォームCloudflare Workers上で動作させるミドルウェア「Moltworker」を、GitHub上でオープンソースとして公開した。
人気の高いオープンソースプロダクトは悪質なサイバーセキュリティ攻撃のターゲットにもされやすい。
JetBrainsとZedは2026年1月28日、「ACPレジストリ（ACP Registry）」をベータ版として公開したことを発表した。
Googleは2026年1月28日、Chromeの最新アップデートでGeminiによるAI機能を大幅に拡張することを発表した。
私たちが日頃接しているのは、スマホやタブレット向けのAndroidです。これ以外にも、用途別に最適化されたAndroidがいくつか存在するので、今回はそのバリエーションをご紹介します。3回目となる「どれだけ知っている？」ですが、どうぞお付き合いください。
GitHubは2025年1月26日、リポジトリのページに新しい「Agents」タブを追加した。これにより、リポジトリに関連するエージェントセッションを直接管理できるようになった。
OpenAIは2026年1月27日、科学研究の執筆と共同作業のためのAI搭載LaTeXワークスペース「Prism」を発表した。
今回はllama.cppでQwen3-VLを動作させ、看板などの画像の文字を解析させる方法を紹介します。
Linus Torvaldsは1月25日、次期Linuxカーネル「Linux 6.19」の7本目のリリース候補版（RC）となる「Linux 6.19-rc7」を公開した。
MCP Apps は MCP にインタラクティブな UI コンポーネントを返す方法を標準化した拡張機能です。この記事では MCP Apps を使用してインタラクティブな UI コンポーネントをエージェントが返す方法について試してみます。
中国Moonshot AIは2026年1月27日、同社の最も強力なオープンソースモデルとなるKimi K2.5をリリースした。
MCPプロジェクトは2026年1月26日、MCPツールを使ったAIとの会話内でインタラクティブなUIコンポーネントを返すことができる「MCP Apps」をMCP公式の拡張機能として公開した。
今月の「Python Monthly Topics」では、CrewAIを紹介します。
今回は知っているようで知らない、Claude Codeの「CLAUDE.md」について深掘っていきます。
MySQLの負荷試験といえば、sysbenchがよく使われると思います。oltp_read_onlyやoltp_read_writeといったシナリオは準備が軽く、短時間でおおまかな性能傾向を掴むのに便利です。
JSer.info #762 - jQuery 4.0.0がリリースされました。 jQuery 4.0.0 | Official jQuery Blog jQueryの20周年を記念するメジャーリリースです。IE10以下やEdge Legacy、古いiOS/Android Browserのサポートを終了しています。jQuery.isArray/jQuery.trim/jQuery.parseJSONなどの非推奨APIを削除し、ソースコードをAMDからESモジュールに移行しています。また、Trusted TypesとCSPのサポートを改善し、slim版からDeferredsとCallbacksを削除してファイルサイズを削減しています。IE11のサポートはjQuery 5.0で終了予定です。 Rolldown 1.0 RCがリリースされました。 Announcing Rolldown 1.0 RC | VoidZero RolldownはRustで書かれたJavaScript/TypeScriptバンドラーです。Rollupプラグインとの互換性を持ち、既存のRollupベースのプロジェクトからの移行を容易にしています。Vite 8ではデフォルトのバンドラーとしてRolldownが利用される予定です。 Stylelint 17.0.0がリリースされました。 Release 17.0.0 · stylelint/stylelint stylelint/docs/migration-guide/to-17.md at main · stylelint/stylelint Stylelint v17 の主な変更点：ESM 移行と CSS Nesting 対応など Node.js 20.19.0未満のサポートを終了し、CommonJSでのNode.js APIのサポートを削除しています。デフォルトのfixモードがstrictに変更され、CSS Nesting対応も改善されています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン jasmine/release_notes/6.0.0.md at main · jasmine/jasmine github.com/jasmine/jasmine/blob/main/release_notes/6.0.0.md JavaScript testing library ReleaseNote jasmine Jasmine 6.0.0リリース。 jasmine.pp()としてpretty printer APIを公開、実験的なsafariYieldStrategy: "time"オプションの追加など。 Experimental build mode for Hono and Express projects - Vercel vercel.com/changelog/experimental-build-mode-hono-express vercel Hono express TypeScript news VercelがHonoとExpressプロジェクト向けの実験的なビルドモードを追加。 VERCEL_EXPERIMENTAL_BACKENDS=1を環境変数に設定することで有効化でき、ログのルート別フィルターに対応。 jQuery 4.0.0 | Official jQuery Blog blog.jquery.com/2026/01/17/jquery-4-0-0/ jQuery ReleaseNote library jQuery 4.0.0リリース。 jQuery.isArray/jQuery.trim/jQuery.parseJSONなどの非推奨APIを削除。 jQuery.prototypeからpush/sort/spliceメソッドを削除。 Node.js — Node.js 25.4.0 (Current) nodejs.org/en/blog/release/v25.4.0 nodejs ReleaseNote Node v25.4.0リリース。 require(esm)/モジュールコンパイルキャッシュ/v8.queryObjects()/--heapsnapshot-near-heap-limitがStableに変更。 http.setGlobalProxyFromEnv()でグローバルプロキシを環境変数から設定する機能を追加。 util.convertProcessSignalToExitCode()、subpath importsで#/から始まるパスの利用をサポート。 Nuxt 4.3 · Nuxt Blog nuxt.com/blog/v4-3 Vue library ReleaseNote Nuxt v4.3リリース。 appLayoutプロパティの追加、ISR/SWRでのPayload Extractionのサポート。 Announcing Rolldown 1.0 RC | VoidZero voidzero.dev/posts/announcing-rolldown-rc Rust rollup bundler ReleaseNote Rolldown 1.0 RCリリース。 Release 17.0.0 · stylelint/stylelint github.com/stylelint/stylelint/releases/tag/17.0.0 CSS Tools ReleaseNote Stylelint 17.0.0リリース。 fixモードをstrictに変更。 stylelint/docs/migration-guide/to-17.md at main · stylelint/stylelint Stylelint v17 の主な変更点：ESM 移行と CSS Nesting 対応など アーティクル Roadmap 2026 | Biome biomejs.dev/blog/roadmap-2026/ biome article Biome 2026年のロードマップ。 ソフトウェア、ツール、ライブラリ関係 DoneDeal0/superdiff: Superdiff provides a rich and readable diff for both arrays and objects. It supports stream and file inputs for handling large datasets efficiently, is battle-tested, has zero dependencies, and offer a top-tier performance. github.com/DoneDeal0/superdiff JavaScript library 配列やオブジェクトの差分を検出するJavaScriptライブラリ。 anomalyco/opentui: OpenTUI is a library for building terminal user interfaces (TUIs) github.com/anomalyco/opentui/tree/main terminal TypeScript Zig React UI library ReactやSolidJSを使ってターミナルUI（TUI）を構築するためのTypeScriptライブラリ。 Bun.FFIでZigを使ったレンダリングを行う。 dy/jz: Minimal JS subset compiling to WASM github.com/dy/jz JavaScript WebAssembly library JavaScriptのサブセット言語をWebAssemblyにコンパイルするコンパイラ。 dy/subscript: Expression parser / evaluator. dy/watr: wat to wasm compiler DavidHDev/vue-bits: An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable websites. github.com/DavidHDev/vue-bits Vue library UI animation Vueアプリケーション向けのアニメーション・インタラクティブなUIコンポーネントライブラリ。 DavidHDev/react-bits: An open source collection of animated, interactive & fully customizable React components for building memorable websites. 書籍関係 gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source. github.com/gibbok/typescript-book TypeScript book TypeScriptの入門書。 Server-Side WebAssembly - Danilo Chiarlone www.manning.com/books/server-side-webassembly WebAssembly book server サーバサイドでのWebAssemblyについての書籍。 wasi:httpとかのProposalを書いてる人 Vanilla Web - Maximiliano Firtman www.manning.com/books/vanilla-web?a_aid=firtman&a_bid=14dcfdda&chan=mm_website JavaScript book web フレームワークを使わずにバニラなWeb標準技術だけでWebアプリを構築する方法についての書籍。 Vanilla Web Book 🆕 － firt.dev
Anthropicは2026年1月24日、Microsoft Excel上でClaudeのAIアシスタント機能を利用できる「Claude in Excel」をリサーチプレビュー用のベータ版としてリリースした。
前々回の記事の中で少しだけ触れた「ドライバー」という機能について紹介していきます。
Misskeyの開発者目線から主要ブラウザに対応してほしい最新のWeb技術を25個厳選しました。
MoonBit は WebAssembly と JavaScript にコンパイル可能な新しいプログラミング言語です。Rust 風のシンタックスと関数型プログラミングの特徴を持ちながら、ガベージコレクションを採用しているという特徴があります。この記事では MoonBit の基本的な使い方をチュートリアル形式で紹介します。
Pencil は Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。
2025 年の Web 技術を振り返る試験として、「Web 技術年末試験 2025」を実施した。その問題と想定解答、平均点などを公開する。
GitHubは2026年1月14日、GitHub Copilot SDKのテクニカルプレビュー版を公開した。そして1月22日に、このSDKを使うことで、GitHub Copilot CLIにおけるエージェント実行基盤「Copilot agentic core」を、任意のアプリケーションに組み込めるようになったことを発表した。
Microsoftは2026年1月22日、Windowsアプリケーション開発のライフサイクルを簡素化するコマンドラインツール「Windows App Development CLI（winapp CLI）」のパブリックプレビュー版を、MITライセンスのもとオープンソースとして公開した。
現在開発中の「Linux 6.19」は、作業が順調に進めば2月8日に正式版がリリースされる見込みだ。
Anthropicは2026年1月22日、同社のAIモデルClaudeの守るべき行動規範となる“憲法”（constitution）を更新し、クリエイティブ・コモンズ（CC0）1.0ライセンスのもと、新たに公開した。
Google Labsが提供するStitchは2026年1月20日、各種コーディングエージェントからStitchに接続するための「Stitch MCP Server」のアーリーアクセス版を発表した。
Vercelは2026年1月21日、エージェントスキルを一覧で紹介し、ユーザーが見つけたり共有できるオープンなディレクトリ「Skills.sh」を公開した。
Androidは、Googleを主体としてオープンソースで開発が進められており、これをベースに、端末メーカは独自機能を付加して差別化を行なっています。また、Androidをベースにカスタムされたものや、フォークして開発され、独自OSへと進化しているものも存在しています。
Googleは2026年1月14日、検索トレンド調査ツール「Google Trends」における「調べる」ページを刷新したことを発表した。これによって、インサイト（洞察）を発見しやすくなり、検索トレンドの分析を効率化できるようになるという。
近年では自作キーボードの流行もあり、QMK/VIAに対応したキーボードが増えてきました。今回はそんな中でも比較的リーズナブルなメカニカルキーボードであるKeychron C1 Pro 8Kを例に、Ubuntu上でQMK/VIA対応キーボードをカスタマイズする手順を紹介します。
GitLabは2026年1月15日、エージェント型AIを使った開発プラットフォーム「GitLab Duo Agent Platform」の一般提供を開始した。
Shiki というコードシンタックスハイライターライブラリがあります。 https://shiki.style/ Shiki は多くのテーマバリエーションを提供しています。それらを並べて見比べたいと思い、Claude Code に作ってもらいました。 https://y-hiraoka.github.io/shiki-...
AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenTUI の特徴と基本的な使い方を紹介します。
JSer.info #761 - Node.js 20.20.0/22.22.0/24.13.0/25.3.0のセキュリティリリースが公開されました。 Node.js — Tuesday, January 13, 2026 Security Releases 8件の脆弱性が修正されています。主な修正として、Buffer.allocやTypedArrayが初期化されていないメモリを含む可能性があるRace Conditionの修正（CVE-2025-55131）、シンボリックリンクを使ったPermission Modelのバイパスの修正（CVE-2025-55130）、不正なHTTP/2 HEADERSフレームでサーバがクラッシュする問題の修正（CVE-2025-59465）が含まれています。 また、async_hooks有効時にスタックオーバーフローエラーがキャッチできない問題についても修正されています。 async_hooksはNext.jsやDatadogなどのAPMツールなどで広く利用されています。 Node.js — Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users Chrome 144がリリースされました。 Chrome 144 | Release notes | Chrome for Developers CSSの::search-textでページ内検索のスタイリングをサポート、@scroll-state: scrolledをサポート、View TransitionsのwaitUntil()の追加などのCSS関連の機能が追加されています。また、<geolocation>要素の追加、Temporal APIのサポート、clipboardchangeイベントの追加などのWeb API関連の更新が含まれています。 Firefox 147がリリースされました。 Firefox 147.0, See All New Features, Updates and Fixes Apple SiliconデバイスでWebGPUがデフォルトで有効化されました。また、Navigation API、CSS anchor positioning、CSS Module Scriptsのサポートが追加されています。CompressionStream/DecompressionStreamがBrotliをサポートし、Service Workerでtype: moduleがサポートされるようになりました。 Firefox 147 release notes for developers (Stable) - Mozilla | MDN お知らせ 2026年1月16日でJSer.infoは15周年を迎えました。 JSer.info 15周年: 15年間のJavaScriptを振り返る - JSer.info JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン ESLint v10.0.0-rc.0 released - ESLint - Pluggable JavaScript Linter eslint.org/blog/2026/01/eslint-v10.0.0-rc.0-released/ ESLint ReleaseNote ESLint v10.0.0 RC.0リリース。 RuleTesterの改善、max-paramsルールにcountThisオプションを追加 Release 3.0.0-rc1 · qunitjs/qunit github.com/qunitjs/qunit/releases/tag/3.0.0-rc1 JavaScript library ReleaseNote test QUnit 3.0.0-rc1リリース。 assert.expect()からassert.step()を除外する変更。 Alpha release of moon v2 now available! | moonrepo moonrepo.dev/blog/moon-v2-alpha JavaScript Tools ReleaseNote moon v2 αリリース。 Release @pandacss/dev@1.8.0 · chakra-ui/panda github.com/chakra-ui/panda/releases/tag/%40pandacss%2Fdev%401.8.0 css library ReleaseNote MCP Panda CSS 1.8.0リリース。 panda init-mcpでMCPサーバの設定ができるように MCP Server | Panda CSS - Panda CSS Bun v1.3.6 | Bun Blog bun.com/blog/bun-v1.3.6 Bun v1.3.6リリース。 Bun.Archive API、コメント付きJSONを扱うBun.JSONC APIの追加。 Bun.build()にesbuild互換のmetafileオプションを追加。 Node.js — Tuesday, January 13, 2026 Security Releases nodejs.org/en/blog/vulnerability/december-2025-security-releases nodejs security ReleaseNote Node.js 20.20.0/22.22.0/24.13.0/25.3.0のセキュリティリリース。 Buffer.allocやTypedArrayが初期化されていないメモリを含む可能性があるRace Conditionの修正（CVE-2025-55131）。 async_hooks有効時にスタックオーバーフローエラーがキャッチできない問題、TLSクライアント証明書処理のメモリリークなども修正されている。 Node.js — Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users Chrome 144 | Release notes | Chrome for Developers developer.chrome.com/release-notes/144 Chrome ReleaseNote Chrome 144リリース。 ::search-textでページ内検索のスタイリングをサポート、@scroll-state: scrolledをサポート、View TransitionsのwaitUntil()を追加。 <geolocation>要素の追加、Temporal APIのサポート、clipboardchangeイベントの追加。 subgroup_id機能の追加。 New in Chrome 144 | Blog | Chrome for Developers Copilot SDK in technical preview - GitHub Changelog github.blog/changelog/2026-01-14-copilot-sdk-in-technical-preview/ AI nodejs python golang .net library GitHub Copilot SDKがテクニカルプレビューとして公開された。 Firefox 147.0, See All New Features, Updates and Fixes www.firefox.com/en-US/firefox/147.0/releasenotes/ Firefox ReleaseNote Firefox 147リリース。 q値を他のブラウザに合わせて調整。 CompressionStream/DecompressionStreamがBrotliをサポート、Servie Workerでtype: moduleをサポートなど Firefox 147 release notes for developers (Stable) - Mozilla | MDN Prettier 3.8: Support for Angular v21.1 · Prettier prettier.io/blog/2026/01/14/3.8.0 JavaScript Tools ReleaseNote Prettier 3.8リリース。 @switchブロック内の連続した@caseステートメント、配列/オブジェクト/関数呼び出しでのSpread要素をサポート。 Electron 40.0.0 | Electron www.electronjs.org/blog/electron-40-0 Electron ReleaseNote Electron 40.0.0リリース。 app.isHardwareAccelerationEnabled()メソッドの追加、オフスクリーン描画でのHDRカラースペースの対応など。 Astro is joining Cloudflare blog.cloudflare.com/astro-joins-cloudflare/ astro cloudflare news Astro Technology CompanyがCloudflareに買収された。 アーティクル Node.js — Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users nodejs.org/en/blog/vulnerability/january-2026-dos-mitigation-async-hooks nodejs security article Node.jsのasync_hooksにスタックオーバーフローの問題があったことについて。 AsyncLocalStorageはNext.jsやDatadogなど多くのフレームワークやツールで利用されているため、影響範囲が広くなっている。 Streaming JSON in just 200 lines of JavaScript krasimirtsonev.com/blog/article/streaming-json-in-just-200-lines-of-javascript JavaScript article JSON JSONをストリーミングする方法についての記事。 Transfer-Encoding: chunkedを使ってデータを段階的に送信する。 Introducing: React Best Practices - Vercel vercel.com/blog/introducing-react-best-practices AI article React JavaScript Vercelが10年以上のReact・Next.js最適化の知見をまとめたreact-best-practicesというリポジトリを公開した。 agent-skills/skills/react-best-practices at main · vercel-labs/agent-skills サイト、サービス、ドキュメント VibiumDev/vibium: Browser automation for AI agents and humans github.com/VibiumDev/vibium Selenium MCP Tools Selenium BiDiベースのブラウザ操作をするMCPサーバ coder/ghostty-web: Ghostty for the web with xterm.js API compatibility github.com/coder/ghostty-web?tab=readme-ov-file WebAssembly library terminal JavaScript ブラウザ上で動作するターミナルエミュレータライブラリ。 libghosttyをWasmにコンパイルして利用し、xterm.js互換のAPIを提供する。 ソフトウェア、ツール、ライブラリ関係 MotiaDev/motia: Multi-Language Backend Framework that unifies APIs, background jobs, queues, workflows, streams, and AI agents with a single core primitive with built-in observability and state management. github.com/MotiaDev/motia nodejs library Stepという単位で処理を書いていくバックエンドフレームワーク。 vercel-labs/agent-browser: Browser automation CLI for AI agents github.com/vercel-labs/agent-browser browser console Tools AI AIエージェント向けのヘッドレスブラウザ自動化CLI。 RustのCLIとNode.jsデーモン（Playwrightを利用）で構成され、クライアント・デーモン構造で動作する。 アクセシビリティツリーからAI向けに最適化されたスナップショットを取得する機能や、ARIAロールやラベルでの要素検出、WebSocketでのブラウザビューポートのストリーミングなどを提供する。
OpenAIは2026年1月15日、Responses APIを基盤とした、マルチプロバイダー対応かつ相互運用可能なLLMインターフェース構築のためのオープンソース仕様「Open Responses」を公開した。
GitHubは2026年1月15日、GitHub Copilotの全有料プランを対象に、エージェント用のメモリ機能「Copilot Memory」のパブリックプレビューを開始した。
Googleは2026年1月15日、Gemma 3ベースの翻訳モデル「TranslateGemma」を、Apache 2.0ライセンスのもとオープンソースとしてリリースした。
CESは世界最大規模のハイテク展示会の1つで、毎年1月の第2週ごろにラスベガスで開催されています。米国時間2026年1月6日に今年も開幕し、Sphereを使った「イマーシブな（没入感のある）スピーチ」の体験レポートとしてまとめました。
2011年1月16日に開始したJSer.infoは、2026年1月16日で15周年を迎えました🎉 JSer.infoは15年間で820件の記事を公開し、13,606件のサイト/記事/ライブラリを紹介してきました。週1回の更新を15年間継続しています。 この記事では、15年間のJSer.infoのデータを振り返りながら、JavaScriptエコシステムがどのように変化してきたかを見ていきます。 なお、この記事のデータはJSer.infoで紹介した記事の傾向であり、JavaScriptエコシステム全体を示すものではありません。 15年間の基本統計 項目 数値 総投稿数 820回 総紹介記事数 13,606件 運営期間 2011年1月〜2026年1月（15年間） 平均更新頻度 週1回 年別の紹介記事数を見ると、2013年の1,269件をピークに、近年は600〜700件程度で推移しています。一方で、1記事あたりの紹介文の長さは15年間で約2倍に増加しており、「量より質」へとスタイルが変化しています。 年 紹介記事数 投稿数 1投稿あたり 紹介文の平均文字数 2011 915 65 14.1件 62文字 2013 1,269 57 22.3件 58文字 2017 1,068 54 19.8件 79文字 2019 790 53 14.9件 90文字 2021 789 53 14.9件 101文字 2025 552 41 13.5件 108文字 あと、2025年は投稿ペースが少し落ちているため投稿数が減っています。 情報源の変化: 個人ブログから公式ドキュメントへ 15年間で最も大きな変化は、情報源の構成です。 初期（2011-2013年）の主な情報源 github.com (327件) d.hatena.ne.jp (154件) slideshare.net (147件) amazon.co.jp (98件) amazon.com (83件) 中期（2017-2019年）の主な情報源 github.com (828件) medium.com (134件) developers.google.com (103件) webkit.org (69件) nodejs.org (64件) 後期（2023-2025年）の主な情報源 github.com (568件) nodejs.org (98件) bun.sh (62件) zenn.dev (56件) developer.chrome.com (55件) GitHubが一貫して最大の情報源であることは変わりませんが、その周辺が大きく変化しています。 初期にははてなダイアリーやSlideShare、Amazon（書籍） が上位でした。個人ブログや勉強会のスライド、書籍が主要な情報源だった時代です。 中期にはMediumが多くなり、ブラウザベンダーの公式ドキュメント/ブログ（developers.google.comやwebkit.orgなど）が上位に入りました。個人ブログのプラットフォームがはてなからMediumに移行し、同時にブラウザベンダーからの一次情報が重要視され始めた時期です。 後期では公式ドキュメント/ブログ（nodejs.org、developer.chrome.com、bun.sh）や zenn.dev が上位に入っています。Mediumは姿を消し、一次情報源への直接アクセスが増えました。 コンテンツタイプの変化 種類 2011-2013 2014-2016 2017-2019 2020-2022 2023-2025 リリースノート 560 750 862 937 986 解説記事 719 692 813 617 526 ライブラリ/ツール 371 599 446 397 191 スライド/動画 292 309 170 60 49 書籍関連 192 203 135 73 45 チュートリアル 97 154 93 33 14 リリースノートは一貫して増加し続けています。一方、スライド/動画、書籍、チュートリアルなどの学習コンテンツは減っています。これは公式ドキュメントが充実したりGitHubのリリースノートが情報発信の中心になり、勉強会のスライドや書籍の紹介が減ったことを反映しています。 日本語ブログプラットフォームの変遷 JSer.infoで紹介してきた日本語の技術ブログも、15年間でプラットフォームが大きく入れ替わりました。 年 はてな Qiita Zenn 2011 92 0 0 2014 29 19 0 2016 10 45 0 2020 3 4 3 2021 1 1 22 2024 2 1 24 はてなダイアリー/はてなブログ → Qiita → Zenn という流れで紹介記事のプラットフォームが変化しています。 ただし、全体として日本語ソースの割合は徐々に減り、5%前後で安定しています。 年 日本語ソース 合計 割合 2011 203 915 22.2% 2012 194 1126 17.2% 2013 150 1269 11.8% 2014 114 1147 9.9% 2015 80 1043 7.7% 2016 93 1078 8.6% 2017 67 1068 6.3% 2018 64 921 6.9% 2019 26 790 3.3% 2020 25 810 3.1% 2021 43 789 5.4% 2022 33 712 4.6% 2023 42 737 5.7% 2024 44 638 6.9% 2025 26 552 4.7% これはJSer.infoが意図的に日本語を避けているわけではなく、JavaScriptの一次情報源がほぼ英語であることの反映です。ブラウザベンダー、公式サイト/プロジェクト、主要なライブラリのメンテナーはほとんどが英語で情報発信しています。 技術トレンドの変遷 UIフレームワーク: jQuery → Angular → React 年 jQuery Angular React Vue 2011 109 1 0 0 2013 86 44 6 0 2014 35 49 52 11 2015 29 30 103 10 2017 7 34 153 28 2019 9 9 84 20 2021 8 6 84 23 2025 1 4 82 4 2011年はjQueryが一番多く、2013年/2014年頃からAngular/React/Vueが増え、2015年にはReactが多く増えました。2017年にReactは153件でピークを迎え、その後は安定期に入っています。 2025年ではReactの件数がピーク時の半分程度になっていますが、これはReact自体が成熟し、毎週取り上げるような新しいニュースが減ったことを示しています。 ビルドツール: webpack → Vite 年 webpack Rollup esbuild Vite 2016 33 2 0 0 2017 43 8 0 0 2020 26 7 5 1 2022 11 3 9 28 2023 13 10 16 36 2025 8 2 6 23 webpackは2017年が一番多く、2020年までは話題が多かったです。 JSer.infoでも、esbuildの登場以降はRustやGoで書かれたツールの紹介が増えました。「JavaScriptのツールはJavaScriptで書く」という前提が変わり、パフォーマンスへの期待値が変化したことを反映しています。 ランタイム: Node.js一強から多様化へ 年 Deno Bun 2020 13 0 2021 21 1 2022 21 5 2023 19 27 2024 18 26 2020年にDeno 1.0がリリースされ、2022年にBunが登場。Node.js一強の時代から、複数のランタイムが競争する時代に移行しました。 特にBunは2023年の1.0リリース以降も定期的なリリースをしているため、JSer.infoでも多く紹介しています。 JSer.infoでの言及が変化した技術 15年間で言及がなくなった技術（2011-2013 → 2023-2025） 技術 初期 後期 Backbone.js 75 0 CoffeeScript 71 0 AMD/RequireJS 74 3 Grunt 49 0 PhantomJS 37 0 Bower 13 0 これらの技術は当時よく使われていましたが、今ではJSer.infoで取り上げられることはなくなりました。 Backbone.jsとCoffeeScriptは2011-2012年頃によく紹介されていました。AMDとRequireJSはモジュールシステムの先駆けでしたが、ES Modulesの標準化により役目を終えました。Grunt/Gulpはnpm scriptsやビルドツールに置き換わり、PhantomJSはPuppeteer/Playwrightに取って代わられました。 15年間で言及が増えた技術 技術 初期 後期 ESM/import 2 117 Rust 1 40 WebAssembly 0 51 monorepo 0 14 ECMAScript Modulesは2015年のES2015で仕様化されましたが、ブラウザとNode.jsの両方で実用的に使えるようになったのは2020年以降です。 Rustへの言及は、SWC/Rspack/Biome/OxCなどのツールチェーンに関連しています。JavaScriptのエコシステムにおいて、パフォーマンスクリティカルな部分はRustやGoで書かれることが増えました。 TypeScriptコンパイラ自体もGoで書き直すことが発表されています。 WebAssemblyは2015年に発表された技術で、JSer.infoでも2017年頃から言及が増えています。monorepoの概念自体は古くからありますが、JavaScriptエコシステムで注目されるようになったのは、Lerna（2016年）やnpm/yarn workspaces以降です。 横断的トピックの変化 フレームワークに依存しない、技術横断的なトピックの推移も見ていきます。 年 型 テスト パフォーマンス セキュリティ a11y 2011 30 46 27 10 6 2014 52 87 58 14 9 2017 108 86 93 15 15 2020 123 44 80 13 16 2021 129 59 64 28 17 2025 88 47 42 15 23 型（TypeScript） への言及は2021年にピーク（129件）を迎え、その後は減少傾向です。TypeScriptが「当たり前」になり、「TypeScriptを使う」こと自体がニュースになりにくくなったためと考えられます。 テスト への言及は2014年にピーク（87件）を迎えました。Jasmine、Mocha、Karmaなど多くのテストフレームワークが競っていた時期で、JSer.infoでも頻繁に取り上げていました。現在はJest、Vitest、Playwrightなどに収束しています。 パフォーマンス への言及は2017年にピーク（93件）。webpackの最適化やTree Shaking、コード分割などをJSer.infoでも多く紹介していた時期です。 a11y（アクセシビリティ） は、一貫して増加傾向にあるトピックです。6件から23件へ、約4倍に増加しています。 情報ソースの種類の変化 紹介記事のソースを「公式（プロジェクト/ドキュメント）」「GitHub」「個人ブログ」に分類しました。 ソース 2011-2013 2014-2016 2017-2019 2020-2022 2023-2025 公式 204 294 467 471 479 GitHub 506 1,015 910 903 596 個人ブログ 213 194 141 76 70 公式: nodejs.org, webkit.org, reactjs.org, eslint.org など公式サイト/ドキュメント GitHub: github.com, github.io 個人ブログ: はてな, Qiita, Zenn, medium.com/@個人 など 比較してみると、2011-2013年は個人ブログと公式がほぼ同数（213 vs 204）でしたが、2023-2025年には公式ブログ/ドキュメントが個人ブログの約7倍（479 vs 70）になっています。公式ドキュメントやプロジェクトサイトでの情報発信が充実したことで、JSer.infoで紹介する情報源も公式サイトが中心になりました。 開発プラクティスの変化 開発手法に関するトピックも変化しています。 プラクティス 2011-2013 2017-2019 2023-2025 CI/CD 31 56 67 Migration/移行 10 32 56 RFC/Proposal 2 73 45 Breaking Change 3 15 17 RFC/Proposal への言及が増えているのは、ECMAScriptがES2015でStage制を導入したことで、Proposalとして紹介することが増えた点や、ライブラリ/フレームワークがRFCプロセスを採用するケースが増えたことを反映しています。 Migration（移行） への言及が増えているのは、エコシステムの成熟を示しています。新しい技術への移行、メジャーバージョンアップ、レガシーコードの刷新など、「既存のコードベースをどう更新するか」が重要なテーマになりました。 15年間の変化の総括 JSer.infoの15年間のデータから見えてくる変化をまとめます。 JSer.info自体の変化 15年間でJSer.info自体も変化してきました。 技術的な変化 2014年: TumblrからGitHub Pagesに移行 2015年: Realtime JSer.info公開 2016年: HTTPS化、Ping機能追加 2021年: JSer.info Policy公開 2023年: JSer.info Watch List公開 2025年: MCP執筆補助、AIによるヘッドライン生成を導入 運用面の変化 週1更新を15年間継続 GitHub上で完結するワークフローの構築 自動カテゴライズ、自動タグ付け、ヘッドライン生成の導入 postemを使った記事投稿 韓国語版の翻訳（@uyeong さん、@rewrite0w0 さん、@Serzhul さんに感謝） 「交換可能にする」という目標のその後 JSer.info 11周年 で「2025年までに交換可能にする」という目標を掲げました。完全な交換可能は達成していませんが、AIの活用によって更新フローは大きく変化しました。 JSer.infoの更新フロー 2025年 - YAPC::Fukuoka 2025での発表資料 より JSer.infoについてでは「更新のために私への負荷をできる限り減らしスムーズに行えることが継続への鍵」と書いていました。現在のJSer.infoでは、情報収集からPR作成、タグ付け、グループ分け、ヘッドライン生成まで、多くの部分が自動化されています。人間が注力するのは情報の判断にある部分だけになってきています。つまり、何を紹介し、どう伝えるかという部分です。 詳細は YAPC::Fukuoka 2025での発表 を参照してください。 2025年の更新頻度について 2025年は更新頻度が少し下がっています。個人のブックマーク（情報収集の入力）を分析したところ、原因はある程度わかってきています。 年 ブックマーク数 投稿数 投稿間隔 2021 2,862 53 6.9日 2023 2,373 53 6.9日 2025 1,033 41 8.9日 ブックマーク数（入力）が2021年をピークに64%減少しています。一方で、ブックマークから記事となるケースが2倍以上に向上しています。2021年は4件ブックマークして1件掲載だったのが、2025年は2件ブックマークして1件掲載になっています。その結果、入力が64%減少しても、投稿数は23%減に抑えられています。 減少の原因としては、記事は読んでいるものの、ブックマーク時に説明文を書くスタイルのため、その負荷で取りこぼしている可能性が高いと考えています。 postemなどのツールにClaude連携などのブックマーク補助機能を追加しているので、改善していくと考えています。 また、最近はRSSリーダを作っているので、RSSから情報収集して判断して公開するというJSer.infoの情報システム全体が自分で書いたもので回せるようになります。 JSer.infoの情報システム全体の大まかな流れ: RSSフィード → 収集 → 判断 → 公開 YAPC::Fukuoka 2025での発表資料 これによって、今まで摩擦があった部分も技術的に取り除きやすくなる気がしています。 おわりに JSer.infoは2011年1月16日に開始し、15年が経ちました。 15年前、JavaScriptはjQuery（jQueryは2026年1月14日に20周年！）とBackbone.js/CoffeeScriptの時代でした。今ではReact、TypeScript、Viteが多く紹介されるようになり、Node.js以外のランタイムも選択肢として選べるようになりました。 JSer.infoで紹介する情報源も変わりました。勉強会のスライドや書籍から、公式ドキュメントやGitHubのリリースノートが中心になってきています。 変化し続けるJavaScriptのエコシステムにおいて、JSer.infoが「JavaScriptの情報を整理して正確に伝える」役割を果たせていれば幸いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 X/Twitter: #jserinfo JSer.info Slack 15年間読んでくれている方、サポートしてくれている方、ありがとうございます！ JSer.info Sponsors JSer.infoをGitHub Sponsorsで支援してくれている方々に感謝します。 サイボウズ株式会社さんに感謝します。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 関連リンク この記事を書くのに使ったJSer.infoのデータセットはjser/datasetで公開しています。 jser/jser.github.io#1343で公開しています。 DuckDBで直接JSer.infoのデータセットを読み込んで、横断的トピックの年別集計を行うクエリの例。 duckdb -c " SELECT YEAR(CAST(date AS TIMESTAMP)) as year, SUM(CASE WHEN LOWER(content) LIKE '%security%' OR LOWER(content) LIKE '%セキュリティ%' OR LOWER(content) LIKE '%脆弱性%' THEN 1 ELSE 0 END) as security, SUM(CASE WHEN LOWER(content) LIKE '%performance%' OR LOWER(content) LIKE '%パフォーマンス%' OR LOWER(content) LIKE '%高速化%' THEN 1 ELSE 0 END) as performance, SUM(CASE WHEN LOWER(content) LIKE '%accessib%' OR LOWER(content) LIKE '%a11y%' OR LOWER(content) LIKE '%アクセシビリティ%' THEN 1 ELSE 0 END) as a11y, SUM(CASE WHEN LOWER(content) LIKE '%test%' OR LOWER(content) LIKE '%テスト%' THEN 1 ELSE 0 END) as testing, SUM(CASE WHEN LOWER(content) LIKE '%型%' OR LOWER(content) LIKE '%type%' THEN 1 ELSE 0 END) as typing FROM read_json_auto('https://jser.info/source-data/items.json', ignore_errors=true) GROUP BY year ORDER BY year; " ┌───────┬──────────┬─────────────┬────────┬─────────┬────────┐ │ year │ security │ performance │ a11y │ testing │ typing │ │ int64 │ int128 │ int128 │ int128 │ int128 │ int128 │ ├───────┼──────────┼─────────────┼────────┼─────────┼────────┤ │ 2010 │ 0 │ 0 │ 0 │ 0 │ 0 │ │ 2011 │ 6 │ 19 │ 3 │ 34 │ 29 │ │ 2012 │ 7 │ 31 │ 2 │ 98 │ 43 │ │ 2013 │ 11 │ 28 │ 7 │ 118 │ 69 │ │ 2014 │ 6 │ 39 │ 4 │ 82 │ 52 │ │ 2015 │ 9 │ 20 │ 8 │ 66 │ 72 │ │ 2016 │ 10 │ 39 │ 22 │ 60 │ 75 │ │ 2017 │ 13 │ 69 │ 5 │ 72 │ 104 │ │ 2018 │ 11 │ 68 │ 14 │ 50 │ 90 │ │ 2019 │ 20 │ 54 │ 14 │ 55 │ 103 │ │ 2020 │ 11 │ 65 │ 9 │ 34 │ 117 │ │ 2021 │ 23 │ 54 │ 8 │ 39 │ 124 │ │ 2022 │ 18 │ 39 │ 7 │ 57 │ 114 │ │ 2023 │ 13 │ 66 │ 6 │ 57 │ 111 │ │ 2024 │ 12 │ 36 │ 9 │ 46 │ 90 │ │ 2025 │ 14 │ 30 │ 9 │ 34 │ 86 │ │ 2026 │ 2 │ 4 │ 1 │ 2 │ 5 │ ├───────┴──────────┴─────────────┴────────┴─────────┴────────┤ │ 17 rows 6 columns │ └────────────────────────────────────────────────────────────┘ JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方 JSer.info 11周年: 目標は2025年までに交換可能にする JSer.info 12周年です JSer.info 13周年: JavaScriptの情報源を整理する JSer.info 14周年
Vercelは2026年1月14日、同社が10年以上にわたって蓄積したReactによる開発のベストプラクティスを、エージェントスキルとしてGiHub上で公開した。
2026年1月13日、Firefox バージョン147がリリースされた。CSS anchor-positioningのサポートが追加されたことで、主要なブラウザすべてで対応したことになる。
AIは、個々のエンジニアに前例のない影響力をもたらしています。かつてはチーム全体でなければ実現できなかったことを、いまや一人のエンジニアが成し遂げられるようになりつつあります。しかし、ここには見落とされがちなパラドックスがあります。
Androidのアップデートには、いくつかの種類があります。アップデートを促す表示がされたら、素直に従う運用でも十分です。しかし、何のために行われているか知っていると意味が違って見えてくるので、今回は少し趣向を変えてアップデートの種類をまとめてみます。
最近は、Linuxカーネルに実装されるコンテナ関連の機能が高度になり、機能を調べて理解するのが難しくなってきました。
Cephは非常に便利な分散ストレージですが、分散システム特有の面倒くささもあります。そこでお勧めしたいのが、MicroCephです。MicroCephとは、Canonicalが開発しているCephのオーケストレーションツールです。
Anthropicは2026年1月12日、Claude CodeのAI機能を開発以外のさまざまなコンピュータ上の作業に活用できる新サービス「Cowork」を、リサーチプレビューとして提供開始した。
2026年1月12日、AppleとGoogleは共同声明を発表し、AIに関して複数年の協業契約を締結したことを明らかにした。
MySQLのストーレージエンジンであるInnoDBは、高い耐障害性とパフォーマンスを両立するために、バッファプールとredo logを用いた遅延書き込みアーキテクチャを採用しています。その中心にある仕組みが「Checkpoint」です。
agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な使い方、AI エージェントからの利用方法について紹介します。
筆者の年代にとってBoston Dynamicsは、長年「胸熱」な企業の1つでしょう。2025年末、そのBoston DynamicsがCES 2026のHyundaiのプレスカンファレンスに登壇すると知り、大変に興味を惹かれました。
Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。
AIツールによるコーディング支援がひろく普及したことで、LinuxカーネルコミュニティでもAIツールが生成したコードをどう扱うべきかについての議論が続いている。
新年早々に発表されたPebble Round 2とClicks Communicator
今回はCES 2026の2日目、LEGO初のCES Press Conference。スピーチの細部やデモで示されたことを網羅的にまとめるのではなく、筆者が気になった点にフォーカスしてレポートしてみます。
新しい年の始めに、Ubuntuで使用できるさまざまなデスクトップ環境について2025年に起こったことと2026年に起こりそうなことを紹介します。
CESは世界最大規模のハイテク展示会の1つで、毎年1月の第2週ごろにラスベガスで開催されています。米国時間2026年1月6日に今年も開幕し、筆者にとっての2026年のCESは、まずこのZOOX体験から始まりました。
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2025年のWebアクセシビリティに関連する出来事を振り返りつつ、2026年のWebアクセシビリティの展望について俯瞰していきたいと思います。
Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。
あけましておめでとうございます。この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
前編で紹介したモデルをもとに書籍の告知動画を作成する過程を見ていきます。特に、どのように動きをつけていったのかをかいつまんで紹介します。
あけましておめでとうございました。 2025年の振り返りと2026年の目標を立てていきましょう。 2025年の振り返り 2025年の目標は以下です。 https://blog.stin.ink/articles/new-years-resolutions-for-2025 技術ブログを 12 記事以上書く(媒体は問わな...
Web は誰のものでもなく、誰でも無料で使える。しかし、その状態を維持するための費用が、かかっていないわけではない。そこで、Web を生業にしている筆者としては、Web が壊れないための「維持コスト」をほんの一部でも負担するという意図をもって、寄付を行っている。
AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。
2025年の振り返り
Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。
例年通り 2025 年を振り返る。
Googleが提供するStitchはAIを活用したWebデザインツールです。この記事では、先月から今月にかけて追加された新機能を中心に改めてStitchについて紹介します。
2025年もあと数日、年末らしくこの1年で起こったLinux界隈のあれこれをざっくりと振り返ってみたい。
AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。
本記事では、統計の基礎からはじめて、異常検知を通じた実践的な知識を身につけ、さらに他分野へも応用できる力を養うための学習ステップとおすすめ書籍を紹介します。
2025年11月、東京で開催された「Vue Fes Japan 2025」。本記事では当日の様子をダイジェストで紹介する。
resolute（Ubuntu 26.04 LTS）の開発において、カーネル6.20が採用されることが告知されました。
Rubyコミュニティは2025年12月25日、Rubyの新バージョンRuby 4.0.0をリリースした。
2025年11月28日、「GitLab Epic Tour Japan 2025」が開催されました。本稿では、そのうちGitLab社のセッション内容を取り上げて紹介します。
Alibabaは2025年12月23日、画像生成・編集AI「Qwen-Image-Edit」の最新バージョン「Qwen-Image-Edit-2511」をリリースした。
12月18日、GoogleはPixelシリーズ向けに「Android 16 QPR3 Beta 1」の配信を開始しました。
今回はセルフホストできるオープンソースのオブジェクトストレージであるSeaweedFSを紹介します。
Chromeなど最近のモダンブラウザはAI機能がデフォルトでオンになっており、クエリを入力するたびに「AIによる概要」が最初に示されることが多い。
「Claude Code」は、CLI上で動くLLMによるAIエージェントツールです。この記事は12月5日に発売された『Claude CodeによるAI駆動開発入門』に書ききれなかった応用的な内容や最新のアップデートについて解説します。
MySQL 8.0のサポートが終了し、移行先として8.4を利用するケースは今後ますます増えていくと思います。
Googleが提供する「NotebookLM」は2025年12月20日、Gemini 3を基盤として構築されたものになったことを正式に発表した。
GitHubは2025年12月19日、エージェントをより活用するために、リポジトリごとのコードのコンテキストを記憶する「Copilotメモリ」をGitHub CopilotのPro/Pro+プランのユーザー向けにパブリックプレビューとして提供を開始した。
Alibabaは2025年12月19日、入力した画像を複数のRGBA層に分解できるモデル「Qwen-Image-Layered」をリリースした。
CSS Masonry（Grid-Lanes）の仕様策定の経緯と現状のまとめ
Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。
Visual Studio Codeは2025年12月10日、今月の更新版であるNovember 2025（バージョン1.107）をリリースした。
12月9日、Linux Foundation主催の「Open Source Summit Japan」の会場となった東京・虎ノ門ヒルズのフロアは早朝から多くの人々であふれていました。
Anthropicは2025年12月19日、AIエージェントに効率よく専門知識を提供する「エージェントスキル（Agent Skills）」をオープンスタンダードとして公開したことを発表した。
resoluteのSnapshot 2がリリースされました。並行して部分的なリリースノートの準備も行われています。
Googleは2025年12月17日、Gemini 3ファミリーの新モデルGemini 3 Flashをリリースした。
GitHubは2025年12月16日、GitHub Actionsの料金体系を見直すことを発表した。
今回は「らじる★らじる」のもう1つの魅力である「聴き逃し配信」を調べてみましょう。
12月18日より「スマートフォンにおいて利用される特定ソフトウェアに係る競争の促進に関する法律」いわゆる「スマホ新法」が全面施行されます。
OpenAIは2025年12月16日、これまで同社が提供していた画像生成モデルから大幅に能力を向上させた新しい画像生成モデルとそのAPI「gpt-image-1.5」を発表した。
第881回では、家庭内のサーバーをVPN越しに公開できるリバースプロキシPangolinを紹介しました。今回はもっとシンプルなリバースプロキシ管理ソフトである、Nginx Proxy Managerを紹介します。
NVIDIAは2025年12月16日、オープンソースのAIモデルの新バージョンNemotron 3ファミリーを発表した。
Fusionで3Dモデリングをする際にはソリッドタブにある押し出し、回転、ロフトなどでほとんどの形を作れますが、複雑なカーブ、よじれ・ねじれなどは表現することが困難です。そんなとき使えるのがサーフェスタブ内にあるサーフェスモデリング機能です。
AIエージェントについて、今後1年間に起こるだろう、変化を推進する主要因と、日本の組織に対する戦略的影響を、5つの予測として以下に紹介します。
業務設計の主役はあくまで業務側ですが、エンジニアが日常的に行っている「複雑な対象を分解し、構造化し、抽象化する」思考は、業務を整理する場面でもそのまま応用できるのです。
Linus Torvaldsは12月14日、次期Linuxカーネル「Linux 6.19」の最初のリリース候補板となる「Linux 6.19-rc1」を公開した。
本連載では、Blender の基本的な知識、機能についてイラストを交えながら紹介しています。第67回目は、作成済みのモデルをアニメーションさせるためにどのような設定をすると良いのかを見ていきます。
本記事ではリリースノートに載らないような「知られざる」内部的な改善のうち、特筆に値するトピックをかいつまんで紹介します。
React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。
TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。
OpenAIは2025年12月11日、最新のモデル「GPT‑5.2」シリーズを発表した。
resoluteの開発にあたって、各種フレーバーを「LTSとしてリリースするか」の現時点での決定が行われています。
Adobeは2025年12月10日、同社のアプリケーションをOpenAIのChatGPTから利用できる「Adobe Apps for ChatGPT」の提供を開始したことを発表した。
昨今、多くの企業で「DX」や「AI活用」が叫ばれています。しかし、その導入プロジェクトの中で、自信を持って順調に進んでいると言えるケースはどれくらいあるでしょうか。
「スクラッチでプログラミングをはじめよう」第29回です。
Linux Foundationは2025年12月9日、Agentic AIの発展を支える新たな組織として「Agentic AI Foundation（AAIF）」を設立したと発表した。
今回は、グラフィックボードとしてミドルレンジのGeForce RTX 5060 TiとRadeon RX 9060 XTでllama.cppを使用する方法を紹介します。
MySQLのInnovation ReleaseとなるMySQL 9.4とMySQL 9.5がリリースされました。
このエントリは、2023 年の 3rd Party Cookie Advent Calendar の最終日とする。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie
静岡県を中心に活動するPythonコミュニティによる技術カンファレンス「PyCon mini Shizuoka 2026」が2026年2月21日（土）に開催される。
第3回となる本稿では、ロードマップ作成に便利なプロジェクト管理ツールの選定ポイントやロードマップ作成にあたってぶつかりやすい課題と対策について論じます。
第58回では、メモリコントローラでメモリに対する制限や保護を設定した場合、階層構造が考慮される動作を見ました。その中で、ツリー構造を考慮したメモリ保護の動作に違和感を持った方は多いのではないでしょうか。
「Background Fetch を使っているのが、世界であなたのサイトだけなんだけど、この機能消しても良い?」と、TPAC 2025 の会場で、Chrome の Service Worker チームの開発者と話していた際に言われた。
TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。
MCP ツールの呼び出しはコンテキスト汚染や推論のオーバーヘッドなどの課題があります。Claude のプログラムによるツール呼び出し機能を利用することで、これらの課題を解決する方法について解説します。
WSL上のUbuntu環境において、Ubuntu Proが利用できるようになりました。
Django開発チームは2025年12月3日、WebアプリケーションフレームワークDjangoの最新バージョンDjango 6.0をリリースした。
今月の「Python Monthly Topics」は、型チェッカー「Pyrefly」を紹介します。
GoogleがChromeOSを置き換える、Androidベースの新しいOSを準備しているとAndroid Authorityが伝えています。
Linus Torvaldsは11月30日、2025年最後のメジャーカーネルバージョンとなる「Linux 6.18」を公開した。
U-22プログラミング・コンテスト実行委員会は、2025年11月30日（日）に行われた最終審査会において、入選16作品を審査、経済産業大臣賞をはじめとする各賞を決定した。
今回は、Netdataからの移行先として注目されはじめているBeszelを紹介します。
FreeBSD Projectは2025年12月2日、FreeBSDの最新リリース版FreeBSD 15.0-RELEASEを公開した。
最終回となる第4回目では、TODOアプリをフレームワークを使って作成し、その際生じるエラーへの対処もClaude Codeにやってもらいます。最後にClaude Codeにテストコードを書いてもらう方法とCLAUDE.mdへのテストの注意点の記載の仕方について解説します。
第2回となる本稿では、ソフトウェア開発におけるロードマップの具体的な作成方法、作成時の注意点、作成に用いる手段の選択肢について論じます。
今回で15回目を迎えた「中高生Rubyプログラミングコンテスト2025」。2025年11月29日に最優秀賞他、各賞が決定した。
第66回目は、ワールドプロパティの設定を変えると何が変わるのかを見ていきます。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。
Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。
Python Boot Campは、一般社団法人PyCon JP Associationが主催するPythonを学べるチュートリアル講座。
resoluteのロードマップが発表されました。これは「主要なテーマ」とキーとなる日付から構成される、「Ubuntu 26.04 LTSはこうなる」という基本方針です。
KDEプロジェクトは11月26日、「Going all-in on a Wayland future（Waylandの将来に全力を注ぐ）」と題したブログを投稿し、将来リリースされる「KDE Plasma 6.8」はWaylandオンリーとなることを明らかにした。
11月20日、Googleは、Quick Shareを拡張してAndroidとiPhone間でファイル共有ができる機能を発表しました。
今回はUbuntu派生のLinuxディストリビューション、Zorin OS 18を紹介します。
暑くて長い夏がやっと一段落したと思ったら急に冷えこみだし、カレンダーも残りわずかとなりました。
以前 YAPC::Fukuoka 2025 で発表した探求の技術では「良いアウトプットを出すためには良いインプットが必要」であるという主張を裏付けるために、私が年間 300 冊の本を読む読書習慣があることを紹介しました。この記事では私がどのような目的で本を読み、どのように本を選び、どのように読書時間を確保し、そして読んだ内容をどのように扱っているのかについて紹介します。
皆さんはDEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMPをご存じでしょうか？
MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。
今回は、その当時からWeb制作に関わる業務を行ってきた5名のパネリストをお招きし、過去のトレンドを踏まえながら「Web制作の今」を考察し、これからについて展望します。 そして、5名がエバンジェリストとして関わる新サービス「SmartRelease U」を紹介します。
Googleは2025年11月20日、画像生成モデル「Nano Banana」の上位版として、Gemini 3 Proを基にした「Nano Banana Pro（Gemini 3 Pro Image）」を発表した。
PHP開発チームは2025年11月20日、PHPの新バージョンPHP 8.5.0のリリースを発表した。
Microsoftは2025年11月18日、テクノロジーイベント「Ignite 2025」にて、WindowsでMCP（Model Context Protocol）のネイティブ サポートをパブリックプレビューとして開始したことを発表した。
resoluteの開発が始まってから一ヶ月ほど、実験的なタスクがいくつか開始されています。
Blender開発チームは2025年11月18日、Blenderの最新バージョンBlender 5.0をリリースした。
TPAC 2025 参加記（Unpolished ver.）
今回は、Pebble 2 Duoを1週間みっちり使いこんでみたので、その使用感をレビューします。
Googleは2025年11月18日、最新AIモデル「Gemini 3」を発表し、同日よりGemini 3 Proのプレビューの提供を開始した。
今回は近日発売される『はじめてのUbuntu』の宣伝も兼ねて、初心者がUbuntuを始める上でどこからスタートすべきなのか、どんな本を手に取ると良いのか考えてみましょう。
SUSEは毎年、同社に所属するエンジニアのイノベーティブな活動を推進する一環として、「Hack Week」という1週間のイベント期間を設けている。
見落とされがちだが、「Web とは何か」という仕様はない。Web を定義した W3C のドキュメントもなければ、IETF の RFC もない。Web は仕様ではないのだ。これだけしっかりと標準化された技術の粋を集めた総体が、なぜそんなにもフワっとしているのだろうか?我々は、何を "Web" と呼んでいるのだろうか?
ロードマップは、ソフトウェア開発に限って使用する取り組みではなく、あらゆるビジネスシーンで活用されています。そこで、第1回となる本稿では、まずはロードマップの役割や種類を整理した後、ソフトウェア開発におけるロードマップの作成・活用、メリットについて紹介します。
AWSは2025年11月17日、AIエージェント型IDE「Kiro」の一般提供を開始した。
Visual Studio Codeは2025年11月12日、今月の更新版であるOctober 2025をリリースした。
今月の「Python Monthly Topics」では、Python 3.14の新機能の1つである「テンプレート文字列リテラル（t-string）」について紹介します。
W3C が毎年開催する国際会議、TPAC 2025 に参加してきた。
第3回目は、Claude Codeにプロンプトを指示して、たったの5分でシンプルなTODOアプリケーションを作ってみます。その後、アプリケーションをGitHub PagesとVercelの両方にデプロイするところまで、Claude Codeと対話しながら行っていきます。
桜が咲き始めた3月に予約して、夏が過ぎて秋に入り、冬も目前に迫ったころにようやく手元に到着しました。何のことかと言えば、3月に予約したPebble 2 duoが、11月に入って手元に到着したのでレビューしていきます。
第65回目は、前回に引き続き深度マップを使用して平面のオブジェクトを立体的に見せる方法を見ていきます。
Joined Google Developer Experts (GDE) program as a Web Technologies expert focusing on CSS & UI.
Ubuntu 14.04 LTSは来年4月で到達する予定だったのですが、今回リリースされたサポート期間の延長により、このサポート期間が15年間になることが確定しました。
Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。
毎年恒例、HCD-Net認定人間中心設計スペシャリスト／専門家へのインタビュー。2025年は、島津製作所総合デザインセンターのデザインユニット内にあるUX革新グループで、全社の製品開発のUXの向上活動を横断的に支援されている猪股さんに専門性の高い機器のユーザビリティをどのように向上させているか、取り組みの事例を伺いました。
OpenAIは2025年11月12日、GPT‑5世代での改良を盛り込んだ新モデル「GPT‑5.1」を発表した。
このエントリは、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 のコミット署名有効化について解説する。
Microsoftは2025年11月11日、ネット上で開催中のバーチャルイベント「.NET Conf 2025」において、.NETの最新バージョンとなる「.NET 10」のリリースを発表した。
前回はAIを利用した音声合成ツールである「Seed-VC」の使い方を紹介しました。今回はさらにSeed-VCのトレーニング機能を利用して、より自然な音声を生成してみましょう。
>2025年11月29日、Movable Typeを中心としたWebカンファレンス「MTDDC Meetup TOKYO 2025」が昨年に続きオフライン・オンラインのハイブリッドで開催される。
このエントリは、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
MySQL 8.4（LTS）では、外部キー制約（FOREIGN KEY）の定義ルールに関して、デフォルトの仕様がこれまでから厳格化しました。
このエントリは、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 を整備したため、チームの中で活用する準備が整った。
このエントリは、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 の概念について解説する。
MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。
このエントリは、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 を無料で使えるという意味だ。
ts-rest という RPC ライブラリを見かけて気になったので、実際に Todo アプリを作って試してみました。 ts-rest とは https://ts-rest.com/ ts-rest は、REST API を型安全に実装するためのライブラリです。サーバーサイドだけでなく、REST API にアクセスするク...
Baseline の企業レベル導入事例
このエントリは、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 の有効化について検討する。
Mastodon 4.5が2025年11月6日にリリースされた。このバージョン4.5では、元投稿者の引用ポリシーを尊重する引用投稿の投稿が可能になった。
今回はGitLabが日本の経営層を対象に行った調査の結果に基づき、CISOが直面する「AI導入を妨げずにリスクを最小化する方法」という課題に焦点を当て、今すぐ取り組むべき実践的なステップを提案します。
Visual Studio Code開発チームは2025年11月6日、VS Codeの拡張機能であるGitHub Copilotのインラインサジェスト機能（inline suggestions）をオープンソース化したことを発表した。
近年のLinuxにおける「新しい常識」として、「Steamのゲームはそれなりに動作する」というものがあります。これはSteam DeckがLinuxベースであること、そしてProtonによる互換性が相応以上に提供されていることによります。
このエントリは、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 の扱いについて解説する。
Devuanチームは11月2日、「Devuan GNU+Linux 6.0.0（開発コード：Excalibur）」の安定版（stable）リリースを発表した。
Storybook開発コミュニティは2025年10月28日、UIフロントエンド開発環境Storybookの最新バージョンStorybook 10をリリースした。
このエントリは、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 はどう作ればよいか?」について解説を試みる。
10月24日、AppleはSwiftを使ってAndroidのアプリが開発できる開発キット「Swift SDK for Android」のプレビューリリース版を公開しました。
今回で15回目を迎える「中高生Rubyプログラミングコンテスト2025」。2025年11月29日に三鷹で開催される最終審査会進出者10組が決定した。
生成AIでも人気のある機能のひとつが「音声合成」です。今回は任意の参照音声に変換できる「Seed-VC」をUbuntuで動かしてみましょう。
このエントリは、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 のマルチアカウントでは、推奨されるのだろうか。
Chrome 142が10月28日にリリースされた。今回のリリースでDevTools上でAIアシスタンスを簡単に開けるようになり、コード提案機能の追加や、トレース情報を渡すだけでパフォーマンス調査がおこなえるようになった。
AWSは2025年10月30日、AIエージェント型IDEの新バージョン「Kiro v0.5.0」をリリースした。
第2回目は、Claude Codeのやや複雑な料金体系を説明した後、Claude Codeをローカル環境にインストール・セットアップするところまで行います。
スケーリングの方法というのは、すべてのリーダーが考えるべきテーマです。チームや製品、インフラ、そして私たちが管理し活動するエコシステムを、どのように拡大していくべきでしょうか？
第64回目は、深度マップを使用して平面のオブジェクトを立体的に見せる方法を見ていきます。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
このエントリは、1Password Advent Calendar の 1 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1password1Password を個人で使うだけでなく、組織全体で利用することで、開発に必要なアカウントを共有したり、CLI を使って自動化するといった、様々なメリットがある。組織で 1Password を展開する際は、1Password を Business プランで契約し、ドメインに所属するメンバーにアカウントを発行することになるだろう。その際、組織でどのようなルールを設け、どのような方法で管理し、どのように組織に合わせた設計を行うかは、多くの人が同じような検証を実施することになると思われる。今回は筆者 (Jxck) が、自分で持っている mozaic.fm のドメインを用いて、ビジネスアカウントを契約し、汎用的な運用方法の素案を検討した。その成果をドキュメントにまとめたので、同じように 1Password の組織展開を考えている際は参考になればと思う。
Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。
Fedoraプロジェクトは10月28日、「Fedora Linux 43」のリリースを発表した。
Canvaは2025年10月30日、同社のグラフィックソフト製品群「Affinity」の写真編集、ベクターデザイン、ページレイアウトツールを1つのプラットフォームに統合し、無料で提供することを発表した。
Qualcomm Dragonwing QCS6490搭載の小型ボード、RUBIK Pi 3が登場しました。また、BlueField-4にまつわるCanonicalとNVIDIAとの提携が発表されています。
9月26日から28日にかけて広島国際会議場で開催された「PyCon JP 2025」の開催後レポートをお届けします。
GitHubは10月28日、コーディングエージェントを既存のGitHubフローにネイティブに対応させるための新しいビジョン「Agent HQ」と、これを実現するためのGitHubやVS Codeの一連の新機能や改善を発表した。
Anysphereは2025年10月29日、同社が開発するAIコードエディタCursorの新バージョンCursor 2.0をリリースした。
10月21日、Samsung ElectronicsがXRヘッドセット「Galaxy XR」を米国と韓国で発表し発売を開始しました。
みてね×gihyo.jpスペシャル企画。13回目はみてね写真プリント自動提案システムに関して、データ収集からデータ配信までの仕組みについて解説します。
今回は古いCPUでUbuntuを動作させ、現在のCPUと比較してどの程度の速度で動作するのかを検証します。
2026年1月24日、「SciPyDataJapan 2026」が2025年に続き東京・御茶ノ水で開催されることとなった。
xAIは、新しいオンライン百科事典「Grokpedia」のバージョン0.1をリリースしたことを告知した。
Hugging Faceは2025年10月27日、AI開発プラットフォームHugging Face Hubへのアクセスクライアントライブラリhuggingface_hubの新バージョン1.0をリリースした。
2025年10月の「Python Monthly Topics」は、データ検証ライブラリのPydanticを紹介します。
MySQL Group ReplicationとはInnoDBで利用可能なレプリケーションプラグインです。ここではGroup Replicationの基本的な仕組みや簡単な構築方法について説明します。
Fedoraプロジェクトのリーダーシップとガバナンスを担う組織「Fedora Council」は10月22日、生成AIおよび大規模言語モデル（LLM）を活用したコード貢献を許可する決定を下した。
Swift.orgは2025年10月24日、Swiftを使ってAndroid上で動作するプログラムを開発できるSwift SDK for Androidをナイトリープレビュー版としてリリースした。
Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。
resolute（Ubuntu 26.04 LTS）の開発が本格的にスタートし、まずは開発環境の準備が行われました。
Googleは、AIを使ってモバイルアプリやウェブアプリのユーザーインターフェース（UI）を生成できる「Stitch」をGoogle Labsで提供している。2025年10月16日、公開共有機能を追加したことを案内した。
Android 16をベースにした、LineageOS 23がリリースされました。
Googleは2025年10月21日、Google AI Studioにおいて、Vibe CodingでAIアプリを作成するための新しいユーザーエクスペリエンスを提供開始した。
Valkey開発チームは2025年10月21日、キーバリューデータベースValkeyの最新バージョンValkey 9.0をリリースした。
OpenAIは2025年10月21日、新しいAIブラウザ「ChatGPT Atlas」を発表した。発表時点ではmacOS用のアプリのみが提供される。
KDEプロジェクトは10月21日、「KDE Plasma 6.5」をリリースした。
第879回の「ser2netで作るリモートシリアルコンソール環境」では、ser2netを用いてリモートからtelnetコマンドでシリアルコンソールにアクセスできる環境を整えました。今回は通信の暗号化や認証を導入してみましょう。
今回は、身近なはずなのに奥深い、円柱を出力する必要があると思ったときの考え方をいくつか紹介します。
Anthropicは2025年10月21日、AIコーディングエージェントClaude CodeをWebから操作できる「Claude Code on the web」をリサーチプレビュー版としてリリースした。
9月10日から12日にかけて、ベルサール渋谷ガーデンでDroidKaigi 2025が開催されました。本記事では、現地会場の様子をレポートします。
Claude Code以前のAI支援開発ツールとClaude Codeを比較しながら、Claude Codeの特徴と強みを説明します。
このエントリは、_2023_ 年の 3rd Party Cookie Advent Calendar の 32 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie宙に浮いていた Privacy Sandbox プロジェクトの「後始末」が公開された。
Anthropicは2025年10月17日、同社のClaudeシリーズに特定のタスク実行を効率的に行うことができるファイルセット「エージェントスキル（Agent Skills）」がプレビューとして利用できるようになったことを発表した。
Linus Torvaldsは10月19日（米国時間）、開発中の次期Linuxカーネル「Linux 6.18」の2本目のリリース候補版となる「Linux 6.18‐rc2」を公開した。
第63回目は、AIモデル「Hunyuan3D 2.1」を使えるウェブサービスを通して、頂点数を調整しながらモデルを生成する方法を見ていきます。
2025年10月18日に開催された Hono Conf に現地参加したので、自分が見たセッションについて覚えている限りで感想を書きます。 https://honoconf.dev/2025 以下、「発表タイトル by 発表者名」で区切って書いていきます。発表資料が見つかったものについてはリンクも貼っておきます。 令和最...
2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。
アイルランドのZorin Groupは2025年10月14日、同社が開発するUbuntuベースのデスクトップOS（Linuxディストリビューション）「Zorin OS」の最新バージョン「Zorin OS 18」をリリースした。
このレポートは昨年2024年10月に開催されたVue Fes Japan 2024の取材内容を、今回2025年10月に公開するものです。当時の熱気と重要な技術トレンドをお伝えします。
2025年11月23日（日）にホテル金沢（石川県金沢市）で開催予定の「TSKaigi Hokuriku 2025」のチケット販売が開始されている。
25.10（questing）のリリースが完了し、次のリリースのための旅路が始まりました。Ubuntu 26.04 LTSとなるリリースは、Resolute Racoon、「決然としたアライグマ」というコードネームが与えられています。
Pythonの国際カンファレンスPyConは世界中で開催されています。今回筆者は中国で開催されたPyCon China 2025に初めて参加してきたので、その様子をレポートします。
PyTorch Foundationは2025年10月15日、同組織が開発を進めるオープンソースのディープラーニングフレームワークPyTorchの新バージョンPyTorch 2.9をリリースした。
Node.js開発チームは2025年10月15日、Node.jsの最新メジャーバージョンであるNode.js v25.0.0をリリースした。
Zed Industriesは2025年10月15日、同社が開発するオープンソースのコードエディタZedのWindows版をリリースした。
Googleは、Android 16をベースとしたWear OS 6をPixel Watch 2と3に対して配信を開始しました。Bluetooth/WiFiモデルとLTEモデルの両方が対象です。
こんにちは、齊藤優です。PyCon TW 2025のスピーカーとして登壇してきたので、参加レポートをお伝えします。PyCon TW 2025は2025年9月5日から7日にかけて台湾の台北で実施されました。
GitLabは2025年9月25日、調査レポート「GitLab企業経営調査2025（日本版）ソフトウェアイノベーションによる経済効果」とGitLab Duo Agent Platformを紹介するメディア向けの発表会を行った。発表したのはGitLabのHead of Japanである小澤正治氏。この記事ではその模様をレポートする。
今回はベアボーンのMinisforum AI X1 PROにUbuntu 24.04.3をインストールし、さらにROCm 6.4.4とllama.cppを組み合わせてLLMを高速に動作させます。
Visual Studio Codeは2025年10月9日、バージョン1.105をリリースした。この記事ではいくつかの新機能と改善点を紹介する。
MySQL Group Replicationでは、データベースの更新を行うノードを制御するために、Flow Controlという仕組みが提供されています。
Playwright v1.56 で導入された Playwright Agents は、Planner、Generator、Healer の 3 つのエージェントで構成されており、アプリケーションコードを解析してテストケースの計画、テストコードの生成、失敗したテストの修正を自動化できます。この記事では、Claude Code から Playwright Agents を呼び出して、シンプルなカンバンアプリのテストコードを自動生成する手順を紹介します。
Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。この記事では Apps SDK を使用して、実際に ChatGPT 内で動作するシンプルなアプリを作成する手順を紹介します。
Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。
今回で10回目の開催となるiOSDC Japan 2025をレポートします。
書籍『幾何で見える必ずわかる一般相対性理論』の補講、第18回です。
Anthropicは2025年10月9日、Claude Codeのプラグイン機能をパブリックベータで提供することを発表した。
10月9日、Ubuntu 25.10 ("Questing Quokka") がリリースされました。
Googleは2025年10月8日、AIコーディングエージェントGemini CLIのv0.8.0アップデートで拡張機能が使用できるようになったことを発表した。
東海地方のPythonコミュニティによる技術カンファレンス「PyCon mini 東海 2025」が2025年11月8日（土）、名古屋市で開催される。
2025年10月7日、ReactおよびReact NativeがLinux Foundation傘下のReact Foundationに移行することが発表された。
Amazonの新製品が発表されました。スマートテレビの「Fire TV Omini QLED」「Fire TV 2」「Fire TV 4」、そして、ステック型のストリーミングメディアプレイヤーの「Fire TV Stick 4K Select」です。
Googleは2025年10月7日、ノーコードでAIミニアプリを構築できる実験的ツール「Opal」の提供範囲を拡大し、日本を含む15か国にも段階的に提供を開始することを発表した。
Googleは2025年10月7日、UI操作に最適化された新しいモデル「Gemini 2.5 Computer Use」を公開プレビューで提供開始した。
今回は10月9日にリリースされる予定のUbuntu 25.10の特徴的な変更点をお知らせします。
OpenAIは2025年10月6日、コーディングエージェントCodexの一般提供を開始した。またこれに合わせて、有料プラン向けの3つの新機能もリリースされた。
OpenAIは2025年10月6日、AIエージェントを構築、デプロイ、最適化するためのツールキット「AgentKit」を発表した。
10月12日に予定されている「Linux 6.18」のマージウィンドウ終了と最初のリリース候補版の公開に向け、プルリクエストのチェックに大忙しのLinusが、マージウィンドウ期間中はプルリクエストに対するLinusの手厳しい批判が増える時期でもある。
今回は、Misskey v2025.10.0に含まれる予定の「動画圧縮機能」で採用した、ブラウザ上で動画処理を行えるライブラリMediabunnyを紹介します。
第62回目は、Microsoftが提供しているAIツール「Copilot 3D」を使用して作成した3DモデルをBlenderにインポートする方法や、編集する方法などを見ていきます。
MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。
GitHubは2025年10月2日、プルリクエストの際、マージコンフリクトが発生したときにWebインターフェース上でワンクリックで解決可能なボタンの提供を開始した。
U-22プログラミング・コンテスト実行委員会は2025年10月3日、「U-22プログラミング・コンテスト2025」エントリー332作品のうち、事前審査を通過した32作品を発表した。
技術に関する同人誌の即売会「第十二回 技術書同人誌博覧会（技書博12）」が、2025年10月26日にソニックシティ（埼玉県さいたま市）にて開催される。
Googleは2025年10月2日、AIコーディングエージェントJulesをコマンドラインで操作できるツールキット「Jules Tools」をリリースした。
questing（Ubuntu 25.10）のリリースまで一週間になりました。
GitHubは2025年9月30日、ブログ記事「Spec-driven development: Using Markdown as a programming language when building with AI」を公開し、Markdownをプログラミング言語として用いる仕様駆動開発の可能性の一端が紹介された。
Googleは2025年10月1日、パソコン版GoogleドライブにAIを活用したランサムウェア検知機能を搭載したことを発表した。
Microsoftは2025年10月1日、エージェント型AIアプリを開発するためのSDKとランタイムである「Microsoft Agent Framework」を発表、パブリックプレビューとしてリリースした。
現状は、PC向けのクライアントOSと言えば、WindowsとmacOSが大半を占めています。しかし、Qualcommが開催したSnapdragon Summit 2025のオープニング基調講演で、この状況を変えるかもしれない未来が語られました。
OpenAIは2025年9月30日、動画生成モデルSora 2を発表し、同モデルを使える新しいソーシャルアプリSoraのiOS向けの提供とそ段階的利用を米国とカナダで開始した。
Linus Torvaldsは9月28日（米国時間）、当初のスケジュールどおりに「Linux 6.17」を公開した。
DS-Lite接続のようなキャリアグレードNATな環境では、従来のようにIPv4アドレスで家庭のルーターまで到達できません。こうした問題を解決できるのが、今回紹介するトンネル型リバースプロキシです。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
Microsoftは2025年9月29日、Microsoft 365 Copilotにおいて、エージェントを使ったバイブワーキング（Vibe working）を実現するため、Officeアプリに「エージェントモード」とCopilotチャットでの「Officeエージェント」を搭載することを発表した。
OpenAIは2025年9月29日、ChatGPTにAIエージェントコマースに便利な機能であるインスタントチェックアウト機能を導入し、米国のChatGPTユーザーが利用できるようになったことを発表した。
Anthropicは2025年9月30日、同社のAIモデルClaude Sonnetの新バージョンSonnet 4.5をリリースした。
2025年9月の「Python Monthly Topics」は、Python 3.14で追加されるasyncioタスク可視化機能であるasyncio psコマンド、asyncio pstreeコマンドと、asyncio.print_call_graph()関数、asyncio.capture_call_graph()関数を紹介します。
MySQL には「ユーザー定義変数（User-defined variables）」と呼ばれる仕組みがあります。
自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。
GitHubは2025年9月25日、プルリクエストの新しい「Files changed」ページにおいて、変更されたファイル内の未変更行を含む任意の行へコメントできる機能を追加したことを発表し、リポジトリ単位で段階的に展開していることを案内した。
2025年10月に予定されている「Ubuntu 25.10」のリリースを間近に控えるなか、Ubuntuリリースチームは9月19日から「Dangerous Daily Desktop（/daily-dangerous）」と名付けたデスクトップイメージの公開を開始した。
Cloudflareは2025年9月25日、同社のサーバレスアプリケーションプラットフォームCloudflare Workersからトランザクションメールを直接送信できる新機能「Cloudflare Email Service」を発表した。
GitHubは2025年9月25日、GitHub Copilot CLIの公開プレビュー版を発表した。
Sakana AIは2025年9月25日、LLMを用いて桁違いに少ないリソースでアルゴリズムを探索できる新しいフレームワーク「ShinkaEvolve」を発表、Apache 2.0ライセンスの元GitHub上に公開した。
questing（Ubuntu 25.10）はベータがリリースされ、10月9日のGAを目指してカーネルも確定され、あと3週間ほどをQA（と、まれに隠し球として投入される新機能）に費やすフェーズになりました。
Googleは2025年9月23日、日本語を含む7つの言語でもGoogle WorkspaceやGoogle AIプランの加入者向けに、GoogleスプレッドシートのAI関数の提供を始めることを発表した。
さくらインターネットは2025年9月24日、生成AI向け推論API基盤「さくらのAI Engine」の一般提供を開始した。
NVIDIAは2025年9月23日、日本における人口統計、地理的分布、性格特性の分布に基づいて合成的に生成されたペルソナのオープンソースデータセット「Nemotron-Personas-Japan」を公開した。
「スクラッチでプログラミングをはじめよう」第28回です。
前回に引き続き、ポケットサイズのAIデバイスrabbit r1向けOSの最新版「rabbitOS 2」について取り上げます。
npmjs.comを管理しているGitHubは2025年9月24日、npmエコシステムで最近顕在化しているアカウント乗っ取りおよび自己増殖型マルウェアによるサプライチェーン攻撃があったことを鑑みて、認証と公開プロセスを強化する計画を発表した。
Figmaは2025年9月23日、リモートMCPサーバーをオープンベータとして段階的に提供を開始した。
Googleは2025年9月23日、AIコーディングエージェント向けに Chrome DevTools MCPサーバーの公開プレビューを開始した。
今回はAI文章画像解析エンジンであるYomiTokuを通じて、GPUメーカーごとに用意されているPyTorchのインストール方法を紹介します。
OpenNext は Next.js アプリケーションを Vercel 以外に簡単にデプロイするためのツールです。Cloudflare Workers をサポートしています。 Cloudflare 自体も OpenNext によるデプロイを推奨しており、次のコマンドによって OpenNext による Next.js ア...
cagent は Docker 社が開発した AI エージェントフレームワークです。YAML ファイルでエージェントの振る舞い・役割・使用するツールを宣言的に定義でき、コードを 1 行も書かずにエージェントを構築できます。この記事では cagent の概要とインストール方法、YAML ファイルの書き方、実際にエージェントを動作させるまでの手順を解説します。
browserslist は、フロントエンド開発において、どのブラウザをサポートするかを指定するためのツールです。これにより、開発者はターゲットとするブラウザの範囲を簡単に定義でき、CSS や JavaScript のトランスパイルやポリフィルの適用を自動化できます。
Fedoraプロジェクトは9月18日、プロジェクト内のサブプロジェクトやSIG（Special Interest Groups）の活動をサポートする新しいコラボレーションプラットフォーム「Fedora Forge」をソフトローンチした。
xAIは2025年9月19日、200万トークンのコンテキストウィンドウを備えたコストパフォーマンスの高い最新の推論モデル、Grok 4 Fastをリリースした。
第61回目は、「Claude」を使って、Blenderのオブジェクトを均等に並べて生成してみたり、ランダムに並べて生成してみたりすると、どのような結果になるのかを見ていきます。
GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます
現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。
前回は、Nx の事例をベースに「パッケージを公開する側」の対策について解説した。今回は、「パッケージを使う側」、もっと言えば「OSS を使う上で開発者が考えるべきこと」について考察する。
Flutterに関する年次コミュニティカンファレンス「FlutterKaigi 2025」が2025年11月13日（木）に東京、大手町プレイス ホール＆カンファレンスにて開催される。
Frame0は2025年9月17日、ワイヤーフレーム作成ツールFrame0のバージョン1.1.0をリリースした。今回のアップデートで、Frame0 AI Agentを実験的に追加した。
GNOMEプロジェクトは9月17日、「GNOME 49“Brescia”」の正式リリースを発表した。
Rustリリースチームは2025年9月18日、Rustの新バージョン1.90.0をリリースした。
Googleは2025年9月18日、WebブラウザChromeの米国ユーザー向け英語版に複数のレベルでAIモデルGeminiを組み込み、AIによるブラウジング体験を向上させるアップデート版を提供することを発表した。
Canonicalが、CUDAツールキットとランタイムのUbuntuリポジトリからの配布が可能になったことをアナウンスしています。
Googleは2025年9月17日、Googleアプリ内のDiscoverで、ユーザーが関心のあるメディアやクリエイターをフォローできるようにすること、また今後数週間のうちにYouTube Shortsの動画、𝕏やInstagramの投稿を表示対象として追加することを発表した。
OpenAIは2025年9月17日、ChatGPTを大学生が利用する場合に役立つチャット例「100 chats for college students」を公開した。
DuckDB Foundationは2025年9月16日、オープンソースの組み込み型データベースDuckDBの新バージョン1.4.0（コードネーム“Andium”）をリリースした。
ポケットサイズのAIデバイスrabbit r1向けOSの最新版「rabbitOS 2」の最新動向について取り上げます。
Googleは2025年9月17日、AIエージェントがユーザーに代わって安全に支払いを実行するためのオープンプロトコル「Agent Payments Protocol (AP2)」を発表した。
GitHubは2025年9月16日、MCPサーバーを発見・利用するための新たな拠点として「GitHub MCP Registry」を公開した。
2020年から2024年までに取り上げられたデザイン要素から、「ウェブデザインのトレンド」とは何か、それ以降のトレンドがどのような方向へと向かっていくのかを考察していきます。後編です。
今回はシリアルコンソールサーバーを、Ubuntuと適当なマシンを使って安価に作ってみましょう。
2025年9月16日（米国時間）にLTS（Long-Term Support、長期サポート）であるJava 25がリリースされました。
Linuxデスクトップ環境としてもっとも多くのユーザに使われているGNOMEは現在、X11のサポートを段階的に終了し、Waylandセッションのみをサポートすることを計画している。
OpenAIは2025年9月15日、AIコーディングエージェントCodex向けにさらに最適化されたGPT-5の新バージョン「GPT-5-Codex」をリリースした。
今回は以前紹介した 第248回 知っておくと得するかもしれないMySQLの組み込み関数 の「その2」として、「知っておくと得する」可能性のある関数を、再びいくつかピックアップしてご紹介します。
2020年から2024年までに取り上げられたデザイン要素から、「ウェブデザインのトレンド」とは何か、それ以降のトレンドがどのような方向へと向かっていくのかを考察していきます。前編です。
最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。
Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。
Visual Studio Code（以下VS Code）は2025年9月11日、August 2025（version 1.104）をリリースした。
questing（Ubuntu 25.10）の開発はUI Freezeが行われ、「ドキュメントのための時間」に突入しました。
2025年9月8日、MCPコミュニティは、MCP（Model Context Protocol）クライアントに信頼できるMCPサーバーの一覧を提供する公式リスト「MCPレジストリ」をプレビュー版として公開した。
今回は手のひらサイズのミニスマホ「Bluefox NX1」について取り上げます。
今回は8月14日（現地時間）にリリースされたVirtualBox 7.2の変更点について説明します。
2025年9月8日、Chalk、debug、ansi-stylesなど18個の人気npmパッケージにサプライチェーン攻撃の影響があったことが報告された。
Googleは2025年9月8日、同社が提供するAIノートサービス「NotebookLM」で多彩なレポート生成やテスト作成などユーザの学習を支援する新機能をリリースした。
Openwallプロジェクトは9月2日、Linuxカーネルの動作中に脆弱性攻撃や不正な改変を検知するオープンソース（GPLv2）のセキュリティモジュール「Linux Kernel Runtime Guard（LKRG） 1.0.0」をリリースした。
Googleは2025年9月9日、検索におけるAIモードで、日本語を含む5つの言語に対応したことを発表した。今後数日で段階的に利用可能になるとみられる。
Cloudflare D1 (以下 D1) は Cloudflare のリレーショナルデータベースサービスです。実態はリモートにある SQLite です。 Drizzle ORM は TypeScript で各種データベースに接続するデータベースクライアントで ORM です。テーブルスキーマ管理と型安全性に優れています...
第60回目は、画像をAIに見せその画像をもとに、Blender上でモデリングを行っていく様子を見ていきます。
仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。
プラハで開催されたEuroPython 2025のカンファレンス2日目からクロージング、その後のスプリントまでをレポートします。
8月末にquesting（Ubuntu 25.10）の最後のスナップショット、snapshot 4がリリースされました。
Googleは2025年9月4日、デバイス埋め込みAI向けに設計された、高効率な新しいオープンモデル「EmbeddingGemma」をリリースした。
音声認識・文字起こしを実現できるモデルWhisper。ここ数年、それを元にしたさまざまなツールも登場しました。今回紹介するWhisperLiveKitもそのひとつです。
Microsoftは2025年9月3日、同社が1977年に開発したBASICインタプリタ「6502 BASIC」を、MITライセンスのもとGitHub上にオープンソースとして公開した。
8月26日、GoogleはAndroid Developer BlogでPlayストア外からアプリをインストールする「サイドロード」の安全性を高めるために、開発者認証制度（Developer Verification）を導入する計画を発表しました。
みてね×gihyo.jpスペシャル企画。12回目はML自動提案による写真プリントの仕組みについて解説します。
2025年9月26日（金）、27日（土）に広島国際会議場で開催されるPyCon JP 2025のタイムテーブルが公開された。
GitHubは2025年9月2日、コーディングエージェントを利用した仕様駆動開発（Spec-Driven Development）のためのツールキット「Spec Kit」を開発し、公式ブログで紹介した。
Googleが提供するNotebookLMは2025年9月3日、音声解説の出力形式に「概要」「評論」「議論」を追加したことを発表し、段階的に提供し始めた。
Nx リポジトリが攻撃を受け、広範囲にわたるインシデントが発生した。今回の事例は、GitHub Actions を中心に複数のステップが組み合わさった攻撃であり、過去に何度も発生してきた攻撃と本質的には変わらない。しかし、途中で AI が何度か登場するため「AI が書いたコードをマージしたから」などといった表面的な反応もあるが、実態はそこまで単純な話でもない。また、「自分のプロジェクトは Nx を使っていないから関係ない」とも言えない攻撃であるため、特にフロントエンドエンジニアは全員注意と確認が必要となる。この攻撃が何だったのか、そこから学べることは何なのか、解説する。
SQLを書いていると、ちょっとしたテストデータを用意したいときや、固定の値を一時的にテーブルのように扱いたい場面があると思います。
Linus Tovaldsは8月31日、開発中のLinuxカーネル「Linux 6.17」の4本目のリリース候補版となる「Linux 6.17-rc4」を公開した。
2025年11月14日（金）、15日（土）の2日間、Perlを中心としたIT技術に関する年次カンファレンス「YAPC::Fukuoka 2025」が福岡工業大学にて開催される。
この連載では、それぞれのレベル別にAWSの学び方を紹介します。第4回は、「既にAWSを知っている人が、エンジニアとしてのレベルアップを目指すにはどうすべきか」についていくつかの方策を提案します。
gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。
プログラミング言語Goに関する年次カンファレンス「Go Conference 2025」が、2025年9月27日（土）、28日（日）の2日間にわたってに東京・渋谷のAbema Towersにて開催される。
技術分野を限定しないエンジニア向けのカンファレンス「builderscon 2025」が2025年10月4日（土）に埼玉会館で開催される。現在参加チケットが販売中。
2025年8月11日（山の日）に開催された『すぐわかる！ ぷよぷよプログラミング SEGA公式ガイドブック』の発売記念イベントのレポートです。
xAIは2025年8月28日、エージェントコーディング向けに優れた性能をもつ高速でコストパフォーマンスの高い推論モデル「Grok Code Fast 1」を発表した。
データベースワークロードに関連する、興味深い取り組みが行われています。MySQL 8.4のUbuntuパッケージにおいてtcmallocを利用するようにしたことで実現されています。
OpenAIは2025年8月27日、Codexの機能を強化し、VS CodeやCursorからの使うための新しい拡張機能をリリースした。またGPT-5のリリース以降、Codex CLIの開発が活発に行われており、今回のアップデートで画像入力、メッセージキューイング、ウェブ検索などの新機能が追加された。
2025年8月の「Python Monthly Topics」は、データパイプラインやワークフロー、ETLで利用されるワークフロー・フレームワーク「Prefect」について紹介します。
今後登場予定のAndroid 16 QPR2で、アプリが持つ主要機能をアシスタントが実行できる「App Functions API」が導入されます。
Googleは2025年8月26日、新しい画像生成・編集モデル「Gemini 2.5 Flash Image」を発表した。
前回はキューブパズルのおおまかな仕組みについて解説しました。今回はその続きの具体的なデザインをしていきます。
今回は自作PCを組み立て、Ubuntuをインストールする特別企画の後編です。前編に引き続き、実際に自作PCを組み、UbuntuをインストールしてLLMを動作させるところまでを行います。
Googleが提供するNotebookLMは8月25日、「動画解説」機能において英語以外の80言語で段階的に1週間以内に利用可能になることを発表した。これにより、日本語で解説動画を作成できるようになる。
Googleは2025年8月21日、検索サービスにおいてAIが回答をおこなう「AIモード」を日本を含む180以上の国と地域で提供開始することを発表し、日本国内でも展開され始めている。
第59回目は、AIを使って指示を出し、Blender上でモデリングを行い、そこに自分自身で手を加えていく方法を見ていきます。
CSS Advent Calendar エピローグ
Design と Web Design の思想を橋渡しする Design System。Semantic Design と Declarative Design System の関係性
コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。
Intrinsic Web Design/Every Layout/Utopia と Declarative Design. そして、Container Size Queries の実現
gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。
Web というメディアが本来持つ性質/値を最大限に活かす「Intrinsic Web Design」という考え方
questing（Ubuntu 25.10）の開発はFeature Freezeを迎え、一応の『仕様が確定する』タイミングとなりました。
EuroPythonはヨーロッパ地域で開催されるPythonに関するカンファレンスです。毎年ヨーロッパの各地域で開催され、今年はチェコのプラハで開催されました。
今後登場予定のAndroid 16 QPR2で、アプリが持つ主要機能をアシスタントが実行できる「App Functions API」が導入されます。
Responsive Web Design までの歴史から見る、Web の制約と特性とデザインの理想
OpenAIは2025年8月20日、AIコーディングエージェントをガイドするためのシンプルなフォーマット「AGENTS.md」を案内するサイトを公開した。
今回はOpenAIの新しいモデルGPT-5を、開発者視点で徹底解説します。APIの新機能やプロンプト設計の要点、フロントエンド開発の作例と他モデルとの比較までを一気に見ていきます。
今回は自作PCを組み立て、Ubuntuをインストールする特別企画の前編です。まずはパーツの選定です。
CSS Scope の背景と、CSS Scope の提案に至るまでの経緯から考察するメンタルモデル
コーディングエージェントを使用する際にはプロジェクトの技術スタックやビルド手順、コーディング規約を記載したドキュメントを用意して、コンテキストに含めるのが一般的な手法です。 しかし、 コーディングエージェントの製品ごとに異なるファイル名で用意しなければいけないという問題がありました。
2025年8月14日、GitHub CopilotのMCP（Model Context Protocol）サポートが、JetBrains、Eclipse、Xcode向けに一般提供開始された。
Cascade Layers に付随して議論されたトピックと、Cascade Layers の具体的なユースケース
MySQLのバイナリログを扱う新しい機能Binary Log Dumping and Loading Utilitiesを構成する要素とその使い方について紹介します。
11年の期間に渡ってFedoraプロジェクトを率いてきたマシュー・ミラー氏に、オープンソースプロジェクト運営の魅力と課題についてお話をうかがいました。
2025年9月26日（金）、27日（土）に東京・JPタワー ホール＆カンファレンスとオンラインのハイブリッドで開催予定の、Ruby on Railsを中心としたWeb技術に関するカンファレンス「Kaigi on Rails 2025」のチケット販売が始まっている。
Cascade Layers の背景と、Cascade Layers の提案に至るまでの経緯から考察するメンタルモデル
「詳細度設計」としての「CSS アーキテクチャ」、その未来’
POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。
標準側での「スタイルのカプセル化」
Googleは2025年8月14日、2億7000万パラメータをもつコンパクトなモデル「Gemma 3 270M」をリリースした。
questingの開発は「リリースまであと2ヶ月」、「大物の更新をできるだけ入れ、残りの計画をある程度整理しておく」というシーズンに入りました。
前回はメモリ保護の動きを確認しました。今回は、ここまで紹介したメモリ制限やメモリ保護において、階層構造が考慮されることを、実際に試しながら確認します。
「親要素の任意プロパティ」にアクセスする手段として、`inherit()` の仕様が CSS Values and Units Module Level 5 で策定されています。これにより、Custom Properties を経由せず、親要素のプロパティを子要素から直接自己参照でき、長年望まれてきた非常に多くのユースケースが一挙に解決されることが期待されています。
Declarative UI の登場による CSS エコシステムの変遷
gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。
Googleは2025年8月13日、コマンドラインAIコードアシスタントGemini CLIをVS Codeに統合し、より連携を強化した開発ができるようになったことを発表した。
npm エコシステムと並行して、進化してきた CSS アーキテクチャ
Visual Studio Codeは2025年8月7日、 バージョン1.103（July 2025）の一般提供を開始した。このバージョンでは、チャット（Copilot Chat）を中心に多数の新機能や改善が施された。
AltCSS とも言える SassとPostCSS の登場、エコシステムへの影響
Linus Torvaldsは8月10日、次期Linuxカーネル「Linux 6.17」の最初のリリース候補版となる「Linux 6.17-rc1」を公開した。
第58回目は、AIを使って指示を出し、Blender上でモデリングを行う方法を見ていきます。
2025年7月14日～20日にチェコで開催された「EuroPython 2025」と、2025年5月24日にポーランドで開催された「PHPers Day 2025」にそれぞれ日本から登壇、参加したメンバーが現地の体験を共有する報告会が、2025年8月26日（火）にハイブリッド形式で開催される。
アプリケーションとしての Web の進化と SPA
iPhone の登場と、Web デザインにおける適応性の黎明
CSS におけるブラウザの負債とエコシステム側の解決策
MCP UI は Model Context Protocol (MCP) を拡張して、AI エージェントがインタラクティブな UI コンポーネントを返すことを可能にする仕組みです。これにより、AI エージェントとのチャットの返答としてグラフや画像ギャラリー、購入フォームなどを表示できます。この記事では MCP UI の SDK を利用して、AI エージェントがインタラクティブな UI コンポーネントを返す方法を試してみます。
CSS 標準から、CSS 標準外の変化への転換
2025年8月8日に『Webフォント実践ガイド—Google Fontsではじめる 美しく機能的なタイポグラフィ』を上梓された飯塚修平さんに話を伺いました。
OpenAIは2025年8月7日、これまでで最も優れたAIシステムであるGPT‑5を発表した。
今回のUbuntu Weekly Recipeでは、来たる2025年8月9日にリリースされる安定版Debian 13 "Trixie"の主な変更点について紹介します。
questing（Ubuntu 25.10）の開発は順調に進んでおり、Snapshot 3がリリースされました。
何重ものフィルタリングと計算処理を経て、適用されるスタイルが決定するまでの仕組み
gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。
Googleは2025年8月5日、AIが開発ワークフローの自動化をアシストする「Gemini CLI GitHub Actions」をベータ版としてリリースした
AIの活用では、MCPという言葉が注目を浴びています。連載の最後に、JavaでMCPサーバー／クライアントを実装してみて、MCPへの理解を深めます。
今回のテーマは「スクロール」に関するモダンな機能群です。
Origin の続きと、Cascade Sorting Order の全体像
Android XRは、Project Moohanの名前で呼ばれており、Samsungがデバイスを開発中で、2025年内（Q3からQ4）には発売されるとされています。
「データによって人の価値を最大化する」をミッションに掲げるプレイドは、企業への支援を通じて、そこで生成・解析されるデータを生活者一人ひとりの体験価値に還元していくことを目指し、データと技術を最大限活用したプロダクトやソリューションを日々開発している。 同社はAI専任のチームを立ち上げ、AIを活用した単なる業務効率化ではなく、顧客の「コンテクスト」を深く理解し、新たな顧客価値の創造を支援することを目的としている。 今回はプレイドのAI専任チーム「Data Mind（データマインド）」の開発サイドをリードする牧野祐己氏、小林篤史氏、西村優汰氏が「コンテクスト」を中心とした価値創造につなげるAI技術戦略、そして共に未来を創るエンジニア像について語る。
OpenAIは2025年8月5日、2つのオープンモデル「gpt-oss-120b」と「gpt-oss-20b」をリリースした。
Cascade Sorting Order と UA Origin の解剖
Debianプロジェクトはまもなく32回目のアニバーサリーを迎えるが、これほど息の長いオープンソースプロジェクトになると、バグトラッカーの追跡をかいくぐり、10年20年に渡って駆除を免れているバグも存在する。
Alibabaは2025年8月4日、200億パラメータをもつ新たな画像生成AIモデル「Qwen-Image」を公開した。
Cascade の登場と Importance の裏側
MySQL 8.0のGroup Replicationは、複数ノード間でトランザクションを複製・認証して整合性を保つことにより、MySQLクラスタを構築するプラグインです。
スイスProton AG.は2025年7月31日、さまざまなプラットフォームで利用可能なオープンソースの2要素認証（2FA）アプリ「Proton Authenticator」をリリースした。
Googleは2025年7月31日、Android開発用の公式IDEであるAndroid Studioの最新バージョン「Android Studio Narwhal Feature Drop」を安定版としてリリースしたことを発表した。
Cascade Layers 以前の Cascade
Fastlyの創業者の1人であり、現在はFellowを務めるTyler McMullen氏に、同社の強みやAIへの取り組み、オープンソースコミュニティへの支援活動などについてお話を伺いました。
Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。
ヒントとしての CSS、あるいはコンテンツを守るための Web の設計思想
LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。
CSS 以前のドキュメントスタイル手法の提案 - Prevent the Web from becoming a giant fax machine!!
SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。
Linux Foundationは2025年7月29日、AIエージェントの相互連携インフラの構築をめざすAGNTCYプロジェクトが、寄贈によりLinux Foundation傘下に移管されたことを発表した。
Googleは2025年7月30日、非構造化テキストから構造化データを抽出するオープンソースのPythonライブラリ「LangExtract」をリリースした。
questing（Ubuntu 25.10）の開発では、6.17カーネルの搭載が予定されています。
前回は、LangChain4jを使ってAIチャットを作りました。今回は、処理を呼び出して動的な情報を取り込む仕組みFunction Callingと外部から取り込んだ情報を元に返答を生成するRAGを実装します。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
1989年の WorldWideWeb ブラウザから始まる、CSS 誕生前の Web の歴史の振り返り。スタイルのない時代から IMG タグ、FONT タグの登場。
2025 年 6 月初旬に、副業で Web 技術アドバイザをしている企業の Web チームエンジニア向けに、4 日間の Web Bootcamp を実施した。
Googleは2025年7月31日、コマンドライン型AIアシスタント「Gemini CLI」で再利用可能なプロンプトを定義できる「カスタムスラッシュコマンド」をサポートしたことを発表した。
gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。
クラスメソッドは2025年7月29日、AnthropicのAIコーディングツールClaude Codeを使った開発を体系化・効率化するフレームワーク「Tsumiki」（積み木）をオープンソースとして公開した。
2025年1月、Pebble OSがオープンソースになったのを受けて、Pebble復活のプロジェクトが始動したことを本連載でも取り上げました。その復活が秒読み段階に入ったのでご紹介します。
CSS Advent Calendar Prologue
2025年6月16・17日、KubeCon + CloudNativeCon Japan 2025がヒルトン東京お台場にて開催されました。KubeCon + CloudNativeCon（以下、KubeCon）は世界最大のクラウドネイティブ技術の国際カンファレンスであり、この分野の日本国内のエンジニアにとって待望のイベントでした。
NotebookLMは2025年7月29日、ノートブック上のStudioパネルをより使いやすくするために刷新したことを発表し、ユーザーに展開し始めた。
Linus Torvaldsは7月27日（米国時間）、「Linux 6.16」を公開した。
今回は「誰かに相談」するときに、過不足なく「こんな環境なんだけど」と伝えるのに役立つ「sosコマンド」を紹介します。
Anthropicは2025年7月29日の𝕏へのポストで、同社のClaude ProおよびClaude Maxプランのユーザーに対して、8月下旬から週ごとの使用レート制限を行うことを予告した。
Microsoftは2025年7月28日、WebブラウザMicrosoft EdgeにAI搭載のブラウザ機能「Copilot Mode」が実験的に導入されたことを発表した。
2025年7月10日に開催された、ハイヤールー社主催の勉強会「Study Hack」では「資格で人生を変える勉強法」というテーマを取り上げました。登壇したのは、IPAとAWS認定資格のすべての区分に合格したENECHANGE社の岩本さんです。試行錯誤を重ねて培った勉強のノウハウをもとに「合格する」ための勉強法のエッセンスが紹介されました。
Alibabaは2025年7月23日、同社が開発するLLM「Qwen3」シリーズの最新推論モデルQwen3-235B-A22B-Thinking-2507をオープンソースとしてリリースした。
地区の田植えやそれに伴なう各種作業に手を取られ、前回からちょっと間が空いてしまいましたが、今回はgrubの起動画面の中心を占める「ブートメニュー」を中心に紹介します。
Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。
従来の JavaScript では Cookie の管理は `document.cookie` を使用して文字列で行われていました。しかし、文字列での Cookie 管理は面倒で間違いやすいです。また `document.cookie` は同期的に動作するため、Cookie の更新が完了するまでイベントループがブロックされてしまいます。さらに `document` オブジェクトに依存しているため、Web Worker や Service Worker などの非同期環境では使用できません。 このような問題を解決するために、非同期 API `CookieStore` が導入されました。`CookieStore` は非同期的に Cookie の読み書きを行うことができ、さらに Cookie の属性をオブジェクトとして扱うことができます。
Anthropicは2025年7月24日、同社のコーディングAIツールClaude Codeでカスタムサブエージェント（Custom Sub Agents）機能が追加されたことをアナウンスした。
questingの開発では、Raspberry Piのデスクトップイメージの軽量化のための試みが開始されました。
筆者のように、インターネット上での生活が長く、かつエンジニアとして生きてきた人間には、一般の人には伝わりにくいデジタルの遺品が多く存在する。仮に自分が死んだ場合に、これらをどのように遺族に処分してもらうかは、なかなか難しい問題だ。筆者はこの「デジタル終活」をどうするかを、長いこと模索してきた。今回は、「1Password」と法務局が行う「自筆証書遺言保管制度」を用いた方法を思いついたため、検証を試みる。
データサイエンスを用いてビジネスで価値を創出したい、と考えたとき、多くの人が「どうやって分析するか」「どの機械学習モデルを使うか」といった「解き方」に注目しがちです。しかし、ビジネスの現場で本当に重要なのは、目の前にある曖昧な「課題」を、どのようにしてデータサイエンスで扱える具体的な「問題」に落とし込むか、というプロセスです。
Android開発者コミュニティによる年次カンファレンス「DroidKaigi 2025」が、2025年9月10日（水）～12日（金）の3日間、東京・ベルサール渋谷ガーデンで開催される。
Wayland上でのX11互換レイヤ構築をめざすオープンソースプロジェクト「Wayback」は7月23日、最初のプレビューリリースとなる「Wayback 0.1」を公開した。
Googleは2025年7月23日、Google AnalyticsのAPIと連携するローカルMCP（Model Context Protocol）サーバーの実験版を、Apache 2.0ライセンスに基づくオープンソースソフトとして公開した。
GitHubは2025年7月23日、自然言語でアプリを開発できるツール「GitHub Spark」をCopilot Pro+ユーザー向けにパブリックプレビュー版として提供したことを発表した。
親の年齢に限らず、生きているうちにやってもらった方がいい、たった 1 つのこととして、エンディングノートの作成がある。終活は、それをどのくらい準備しておくかで、本人以上に遺族の負担が格段に減るからだ。
今週は、小ネタながらAndroid関連の話題がいくつかあったので、気になるものをピックアップしていきます。
今回は、LLMへの接続に必要な処理を共通化する定番ライブラリであるLangChain4jを使ってチャットアプリを作っていきます。
Alibabaは2025年7月22日、エージェントを活用したコーディングのためのオープンモデル「Qwen3-Coder」を新たに発表した。
2025年7月16日、「中高生Rubyプログラミングコンテスト2025」第15回大会の開催が発表されました。15回目となる今回も、昨年に続き会場（三鷹産業プラザ）での対面開催が予定されています。
今回は百度（Baidu）が6月30日にリリースした新しいMoEモデル、ERNIE 4.5を使用するために、llama.cppをビルドします。そしてあまり高性能ではないGPUで動作させます。
先日、Passkey 啓蒙の一環で、まだパスワードマネージャを導入してない人に対する「1Password 導入セミナー」を実施した。その内容を再収録したものを公開する。ざっくりと、前半が一般ユーザ、後半が開発者向けの内容となっている。動画及び資料は、啓蒙目的であれば自由に使ってもらって構わない。なお、筆者は 1Password との利害関係は一切無い。
Intelは7月18日、同社が独自に開発/保守を行ってきたローリングリリース型のLinuxディストリビューション「Clear Linux OS」の提供を終了することを発表した。
Dockerは2025年7月21日、Docker MCP Toolkitが、MCPクライアントとしてLM Studioをネイティブにサポートすることを発表した。
MySQLでクエリを実行する場合、クエリオプティマイザがテーブルやインデックスの統計情報を使用して、最適な実行計画を選択します。
第57回目は、AIツールを使って指示を出し、Blender上でモデリングを行うための準備をしていきます。
現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。この記事では私のキャリアにおいて影響を与えたであろうコンピューター・IT の定番書籍を紹介します。
GitHubは2025年7月16日、機能プレビューとして提供していた「コマンドパレット」を8月6日をもって廃止予定することを発表した。
GitHubは2025年7月16日、JetBrains、Eclipse、Xcode向けのGitHub Copilotエージェントモードの一般提供を開始した。
OpenAIは2025年7月17日、AIエージェントがさまざまな作業を自律的に行う「ChatGPTエージェント」を発表した。
今月の「Python Monthly Topics」は、Web APIのテストデータを自動生成してくれるツール「Schemathesis（スキーマセシス）」を紹介します。
questingの開発は夏休みシーズンに突入し、少しだけペースが落ちた気配があります。大きな変化は限定的なものの、SRUポリシーの明確化のためのドキュメントが準備されています。
7月9日、GoogleはWear OS搭載のスマートウォッチでGeminiが利用できるようになったと発表しました。
この連載では数回にわたってJavaでAIエージェントを作る基本になるLLM操作のプログラムを作っていきます。今回は導入しやすいLM Studioを使ってLLMにアクセスしてみましょう。
GitHubは2025年7月15日、Googleソーシャル認証情報を使ってGitHubアカウントにサインアップ、ログイン可能となったことを発表した。
サービスは、ユーザを守るために Passkey をサポートし、ユーザの移行を促す努力をする必要があった。このプロセスに対して、ユーザはまったくの受動的態度でいることはできない。では、ユーザはいったい何をリテラシとして身につけ、どう自分の身を守っていくべきなのだろうか?
2025年の7月12日、グリー株式会社主催のもと、六本木にて「Ubuntu 25.04リリース記念オフラインミーティング」が開催されました。今回はいつもと趣向を変えて、このイベントの様子をレポートします。
Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。
Anthropicは2025年7月15日、Claudeに接続するツールの新しいディレクトリを公開した。
Googleは2025年7月14日、調査アシスタントサービス「NotebookLM」において、公式が厳選した「おすすめのノートブック」の提供をおこなうことを発表した。
Red Hatは7月9日、同社が開発者向けに提供する無償プログラム「Red Hat Enterprise Linux（RHEL） for Developers」の新しいサブスクリプションメニューとして「RHEL for Business Developers」を提供開始した。
Metaは2025年7月15日、同社の提供するソーシャルサービスThreadsにおけるメッセージ（DM）機能を日本でも展開をはじめた。
AWSは2025年7月14日、新しいAIエージェント機能を備えたIDE、「Kiro」をプレビューリリースした。
パスワード + TOTP は限界を迎え、Passkey へ移行しなければ、サービスがユーザを守りきれなくなった。逆を言えば、サービスがユーザを守りたいと思うのであれば、Passkey を提供しないわけにはいかない時代に突入している。では、令和のこの状況において、サービスはどう対応していくべきだろうか?
中国Moonshot AI（月之暗面）は2025年7月11日、同社が開発するオープンソースLLMの新バージョンKimi K2をリリースした。
Apple が突如発表した Passkey。実態は「WebAuthn の秘密鍵を iCloud で共有」するサービスだった。そして、業界は本格的な Password-Less に向けて進んでいく。
AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。
TOTP/WebAuthn は、バックアップコードの適切な保管方法が示されないまま、移行だけが推し進められた。YubiKey などの物理 Authenticator の扱いとして、「二本登録して、片方は普段使い、もう片方は貸金庫へ」などと、かなり無理のあるベストプラクティスが啓蒙されたりもしていた。それらをスマホに移行して、登録は便利だが壊したら詰むでは、ユーザは安心して使えない。いや、正確には「よくわからないまま使って、詰んでから Apple のサポートに連絡する」という状態だったのだろう。ここに解決策が提示されたのが、WWDC 2021 だった。
v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK を使用して、v0 のプラットフォーム API を試してみます。
Infostealer は、ユーザの権限でインストールされ、ユーザがアクセスできるあらゆる情報を盗んで去っていく。そこから、どんなに暗号化して保存しても、使用時には平文にしないといけない「パスワード」という文字列を守り抜くのは非常に難しい。であれば、最初から文字列に頼らなければ良い。それが WebAuthn と FIDO だった。
Claude Code でうっかりセッションを閉じてしまった経験が一度はあるのではないでしょうか？一度セッションを終了すると会話のコンテキストが失われてしまいますが、Claude Code では前回の会話の続きを開始する方法があります。
Visual Studio Codeは2025年7月10日に、バージョン1.102（June 2025）の一般提供を開始した。多数の新機能と改善を含んでおり、特にターミナルコマンドの自動承認機能が実験的に追加されている。
例年の開発パターンに比べて「かなり前のめり」な傾向のあるquesting（Ubuntu 25.10）の開発においては、さまざまなものに新しいアプローチが導入されています。今週新しく登場したものは、Raspberry Piの新しいブート方式でした。
株式会社ディジタルグロースアカデミア リブロワークス部デザイン室の峠坂あかりと松澤維恋です。今回の記事では、入門書から少しステップアップした、これまでの制作経験から得られたノウハウをご紹介します。
パスワードと TOTP の問題は、「人間が入力する必要がある」ことだった。対策は Autofill であり、そのためにもパスワードマネージャ相当が必要になる。では、パスワードマネージャを使っていれば、パスワードと TOTP で十分なのだろうか?
アジャイルプランニングが登場してから25年、アジャイルの概念を体現する次世代のツールを見出すことが重要です。
20周年という記念すべきアニバーサリーまで1ヵ月を切ったことから、openSUSEプロジェクトはコミュニティメンバーに写真やマイルストーンの共有を呼びかけている。
xAIは2025年7月10日、同社が提供するライブストリー上でAIモデルの最新バージョンGrok 4を発表した。
Googleは2025年7月9日、軽量言語モデルGemmaファミリーの新しいモデル2種を発表した。
Hugging Faceは2025年7月9日、Pollen Roboticsとともに開発した、オープンソース小型ロボット「Reachy Mini」の先行予約販売（プレオーダー）を開始した
ソラコムは2025年7月9日、翌週に行われる同社の年次カンファレンス「SORACOM Discovery 2025」に先立ちメディア向けの説明会を開催、同社のIoTプラットフォームと生成AIを組み合わせた新たなサービス、戦略を発表した。
パスワードだけでの認証に限界が訪れ、TOTP を用いた 2FA が普及した。しかし、これでもまだ、全くもって不完全であることが、フィッシング詐欺の増加によって証明された。
Appleのソフトウェア エンジニアリング マネージャーで、主にSwiftの開発に関わるMishal Shah氏が、Swift.orgのフォーラムにてAndroidを公式にサポートすることを目的とした「Android Workgroup」の発足を発表しました。
Element Labsは2025年7月8日、同社が提供しているローカルLLM実行環境「LM Studio」を企業利用においても無料で使えるように方針を変更したことを発表した。
今回は、MicrosoftがリリースしているEditを、Ubuntuのデフォルトエディターにする方法を紹介します。
「パスワード」が認証の最重要要素で、いかにそれを死守するかを「サービス側」「ユーザ側」双方で考え続けてきたのが、平成の認証だった。ところが、それは早々に破綻し、「パスワードだけでの認証」に限界が来た。そこで、導入されたのが二要素認証(2FA: 2-Factor Auth)だ。
Fastlyは2025年7月1日、TollBitと提携し、同社のユーザーコンテンツに対するAIボットアクセスを収益化するサービスの提供を発表した。
まず、今使われているパスワード認証について、これがなぜ問題で、なぜ Password-Less が求められているのかを振り返っていこう。
Webフロントエンドを対象にしたテストのツールや手法も増えてきました。今回は、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します。
MySQLのJSON型は、柔軟なデータ構造をそのまま格納できる点で非常に便利です。ただし、複雑なJSONデータをそのまま詰め込んだ場合には注意が必要です。
現在、メジャーなLinuxディストリビューションのほとんどがディスプレイソフトウェアのデフォルト実装をX.OrgからWaylandへとシフトしている。
第56回目は、Blenderで用意されている機能であるUV展開を行う方法を見ていきます。
フィッシング詐欺や Infostealer を用いた金融サイトの乗っ取り詐欺などは、その被害総額が 5000 億円 を突破してもなお拡大し続けている。米国で発生した 2024 年のオンライン詐欺被害は 166 億ドル に達した。証券や銀行サービスからは「FIDO 認証登録のお願い」のようなメールが絶えず届き、最近では Gmail のような 20 億以上のユーザがいる大手サービス や、警視庁サイバー犯罪対策課まで「Passkey を利用しましょう」と移行を促すアナウンスをするところまできている。まだ、多くの人が "Passkey" という名前すら知らないか、聞いたことはあるがきちんと移行まではしていないという状況だろう。新しい技術とはいえ、Passkey の普及があと 1 年早かっただけで、防げた被害は計り知れないだろうと痛感する。一方、Passkey を知っていながら、誤解のある人も少なくないようだ。複雑なパスワードを登録しているから移行する必要はない2FA を設定しているから必要ない登録したいサービスに、指紋を渡すのは嫌だGoogle や Apple に認証までロックインされたくない変なことしてログインできなくなるのが怖いetc etcまた、移行する必要性を認識しながら、パスワードマネージャ等保存先が十分に浸透していなかったり、サービス側の Passkey 対応が普及途上な側面もある。
CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。
DISCLAIMER: Non-Tech. Pure life stuff here. Don't read if you expect tech.
Googleは2025年7月3日、年齢認証などに利用するためのZKP（Zero-Knowledge Proof：ゼロ知識証明）ライブラリをApache 2.0ライセンスの元、オープンソースとして公開した。
Microsoft/GitHubは2025年7月2日、GitHub Copilotをカスタマイズして最大限に活用できるためのコンテンツ／リソースをまとめた「Awesome GitHub Copilot Customizations」リポジトリをリリースした。
questing（Ubuntu 25.10）の開発は、節目となるSnapshot 2がリリースされました。また、OpenJDKのサポートビジネスに、Canonicalもチャレンジすることが発表されています。
この連載では、それぞれのレベル別にAWSの学び方を紹介します。第3回は、「既にAWSを知っている人が、エンジニアとしてのレベルアップを目指すにはどうすべきか」についていくつかの方策を提案します。
Cloudflareは2025年7月1日、同社が運用するCDNサービスにおけるAIクローラーによるウェブコンテンツの利用について、「コンテンツ作成者に報酬を支払わない限り、AIアクセスをブロックできる方針」へと大きく舵を切り、その制御機能をすべてのユーザーに導入することを発表した。
都内のとあるIT会社、時計の針は午後9時。オフィスにはまだ何人かが残り、それぞれの席で仕事を続けている。その一人であるA は、自分のディスプレイを見つめながらつぶやいた。AいつになったらB先輩 のようなデータベースエンジニアになれるのかな……。
書籍発売記念イベントである「［作って学ぶ］OSとブラウザ～IT基礎技術を手を動かしながら学ぼう！」が、2025年6月6日に書泉ブックタワーで開催されました。イベントでは、著者の土井麻未さんとhikaliumさんの2人による、本書の読み方やこれら基礎技術への取り組みが語られました。本稿ではその模様をレポートします。
今回は、Google Chromeに関する動きがいくつかあったので、まとめておきます。
「スクラッチでプログラミングをはじめよう」第27回です。
Docker社は2025年7月1日、MCPサーバーのDockerイメージを一元的に発見・取得できるカタログ「Docker MCP Catalog」の機能強化と、一般ユーザーによるサーバー登録申請の受付開始を発表した。
Sakana AIは2025年7月1日、既存のフロンティアモデルを利用して「集合知」と「試行錯誤」を組み合わせ、難問に対する推論精度を高める新手法AB-MCTSおよび、複数のモデルを動的に使い分ける拡張版であるMulti-LLM AB-MCTSを発表した。
今回は、WSL上のUbuntuの環境構築をcloud-initに任せて、Ubuntu環境を手軽に構築する方法を解説します。
U-22 プログラミング・コンテスト2025の応募受付が2025年7月1日に開始された。締切は8月29日。
Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。
Anysphereは2025年6月30日、同社が開発するAIコードエディタCursorのエージェント機能ががモバイル環境で利用できるようになったことを発表した。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
第3回は、カンファレンス3日目とカンファレンス後のスプリントの話題をレポートします。
MicrosoftはWindows 11の最新アップデートで「メモ帳」アプリに軽量な書式設定機能を導入、GUIで書式を指定できるほか、Markdown形式で書式を設定できるようになった。
2025年6月30日、7月1日の2日間、LINEヤフーとして合併してから初となる、対外向けのテックカンファレンス「Tech-Verse 2025」が開催されている。
Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。
MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。
Anthropicは2025年6月25日、Claude Desktop上でボタンをクリックするだけでローカルMCP（Model Context Protocol）サーバーをインストールできるパッケージツール「Desktop Extensions」をリリースした。
GMOペパボ株式会社が運営するネットショップ作成サービス「カラーミーショップ byGMOペパボ」は、ECサイト運営者を対象にした参加費無料のオンライントークイベント「COLOR ME SHOP DAY 2025」を、2025年7月24日（木）に開催する。
Googleは2025年6月26日、軽量AIモデル「Gemma」の新バージョンGemma 3nを正式リリースした。
UbuntuのIoT向けの展開がさらに広がります。MediaTekとCanonicalから、MediaTek Genio IoTシリーズ向けのUbuntu Coreイメージの提供開始がアナウンスされています。
Fastlyの創業者の1人であり、現在はFellowを務めるTyler McMullen氏に、同社の強みやAIへの取り組み、オープンソースコミュニティへの支援活動などについてお話を伺いました。
Anthropicは2025年6月25日、Claudeのコンテンツ作成機能であるアーティファクト（Artifacts）に、成果物の作成、ホスティング、共有のための専用スペースと、作品自体にAIを搭載させる機能を追加したことを発表した。
Googleは2025年6月25日、AIアシスタントGeminiをコマンドラインから操作できる「Gemini CLI」をオープンソースとして公開した。
2025年6月の「Python Monthly Topics」では、LLMと外部ツールやデータソースを簡単に接続するためのプロトコル「MCP（Model Context Protocol）」を取り上げます。
今回は主にES2020以降で追加されたPromiseの新しい機能をユースケースを交えて解説します。
AIエージェントの出現は、現在のSaaSプラットフォームにおける認可システムにとって大きなリスクとなる可能性があります。しかし、セキュリティチームとITチームが適切な視点で積極的に対応すれば、そのリスクを防げます。
Google Pixel 6シリーズ以降は、独自SoC「Google Tensor」が搭載されているのはご存知のとおりです。夏ごろ発売のPixel 10シリーズには、Tensor G5が搭載されると予想されています。今回は、これに関わる話題をいくつかピックアップしてみました。
Cloudflareは2025年6月24日、同社のエッジネットワーク上でコンテナを動かすための「Cloudflare Containers」機能をパブリックベータで提供開始した。
Googleは2025年6月24日、AIファーストに再設計したGoogle Colabをすべてのユーザーに提供開始したことを発表した。
PyCon US 2025カンファレンス2日目のレポートです。
今回はASRock DeskMeet X300にRD-RX9060XT-E16GB/DFを取り付け、Ubuntu 24.04 LTSを使用する方法を紹介します。
今回から数回にわたり、私がルービックキューブを模したおもちゃを3DPで自作した際の工程を紹介します。
Linux Foundationは2025年6月23日、Googleが4月に公開したAgent2Agent（A2A）の寄贈を受けたこと、そしてこのA2Aプロトコルを基盤とした新しい「Agent2Agentプロジェクト」を立ち上げたことを発表した。
2025年9月19日（金）～21日（日）にハイブリッド形式で開催されるiOS関連技術をテーマとした技術カンファレンス「iOSDC Japan 2025」のチケット販売が開始された。
『イラストをそれっぽく描くコツ』の著者、96こげさんのイラスト人生を振り返りながら、本書に込めた思いを赤裸々に語っていただきました。
2025年5月28日、29日の2日間にかけてベルサール神田で世界最大級のTypeScriptをテーマとした技術カンファレンスTSKaigi 2025が開催されました。
2025年6月17日、日本マイクロソフトは、毎年恒例となった「Java on Azure Day 2025」を開催しました。
MySQLでは標準でさまざまな組み込み関数を用意しています。今回は、その中でも「知っておくと得する」可能性のある関数をいくつかピックアップしてご紹介します。
6月20日、Microsoft AzureのCTOを務めるMark RussinovichはLinus Torvalds、Bill Gates、Dave Cutler、そしてRussinovich本人が写っているスリリングな写真を投稿した。
香港aaPanel Ltd.は2025年6月19日、同社が開発するオープンソースのメールサーバー兼EメールマーケティングプラットフォームBillionMailの新バージョンBillionMail V3.0をリリースした
Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。
use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。
Visual studio Codeは6月19日、MCPサーバーをVS Codeにワンクリックでインストールできる、厳選したMCPサーバーの一覧ページを公開した。
ターミナル上で動作するオープンソースのAIコーディングエージェント「opencode」は2025年6月20日、Claude Pro/Maxへの対応や、75以上のLLMプロバイダに対応して一般利用できるようになったことをアナウンスした。
questing（Ubuntu 25.10）の開発では、Rivosのパートナーシップのもと、RISC-VアーキテクチャにおいてRVA23プロファイルへの対応が進められる予定です。
OpenAIは2025年6月、Agents SDKを活用したカスタマーサービスおよびアプリケーションテスト向けのAIエージェントのデモアプリをGitHubで公開した。
2025年6月19日、Anthropicは同社のAIコーディングエージェントClaude CodeがリモートMCPサーバーをサポートしたことを発表した。
2025年6月17日、オープンソースのAIソフトウェア開発エージェントプラットフォームOpenHandsをターミナルからコマンドラインで操作できる「OpenHands CLI」が公開された。
2025年9月26日（金） 、27日（土）に広島国際会議場で開催されるPyCon JP 2025のキーノートスピーカーが発表された。
KDEプロジェクトは6月17日、「KDE Plasma 6.4」のリリースを発表した。
6月10日に、Android 16（コードネーム Baklava）の正式版がリリースされ、Google Pixelシリーズから順次OTAでの配信が開始されました。年内には、さらに多くのスマートフォンへ展開される予定です。
Threadsは6月17日、「フェディバース」フィードと、Fediverseアカウントの検索機能を追加したことを発表した。
2025年5月14日～22日にアメリカのピッツバーグで開催された、プログラミング言語Pythonの国際カンファレンス「PyCon US 2025」に参加してきたので、その様子をレポートします。
6月16日、17日に東京で開催された「KubeCon + CloudNativeCon Japan 2025」。16日に、Linux Foundationの日本担当VPである福安徳晃氏と、Cloud Native Computing Foundation (CNCF) のCTOであるChris Aniszczyk氏による記者発表会が行われました。本稿ではこの模様をレポートします。
今回はUbuntu 24.04 LTSのサーバー版の上に、オープンソースの「後で読む」サービスであるWallabagを構築する方法を紹介します。
第55回目は、Blenderで用意されている機能であるUV展開の概要について見ていきます。
A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。
CSS で Custom Ident 値を動的に生成する ident() が提案されている。策定中の仕様をベースに解説する。
GitHubは6月12日、リモートGitHub MCP Serverをパブリックプレビューとして提供を開始した。
Ubuntuの開発では、Launchpadにコードホスティングやバグトラッキング、翻訳などを依存する形で生態系が構築されています。
今回はObsidianのノート内に図表を入れるときに、AIと連携して作成するための具体的なプロンプト例を紹介します。
バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。
GNOME Foundationは6月10日、これまでオンプレミス（OpenShift）で運用してきたWebインフラストクラクチャをAWSクラウドに移行したことを発表した。
今回は、実際に新UI「Material 3 Expressive」触ってみて、気づいた3点をご紹介します。
この連載では、それぞれのレベル別にAWSの学び方を紹介します。第2回はオンプレ技術者向けです。
2025年7月26日、Movable Typeを中心としたWebカンファレンス「MTDDC Meetup TOHOKU 2025」がTKPガーデンシティ仙台（宮城県・仙台市）にてオフラインで開催されます。
今回はIPEX-LLMを使用してOllamaを高速化する方法を紹介します。
OpenAIは6月10日、最新の推論モデルo3-proをリリースした。
Appleは、Mac上で軽量仮想マシンを使ってLinuxコンテナを作成・実行するためのツール「container」を開発し、Apache License 2.0のもとGitHub上にオープンソースとして公開した。
Linus Torvaldsは6月8日、次期Linuxカーネル「Linux 6.16」の最初のリリース候補版となる「Linux 6.16-rc1」を公開した。
今回はDockerのMySQLでjemallocを使用する方法について紹介していきたいと思います。
nodejs.orgは2025年5月にメンテナンスサポートが終了したNode.js 18、およびそれ以前のバージョンについて、セキュリティ上の懸念からより新しいLTSバージョンへのアップグレードを呼びかけている。
OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。
AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。
Googleは2025年6月5日、高性能言語モデルの最新バージョン「Gemini 2.5 Pro」のアップグレードプレビュー版をリリースした。
2025年5月14～22日に米国・ピッツバーグで開催された「PyCon US 2025」に関する報告会が、2025年7月10日（木）にリアルとオンラインのハイブリッド形式で開催される。
2025年9月26日（金） 、27日（土）に広島で開催されるPyCon JP 2025のCall for Proposals（CfP）が開始されている。
Ubuntuのリリースパターンはこれまで、「ある程度の開発が続けられた後にベータ版・RC版を出し、それをもとにリリースエンジニアリングを行って正式版をリリースする」というやりかたを踏襲してきました。この流れが今後は（少なくともquestingでは）大きな変化を遂げることになりそうです。
Resend というメール送信サービスがあります。 そのAPIエミュレーターをローカルで起動する npm パッケージを作りました。次のコマンドでサーバー http://localhost:8005 で起動します。 Resend SDK は Base URL を環境変数経由で変更できます。.envなどで次のように指定すれ...
Figmaは2025年6月4日、同社のデザインツールFigmaをMCP（Model Context Protocol）に対応させ、Figmaで作成したデザインのコンテキストをLLMに提供するMCPサーバー「Dev Mode MCP Server」をベータ版としてリリースした
Anysphereは2025年6月4日、同社が開発するAIコードエディタCursorのバージョン1.0をリリースした
書籍発売時点（1.4.5）からこの記事執筆時点（1.9.1）までの期間に追加されたコアプラグインや注目を集めているコミュニティプラグイン、新たな機能について紹介します。
生成AIツールが引き起こす新たな波によって、ソフトウェアの構築方法や、そのプロセスに携わる人々のあり方が変わりつつあります。この変革のまさに最前線にある手法が、自然言語でのプロンプトを通じて、AIに機能的なコードを生成させる「バイブコーディング」です。
今回は、実際に新UI「Material 3 Expressive」触ってみて、気づいた3点をご紹介します。
NotebookLMは6月3日、ユーザーが作成したノートブックを一般公開で共有できる新機能を追加した。
今回はUbuntu 24.04 LTSでDHCPサーバーを構築する方法を解説します。
AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。
X上の新メッセージングサービス「XChat」がベータ版として公開された。Xのスマホアプリ等から利用できる。
第54回目は、Blenderで用意されている機能のグリースペンシルを使って、パラパラ漫画を描く方法を見ていきます。
この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。
Anthropicは2025年5月29日、大規模言語モデルの思考過程をトレースするツールライブラリ「circuit tracer」を開発、オープンソースとして公開したことを発表した。
QuestingではデフォルトのNTPデーモン（兼NTSデーモン）がChronyへ切り替わることになります。
この連載でも何度か生存報告的に紹介してきたPlamo Linux 8.2を去る5月7日にリリースしました。
Baseline という指標の活用可能性に関する考察
今回は、実際に新UI「Material 3 Expressive」触ってみて、気づいた3点をご紹介します。
Linus Torvaldsは5月25日（米国時間）、「Linux 6.15」の正式リリースを明らかにした。
社内ローカルなnip.ioを、自社ドメインで構築しようというのが今回の本題です。
今回は、MySQLでJSONデータを扱う際に、特定のスキーマ形式のデータだけを受け入れたい場合に便利なJSON_SCHEMA_VALID関数を紹介します。
「みんなのPython勉強会」が、2025年5月に記念すべき10周年を迎え、今回は特別なハイブリッド形式（現地＋オンライン）で開催される。
この連載では、それぞれのレベル別にAWSの学び方を紹介します。第1回は若手エンジニア向けです。
Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。
Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、Mastra のクライアント SDK を使用して A2A プロトコルの仕様に従い通信を行う方法を紹介します。
2025年4月16日(水)から 18日(金)まで、愛媛県民文化会館にてRubyKaigi 2025が開催されました。最終日のキーノートはRubyの生みの親であるまつもとゆきひろさんが登壇し、「Programming Language for AI age（AI時代におけるプログラミング言語）」について話しました。
questing（Ubuntu 25.10）におけるUbuntu Desktop部分のロードマップが提示されています。注目するべき点を、ある程度取捨選択しながら見ていきます。
Anthropicは5月23日、同社の次世代AIモデル「Claude Opus 4」と「Claude Sonnet 4」を発表した。
RubyKaigi 2025の2日目のキーノートとして、Ivo Anjoさんが「Performance Bugs and Low-level Ruby Observability APIs」というタイトルで発表を行いました。
Googleは、5月13日に開催したスペシャルイベント「The Android Show: I/O Edition」で「Material 3 Expressive」を発表しました。
Googleは5月20日から開催されているGoogle I/O 2025で、画像生成モデルVeoと動画生成モデルImagenをアップデートしたことを発表した。また、音楽生成モデルLyriaへのアクセスを先月4月に拡大したことを案内し、さらにAI映像制作ツールFlowをあらたにリリースしたことも発表した。
今回は、Snapdragon XベースのWoAデバイス特有の事情・背景を解説し、その上で、Ubuntuを動かす前提でSnapdragon XベースのWoAデバイスを選定するならどう考えるべきかについて解説します。
今回は、なぜObsidian単体ではなく外部のAIと連携するのか、どうすればObsidianで管理するノートをAIと連携して活用できるのか、について解説します。
2025年4月16日から18日まで、愛媛県県民文化会館にてRubyKaigi 2025が開催されました。1日目は、ima1zumiさんことMari Imaizumiさんによる基調講演からスタートしました。タイトルは「Ruby Taught Me About Under the Hood」です。
VS Codeチームは5月19日、拡張機能であるGitHub Copilot Chatのコードが今後数週間のうちにMITライセンスでオープンソース化されること、そしてその関連するコンポーネントをVisual Studio Code本体に統合していくことを発表した。
一般社団法人PyCon JP Associationは、Pythonに関する年次カンファレンスPyCon JP 2025を2025年9月26日（金）、27日（土）に開催する。
Microsoftは2025年5月19日、開発者向け年次イベント「Microsoft Build 2025」にて、同社のAIプラットフォームやフレームワーク全体にModel Context Protocol（MCP）のサポートを提供していくことを発表した。
Googleは5月20日、NotebookLMのモバイルアプリをリリースした。Web版と同じように、AIを活用して資料からノートブックを作成したり、資料に対する質問をしたり、ポッドキャスト形式の音声概要を聞くことができる。
Microsoftは2025年5月19日、Windows上で動作するLinux環境Windows Subsystem for Linux（WSL）を、オープンソースとして公開することを発表した。
OpenAIは2025年5月16日、クラウドベースのソフトウェアエンジニアリングエージェント「Codex」をリサーチプレビューとしてリリースした。
複雑な開発プロセスや標準化、セキュリティ対策、継続的インテグレーションといった課題に対して、自律型AIは人間の手では追いつかないスピードとスケールで対応し、チーム全体のベロシティ（開発速度）を飛躍的に向上させる可能性を秘めています。本稿では、自律型AIがなぜ今、プラットフォームエンジニアリングにとって不可欠な存在なのか、そして導入にあたって検討すべきポイントと、実際のユースケースを交えて、その全体像を解説します。
本連載では、Blender の基本的な知識、機能についてイラストを交えながら紹介しています。第53回目は、前回説明したグリースペンシルを使って、実際に線を描いていきます。
VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。
React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。
2025年5月15日、GitLabの最新バージョンとなるGitLab 18.0がリリースされた。
パリで開催されているRISC-V Summit Europe 2025にあわせて、「Ubuntuを搭載したRISC-Vハードウェア」の発表やデモ展示が提供されています。
生成AIの進化がソフトウェア開発に変革をもたらしつつある今、企業は単なる自動化を超えたAI活用のステージへと踏み出しています。文脈を理解し、積極的に判断・提案を行うAIの登場により、開発の在り方、チームの役割、そして技術戦略そのものが大きく変わろうとしています。本稿では、今後1年に起こると予想される4つの重要な変化を中心に、AIがどのようにソフトウェア開発を再構築していくのかを展望します。
Googleは2025年5月14日、大規模言語モデルを使ってより優れたアルゴリズムを開発できるコーディングエージェント「AlphaEvolve」を発表した。
5回目となるrabbit r1のレビューになります。
Aiderは、ターミナル上で動作するオープンソースのAIペアプログラミングツールです。OpenAIのGPT-4oや、AnthropicのClaude 3.7をはじめとする様々なLLMに接続し、コードの作成、修正、リファクタリングなどを支援します。
2015年7月にMicrosoftがリリースしたWindows 10は2025年10月14日にサポートを終了し、この日以降、Microsoftからソフトウェア更新やセキュリティ修正プログラムが無料で提供されることはなくなる。
Visual Studio Codeは2025年4月の更新で、GitHub Copilotに組み込まれているMCPにおいてStreamable HTTPと画像出力に対応した。これにより、MCPサーバーとの接続にStreamable HTTPを使えるようになり、また画像生成に対応していれば画像を出力できるようになった。
今月の「Python Monthly Topics」では、Pythonのパッケージを公開するときに、デジタル証明書（Digital attestations）を用いてより安全に公開する方法について紹介します。
MySQLのInnovation ReleaseとなるMySQL 9.2が2025年1月、MySQL 9.3が2025年4月にリリースされました。
4月14日、Twemoji v16.0.1がリリースされた。
2025年になってObsidianが大きく注目を集めています。今回はその背景と理由について解説します。
GW のさなか、有名投資家のテスタ氏を中心に、大規模な乗っ取り攻撃の存在が報告された。当初 900 億円程度と試算された被害額は、数日のうちに 3000 億円を超えると修正され、富裕層のみならず一般市民も無視できない状況となっている。今、一体何が起こっているのか。金融資産を預かるサービスはどのようにユーザを守るべきか。我々ユーザはどのように自衛するべきか。判明している情報をもとに考察する。
Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。
Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。
Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。
Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。
questing（Ubuntu 25.10）の開発フェーズが開始されて間もないタイミングですが、Coreutilsの置き換えだけでなく、システムを構成する基本的なコマンドを置き換えていく流れも存在することが明らかになりました。
OpenSearch Software Foundationは2025年5月6日、オープンソースの全文検索・分析エンジンOpenSearchの新バージョンOpenSearch 3.0をリリースした。
Googleは、今月の20日から始まる開発者向けの年次イベント「Google I/O」に先立って、スペシャルイベント「The Android Show: I/O Edition」を現地時間の5月13日10時に開催すると発表しました。
本連載では、Blenderの基本的な知識、機能についてイラストを交えながら紹介しています。第52回目は、Blenderで用意されている機能のうち、グリースペンシルについて学んでいきます。
ソフトウェアの作成時における悩ましい問題のひとつが「動作確認環境の構築」です。今回はこの動作確認環境をCI等から作成・利用しやすい「mkosi」について紹介します。
ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。
actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。
openSUSE開発チームは4月30日、開発中の「openSUSE Leap 16.0」がベータサイクルに入ったことを明らかにした。
Redisは2025年5月1日、KVSデータベースRedisの最新バージョンRedis 8の一般提供（GA）を開始した。
Anthropicは2025年5月2日、MCPを使って同社の対話型生成AIサービスClaudeとさまざまなアプリやツールを連携できる「Integrations」機能をリリースした。
questing（Ubuntu 25.10）の開発がスタートし、「準備」と言えるいくつかのタスクが実行されています。
Microsoftは2025年4月30日、小型でありながら大規模モデルに匹敵する推論能力をもったPhi-4シリーズの3つの新モデルを発表した。
中国Alibabaは2025年4月29日、同社が開発するオープンな言語モデルQwenファミリの最新バージョンQwen3をリリースした。
rabbit r1の話題が4回続いたので、今回は話を変えてAndroid 16 beta 4の話題を取り上げます。
この連載は、OSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。
Googleが提供しているGeminiベースのAIを搭載した調査アシスタントアプリ「NotebookLM」には、調査したことを音声でまとめてくれる音声概要（Audio Overviews）機能があるが、この機能はこれまで英語のみで提供されていた。Googleは4月29日、この音声概要機能が日本語を含む多数の言語にベータ扱いで対応したことを発表した。
今回はVisual Studio CodeにAI Toolkit for Visual Studio Codeをインストールし、Ollamaのフロントエンドとして使用する方法を紹介します。
2025年4月の「Python Monthly Topics」は、Python Webツールキットの役割と機能を紹介します。
MySQL Shellは、第226回や第216回でも紹介したように、高機能な関数を使用してさまざまな事ができるようになりました。
React の新しい実験的なコンポーネントとして `` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。
本エントリでは、Document Outline Algorithm というユートピアと、その中で繰り広げられた HTML の歴史を振り返ります。また、Outline Algorithm の後継として実現が検討されている Heading Level Concept についての現状を記します。
「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。
Ubuntu 25.04のリリースから時間を置かず、「次」のリリースのための準備が開始されています。Ubuntuの開発におけるお約束であるコードネームがまず決定され、コードネーム当てコンテストが終了しました。
前回、インストーラの更新に合わせて起動時のgrubのメニュー画面を一新したことを紹介しました。その際テーマ設定ファイルの書き方に関する解説はあまり見つからず、結構苦労しました。
このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 31 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieこのエントリもいよいよ終わりに近づいてきたようだ。
コミュニティフォーラムソフトウェアのDiscourseは、2年前にFediverseと接続するためにActivityPubプラグインを開発を始めたが、今回改めて2025年4月現在のActivityPubプラグインの機能を案内した。
Ubuntuでは、もはやWaylandネイティブで動作させてもいいくらいのところまで成熟が進んでいます。今回はその詳細を紹介します。
Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。
MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。
4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。
AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。
好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。
我々は、インターネット上において「信頼」できるサービスを、「安全」に使うことに、「安心」を求める。プライバシーは守られ、不正な取引には加担せず、詐欺被害も受けたくない。技術的に言えば、通信は暗号化し、個人は匿名化し、データは秘匿し、それによって Secure で Safety で Trustworthy な Web が手に入る。それを突き詰めた先に、「自由」で理想的なインターネットがある。本当だろうか?
いつも本ブログを読んで頂いている皆様、そしてセキュリティ関係者の皆様へ。この度は、筆者による "Eve" に対する不適切な引用、および、原稿内における不名誉な扱いについて、この場を借りて謝罪させていただきます。
MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。
本エントリでは、Interest Invokers の仕様策定において重要な「Show Interest」という概念と、 HIDs (Human Interface Devices) の「Show Interest」に係る議論の現状を解説します。
カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。
Vercel AI SDK は TypeScript 向けの AI 機能を活用するプロダクトを構築するためのツールです。AI SDK は AI モデルのプロバイダー間における API の違いを抽象化することで、開発者はアプリケーションの開発に集中できるようになります。この記事では Vercel AI SDK の使い方を確認し、最終的に Next.js で構築した Web アプリケーションに AI 機能を追加する方法を紹介します。
MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。
Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。
従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題となっています。LLM に適したコンテンツを提供するために Answer.AI の共同創業者である Jeremy Howard 氏により `llms.txt` というファイルが提案されました。
CSS に if() および @function が提案されている。仕様がこれで確定したとは言い切れないため、背景および現状にフォーカスして解説する。なお先に言っておくが、関数の再帰は初期仕様から外されているため、「CSS がプログラミング言語になった」という話ではない。
OWASP に Cookie Theft 対策の Cheat Sheet を提案し、マージされた。
if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。
ページを閉じる際に何かしらの情報をサーバで収集したいケースがある。これを Beacon の送信(Beaconing)と呼び、ブラウザではページ表示中に収集したパフォーマンス統計の収集や、広告タグによるトラッキングなどに用いられる。しかし、「ページが閉じる直前に、サーバにリクエストを送信する」を確実に実行するのは実は難しく、これを標準技術で実現する過程で、複数の API が生まれるに至った。各 API の策定経緯と、挙動の違いについて解説していく。
Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。
Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。
`attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。
UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。
Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。
Prisma は OpenTelemetry の仕様に準拠したトレースデータを計装するためのパッケージを提供しています。この記事では、Prisma で OpenTelemetry のトレースデータを計装する方法について紹介します。
Vitest では `expectTypeOf` や `assetType` を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに利用できます。
Safari 18.2でShipされた`view-transition-name: auto;`は、未だに議論の余地が残るため、仕様をよく理解した上での利用が必要な理由を解説します
スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。
Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、`@function` ルールを使用して開発者が関数を定義できるようになります。
パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。
react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。
`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始まるキーを使用してコメントを書くハックが生まれるなど、様々な方法が考案されていたのが思い出されます。
TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではない」構文をエラーとして検知するためのものです。
震災の直後、復興のさなかに水害が起こり、再び全てが流される。能登の人々にとっては大変な 2024 年だったと思う。首都直下型や南海トラフはいつ起こってもおかしくないと言われ、戦火すら他人事ではなくなっている。家に災害用の備蓄を用意するのと同様、定期的に「アカウント防災訓練」を個人的に実施するようになって数年経つ。観点は「今、持っているものを全て失っても、リカバリできるだろうか?」だ。現代のアカウントの管理は、"Password Less" を目指す過渡期で、中途半端に複雑だ。Password は無くなっているというより、集約された "Less Password" 状態であり、残る「最後の Password」を起点にどう全体を復元するかが、災害時リカバリの課題となる。これに失敗して全てが詰むと、仮に無事避難できたとしても、相当な喪失を味わうだろう。現状の選択肢と設計方針を振り返りつつ、災害時にデジタルアカウントをどう守るかについて考えたい。
長年の議論を経て、ようやく仕様が固まった、CustomizableなSelect要素の現状について、Parser Relaxationのを軸に解説します
フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。
2024 年の Web 技術を振り返る試験として、「Web 技術年末試験 2024」を実施した。その問題と想定解答、平均点などを公開する。
`` 属性はダイアログの外側をクリックした際にダイアログを閉じる Light dismiss 機能を実現するための属性です。closedby 属性は `any`, `closerequest`, `none` の 3 つの値を受け付けます。
`` コンポーネントは React の実験的なバージョンとして導入されました。これは View Transition API を 宣言的な方法で使用できるようにするものです。
View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。
scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。
ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。Chrome Beta 133 では 3 番目の値として `hint` が追加されました。`popover=hint` はユーザーに対してヒントを表示する「ツールチップ」として動作します。この記事では `popover=hint` 属性について詳しく見ていきます。
Chrome チームより提案された Device Bound Session Credentials の実装が進み、Flag 付きで試すことができる。この提案の背景と、解決する問題、現時点での挙動について解説する。
Node.js v23.6.0 から `--experimental-strip-types` フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。
AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。
あけましておめでとうございました。すでに 6 日が経過してしまいましたが、2024年の振り返りと2025年の目標を立てます。 2024年の振り返り 2024年の目標は以下の通りでした。 https://blog.stin.ink/articles/new-years-resolutions-for-2024 技術ブログ...
GitHub Actions で CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。この記事では、GitHub Actions で再利用可能なワークフローを作成する方法と、実際に再利用可能なワークフローを作成する手順を紹介します。
ハロー！プロジェクトのファンクラブ(以下FC)サイトが2024年11月にリニューアルされました。 https://www.upfc.jp/helloproject/news\_detail.php?@uid=s32dbjT7VpPSK55H リニューアル内容のひとつにデジタル会員証があります。 今までプラスチックカード...
2024年の振り返り
例年通り 2024 年を振り返る。
ふと、指定したURLのWebページをクローンして別の環境で再現する方法がないかと考えました。 HTMLとそれが参照するCSS, JavaScript, 画像ファイルなどをダウンロードして保存しておき、静的ファイルとして配信すれば同じWebページを再現できるはずです。 wget を使う wgetコマンドを使えば、HTML...
私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。
OpenUI Advent Calendar エピローグ
Open UIが提唱するデザインシステム、Global Design Systemとその未来
デザインシステムの開発を加速させる、堅牢で柔軟なGlobal Design Systemの提唱
Customizable Select Elementのまとめ
多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。しかし、このような UI では HTML 仕様に違反していたり、ハッキーな手法で実装されていることがあります。Open UI コミュニティでは Link Area Delegation という提案を行っており、標準化された方法で入れ子のリンクを実装することで UX やアクセシビリティを損なうことを防ぐことを目的としています。この記事では Link Area Delegation の内容について紹介します。
Customizable Select Elementの関連仕様: `` - 子Node変更検知タイミングの仕様決定（現時点で）
Customizable Select Elementの関連仕様: `` - 「同期タイミング」でクローンを作成の方針で決定。`cloneNode()`の制限が浮き彫りになる
Customizable Select Elementの関連仕様: `` - UAによるLight DOMへのNodeクローンタイミングの検討
Customizable Select Elementの関連仕様: `` - Light DOMへのクローン追加実装に関して、CSSWGとの合意形成。UAによるLight DOMへのNodeクローンタイミングに関する懸念を深掘る
Customizable Select Elementの関連仕様: `` - `slot`属性と`behavior`属性が使用廃止を受け、CSE Anatomyが改訂。HTML史上初となる、UAからLight DOMへ変更を加える実装検討へ
この記事は「Hono Advent Calendar 2024 シリーズ 2」17日目の記事です。 https://qiita.com/advent-calendar/2024/hono HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 Hono...
本エントリでは、インタラクティブな要素がネストされたUIを、標準的な方法で実現しようという「Link Area Delegation」Proposalについて紹介します。
Customizable Select Elementの関連仕様: `` - 「選択された``を``にスロットしてカスタマイズできるようにする」唯一の手段、`slot`属性と`behavior`属性が使用廃止へ
Customizable Select Elementの関連仕様: `` - ``の内部コンテンツ自体を``に反映する仕様の検討
Mock Service Worker (MSW) の v2.6.0 から Web Socket のリクエストをモックすることができるようになりました。Web Socket のサポートのリクエストは 2020 年から存在しており、多くの議論の末 4 年の歳月を経てリリースされた機能となります。この記事では、MSW で Web Socket のリクエストをモックする方法を紹介します。
Customizable Select Elementの関連仕様: `` - `part`属性をCSEのUA実装で使用することの問題から、`part`属性を`behavior`属性にリネームへ。``のvalueのみならず、内部コンテンツ自体を``に反映する仕様策定の示唆
Customizable Select Elementの関連仕様: `` - ``提案のきっかけと、選択された``のvalueとスタイルを反映する初期の仕組みとして、`part`属性と`slot`属性について
Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker()`のデフォルト色から深掘る、system-color/ color-scheme/ prefers-color-schemeの関係
このエントリは、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 年の現状を一旦まとめておくこととする。
Testing Library では要素の取得に失敗した場合にレンダリングされた HTML がコンソールに表示されます。しかし、デフォルトで出力される行は 7000 に制限されているため目的の要素が表示される前に表示が終了してしまうことがしばしばあります。
Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker-icon`のデフォルトスタイルはどうやって決まったのか
Customizable Select Elementの関連仕様: `appearance: base-select;` - 選択された``のデフォルトチェックマークのスタイルはどうやって決まったのか
``のその後：``から``に至るまで
``のその後：``に至るまで
OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。
Open UIでCSEのResearchが行われる。同時期にMSで``Explainerの作成。Explainerに基づいて、``がIntent to Prototypeに
Open UIでCustomizable Select Elementの初期提案
Web標準化の動きが進んでもなお、CustomizableでないForm Controlの紹介。Customizable Select Element提案の契機となるサーベイ
ブラウザ戦争の激化と、OSに依存したコントロールの問題の顕在化。打開する動きとして、WaSPによるWeb標準の台頭への動き、モダンブラウザの登場、より柔軟なスタイリングを可能にするCSS3の登場
Form Controlの歴史と、ブラウザやOSに依存するForm Controlのスタイルについて
Web UIの抱える課題とOpen UIの発足背景について
Open UIの概要と、その調査方法
Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。
OpenUI Advent Calendar プロローグ
Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 https://developer.mozilla.org/en-US/docs/Web/API/Document\_Picture-in-Pict...
Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。
人為的な遅延を発生させるために、`setTimeout` を Promise をラップする方法がよく使われています。これにより、`await` を使って任意の秒数処理を遅らせることができます。
vlt は npm と互換性のあるパッケージマネージャーです。`npm` と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。
Toast 相当を実装する場合、時間が経ったら自動で消えるタイムアウトを設定することがないだろうか?今回 Popover の一連を調べる中であった、これが WCAG 違反だという議論を紹介する。
この記事では Next.js で OpenTelemetry を使用した計装を行う方法について紹介します。Next.js では `instrumentation.ts` ファイルを使用して監視ツールやログツールの計装を設定できます。
このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容 パッケージのアップデート 使っているNext.js関連のパッケージを一気にアップデートします。 注意点は、Next.js自体はv15が正式リリースされています...
Next.js の App Router はデフォルトでキャッシュされる設計でリリースされました。一方でデフォルトでキャッシュされることに対して不満を持つ開発者も多かったように思います。このようなフィードバックを受けて、Next.js 15 ではいくつかのキャッシュ戦略が変更されました。さらに現在 canary チャンネルで提供されている dynamicIO フラグを有効にすることで、"use cache" ディレクティブを用いてキャッシュを制御できるようになります。
今回考えたいのは、GitHub の Issue や User アイコンをマウスでホバーすると、Issue の詳細や User Profile が表示されるアレだ。挙動としては想像通り、対象要素に Anchoring した <div popover> を表示し、中に好きなようにコンテンツを入れれば良い。ただし、UI のセマンティクスに関しては、複数の議論が行われており、方針もいくつか考えられる。今回は、それらの現状を整理しつつ、考えうる選択肢をいくつか提示する。その中で要件に合わせて何を選ぶかは実装者に委ねたい。
CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。
Practical Accessibility のメモ
ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意
@r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。
宣言型 Shadow DOM は `` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。
ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意
唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由 始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで...
Language Detection API は Chrome に組み込まれた AI により、クライアントサイドで言語を判定するための提案です。この API を利用することで、テキストの言語を判定することが可能になります。
Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。
ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意
ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意
Storybook v8.3 以降、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。Vitest を使用することで複雑なセットアップが不要になります。また、推奨されているブラウザモードを使用することで、実際のブラウザでの挙動をより正確に再現できます。
ついに <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 だ。
このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。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 の議論と、仕様が完成していくまでをまとめる。
ここまでで <dialog> 要素が標準化され、Modal/non-Modal な Dialog がネイティブで出せるようになった。今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。Top Layerinert:modal / ::backdropCloseWatcherFocusable Scrollersetcしかし、<dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、<dialog> の標準化の裏で並行して行われた。
CloseWatcher API は UI を閉じる動作を処理するための API です。キーボードの `Esc` キー、Android の戻るボタンなどのデバイス固有のメカニズムによって閉じるイベントを提供します。
先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 https://stinbox.github.io/lz-...
前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。今回は <dialog> の API としての使い方について、具体的に解説していく。
showModalDialog() は今から考えれば、確かにひどい API だった。しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、Cookie バナー、ログインなど多々ある。そういった場面では、ライブラリなどを用いて実装する必要があったが、Modal を実装するのは実際にはそんなに簡単ではなかった。
HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。
ユーザーのカラーテーマの設定によりスタイルを変更するためには、`prefers-color-scheme` メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、`prefers-color-scheme` メディアクエリを使用せずに、`class` 属性を使ったスタイルの切り替えが行われます。
従来の `` 要素は CSS を利用したスタイルを適用することができないため、多くの開発者にとって課題となっていました。この問題を解決するために新しい既存の `` 要素をカスタマイズする手段が提案されました。この疑似要素を利用することで、開発者は `` 要素のスタイルをカスタマイズをオプトインできるようになります。
CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。この記事では calc-size() 関数を使って height: auto; な要素のアニメーションを実装する方法を紹介します。
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
React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。
唐突に、React.FCの是非についてポジションを示そうと思ったので書きます。積極的に使う派閥です。 React.FC vs Normal Function Reactで関数コンポーネントを宣言するとき、TypeScriptの型の付け方として大きく次のような２つの書き方があります。 React.FCを使うパターン コン...
OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由に選択できるようになります。この記事では OpenFeature の React SDK を使ってフィーチャーフラグを評価する方法を紹介します。
React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリティを最優先した設計となっているのが特徴です。ヘッドレス UI ライブラリを用いて UI コンポーネントを実装することで、開発者はビジネスロジックやデザインに集中することができます。
axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。
フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。
pluginを使わずにviteだけで始めてみることで理解が深まったらいいと思い、やってみる。 セットアップ 適当なディレクトリ内で、git初期化してnpm初期化してviteとTypeScriptをインストールする。 package.jsonのtypeはmoduleにして、scriptsにnpm run buildを追加...
Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `reading-flow` プロパティ個の問題を解決するためのプロパティです。見た目上の順序に従って読み上げ順を制御することができます。
このエントリは、3rd Party Cookie Advent Calendar の 29 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie先日、Google より Privacy Sandbox の方針転換について発表があった。本当は、まだ記事を書くには情報が足りていないため、あまり書く気はなかったが、今後出てくる発表に備えて経緯をまとめるために、「何がまだ分かっていないか」の現状を書いておくことにする。
`random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数は引数に渡したリストの中からランダムに 1 つの値を返します。
Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundling というものを採用しており、モジュールのネットワークリクエスト数を削減するため、20 ~ 30 のファイルにバンドルするという特徴があります。
このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法 一般に、ダークモードの実装方法は3...
2024/4から24卒として新人研修を受けてました。終わってから配属などあり、ようやく落ち着いてきたので、ざっくりと研修の内容を書いたり感想を書いたりします。まとまりはないです。
CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カスタムプロパティに誤った値が代入されることを防いだり、グラデーションのアニメーションなど、従来は実装が難しかった機能をサポートすることができます。
`@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。
Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。Ladybirdhttps://ladybird.org/これがいかに価値のある取り組みなのか、Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。
CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。
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
JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `undefined` 型が返されることはありません。これはランタイムエラーを引き起こす恐れがあります。
`@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。
mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。
Chrome 126 で筆者が実装した URL.parse が Ship された。Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。
夏に 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
Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。開発者は JavaScript から Chrome に組み込まれた Gemini Nano にアクセスして生成 AI の機能を実装することができます。
`@starting-style` ルールは、CSS トランジションの開始時のスタイルを定義するためのアットルールです。CSS トランジションの既定のルールでは前回のスタイル変更イベントでレンダリングされていなかった要素では、アニメーションが適用されない、`display: none` から他の値に変更した場合にアニメーションが適用されないといった問題があります。`@starting-style` ルールを使用することでこれらの問題を解決できます。
子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。
SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。
Svelte v5 ではスニペットと呼ばれる新しい機能が導入されます。スニペットとは、コンポーネント内で使用できる再利用可能なマークアップのことです。`#snippet` ディレクティブを使用してスニペットを定義し、引数を受け取ることができます。スニペットを呼び出す際には `@render` ディレクティブを使用します。またスニペットは単なる値として扱われるため、コンポーネントの Props として渡すことができます。
React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。
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 という初期段階ではあるが、発想が非常に面白かったので、読書メモを残す。
Referrer-Policy は、送信される Referer の値を制御することが可能だ。このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか?前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.iohttps://blog.jxck.io/entries/2024-04-26/csrf.html
Svelte v5 では、イベントハンドラの書き方が一新され、いくつか非推奨となった書き方があります。この記事では、Svelte v4 と Svelte v5 のイベントハンドラの書き方の違いについて見ていきます。
Svelte v5 で導入された Runes によるリアクティビティシステムについて解説します。従来の Svelte は純粋な JavaScript のコードのみを使用してリアクティビティを実現していましたが、アプリケーションが大規模になると複雑性が増すという問題がありました。Runes は Svelte のリアクティビティシステムをより柔軟にし、アプリケーションの規模が大きくなってもシンプルさを保つことを目指しています。
Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。
Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。
今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を直接渡すことができるようになりました。
Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機能です。Single Fetch は v2.9 ではフィーチャーフラグとして提供されており、v3 以降ではデフォルトの挙動となります。
CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。
`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引数の数が多すぎるとエラーになることがあります。
コンテナクエリ単位とは、コンテナ要素に基づいてスタイルを定義するための相対的な長さを表す単位です。例えば `1cqw` はコンテナ要素の幅の 1% に相当します。
`::file-selector-button` 疑似要素を使用することで、`` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。
CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。
Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx コマンドでさっとテンプレートを作る。プロジェクト名は remix-on-clo...
React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値を同期的に読み取ることができます。その他の React フックと異なり、`if` 文やループ内で呼び出すことができる点が特徴として挙げられます。
CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。
light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。
IETF の RFC は、いくつかの場所で同じものが公開されている。どの URL が最適なのか、という話。結論は www.rfc-editor.org だ。
Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。
MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。
Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうかをテストできます。なお、Virtual Screen Reader はあくまでスクリーンリーダーの挙動を模倣したものであり、現実で使われているスクリーンリーダーによるテストを代替するものではないことに注意してください。
従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。
2014 年 3 月に開始した mozaic.fm が、気づいたら 10 周年を迎えた。これを機に、10 周年記念イベントとして、初のオフラインイベントをゲンロンカフェで開催した。Podcast でのみ告知し、当日まで情報制限をかけていたにもかかわらず、チケットもグッズも無事完売することができた。イベントを振り返りつつログを残す。
今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。
CSS のメディアクエリで比較演算子（``, `=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利です。
Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。Waku もまた React Server Components に対応しているため、最小限の構成で React Server Components を使いたい場合に適しています。
チーム開発何もわからんだった私が、チームワークを大切にする会社の内定者アルバイトに参加して思ったことをつらつら書きます。まとまりはないです。
`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。
CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。
SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。
技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際のプロジェクトで使えるかどうか調査するといった事項があげられるでしょう。ただ素振りするだけではぼんやりと頭に知識が入っている状態になりがちですが、他者への説明というアウトプットを意識することで、コードを書くことによって得られた知見を整理できるようになります。
新しい物事を始めるときは複雑な理屈は抜きにして、単純なルールが規定されていることが初心者にとって大切です。この理屈は開発時の設計やコーディングルールにも当てはまると思います。単純なルールとして lint を設定したり、コンポーネント化して複雑な部分を隠蔽することですべての開発者にとってコードをコミットしやすくなります。
Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions や Remix に対応しています。
HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。
Promise.withResolvers() は、Stage 4 であり ES2024 の候補となった。すでにブラウザでの実装も進んでいるため、その活用方法を解説する。
TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。これは何だろうと思った人が検索で辿り着けるよう、その経緯と目的をまとめる。
Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します
Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。
npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。
以前から騒がれていた 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 に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。筆者が公開情報を読んで解釈したものなので、内容は保証しない。
clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。
TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエンドポイントを定義します。
いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで z-index の値に `calc(infinity)` を指定すると、絶対に最前面に表示させることができます。
commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0 で `import.meta.dirname` と `import.meta.filename` が追加されました。
2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。その問題と想定解答、平均点などを公開する。
Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやりとりが可能であることが特徴です。
Mock Service Worke（MSW） v2 では Web 標準の Fetch API をサポートしました。
Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。
すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red` や `blue` などの特定の文字列を指定します。
プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。
Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。
TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。
tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。
Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。
GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショートカットに慣れていた人にとっては、inline chat が表示されるのは意図しない動作でしょう。
`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。
GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。
TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。
Pagefind は、静的サイト向けの全文検索エンジンと UI ライブラリです。特定のフレームワークに依存しない JavaScript ライブラリとして実装されており、静的サイトジェネレーターで生成された HTML ファイルに対して検索機能を追加できます。
あけましておめでとうございました。すでに 5 日が経過してしまいましたが、2024 年の目標を立てます。 技術ブログを 20 記事以上書く(媒体は問わない) 個人開発アプリを 1 つリリースする 引っ越す 加えて、達成する目標とはちょっと違いますが、行動指針として「思い立ったらすぐに行動する」を掲げます。 2023 年...
例年通り 2023 年を振り返る。
年末なので 2023 年のまとめっぽい記事を書きたくなりました。今年は 1 年間でおおよそ 300 冊の本をよんだようです（そのうち 3 割ほどはラノベなのですが...）。その中でも特に印象に残った本を紹介します。
このエントリは、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 がどうなっていくのかを考えていく。
このエントリは、3rd Party Cookie Advent Calendar の 27 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、散々壊れるユースケースとして解説してきた「認証連携」をカバーする FedCM について解説する。
Intro このブログサイトの記事ページではこれまで react-markdown というライブラリでマークダウンを HTML に変換して表示していました。この度、react-markdown を剥がして remark を直接使って記事をレンダリングするように変更しました。 前回の記事で Playwright で VR...
このエントリは、3rd Party Cookie Advent Calendar の 26 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日からは、Privacy Sandbox の「広告」以外の API を解説していく。
このエントリは、3rd Party Cookie Advent Calendar の 25 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、広告の測定について解説する。
このエントリは、3rd Party Cookie Advent Calendar の 24 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日はリターゲティングをカバーする Protected Audience API について解説する。
Intro 記事ページのスタイルを維持したまま内部実装に大きめの変更を加えたかったので、Visual Regression Test(VRT)を導入しました。 といってもあまりに簡易的な内容です。CI で自動化とか Chromatic とか大規模なことはしていません。ただローカルPCで Playwright を動かして...
このエントリは、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 は非常に複雑であり、また今後も細かい点が変わっていくだろう。どうせガッツリ使うのであれば、仕様を読む必要があるため、ここでは「何がしたいのか」「何ができるのか」に絞って解説する。
このエントリは、3rd Party Cookie Advent Calendar の 22 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日からいよいよ Privacy Sandbox の話に入っていく。
スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。
「議論だけ」のカンファレンスを、長いこと開催してきた。個人的には好きなので、他にもあったらいいと思っているが、そういうカンファレンスは他に見ない。カンファレンス自体を、筆者のような個人が手弁当でやれるのは、もう最後かもしれないと今回ひしひしと感じたので、これまでどうやってきたのかを残しておくことにする。
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/
このエントリは、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 だった。これが何のために行われたのかを解説する。
本番環境では OpenTelemetry Collector Contrib を使用せず、必要なコンポーネントのみを含むようにカスタムビルドすることが推奨されています。この記事では、OpenTelemetry Collector をカスタムビルドする方法について紹介します。
このエントリは、3rd Party Cookie Advent Calendar の 20 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここまで ITP について見てきたが、これはあくまで Safari が独断で行っていたことだ。それに対して、他が追従するかどうかはブラウザ次第だっただろう。では、他のブラウザはどのような反応をしたか。この反応には、その時の情勢も鑑みる必要がある。
このエントリは、3rd Party Cookie Advent Calendar の 19 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は Super Cookie の解説をする。迂回手段ゾーンとしては、最後に紹介する手法だ。
このエントリは、3rd Party Cookie Advent Calendar の 18 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、ITP の迂回で注目された Cloaking について解説する。
Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。
このエントリは、3rd Party Cookie Advent Calendar の 17 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、Cookie に頼らない Tracking 手段としての、Fingerprinting について解説する。
Intro 以前の記事でポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた話をつらつらと書きました。 https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare この記事が多くの方にご覧頂けて非常に嬉しい限りです。 そ...
このエントリは、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 について解説する。
このエントリは、3rd Party Cookie Advent Calendar の 15 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は ITP が始まったことで試行された、迂回方法について見ていく。
このエントリは、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 という概念を解説する。
このエントリは、3rd Party Cookie Advent Calendar の 13 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie
このエントリは、3rd Party Cookie Advent Calendar の 12 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie
このエントリは、3rd Party Cookie Advent Calendar の 11 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、各国で法律が整備されていった流れや、主な法律の特徴を解説した。しかし、法律はあくまで法律であり仕様ではないため、「どう実装するべきか」は各サービスに委ねられている(ガイドラインなどはあるが)。多くの場合、これを Web の実装に落とし込むと、いわゆる「Cookie バナー」相当になるわけだ。今回は、実世界でどのようなバナーが提供されているのかを見ていく。
Intro https://pokemon-soundlibrary.stin.ink/ このポケモンのBGMを無限ループで再生できる Next.js 製サイトは、これまで Vercel にデプロイしていました。しかし Vercel にデプロイすることはいくつか問題点を抱えていました。 大量の音声ファイルを publi...
このエントリは、3rd Party Cookie Advent Calendar の 10 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、この話をする上で避けては通れない、規制や法律について触れておく。しかし、筆者はあくまでエンジニアであり、この分野は専門外だ。内容については、素人が適当に書いており、信頼性は AI 以下だと思って読んでほしい。
Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してるわけではなく、非同期コンポーネントをクライアントでレンダリングしているに過ぎないことに留意すべきです。
このエントリは、3rd Party Cookie Advent Calendar の 9 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、P3P の後に提案され、非常に似たコンセプトで、かつ最近まで使われていた DNT について解説する。
このエントリは、3rd Party Cookie Advent Calendar の 8 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、Cookie2 が失敗した後に、別のアプローチでこの課題に挑んだ P3P を解説する。
このエントリは、3rd Party Cookie Advent Calendar の 7 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここからは第二幕、人類と 3rd Party Cookie の闘いの歴史を見ていく。「歴史の話はいらない、早くコードを見せろ」と思っている読者の気持ちもわかるが、残念ながら背景がわかっていないとまともな闘いはできないだろう。
このエントリは、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 は今「問題」になっているのだろうか?
このエントリは、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 のユースケースは、ネガティブなものだけではないからだ。その一例として、今回は認証連携のユースケースを解説する。
Next.js Advent Calendar 2023 の12月4日の記事です。 https://qiita.com/advent-calendar/2023/next Static Exports とは Next.js の Static Exports は Next.js のビルド結果として完全に静的な HTML,...
このエントリは、3rd Party Cookie Advent Calendar の 4 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は「サブリソースにまで Cookie が送られて何が嬉しいのか」という話だった。今回はそのユースケースについて考えていく。
このエントリは、3rd Party Cookie Advent Calendar の 3 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は「Cookie は 区別 と 識別 の用途があり、区別 だけのユースケースもある」という解説をした。今回も、もう少し Cookie の性質を振り返っていく。
Cloudflare Registrar に移管した このブログもサブドメインとして使用されている stin.ink は、僕が持つ唯一のドメインです。Google Domains で取得して、色々サブドメインを生やして使っています。 半年ほど前ですが、Google Domains がサービスを終了して事業譲渡されること...
MSW v2 の `HttpResponse.json()` の第 2 引数の型は `Response` オブジェクトの初期化時に渡すオプションを指定できます。しかし、tsconfig.json の設定によっては、この型がおかしくなることがあります。その場合には、`tsconfig.json` の `compilerOptions.lib` に `dom` を追加するのが一時的な対処法です。
このエントリは、3rd Party Cookie Advent Calendar の 2 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie
このエントリは、3rd Party Cookie Advent Calendar の 1 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie
またまた自分のブログサイトを改修した報告です。自分のブログサイトを改修してはそれをネタに記事を書くのを繰り返していて、なんか面白いですね。 このブログはソースコードと同じリポジトリに Markdown 記事を保存しています。サイト自体は Next.js で、Markdown はただの .md ファイルです。 これまで気...
10 年ほど前に同じことを調べたことがある。なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codeshttps://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。この問題についてあらためて記す。
現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年 11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。
Chakra UI が自分で "use client" を付けている 最近 Chakra UI が "use client" を付けずとも Next.js の App Router で使えるようになったと話題になりました。しかし調べてみると、どうやら JS 非依存なコードに書き換えられた訳ではなく、Chakra UI ...
画面幅 991px 以上で閲覧すると、記事ページの右側に目次リンクが表示されるように実装しました。 目次生成ライブラリ tocbot tocbot というライブラリを使用しました。 https://tscanlin.github.io/tocbot 今までこちらのライブラリの存在を知らずに、どうやって実装しようか迷子に...
コンボボックスとは、テキストボックスとドロップダウンリストを組み合わせた UI コンポーネントです。コンボボックスはユーザーがテキストボックスに入力した文字列に基づいて、ドロップダウンリストのアイテムをフィルタリングできます。`` 要素は、HTML の標準でコンボボックスを実現することを目的としています。
2023/12/16(土) に、3 回目となる「次世代 Web カンファレンス」を開催します。次世代 Web カンファレンス 2023 - connpass名称: 次世代 Web カンファレンス 2023日時: 2023/12/16(土) 11:00-20:00場所: サイボウズ参加費: 無料配信: なしアーカイブ: 未定懇親会: なし入場規制: ありハッシュタグ(全体): #nwc_all
https://pokemon-soundlibrary.stin.ink ポケモン公式が公開している「ポケットモンスター ダイヤモンド・パール」の BGM をループ再生できるようにしたサイトを以前作りました。その後公式から「ポケットモンスター 赤・緑」の BGM も配布されたので、追加分も再生できるようにアップデート...
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。特に `` の `formAction` 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。Server Actions の是非について語る時、導入の背景にユーザー体験の向上があるという観点を忘れてはいけません。また、セキュリティ上の観点についてどのように考えるべきでしょうか？
既存のプロジェクトで npm に移行する際に `npm install --package-lock-only` を使うことで、依存パッケージのバージョンを変更することなく lock ファイルを移行できます。
このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。 変更した理由 最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意識的に見るようになったという意味)。このツールで実装できるサイトのダークモードデ...
こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。
Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server Actions の戻り値に JSX を使うことができます。ただし、公式にサポートされている仕様ではないので、思わぬバグを踏む、将来追加される機能に対応しないおそれがあることを理解した上で、使うかどうかを判断する必要があります。
Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。
GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
Invokers は JavaScript なしでインタラクションを追加するための提案です。`` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `` などの要素の開閉状態を切り替えることが可能となります。
`URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `try...catch` 文による判定よりも簡潔に記述できます。
ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。
カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。`focusgroup` の提案は、このようなキーボード操作を独立して使用できるプリミティブとして提案されています。この機能を利用することで、開発者は JavaScript を用いることなく一貫したフォーカスナビゲーションを実装できます。
`` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。
`` 要素は、デザインをカスタマイズできなかった従来の `` 要素の問題を解決するために Open UI グループにより提案されている要素です。`` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。
`history.replaceState()` は、ブラウザの履歴を変更するための API です。使用例としてユーザーのアクションによる UI の状態の変更に合わせて、URL のクエリパラメータを変更することが挙げられます。この API はブラウザにより呼び出し回数に制限が設けられており、使い方を誤ると予期せぬ挙動が発生するおそれがあります。
モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。
ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事では、ElysiaJS を使って簡単なタスク管理アプリの Web API を作成してみます。
Bun では `package.json` の `workspaces` を使用することでモノレポの管理が可能です。この記事では Bun によるモノレポを試してみます。
Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装してみましょう。
Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル（.rs）を直接 import できる仕組みも作れることが紹介されています。
OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に Connector を使用します。例えば、あるパイプラインはログのパイプラインのエクスポーターとメトリックのパイプラインのレシーバーとして動作します。このような場合、Connector はログをメトリックに変換する役割を担います。
コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。
OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化されたプロトコルとツールを提供していることが特徴です。この記事では Node.js アプリケーションを計装して Prometheus にデータを送信する方法を紹介します。
await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく thenable オブジェクトを対象としているのは、ライブラリの相互運用のためです。
タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。
React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.memo の使い方を誤ると意図しない再レンダリングが発生してしまうことがあります。ここではメモ化したコンポーネントに children を渡すと効果がなくなるというケースについて説明します。
prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。
本のタイトルは「Rust と WebAssembly によるゲーム開発」となっていますが、反して WebAssembly についての話題はほとんど出てきません。主に Rust における開発の設計についての話題が中心となっています。
`` や `` 要素で描画されたグラフは、スクリーンリーダーを使用するユーザーにとって内容を正しく理解することが難しいです。この記事では、グラフの内容をスクリーンリーダーを使用するユーザーに伝える方法について考えてみます。
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この提案の仕様および本サイトへの適用について解説する。
テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation のようなモック関数が使えません。
Document Picture-in-Picture は、`` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロールを使用したり、プレイリストとともに動画を PiP することが挙げられます。
この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。
`pnpm patch` コマンドを使うと、依存パッケージのコードを直接書き換えることができます。
aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。
文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。
JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。
Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。
Vue.js 3.3 から `` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができます。
最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備されてきた。これら API のモチベーションと設計を中心にまとめる。
技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。
ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、Chrome から発表された。思えば、URL バーの見た目も、だいぶ変わってきたように思う。URL バーの表示の変遷を一度まとめておく。
React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ名前のカスタムフックが入っていることは知っていますが、インターフェイスも内部実装...
WAI-ARIA における role 属性を使用する際のプラクティスとして、暗黙のロールを明示しないというものがあります。しかし、` ` 要素は暗黙のロールとして `list` ロールを持っていますが、明示的に `list` ロールを宣言するべきです。
HTTPBis では、RFC 8941: Structured Field Values (以下 SFV) の更新作業が行われている。RFC 8941: Structured Field Values for HTTPhttps://www.rfc-editor.org/rfc/rfc8941.html機能面では Date 型が追加されるという点が大きいが、個人的にはその裏で行われるもっと興味深い議論に注目したい。それは、「RFC における ABNF の立ち位置」に関するものだ。
このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行 このブログサイトのスタイリングは vanilla-extrac...
Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在します。
Next.js の Server Actions はサーバーサイドのデータのミューテーション、クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。
「連載するけど、代わりにコードはハイライトさせてほしい」それが Web+DB Press 編集長に俺が出した条件だった。
SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリッチなユーザー体験を追加できます。例えば、フォームを送信した後ページ全体の再読み込みを行わずに、フォームの送信結果を表示することができたり、バリデーションメッセージを即座に表示できたりします。
`Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は変更されず、新しい配列のコピーが返されます。
ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できるメリットがあります。
Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。
Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を発揮します。
HTML Standardに新しい``要素が追加された。これまで、ARIAには``に相当するHTML要素がなかったため、` `しか代替要素がなかった。新たに``要素を使用することにより、WAI-ARIA を使用せずともsearchランドマークを定義できるようになった。通常、``要素は少なくとも1つの入力要素を含んでおり、検索を開始するためのボタンもあることが期待されている。
OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。
ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され、回答は通常、「例」に基づいた形式で得られる。
パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラーとなります。TypeScript にはパターンマッチがないため、網羅性の検査は行われません。ですが、TypeScript では `never` 型を利用することで網羅性の検査を行うことができます。
SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使用すると、型安全に環境変数を参照できる、公開してはいけない値をクライアントから参照できなくなるなどのメリットを得られます。
Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与える場合がある。一方それらは Web 開発者が使う時点では解決されており、基本的に気にされることはない。だからといって、気にする必要がないわけではない。ということを象徴する事件が、今回も裏で起こっていた。
React を使用していた場合に引き起こす可能性がある XSS 脆弱性の例として、javascript スキームを使った XSS があります。この記事では、javascript スキームを使った XSS についての説明とその対策について紹介します。
ほぼ設定なしで TypeScript + ESModules の開発環境をシュッと作る時のレシピです。
ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。
React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します
SPA で画面遷移をする場合、MPA の場合と違い、ブラウザがローディングの表示を行ってくれません。リンクをクリックしてから画面遷移が完了するまで何も表示されないので、ユーザーからすると何も反応していないように感じてしまいます。 SPA で画面遷移した時にプログレスバーを表示したい場合には NProgress が最適です。コンパクトな JavaScript ライブラリでフレームワークを選ばず利用できます。この記事では SvelteKit で NProgress を使用する方法を紹介します。
ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの操作をブロッキングするものではありません。ユーザーがマウスのホバー外すかフォーカスが外れた場合にツールチップは非表示となります。
すてぃんのブログから Chakra UI を剥がして vanilla-extract を導入しました。見た目はほとんど変わっていませんが、Chakra UI でスタイリングされていたものをすべて vanilla-extract で 1 から作り直しました。 ライブラリの変更理由は以下の通り。 最近 vanilla-ex...
:focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。 それでは、JavaScript の focus()メソッドによりフォーカスされた場合には、`:focus-visible` 擬似クラスは適用されるのでしょうか？実はこれは最後 `focus()` メソッドが呼ばれる前に要素にフォーカスがあったかどうかにより異なります。
誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコードの中に入り込んだ例を見てみましょう。
例えばフォームの項目になにか入力されるまで、送信ボタンを無効にしたい状況があるかと思います。このような場合には `` に `disabled` 属性を与えることでフォームの送信を無効にできます。`disabled` 属性はデフォルトでコントロールを無効にする一般的に期待されるすべての機能を提供するため、多くの場合はこの属性を使用するべきです。しかし `disabled` 属性には 1 つ問題点が存在します。それは Tab キーによるフォーカスができなくなるという点です。
単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る舞いが壊れていないことを保証してくれる度合いです。この耐性が高ければ、開発者は安全にコードを変更できます。 この記事では、単体テストをコード単位で書いた場合と振る舞い単位で書いた場合をそれぞれ提示して、リファクタリングに対する耐性がどのように異なるのかを見ていきます。
SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。コンポーネントを敷き詰めるコンテナ側の設計は、Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも大いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。現在、提案/実装が進んでいる CSS の新機能群には、この「コンポーネントベースの Web 開発」に大いに影響を与えるポテンシャルを持つものが多い。今回は、2023 年の予習として、それらの仕様を「開発スタイルに与えうる影響」の側面から俯瞰し妄想したものをメモに残す。
Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。 生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを壊しかけた。自分が過敏なだけかもしれないとメンタルクリニック的なところにも行くか...
例年通り 2022 年を振り返る。
アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。 ですが、完璧な対応を目指すのではなく、少しづづ改善できるところから進めることこともできます。実際にやってみると、簡単な HTML や CSS のコードの修正でもよい改善を得られたりします。 この記事では比較的低コストで実践入門できるアクセシビリティの改善を紹介します。
データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。
Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生成する手間は取れないわけで、このOGP 画像を生成する工程を自動化する仕組みが必要となります。Satori は記事のタイトルなどをもとに動的 OGP 画像を生成するユースケースのために使用できます。
ユーザーの OS の設定や LocalStorage の値をもとにダークモードかどうか判定する場合、コンテンツが読み込まれる前にスクリプトの実行が完了している必要があります。
Pa11y とは Web Content Accessibility Guidelines (WCAG) をベースに HTML のアクセシビリティを検査するツールです。適合レベル AA を対象にテストします。Pa11y にはいくつかの種類がありますが、その中でも Pa11y CI は CI 上で実行することにフォーカスしています。
jest coverage reportは GitHuba Actions のワークフローの1つで Jest で実行したテストのコードカバレッジをプルリクエスト上にコメントしてくれます。 この記事では yarn workspaces 使用して作成したモノレポ構築のレポジトリで jest coverage report を動かしてみます。
TypeScript において `in` 演算子を `unknown` 型に対して使用した際の挙動が改善されました。
あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに付随するコメントやいいねの数はそれほど重要ではないので、それらのデータの取得を待つ必要がありません。 この記事では React Router の loaderを使用して重要なデータの完了のみを待機する方法を試してみます。
タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択することで表示されるタブパネルがタブに関連するものに切り替わります。
アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーディオンは1つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく 使用されます。例えば、「よくある質問」のようなページで使われていることを見たことがあるかと思います
CORB (Cross Origin Read Blocking) が Fetch の仕様から消え、後継の ORB (Opaque Response Blocking) が策定作業中である。ここでどのような変更が起こっているのかを調査し、記録する。
リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。
Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。
Vercel で og:image の動的生成するなら一択 先日 Vercel から HTML\&CSS で画像を生成できるライブラリ @vercel/og が発表されました。 https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dyn...
Firebase のユーザーに個別に権限を割り振りたい要件は多そう。すでに似たような記事はたくさんありますが、自分も実装方法を調べたので文章にしておきます。 実装イメージ Firebase Auth のカスタムクレームを使用します。Firebase ユーザーオブジェクトに独自のプロパティを生やすことができる機能です。 ...
イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。
React において不要な再レンダリングを避けるためのいくつかのパターンを紹介します
Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。
beforeunload イベントをテストする方法を紹介します
:focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。
ダイアログをアクセシビルに実装するための要件を確認しましょう。
ユーザーが入力した情報をそのまま表示するとクロスサイトスクリプティング（XSS）脆弱性につながる問題があることはよく知られています文字列の無害化はこのようにライブラリの実装に頼っている状況でしたが、WING により Sanitizer API という仕様が策定されました。Sanitizer API により外部ライブラリの依存無しで XSS の対策が可能となります。
Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。 Hono の特徴としては以下の点が挙げられています。 - ウルトラファスト - 依存関係なし - ミドルウェア - TypeScript - マルチプラットフォーム
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 は頻出する予定であり、今後より多くの場面でこの仕様を見ることになると思われるため、一度この仕様の概観について解説する。(筆者は暗号の専門家ではないため、解釈や語彙使用の間違いがあるかもしれない。)
Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の `body` に ReadableStream を渡せるようになります。
それではいよいよ、AnguarJS のルーティングモジュールである `ngRoute` を置き換えましょう。この置き換えが完了したら AngularJS を完全に取り除くことができます。
AngularJS のチュートリアルを React にリプレイスします。今回の記事では AngularJS のコンポーネントをすべてリプレイスして、angular-resorce の代わりに API クライアントを実装します。
AngularJS のチュートリアルを React にリプレイスします。
pnpm は npm、yarn と並ぶ JavaScript のパッケージマネージャーです。pnpm と言う名前は「performant npm」に由来します。
msw の実践で活用する例を紹介します
Vite で立ち上げた React + TypeScript プロジェクトには eslint のセットアップはされていない。プライベートでちょっとライブラリを試すみたいなケースでしか Vite を使っていなかったので eslint なしで作業していたが、やっぱり useEffect の依存配列の渡し漏れをして混乱するこ...
Volar + Vuetify 2.x を利用する場合、型定義ファイルを作成してグローバルコンポーネントを定義する必要があります。
[Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。
TypeScript 4.1 から noUncheckedIndexedAccess オプションが追加されました。このオプションは上記のような配列のアクセスやオブジェクトのプロパティのアクセスをより厳密にします。 具体的には、配列に対するインデックスアクセスやインデックスシグネチャを通じたプロパティのアクセスは常に `undefined` とのユニオン型となります。
以前、『ポケットモンスターダイヤモンド・パール』の BGM をループ再生できる Web サイトを作成しました。 https://dp-soundlibrary.stin.ink/ この Web サイトの実装については過去に Zenn に投稿しているのでそちらも御覧ください。 https://zenn.dev/stin/...
Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また、Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。
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いったい何が起こっているのか、それぞれの経緯と開発者が知っておいた方がいいこと、そうでもないことを解説する。
WebSocket でリアルタイム通信したいんじゃ WebSocket 通信を使ってみたいので調べた学習ノート。Node.js 用ライブラリの ws を使わずに WebSocket サーバー実装とかできたらかっこいいけどとりあえずライブラリに甘えます。 ws による最小構成 サーバーを起動する最小構成。 このコードをコ...
UnoCSS はフレームワークではなく、Atomic CSS エンジンです。全ては柔軟性とパフォーマンスを考慮して設計されています。UnoCSS にはコアユーティリティはなく、すべての機能はプリセットで提供されます。
Histoireはフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。Vite にネイティブ対応、Vue の SFC 形式で Story を書けるといった特徴があります。
長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、RFC 9239 として公開された。これにより、推奨される MIME タイプが text/javascript に統一されることになった。かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。
Jest Preview とは Jest で実行中のテストに debug() 関数を仕込むことで、実行中のテストが作成した HTML をブラウザでプレビューしながらデバッグできるライブラリです。
Playwright は E2E テストのための Node.js フレームワークです。v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまりもともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。
ブログに広告を入れてみたので許してください ブログにちょっとでも広告収入あると嬉しいなと思っていたものの、Adsense は審査が厳しいと聞いていたので手を出していませんでした。でもふとダメ元で申請してみたらなんと承認されて広告を貼り付けられるようになったので導入しました。煩わしく感じない程度の広告数にしておくのでどう...
この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大な工数の削減に貢献しています。 その一方で、細かなスタイルの調整に手間取り余分に時間を取られ苦労を経験している方も多いのではないでしょうか？
WET is better than DRY https://twitter.com/stin\_factory/status/1522521205080989696 こんなツイートをしたらちょっと反響がありました。 大した事ないツイートがプチバズりしているの不思議 ではありますが、みんな似た経験をしているのでしょう。...
https://twitter.com/stin\_factory/status/1520251902877118464?s=20\&t=ObJNlQRqSKg5E02UCk5xOw 尊敬する TypeScript の師匠(勝手に思ってるだけ)である uhyo さんが書いた『プロを目指す人のための TypeScript...
JavaScript のテストランナーといえば、Jest がデファクトスタンダードと言えるでしょう。最近は Vitest と呼ばれる新たなテストランナーも登場していますが、しばらくは Jest が使われ続けられることでしょう。 そんな中、Node.js 18 から標準 API としてテストランナーが組み込まれました。まだ実験的な機能ではありますが、サードパーティのライブラリを使用せずに扱えることもあって注目を集めています。
最近は [Rust](https://www.rust-lang.org/) と呼ばれるプログラミング言語を趣味として触っています。[SWC](https://swc.rs/) や [Rome](https://rome.tools/) のように Rust で作成されたフロントエンドツールが増えていることから興味を持ったのですが、実際に触ってみて Rust が高い人気を誇る理由がよく分かるようになりました。 この記事では私が Rust を触ってみて魅力に感じた点を列挙していきます。
https://twitter.com/stin\_factory/status/1516718102813511680 https://www.borndigital.co.jp/book/25999.html Amazon で予約開始してすぐに予約していたものが先日届いて 1 周読み切ったので読書感想文的なものを書...
HTML の構文チェックを実施するには適切なツールを導入するのがよいでしょう。この記事では markuplint と呼ばれる HTML の静的解析ツールを紹介します。markuplint は JSX(React),Vue,Svlete のようなテンプレートエンジンにも対応しています。
従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。これは、History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。この API の目的と仕様を解説しつつ、実装のメモを残す。
皆さん Node.js のバージョン管理ツールには何を使っておりますでしょうか？上記の中でも私がオススメするのは [volta](https://volta.sh/) です。volta は 1.0 がリリースされたのが2020年12月と比較的新しいツールです。
workspace は複数のパッケージ（`package.json`）をレポジトリを管理するために使用されます。このようなレポジトリは**モノレポ**として知られています。
この個人ブログに RSS フィード機能を実装しました。 RSS フィードとはブログの記事のタイトルや公開日などの情報を XML 形式で配信するものです。 実装方法自体はググって出てきた記事を参考に行いましたが、その中で一つ疑問があったので調べてみました。 参考記事 https://zenn.dev/catnose99/...
`Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。
適当にやってた meta タグ設定をちゃんとしました Next.js のプロジェクトの meta タグ類を設定してくれるライブラリ next-seo をインストールしました。 今まで適当に meta タグをセットしていて、特に OGP 系は必須プロパティとかも入れずにやっていましたが、今回 next-seo を導入する...
Twitter のシェアボタンをブログに設置しました 記事ページの下部に Twitter のシェアボタンと Buy me a coffee のリンクを設置しました！ Twitter のシェアボタンを作るに当たって考えたことを書いていきます。 コード https://github.com/y-hiraoka/stin-b...
TypeScript のプロジェクトにおいて `import type { ... } from "./module"` という記述を見たことはないでしょうか？ これは Type-Only imports and export と呼ばれる機能で TypeScript3.8 より導入されました。これは名前の通りモジュールから型情報のみをインポートするために使用されます。これは通常の利用用途ではあまり考慮する必要はないのですが、特定の問題に立ち向かうために利用されることがあります。
Tweet URL を Tweet 埋め込みに変換して表示するように実装しました Tweet の URL だけを Markdown に記述すると ↓ Tweet 埋め込みの iframe が展開されるようにブログを実装しました！↓ https://twitter.com/jack/status/20 この記事では Tw...
すてぃんブログレボリューション 21 (updated) このブログサイトをフルリニューアルしました！(5 記事しか書いていなかったのにもうリニューアルとかｗｗというのはそれはそう) 今回はこのリニューアルについて、こだわりポイントと技術的な内容の 2 つを書こうと思います。 こだわりポイント Web デザイン リニュ...
`anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。
msw 使ってテストを記述した時期待したリクエストが送信されているのか検査したくなるかもしれません。リクエストを検証する方法と、それを回避する方法を紹介します。
本ブログは Markdown で原稿を書き、それを HTML に変換して表示している。このとき、CSS を用いて Markdown のシンタックスに似せた Style を適用している。例えば以下のように h2::before に content: '##' を指定するといった具合だ。しかし、これまで <table> だけはうまく Markdown 記法を再現する CSS が書けないでいた。そこで、周りの CSS 強者に実現できないか聞いてみたところ、@shqld, @araya, @yoshiko 達の協力を得て、かなりの完成度にすることができた。実現方法を記録する。
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのインタラクションな操作を表現することができます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行することができるようですのでこちらを試してみます。
本記事では Yew を利用して Web アプリケーションを作成してみたいと思います。Yew は React や Vue などと同じくコンポーネントベースのフレームワークでインタラクティブな UI を作成できます。
結論： - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。
TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。
Node.js で fetch が使えるようになる
本サイトを HTTP3 対応し、Alt-Svc ヘッダおよび DNS HTTPS Resource Record によってそれをアドバタイズする構成を適用した。色々ハマったので作業のログを記す。
様々な方法でアクセシビリティを自動で検査します
Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 `play()` 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを `Jest` など他の領域においても再利用できることです。
皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。
最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されているのか見ていきましょう。
本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最適化シリーズ第 6 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編> 画像最適化戦略 AVIF 編
さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨する方法がありませんので、どちらを使用するべきか迷ってしまうところです。 `reactive` と `ref` のそれぞれのメリット・デメリットを確認してみましょう。
例年通り 2021 年を振り返る。
Vitest は Vite ベースの JavaScript のテスティングフレームワークです。
[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の Vuetify 3 が公開されています。開発スケジュールは以下のとおりになっています。
現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。
筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。「自分は今 Push で実装しているのか、Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。(本エントリでの Ossification は、一般に言われている Protocol Ossification よりも、もう少し広義に捉えていることに注意)抽象的な話が続くため、なるべく具体例を交えて解説を試みる。
大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示することを目的としているので印刷には不向きなものです。 とはいえ Web ページを印刷したいというニーズは少なからずあるとは思います、そのようば場合には `@media print` などのような印刷用の CSS を利用することで見た目を整えることができます
本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。必要だった要件や、意思決定を作業ログとして記す。
フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使われることが多いです。実際に例を交えて確認してみましょう。
Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。
Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を達成する方法として上げられています。
2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。
CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それらのボックスが組み合わさることによってページ全体が表現されます。 ボックスは CSS において最も基本的な概念であり、ボックスを理解することは CSS でレイアウトを構成したり要素同士を揃えるための手助けとなることでしょう。
[type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。
IETF の RFC では ABNF 形式の表現がよく使われ、たまに実装することがある。しかし、実装するたびに前のコードを引っ張り出して思い出す、を繰り返しているので、自分用にメモとしてやり方をまとめる。完全に我流であり、目的は「その ABNF が正しいかを確認すること」なので、高速化や効率性を求める実用実装とは目的が違う点は先に言っておく。
type-challengesを知っていますか？ これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。 問題の回答はPlayground上で行えるので実際に手を動かしながら問題を解くことができます。型パズルを通じてTypeScript の高度な型について学んでいきましょう。
@types/react-router v5.1.9 から型定義がきれいになっていた react-router の型定義は受け取るパスが全て文字列のため、以前は TS コンパイラでパスの間違いを検出できませんでした。 そのため僕は typed-path-builder というライブラリを作って次の記事を書きました。 h...
[lodash-es](https://www.npmjs.com/package/lodash-es) とは [lodash](https://lodash.com/) を `ES module` 形式で提供しているライブラリです。
Immutable.js で React ステート用モデルクラスを作る 昨今の React は関数コンポーネント一辺倒になり、 React エンジニアがクラス定義する場面はかなり減ってきているんじゃないかと思います。 関数コンポーネント内部で取り回されるステートもクラスインスタンスではなくプレーンなオブジェクトで、それ...
質問来てた👉 Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ 結論：犯罪になる場合がある。 まず、配列の引数に `readonly` を付与しておけば以下の利点を得られます。 - うっかり関数の内部で引数の値を変更してしまうコードを書いてしまったときにコンパイルエラーが得られる - 関数の利用者が安心して関数を呼び出せる
Vue.js 3.x から script setup 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。
現在リリースされている最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのものであり、 Vuex 3 と同じ API となっています。 Vuex 5 は Vue 3 において Composition API による Reactivity API が登場したことにより Reactivitty API によってどのように Vuex をどうさせるか再考されたバージョンとなっています。
iOS15 がリリースされたため、Private Relay のベータを試すことができた。このようなサービスが提供されるようになった背景を踏まえ、挙動を簡単に確認しつつ、解説する。
Vue.js3.2からは、JavaScriptの変数をCSS変数としてバインドできるようになりました。 つまりは、CSSの値を動的に設定できるということです。 ものは試しのやってみましょう。
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。
禁止まで言ってしまうとなんだか強い言葉のように聞こえてしまいますが、mixinは基本的にあまり良いアプローチとは考えられません。 実際に、Reactにも過去にはMixinが存在していましたが現在は廃止されています。
axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。 axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。
VuetifyのテーマをCSSの変数として生成して使用します。
先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっていたのを見て、たまには小ネタもということで、いくつかのテクニックを紹介する。実際には、発生しているイベントを制御するというテクニックなので、応用すると色々使えるだろう。
時には、TypeScriptという概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんなJavaScriptしか利用できない状況で代替手段となるのが、JSDocです。JSDocのアノテーションによって型を付与することによって最低限の支援を受けることができます。
DRY原則は非常に有名な原則ですし、普段から特に考えずとも自然と重複をさけるようなコードを書いている方も多いことでしょう。 とはいえ、TypeScriptにおいて`interface`や`type`などを用いて型定義を行う際に重複した型定義を行ってしまうことはないでしょうか？ TypeScriptには型定義をする際に重複を抑える手段は確かに存在します。そのようないくつかの方法を紹介します。
直近で話題になっている Chrome の挙動変更についてまとめた。Reverse OT による延命はあるが、もともとが「セキュリティ的な理由でできなくする」のが目的のため、OT 期間中に修正が必要そうであることを先に述べておく。なお、これはあくまで筆者が調べた結果に基づいた見解であるため、該当する開発者は常に公式のアナウンスなどに注意し、最新の情報を踏まえて自身で判断すべきである。
JavaScriptには、setTimeout()のような時間に関する便利な機能が用意されています。しかし、これらの関数はユニットテストを記述する際に厄介です。Jestのタイマーモックはこのような場合に利用できる便利な機能です。
型アノテーションと型アサーションによる変数宣言は、一見同じ結果をもたらすように見えます。しかし、型アサーションには明確な欠点が存在します。
タイトルのとおりです
mongooseで遭遇するCannot overwrite 'Model' model once compiled. エラーの解消方法です
`JSON`オブジェクトはJavaScriptにおいて、JSONをパースしたり値をJSONに変換するためにもっぱら使われます。 普段使っている`JSON.stringify()`や`JSON.parse()`にはオプショナルな引数を渡すことによってその振る舞いを変更することができます。
JavaScriptがプリミティブな値に変換されるとき、string型に変換されようとするか、number型に変換されようとするかで挙動が変化する
前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期待しないで欲しい。
Error Boundaryとは、自身の子コンポーネントツリーで発生したJavaScriptのエラーをキャッチ・記録しフォールバックのUIを表示するコンポーネントです。 例えるなら、`try/catch`構文を行うコンポーネントのようなものと言えます。
HTMLは書いたことがありますか？プログラミング初心者が最初の一歩として書き出すのに好まれる言語ですが、セマンティクスを追求すると奥深い言語だとわかります。タグの種類も数多くあり、全てを把握している人はそう多くなないでしょう。 今回は、そんなHTMLの普段の仕事では余り見かけないであろう要素を紹介していきます。
Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。 Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、このエラーコンポーネントにダイアログを表示させる処理を書いていきます。
Node.js(Express)でCSVファイルを生成してダウンロードさせます。
本サイトを (Non AMP) SXG に対応した。これにより、Google のモバイル検索では、結果を表示した時点でこのサイトの SXG が Prefetch され、結果を選択したら Cache から素早く表示されつつ、アドレスバーにも本サイトのものとして表示される。この、Non AMP SXG 対応にあたって、本サイトの AMP の提供も停止することになった。移行の作業ログと、関連する流れについて記す。
開発者向けのK8sの試験であるCKADにも合格したので同様に合格体験記を記載したいと思います。 といっても、大枠の部分はCKAのときとあまり変わらないのでCKAと異なる部分を中心に記載したいと思います。
Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。
IE11 が役目を終えていく流れを記録として残す。特に MS からのアナウンスや、それに準じた各サービスの反応、特に IE サポート終了アナウンスをまとめることで、IE11 というブラウザがどのように終了していったのかを記録することを目的とする。もともとは Google Docs にまとめていたものである。日付はアナウンスの公開日サポート終了日ではないサポート終了日も書いておけばよかったけど今からやり直す気力はない、、赤字 は MS 関連もしくはサポート終了の影響が大きそうなアナウンスWindows における IE11 自体のサポート終了については以下を参照https://www.atmarkit.co.jp/ait/articles/1503/11/news134.htmlできればある程度の結論が出るまでこのエントリを更新していきたい
Kubernetesのマニフェストを作成するときには、`apiVersion`フィールドを指定する必要があります。 例えば`Pod`の場合には`v1`を、`Deployment`の場合には`apps/v1`を指定しますが、これらはどのようなルールで記述するのでしょうか。
etcdは、kubernetesのクラスターの情報を保存するkey-valueストアです。
kubectlはアウトプットの形式としてJSONPathをサポートしています。
Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。最近、このリストへの追加リクエストがあとを絶たず、問題になっている。そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。
人生でときにはIE11に対応させなければいけない時があるでしょう。Vue.jsでIE11に対応しなけらばいけなくなったときに読むものを記載しておきます。
Cypressは、JavaScript製のE2Eテスティングフレームワークです。 実行速度が早い、HTTPリクエストの実行を待つなどテストが壊れにくい仕組みが整っています
知っていると時間を短縮できるようなkubectlコマンドのtipsです。
SassはCSSのメタ言語です。CSSに比べてコード量が減り、保守性が優れるといった開発体験を向上させてくれる特徴があります。
Kustomizeとは、Kuberbetsコミュニティのsig-cliが提供しているマニフェストのテンプレーティングツールです。環境ごとにマニフェストを生成したり特定のフィールドを上書きするといった機能が提供されています。
Helmは、Kubernetsのパッケージマネージャーです。 例えば、npmを利用して第三者が作成したパッケージをレポジトリで管理して検索・インストールするように、Helmではチャート(Chart)と呼ばれる設定ファイルをレポジトリで管理しています。
仕事上kubernetesを学ぶ必要が出てきました。 筆者のレベルは、Docker・kubernetesの概念・必要性をやんわりと理解している状態です。 勉強をすすめる上で、わからない用語が次々と出てきたて頭の中がパンクしそうになったので、簡潔に随時まとめることとしました。
この記事では、Denoを使い簡単なCRUD操作を行うREST APIを構築します。
WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、Layout Shift が発生してしまう。これを防ぐ方法として、CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。
Context を export するな みなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React C...
昨今のアプリケーションでは、ダークモードを提供しているのがもはや当たり前になってきました。 OSのレベルでダークモードを設定することができ、ダークモードが提供されていないサイトは眩しく感じしてしまって敬遠してしまうなんて経験はあるのではないでしょうか？ そんな一般化されたダークモードの提供をTailwind CSSで実装します。
GraphQLとは、Facebookが開発したAPI向けのクエリ言語です。RESTに変わるサーバーとクライアントの通信手段として注目を集めています。 リクエスト・レスポンスの型の定義ができる、フロント側から取得するデータを選択することができるなどの特徴があります。 GraphQL自体はSQLのようなクエリ言語としての位置づけなので、Java、Node.js、Ruby、JavaScript、Pythonなど様々な言語で利用することができます。
JamstackのJamはJavaScript/APIs/Markupの頭文字です。 従来の手法と比較して、高速化・堅牢なセキュリティ。より簡単なスケーラブル・開発体験の向上という特徴を持っています。実行時にAPIから取得したデータを動的にレンダリングせずに、ビルド時にAPIから取得して静的なHTMLとして出力されます。
IETF が策定する HTTP の仕様が更新されようとしている。ここには、Cache の仕様も含まれており、そのなかで must-understand という Cache-Control のディレクティブが追加されている。このディレクティブが追加された経緯と仕様について解説する。
この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。 - Svelteの基礎文法 - Svelteのルーティング - Svelteのストア HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。
Fragment をコンポーネントのトップに置くな 「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 これは、この MyComponent が生成する HTML 要素が h1 と p のふたつあるということを意味します。 この書き方がアンチパターンではない...
コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。
HTTP Header の値を構造化する Structured Field Values の仕様が RFC になった。RFC 8941: Structured Field Values for HTTPこの仕様の詳細について、筆者の実装を交えて解説する。
TailWindCSSはBootStrap・Materialize CSSなどに代表するCSSフレームワークの一つです。 その特徴として、**Utility First**を掲げています。
Svelteとは、ReactやVue.jsのような宣言的UIライブラリの一種です。その最大の特徴は、ReactやVue.js・Angularと異なりSvelteはコンパイラであることを謳っているところです。Svelteによってコンパイルされたコードは、すべてVanilla JS - ネイティブのJavaScript- にで生成されます。 そのため、コンパイル後のファイルサイズも小さくパフォーマンス上での利点が期待されています。
個人ブログを開発しました 「開発」という単語がふさわしいのか不明です。 開発 作成 制作 開発というと大げさな気がします。作成というと軽い気がする。 制作は工作とか美術っぽい。 CMS 使わずにフルスクラッチなので開発でいいでしょう。 stin's blog を支える技術 「〇〇を支える技術」っていう言い回しを使ってみ...
Firebase Functionsとは、Firebaseの提供するサーバレスフレームワークです。HTTPSリクエストによって関数を実行したり、FireStore・Cloud Storage・AuthenticationのCRUDイベントをトリガーに関数を実行することができます。使用できる言語はJavaScript・TypeScriptに限られているというデメリットはあるものの、手軽にデプロイでき簡単にプロジェクトの他のFirebaseの機能と統合できるメリットがあります。
例年通り 2020 年を振り返る。
本サイトを AMP SXG に対応した。その作業ログを記す。
Jestは、JavaScriptのシンプルなテスティングフレームワークです。ゼロコンフィグを謳っており、細かい設定なしに動作させることが可能です。 Jestの中でも特に強力な機能がモッキングです。Jestのモックを利用すれば、外部ライブラリであろうとモジュール外のオブジェクトを簡単にモック化することができます。 実際に、テストコードの例を見ていきましょう。
Vue3 Composition APIを使って、ハンズオン形式でTODOアプリを作成していきます。
JavaScriptはES2015以降から言語自体が大きく変化しました。 ES2015以降も、毎年JavaScriptはアップデートが行われており、最新の使用はES2020となっています。 このように、JavaScriptという言語は日々進化を遂げています。ES2015より前の書き方の多くが非推奨となっており、過去のWebや本の情報は現在ではあまり役に立たなくなっています。 そんなJavaScriptのイマドキの書き方を見ていきましょう。
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
JavaScriptで配列操作をする際には、まずはJavascriptが持つ配列のメソッドを眺めて見るとよいでしょう。JavaScriptはライブラリに頼らなくとも自前で高度な操作を可能にしてくれます。 組み込みの配列メソッドはたくさんありますが、その中で私がよく使うメソッドを紹介します。
「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。スコープとしては、ライブラリ、ツール、フレームワークなどではなく、Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。
Go言語の提供するテストはシンプルです。テストのために覚えることは多くはありません。 Go言語の単体テスト用の機能は`testing`という標準パッケージとして提供されています。ベンチマークやカバレッジ、標準出力のテストなどをカバーしています。 また、テストは`go test`コマンドによって実行されます。サードパーティのツールなどは必要ありません。まずはこの`testing`パッケージの内容を見ていきます。
Go言語は、標準パッケージでHTTPサーバーと基本的なHTTPクライアントを提供します。 使用するのは、net/httpというパッケージです。
Go言語には、ポインタがあります。 ポインタとは、メモリのアドレスのことです。アドレスは`0xc0000b4008`のような16進数で表されます。
構造体(Struct)とは、フィールドの集まりです。JavaScriptのオブジェクトよく似ており、データをまとめて1つの集まりの値として表現します。 例えば、座標を表すには緯度と経度がフィールドとして必要になるでしょう。緯度と経度をそれぞれ別の変数として宣言することはできますが、間違いが生じやすく面倒な処理になってしまいます。
配列は決まった長さを持つ要素を並べた順序のあるコレクションです。 Go言語の配列は固定長になっており、宣言時に長さと要素型を指定します。 長さは後から変更することはできません。 Go言語の配列は柔軟性に欠けるため、実際にはあまり使用されません。可変長であるスライスがよく使われます。 マップはキーと値によって宣言されます。これは、連想配列のようなものです。
Go言語は静的型付け言語であり、全ての変数は何らかの型に属し、異なる型同士の演算といった問題点の多くはコンパイル時に検出されます。 関数の宣言にはfuncキーワードを使用します。関数の引数と戻り値には型を指定します。戻り値を複数持たせられる、戻り値に名前をつけることができるといった特徴があります。 クラスやオブジェクトはないですが、メソッドはあります。メソッドは型に紐付けられます。
Go言語(Golang）は、2009年にGoogleによって開発されたオープンソースの静的型付け、コンパイルされるプログラミング言語です。Go言語はコンパイルされるプログラミング言語です。 Go言語はシンプルで、信頼性が高く、効果的なソフトウェアを構築します。
今この文章を読んでいる人ならば、少なくともCSSには触れたことがあると思います。CSSはとても簡単に記述できますが、それゆえにCSSは「壊れやすい」のです。なぜCSSは壊れやすくなってしまうのでしょうか。CSSには「すべてがグローバルスコープ」「複雑化するWeb開発」といった問題点があげられます。そのような状態に対する解決策として、CSSの設計が誕生しました。
Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。
ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。これにより、映像や音声の変換などといったユースケースへの応用も可能だ。本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。
<img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。
WebBundle を用いてサブリソースのみを Bundle する、Subresource Bundle の策定と実装が進んでいる。これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。現時点での仕様と実装を解説する。Intent to Prototype: Subresource loading with Web Bundles
Web の https 化が進み、それに伴って https を前提とする API も増えてきた。そうした API を用いた開発をローカルで行う場合、localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。特に推奨するつもりはない。
Expressは、Node.jsのWebアプリケーションでもっとも利用されているフレームワークです。Expressは、HTTPによるWeb上の相互作用とNOde.jsプラットフォームの中間に位置するので、ある種のミドルウェアと言えます。 Expressを利用して、MVCモデルのアプリケーションを開発してみます。 データベースにはMongoDBを利用し、さらにTypeScriptで書いてみます。
WebTransport の Quic 実装である QuicTransport の開発が Chrome で行われている。Chrome で Origin Trials が開始されたので仕様と実装を解説する。
Node.jsは、V8 Javascriptエンジン上に構築されたJavaScriptの実行環境です。サーバーサイドのJavaScript環境であり、非同期、イベント駆動といった特徴があります。
Firebase4回目の記事です。 前回は、Firebaseにおける単一のドキュメントに対するCRUD操作までを取り扱いました。 今回は複数のコレクションから取得するためのクエリについて説明していきます。
Origin は Web におけるセキュリティモデルの一つとして、コンテンツ間の Communication に関する境界を定義し、リソースを保護してきた。しかし、Spectre の発覚以降、Communication に関する制限だけではなく Isolation によるメモリレベルでのアクセス制御が必要となった。そこで現在作業されているのが、CORB, CORP, COEP, COOP といった仕様群であり、これは Web におけるセキュリティモデルの更新作業と見ることができる。概要と現状について解説する。
Denoは、Node.jsの製作者であるRyan Dahlによって作られた、新しいJS/TSランタイムです。簡単に説明すると、Node.jsのイケてなかったところを改良したものがDenoになります。
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 アプリで聞いてほしい。
Firebase3週目の記事です。 今回は、主に画像などのデータを保存するストレージ機能を提供するCloud Storageを取り扱います。 Vue.jsを利用したブログにサムネイル画像を設定する機能をもとに説明していきます。
JavaScript ECMAScriptとかBabelとか
Cloud FireStore(以下FireStore)とは、FireBaseの提供するドキュメント指向型 のNoSQLデータベースです。 NoSQLとしての特徴としてのスキーマレス、スケーラブルといった特徴のほかにリアルタイムアップデート、セキュリティルール、オフラインサポートといった独自の特徴を備えており、特にバックエンドを介さずにクライントサイドから直接操作できるという点が大きなポイントです。 また、β版から正式リリースされたのが2019年2月ということもあり、比較的新しい技術です。
メールクライアントや RSS リーダーのようなユースケースを PWA で実装する場合、バックグラウンドで定期的にタスクを実行したいケースがある。このユースケースに特化した API として提案されているのが、Periodic Background Sync(PBS) だ。しかし、この API を取り巻く議論は「Web にアプリのような API を持ち込む上での難しさ」を物語っている。この API が Web において正当化できるかどうかは、Project Fugu に代表される Application Capabilities を Web に持ち込む場合の試金石になりそうだ。現時点での、仕様、実装、議論について解説する。
Firebase第二弾です。 Firebase Authenticationのメールアドレスによるログインと、FireStorageについて説明していきます。
Firebaseは、Googleが提供するバックエンドサービスです。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。 認証、データベース、ストレージなどたくさんの機能が使用できます。
Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。
Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。冷静に考えればふざけてるとしか思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。そんな Cookie が今どう使われ、3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。
昨今、特に広告サービスを中心に 3rd Party Cookie を用いたトラッキングについての議論が多く行われている。Safari による ITP や、Chrome による Privacy Sandbox への移行など、技術的な変化も著しい。こうした技術の変遷を観測し、調査検証を行うために、これまで避けていた Web 広告を本サイトに導入することにした。
Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。これにより、通常 Range Request で取得するような、大きなファイルを事前にダウンロードしておくことができるようになる。この API と、Service Worker およびブラウザにおける Range Request/Partial Response の扱いについて記す。
Web サービスにおいては通常、Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。しかし、Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。
例年通り 2019 年を振り返る
依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様であり、組み合わせれば WebBundle に対して署名することでコンテンツの配信を通信と分けて考えることができる。Signed HTTP Exchange に比べると格段に簡単な仕様なので、現状のフォーマットと挙動について解説する。draft-yasskin-wpack-bundled-exchanges-latest
家では Mac を使っていたが、やはり Ubuntu 開発環境を作ることにした。前々から気になっていた Intel NUC をベースに Ubuntu 環境を構築。また、外出時もアクセスできるように SSH Port Forwarding を使って、固定 IP の無い家に外からアクセスできるようにした。備忘録を兼ねて記す。
ページ内の特定の位置へのスクロールは、URL フラグメントと HTML の ID 属性を用いて行われていた。しかし、ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。
Noto Sans のサブセット生成を見なおし、Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。作業と検証の記録を兼ねて、実施結果を記す。
Promise.allSettled() と Promise.any() の仕様策定が進んでいる。両者は近いレイヤの仕様では有るが、作業の進捗には差がある。Promise.allSettled は Stage 4 であり、Chrome や Safari TP には実装もされているPromise.any は Stage 2 であり、実装はまだないここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。
Transport として HTTP over TCP を基本としていた Web のあり方は大きく変わり、転送するメディアも HTML だけに止まらなくなってきた。その対角線上にあるユースケースとして、UDP でバイナリデータを双方向にやり取りする「ゲーム」があるだろう。WebSocket/MSE/WebRTC/WASM など、Web で Game を行うためのパーツは徐々に揃いつつあり、過去に比べればだいぶ状況は改善してきていると言える。しかし、できることが増えればこそ、それぞれのパーツの不足する部分が浮き彫りになる。WebTransport と WebCodecs は、主にそんな Web Game の需要から「本当に必要としているもの」を再考した結果をまとめた提案と言えるだろう。これが、単に Web Game 開発の需要を満たすだけで終わるものか、ゲーム以外の Web の開発にどこまで影響を及ぼすか。現状の仕様の提案とそのモチベーションを元に、考察していく。
JS における null/undefined の扱いを改善するための 2 つの機能が提案されている。Nullish Coalescing Operator (stage 3)Optional Chaining Operator (stage 3)いずれも Stage 3 に進み、実装も始まっているので、現時点での解説を行う。
React や lit-html などにより、DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。これは、現在の標準 API には、規模が大きく処理が複雑なアプリケーションを開発する際に、足りてないものがあると考えることが可能だ。課題の 1 つとして「DOM 操作が同期処理である」という点に着目し、Async DOM という文脈でいくつかの提案が行われた。今回は、その提案の 1 つであり Chrome で実装が進んでいる Display Locking について現状を解説する。
長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。ここでは、特に画像 <img> に注目し、Lazyloading の議論の変遷を踏まえた上で現状を解説する。画像最適化シリーズ第 5 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編> 画像最適化戦略 Lazy Loading 編
2019/4/28 - 5/1 の 4 日間で、mozaic bootcamp 2019 というひたすら Web 技術を叩き込むイベントを開催した。その内容やモチベーションについては、以下で話している。ep48 Monthly Web 201901 | mozaic.fmこのイベントの概要と目的について記録する。
「ユーザが意図する挙動」とは何か。技術的に可能であるが「やらない方が良いこと」は、誰がどう決めるのか。Web には仕様、実装、デプロイ、そしてユーザの利用とフィードバックによって、そうした合意がゆるやかに形成されていく仕組みがあると筆者は考えている。しかし、これは明文化されているわけでもなく、その全体像を把握するのは一般には難しいだろう。今回は、ちょうど何度目かの議論が再発している ping 属性を例に、この合意形成の概観について解説を試みる。
ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。提案されている構文や、挙動について解説する。
脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。WICG/trusted-typesIntent to Experiment: Trusted Types
httpbis のチェアである mnot から、Cache Digest についての現状確認が ML に投稿された。もしこのまま反応がなければ、Cache Digest は終わり、対ブラウザキャッシュの Server Push は現実的ではなくなる。
2019/1/13(日) に、以下で告知した「次世代 Web カンファレンス」を開催した。次世代 Web カンファレンス 2019 開催告知 | blog.jxck.io前日に初雪が観測されて心配したが、天気にも恵まれ、開催趣旨の通り予定していたセッションを全て終えることができた。次世代 Web カンファレンス - connpass各セッションはこれから録画を見るが、登壇者達に聞いた感触としては、概ね熱い議論ができていたようなので、場を設けた価値はあったと思う。録画や togetter はすでに上がっている。
例年通り 2018 年を振り返る
WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。Signed HTTP Exchanges: Signing (コンテンツに署名する)Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる)Loading Signed Exchanges: Loading (そのコンテンツをロードする)本エントリでは、各仕様を Signing/Bundling/Loading と記す。現状、Signing および Loading の仕様策定が進んでおり、Chrome は Experimental な実装を行っている。全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。
macOS Mojave は OS レベルで Dark Mode に対応した。しかし、Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。これを用いた Dark Mode 対応と、本ブログの Dark Mode 対応、および策定中の User Preference Media Features について解説する。
Cookie はブラウザによって保存され、紐づいたドメインへのリクエストに自動で付与される。この挙動によって Web におけるセッション管理が実現されている一方、これを悪用した攻撃方法として、CSRF や Timing Attack などが数多く知られており、個別に対策がなされてきた。現在、提案実装されている SameSite Cookie は、そもそもの Cookie の挙動を変更し、こうした問題を根本的に解決すると期待されている。Cookie の挙動とそれを用いた攻撃、そして Same Site Cookie について解説する。
リファラはリンクなどでページを遷移する際に、遷移元の URL をリクエストの Referer ヘッダに載せる仕様である。この付与はブラウザが自動で行うため、場合によっては非公開として扱っている URL が意図せず漏れることがある。この挙動を制御することができる、Referrer-Policy ヘッダについて解説する。
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
Clear-Site-Data Header の実装が進んでいる。このヘッダについて解説する。
非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。この仕様について解説する。
筆者がやっている Podcast である mozaic.fm の中で、Monthly Web という月ごとの Web の動向をまとめる回をやっている。未だに落ち着いたとはいえないが、2017 年 7 月に初めてから 1 年続けたので、結果として現状どうなっているかをログに残す。
Web Authentication(WebAuthN) API の策定と実装が進んでいる。これを用いると、FIDO(Fast IDentity Online) U2F(Universal Second Factor) 認証が可能になる。今回は YubiKey 認証の実装を通じて、ブラウザ API の呼び出しと、サーバ側で必要な処理について解説する。https://w3c.github.io/webauthn/
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
tmux, screen, terminal のタブなど、shell を複数起動する方法はいくつかある。Linux では、pts を経由すれば、ある shell の出力を簡単に別の shell で表示することができる。これを応用すると、簡易ダッシュボードを作り色々便利に使うことができる。
本サイトは HPKP (public-key-pins-report-only) に対応していた。しかし、HPKP はその運用性の問題などもあり、Chrome はすでに deprecate するアナウンスを出している。代替の仕様として、Certificate Transparency (CT) のエコシステムと、それを利用する Expect-CT の策定/実装が進んでいる。CT エコシステムの概要、Log の登録/検証、HPKP から Expect-CT への移行などについて解説する。
ブラウザの機能を制限する Feature Policy の実装が進みつつある。Feature Policy は、ブラウザが持つ機能について選択的に許可/制限を行う API だ。AMP のように特定の機能を制限する目的にも使えるが、クロスオリジン iframe に対する権限移譲のための API としても使用される。Feature Policy のモチベーションおよび適用方法について、類似する CSP や iframe sandbox と合わせて解説する。なお、今回解説する内容は、まだブラウザの実装に反映されていない部分があるため、注意されたい。
Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。本サイトは WOFF 形式での Web Font を提供しているが、WOFF2 形式では WOFF よりも 12% 程度圧縮率が高いため、本サイトでも WOFF2 に移行することとした。フォーマット変更による効果について解説する。
少し前に 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 の使われ方を解説する。
Apple が Alliance for Open Media に加盟したという報道があった。もし、このまま Safari が AV1 をサポートするまで至れば、WebRTC のコーデック戦争に一旦の落ち着きが出ると思われる。Apple joins alliance to shrink your online videos - CNETこの動向について解説する。
Record を Map に変換するだけのマクロ
<form> の onsubmit をフックして、入力された値を <input> から集めて送るといった処理はよくある。このとき、submit されたデータの収拾方法はいくつかある。submit に限らず、そのイベントに付随する情報は、基本的にイベントオブジェクトに内包されている。Form を例に、イベントオブジェクトを意識したコーディングについて解説する。
「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。そんな時代にこそ、今更だれも解説しないであろう、bookmarklet という技術についてもう一度書いておく。
新年早々、Blink Dev で Unified Plan の Intent to Implement という嬉しい知らせが届いた。Intent to Implement: WebRTC Unified Plan SDPSDP の互換性についてインパクトの大きいこの変更について簡単に解説する。
例年通り、今年を振り返る。
ResizeObserver の ship が進みつつある。この仕様の解説および、ElementQuery / ContainerQuery について解説する。Resize Observer 1
WHATWG が IPR Policy と Governance Structure についての更新を発表した。おおまかな流れと、これによって引き起されそうな変化について解説する。
Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。フォントファイルサイズが大きい場合は、FOIT/FOUT の問題が顕著になり、JS を用いた回避策が利用されることも多かった。これを解決するため、CSS に font-display プロパティが作成され、実装が進んでいる。各プロパティの違いと挙動、そして本サイトへの適用について解説する。
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
タイポグラフィに関連したデザイン手法の 1 つに Vertical Rhythm がある。そして、現在 CSS でそれを簡単に実現するための CSS Rhythmic Sizing という仕様が提案されている。Chrome にフラグ付きで実装されたこの仕様を用いて、本サイトへの適用を行ったので、解説する。CSS Rhythmic Sizing
特別なドメインとして予約され、特定の用途で使用可能なドメインとして、.example .localhost .test などがある。localhost の Draft や、gTLD である .dev が Chrome で Preload HSTS になったなどの動きを踏まえ、これらの意味や用途を解説する。
テストや仮実装で、適当なランダム文字列が欲しい場合に便利なスニペット。
以前、本ブログでも紹介した Foreign Fetch が、仕様から削除される方向で進んでいる。Foreign Fetch による Micro Service Workers | blog.jxck.ioこれは、Safari などが進めている Cookie の double keying が影響しているらしいので、現状についてまとめる。
High Sierra に乗る Safari 11 で Brotli 対応がされるということで、メジャーブラウザの Brotli 対応が概ね揃うことになる。そこで、本サイトも Brotli による静的コンテンツ配信に対応した。
長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、.mjs という拡張子が採択された。この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。
Promise.prototype.finally の仕様が TC39 stage 3 となり、Safari TP37 で先行実装が入った。tc39/proposal-promise-finally
Service Worker で Fetch を Proxy する場合、Fetch 発生時に SW が起動していなければ、その起動を待つ必要が出る。そして、この SW の起動には無視できない時間がかかる場合があった。これを改善する Navigation Preload について解説する。
XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。最近、やっと話が前進したので、ここまでの経過を解説する。
US では #NetNeutrality について話題になっている一方、日本ではさほど話題になってないように思う。インターネットを基盤としている Web 開発者にとっても、いつまで他人事でいられるか怪しい。事態そのものがあまり知られてないかもと思い、決して精通しているわけではないが紹介する。
念願 だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。これにより、いわゆる EventEmitter のブラウザ移植が不要になることが期待される。Allow constructing and subclassing EventTarget
ブラウザにおける新機能の利用においては、非対応ブラウザの考慮も必要となる。ES Modules の利用においても、いかに非対応ブラウザでフォールバックの手段を提供するかが課題となっていた。今回は、Modules の対応/非対応を切り分けるための仕様である nomodule 属性を解説する。
PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget API の策定が進んでいる。基本概念と現時点での API 外観について解説する。
Safari 11 のアップデートに、待望だった WebRTC がリストされた。
Google の Product Manager である Huib Kleinhout が、discuss-webrtc の ML に以下のような投稿をした。Completing WebRTC 1.0WebRTC 1.0 を年内に終わらせるためのロードマップ(Chrome の改善を含む)を提示している。このロードマップに期待を寄せ、簡単に現状を振り返りつつ紹介する。
Erlang/OTP 19 から、gen_fsm の後継として gen_statem が導入された。OTP の内部でも ssl などはすでに gen_statem に移行している。このビヘイビアの概要について記す。gen_statem APIgen_statem Behaviorすでにかなり安定はしているが、軽微といえども非互換な変更が OTP 20 以降に発生する可能性があることがドキュメントに言及されている。本記事は 19 時点での API ドキュメントをベースにしている。
Web Share API が Origin Trials を卒業したという知らせが届いた。コンテンツを他のサービスなどと連携するこの API について紹介する。
textarea などに入力された文字数を、JS で数えたい場合がある。ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。なお、文字コードの仕組みを詳解すること自体が目的では無いため、BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。
今月の Web メモ
W3C の TAG から、主にブラウザ API の Polyfill に関するドキュメントが公開された。Polyfills and the evolution of the WebPolyfill は便利な一方で、時として標準化の妨げになってしまう場合があるため、それを避けるために、Polyfill 実装者、利用者、仕様策定者などが、どう振る舞うべきかという趣旨である。今回はこの内容を元に、Web の進化と協調する Polyfill のあり方について、主に「実装者」がどうすべきかに着目し記す。
このブログで CSP レポートの収集を開始してもうすぐ 1 年になる。現状、対象ドメイン内で <input> は一切提供しておらず、大半が静的に生成されたページであるが、この条件でも、かなり多くのレポートが集まった。今回は、収集した実際のレポートを例に、攻撃ではないと思われるレポートとしてどういったものが送られて来たかを中心に、その内容やレポーティングサーバ、CSP の運用に関する現時点の考察についてまとめる。
月一メモ
HTTPS 移行の問題点の一つに、mixed contents への対応がある。逆に mixed contents の発生を恐れ、HTTPS に移行できないサービスもあるだろう。本エントリでは mixed contents の正しい理解と、その検出や解消に利用できる可能性のある、CSP の Upgrade-Insecure-Request および、Block-All-Mixed-Contents を解説する。
例年通り、今年を振り返る。
これは、http2 Advent Calendar 2016 の 16 日目の記事である。HTTP に新しいステータスコード 103 Early Hints が追加されようとしている。HTTP/1.1 および HTTP2 双方と関わり、リソース配信の最適化に利用することができる。いったい何のために必要なのか、どういうメリットが考えられるかを解説する。
Service Worker に Foreign Fetch という機能が提案されている。この機能があるとクロスオリジンへの fetch をフックできる Service Worker を、その対象オリジンから提供できるようになる。一体どういう仕組みなのか、これによって何が可能になるのかについて、デモを交えて記す。
Service Worker を登録する方法は現状 3 つある。HTML meta タグでの追加ならば、Service Worker を追加するためだけの JS であれば不要になる。HTTP ヘッダでの追加ならば、HTML を持たない API にも Service Worker を追加した対応が可能である。次の記事で foreign fetch について解説する予定であるため、その前提知識として本機能を分離し紹介する。
Node v7.0.0 が公開され、今回のリリースで WHATWG URL の実装が Experimental として入った。既に標準で含まれていた url module との違いや、URL API などについて解説する。
ブラウザに追加される新しい機能に対して、Vendor Prefix の代替となる Origin Trials の導入が徐々に始まっている。今回は、これまでの Vendor Prefix の問題点と、代替として提案された Origin Trials のデザインや導入方法などについて記す。
Google の中の人からお声がけ頂き、Google Developer Experts (GDE) に Web Technologies の Expert として Join することになりました。
「Socket.IO 使ったほうがいいですか?」 という主旨の質問をもらった。これは、WebSocket が繋がらない環境に向けて、フォールバック機能を有する Socket.IO にしておいた方が良いのかという意味である。WebSocket が出てきた当初と比べて、Web を取り巻く状況は変わったが、変わってないところもある。念のためと Socket.IO を使うのもよいが、「本当に必要なのか」を問うのは重要である。Rails も ActionCable で WebSocket に対応し、ユーザも増えるかもしれないことも踏まえ、ここで、もう一度現状について、把握している範囲で解説しておく。
UNIX コマンドを SQL で抽出できるツール qq を作った。 というエントリを読んで、そういえば似たようなものを作ってたなと思い出した。自分の dotfiles の中にある、便利コマンド集の中にある selects についてである。このコマンドは SQL という検索を記述的に表現する共通言語をファイル検索に応用し、Ruby の動的言語として表現力を使って実装したものといえる。その実装方法と実行例などについて記す。
WHATWG が定義する Fetch API は、出たばかりの仕様では、途中でのキャンセルや、プログレスイベントの取得が含まれていなかった。しかし、後の更新で fetch 結果の Response Body が WHATWG Stream API を実装することになったため、現在の仕様ではプログレスを取ることもキャンセルをすることも可能となっている。今回は、こうした API のアップデートについて記す。
ブラウザはリロード時に、max-age に満たないキャッシュを持っていても Conditional GET によってキャッシュの Validate (有効性の問い合わせ)を行う。Cache-Control Extension として提案されている Immutable 拡張は、キャッシュが max-age 内であればリロード時もキャッシュヒットさせる拡張である。このヘッダの効果と、本サイトへの適用について記す。
スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。この API の使い方と、本サイトへの適用について記す。
mozaic.fm をリニューアルし、v2 としてリリースした。今回の更新のモチベーションは大きく分けて 2 つある。tumblr を捨てたかったfeedburner を捨てたかったこれによる breaking change 含む変更の内容と、実装のメモを記す。
本サイト以下全ての target=_blank 付きのリンクに rel="noopener noreferrer" の付与を実施した。このプロパティの意味と、これが無い場合のフィッシング詐欺攻撃の可能性について解説する。
DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。今回は、この仕様が解決する問題と、本サイトへの適用を解説する。Passive Event Listeners Spec
Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。しかし、Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います。そこで特に難しい部分、そして分かっていないと実際にデプロイした際に難しいと思う部分について、実際に動きを確認しながら解説したいと思います。なお、Service Worker の基本的な概念などについては、他のチュートリアルなどを見て理解している前提で進めます。思いつきで撮ったので色々ミスも有ります、また Chrome Dev Tools の UI はどうせ変わるのでそのつもりで見てください。TODO になっている動画は、そのうち撮って追加します。
システムにおいてキャッシュの設計は永遠の課題であり、Web のパフォーマンスにおいても非常に重要である。Web では、HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。このヘッダの概要と、本サイトへの適用を解説する。
本サイトにて HTTP Strict Transport Security (HSTS) を有効化した。includeSubdomains を用いた *.jxck.io 全体への適用および、ブラウザへの Preload 登録も検討したが、本サイトの特性上それは見送った。導入に必要な設定や、注意点についてまとめる。
本サイトにて Public Key Pinning for HTTP を有効化した。CSP 同様、まずは Report-Only を設定し、HPKP Report についても、report-uri.io を用いて収集することにした。導入に必要な設定や、注意点についてまとめる。なお、本サイトへの導入はあくまで 実験 である。運用や影響も踏まえると、一般サービスへの安易な導入は推奨しない。また、本来は HSTS と併用することが推奨されている。(必須ではない)そちらも追って対応する予定である。
本サイトにて Content Security Policy を有効化した。まずは Report Only にて導入し、段階的にポリシーとコンテンツを修正していく方針をとる。CSP Report については、report-uri.io を用いて収集することにした。導入に必要な設定や、注意点についてまとめる。
本サイトで使用している UI アイコン系の画像を、ギリギリまで最適化した手書き SVG に置き換えた(ただしソースは 観賞用 なので、インデントは残す)。また、装飾に画像ではなく CSS の content を利用することで、ローカルフォントデータを利用し、画像転送を減らす工夫にも言及する。画像最適化シリーズ第 4 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編> 画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編
本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最適化シリーズ第 3 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編> 画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編
本サイトで使用している PNG/JPEG 画像を、対応デバイスと、Device Pixel Ratio に対して最適なサイズで出し分けるために、<picture> 要素を適用した。画像最適化シリーズ第 2 回目のエントリである。画像最適化戦略 PNG/JPEG 編> 画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編
本サイトで使用している PNG/JPEG 画像に対し、メタデータ削除、減色、リサイズなど基本的な最適化処理の適用戦略と、その方法および結果について。画像最適化シリーズ第 1 回目のエントリである。> 画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編
このサイトのフォントに Web Font を適用することにした。フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。
Preload を指定する <link rel=preload> の仕様が公開されており、現在 Chrome Canary に実装されている。この仕様のモチベーションについて、Chrome 開発者の Yoav Weiss 氏のブログも公開された。今回は、この仕様の特徴と用途を解説し、本サイトへの適用について検討する。W3C Preload SpecIntent to Ship: <link rel=preload>Preload: What Is It Good For?
本サイトのメタ情報を整理するため、HTML のメタタグの整理、JSON-LD による schema.org 対応、Facebook, Twitter を主とした Open Graph 対応を実施した。これにより、既に AMP 対応していた本サイトが、Google のモバイル検索でキャッシュの対象となる(クロール待ち)。
HTTP では Accept-Encoding と Content-Encoding でのネゴシエーションにより、gz などで圧縮したコンテンツを転送することができる。本サイトでは zopfli を用いて gzip 形式の配信に対応した。
Chrome が予定している <link rel=stylesheet> の挙動の変更について、Google Chrome チームの Jake が、興味深いブログを上げている。The future of loading CSSこの内容は、単に Chrome に対する変更だけではなく、HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。今回は、この内容を意訳+補足解説し、本サイトに適用していく。
Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。https://w3c.github.io/resource-hints/主に以下がある。dns-prefetchpreconnectprefetchprerender今回は本サイトでこれを適用した話。
このブログの Atom feed を吐くようにした。右上の feed アイコン から登録できる。
土台がだいたいできたので、このサイトを h2o にデプロイした話。
Google が推奨する仕様である AMP HTML に、このブログを対応した。言いたいことは色々あるが、とりあえず非常に難しかったため、その対応方法や感想などを残す。
本サイト blog.jxck.io 以下については、Markdown から静的ファイルを生成するスタイルで作成している。この変換時に以前から思っていた HTML の最適化 を実施することにした。しかし、md->html 変換時にそれをできるツールが見当たらないため、Markdown の AST から HTML を構築する過程で、省略を施すスクリプトを自作した。ただし、ソースはあくまで観賞用なので、インデントやコメントは残している。チューニングではなく単なる実験としてサイト全体にこれを適用し、その結果を記す。
長いこと はてな blog をメインにし、他にも Qiita や Tumblr を使って色々書いて来たが、そろそろ自分のドメインに全部集約していこうかと思う。