GyaanSetu WebDev

Frontend, backend and devops for the modern web.

230 articlesDeep, practical knowledge

Open InterpreterがLLMによるローカルでのコード実行を実現:クラウドコスト削減とプライバシー向上へ

Open Interpreterは、大規模言語モデル(LLM)がユーザーのローカルマシン上でシェルコマンドを実行したりスクリプトを走らせたりできるようにすることで、機密ファイルを外部に出すことなく、高価なクラウドAPIへの依存を解消します。その一方で、開発者にはサンドボックスの構築やユーザーの同意フローの実装といった新たな課題も突きつけています。

WebDev · 2 分で読めます

レプリカに送信された際に「Read-Only Transaction」エラーでPostgreSQLのマイグレーションが失敗する問題

このエラーは通常、書き込み処理がリードレプリカに対して行われることで発生します。主な原因としては、PgBouncerによる接続のルーティング、ロールのデフォルト設定が読み取り専用であること、あるいはクラウド環境でリーダーエンドポイントを使用していることなどが挙げられます。本記事では、現在のトランザクションに対してフラグを上書きする方法と、この問題を回避するための対策について解説します。

WebDev · 3 分で読めます

型安全なAPIモックのツリーシェイキングにより、フロントエンドチームがバンドルサイズへの影響をゼロに

チームはAxiosインターセプターとViteのツリーシェイキングを利用して、開発環境専用のモックレイヤーを構築しました。import.meta.env.DEV、カスタムのVITE_ENABLE_MSWフラグ、およびMODE変数によってインターセプターを制御することで、モックコード全体がプロダクション用のバンドルから削除され、バンドルサイズを維持したまま運用することが可能になります。

WebDev · 3 分で読めます

無料のグローバルインデックス:3,804の港と9,640の空港をリスト化 – 会員登録不要

このサイトは、NGA World Port Index、UN/LOCODE、OurAirportsからデータを取得して不整合を修正し、水深と船舶、滑走路と航空機のマッピングを追加しています。これらはすべてNext.jsの静的ビルドを通じて提供されており、継続的なコンピューティングコストはゼロです。

WebDev · 4 分で読めます

TypeScript、ジェネリクスにおけるリテラルの型拡張を防ぐ「const型パラメータ」を導入

型パラメータに新しいconst修飾子を付与することで、コンパイラが可能な限り狭い型を推論できるようになります。これにより、「GET」のようなリテラルが関数境界を越えてもリテラルのまま保持されるため、繰り返し `as const` を使ってキャストする必要がなくなります。

WebDev · 3 分で読めます

ガーナの開発者が、プログラミング未経験ながらAIローコードを活用して「PowerPulse」をリリース

PowerPulseは、ガーナの誰もが停電を報告し、ライブフィードを閲覧し、貢献に応じてポイントを獲得できるアプリです。Next.js、Tailwind、Supabaseで構築され、Vercelでホストされており、今後はAIによる予測機能やプッシュ通知を追加することで、コールドスタート問題の克服を目指しています。

WebDev · 3 分で読めます

Fable 5はOpus 4.8の2倍の価格に、開発者はプロンプトスタックの再考を迫られる

Claude Fable 5は、100万トークンのコンテキストウィンドウと12.8万トークンの出力制限を備えてリリースされますが、入力トークン100万件あたり10ドル、出力トークン100万件あたり50ドルという価格設定はOpus 4.8の2倍であり、エラーが許されないユースケース向けの特化型モデルとなっています。

WebDev · 1 分で読めます

pnpm v12、Rustによる書き換えでウォームインストール時間を381msから12msへ短縮

「pacquet」と名付けられたこの書き換えでは、Node.jsのブートストラップがシングルスレッドのRustバイナリに置き換えられますが、すべてのフラグとロックファイル形式は変更されません。開発者は本日より `pnpm self-update next-12` を実行することで先行利用が可能で、自身のCIパイプラインへの影響をベンチマークできます。

WebDev · 2 分で読めます

CIでのVPAT生成を自動化し、アクセシビリティに問題のあるPRをブロック

axe-coreスキャン、カスタムVitestキーボードヘルパー、およびJSON形式で保存されたスクリーンリーダーの結果をビルドに組み込むことで、アクセシビリティの退行(リグレッション)を引き起こすプルリクエストをパイプラインで失敗させ、リリースが成功するたびにPDF形式のVPATを自動的に出力します。

WebDev · 3 分で読めます

GPU時間を無駄にしない:プロンプティング、RAG、ファインチューニングの使い分け

このガイドでは、プロンプティング、検索拡張生成(RAG)、ファインチューニングという3つの手法を詳しく解説。知識のギャップと振る舞いのギャップを見分ける方法を示し、計算リソースを大量に消費する前に最適なツールを選択するための3ステップのチェックリストを提供します。

WebDev · 4 分で読めます

Auto-AnimateがMarko 6用アダプターをリリース、タグ一つでリストのアニメーションを実現

この新しいアダプターはMarkoのonMountライフサイクルにフックしてMutationObserverを作成し、auto-animateのエンジンを駆動します。これにより、開発者はリストを<auto-animate>で囲むだけで、追加のJavaScriptを記述することなく、スムーズな要素の追加・削除・並べ替えのアニメーションを実現できます。

WebDev · 3 分で読めます

ES2023で非破壊的な配列メソッドが追加、Reactによる状態変化の即時検知が可能に

新しい4つのメソッド(`toSorted`、`toReversed`、`toSpliced`、`with`)は新しい配列を返すため、Reactの浅い比較(shallow-compare)が新しい参照を検知できます。これにより、以前は更新を妨げていた煩雑なスプレッド演算子によるハックを使わずに、スムーズな再レンダリングが可能になります。

WebDev · 4 分で読めます

Claude Fable 5がコード生成でGPT-5.6を圧倒、SWE-Bench Proで80%を記録

GPT-5.6はトークン価格の安さやマルチステップのエージェントタスクにおいて優位性を見せる一方、Anthropicのモデルは実世界のコーディングベンチマークにおいて明確な強みを発揮しています。開発者は、本格的な導入を決定する前に、キャッシュ割引やワークロードのパターンを考慮した上で、両方のモデルを試用することを推奨します。

WebDev · 3 分で読めます

TypeScript 7へアップグレード?最大10倍高速なチェックが期待できる一方、CIの失敗に注意

新しいGoベースのtsgoエンジンによりビルドは最大10倍高速化されますが、開発中のプログラマティックAPIが既存の人気ツールに影響を与えています。7.1のAPIフリーズが実施されるまでは、ビルドにはTS 6.xを継続して使用し、素早いチェックには @typescript/native-preview を活用することをお勧めします。

WebDev · 3 分で読めます