How we rebuilt Next.js with AI in one week
*This post was updated at 12:35 pm PT to fix a typo in the build time benchmarks. Last week, one engineer and an AI model rebuilt the most popular front-end framework from scratch. The result, vinext (pronounced "vee-next"), is a drop-in replacement for Next.js, built on Vite, that deploys to Cloudflare Workers with a single command. In early benchmarks, it builds production apps up to 4x faster a
開発フローの変更しやすい・しにくい部分を理解してから改善を実施すると良い - $shibayu36->blog;
開発フローを改善したいとき、目的や目指したい姿を明確にするのは大前提だが、さらに開発フロー全体の変更しやすい・変更しにくいところを理解してから設計と改善を実施した方がいいと考えている。 開発フローには、事業の特性上もしくは組織の歴史的経緯でその組織特有の変更しにくい部分が存在している。状況によって様々だが、例えば、リリースの曜日、レビューやリリース承認プロセス、ミーティングの頻度などがあり得るだろう。 そして改善を実施するときのよくある失敗は、いきなり理想のフローを設計し、変更しにくい部分も含めてたくさん変えてしまうことだ。変更しにくい部分を同時に一気に変えようとすると、その変更の関係者が増え、反発が起きやすくなる。反発が起きると、良い方向に向かうはずの変更まで含めて「全部失敗だった」となってしまい、何も変えられずに失敗するケースが多い。 そこで次の2つを意識すると良い。 まず、変更しにく
あなたの拾ってきた野良（マーケット）Skills、セキュリティトラブルを発生させていませんか？
「〇〇さんが紹介していたSkill、便利そうだから使ってみよう」 そんな軽い気持ちで野良Skillsを導入していませんか？〇〇さんが導入したときは、問題なかったかもしれませんが、あなたが導入しようとしたときも安全とは限りませんよ？ はじめに Claude CodeやCodexをはじめ、Skills（エージェント拡張）を共有・配布するマーケットが急速に注目されています。便利なワークフローをすぐに取り込める一方で、Skillsは「設定ファイル」ではなく「実行可能な拡張」である点を忘れてはいけません。 結論から言えば、中身を自分で理解・評価できないのであれば、AnthropicまたはOpenAIの公式マーケット以外は推奨できません。 Anthropic（Claude Skills）：https://github.com/anthropics/skills OpenAI（Codex Skills）
npm ciのキャッシュ方式の検討
結論から言うと、node_modulesをキャッシュしてnpm ciの実行を省略するのが、多くの場合には有効そうです。 はじめに CIで npm ci を使うとき、実行時間短縮のためにキャッシュの利用を検討することになると思います。このとき、どのようにキャッシュするのが良いのでしょうか？ よく知られているキャッシュ方式として、以下の二通りの方式があります。 ~/.npmをキャッシュする方式 node_modulesをキャッシュする方式 それぞれの違いについて、詳しく見てみましょう。 ~/.npmをキャッシュする方式 npm ci を実行すると、POSIX系のOSではデフォルトで ~/.npm にキャッシュデータが書き込まれます。package-lock.json をキーにこのディレクトリをキャッシュしておくことで、次回以降の npm ci 実行時にこのキャッシュデータを利用しよう、というの
Cursorの価格設定変更の騒動について
Cursorの説明によると、以前は月500リクエストまでの制限で、リクエストごとのトークン使用量は考慮されていませんでした。新しい料金モデルは1回のリクエストで消費するトークン数が大幅に異なるため、単純なリクエスト数制限ではコストを正確に反映できなくなりました。そのため、CursorはAPIベースのトークン使用量課金に移行し、Proプランには月20ドル分のトークンクレジットを含み、それを超えた分は追加課金となる形にしました。 まずいことにCursorはこの変更をポジティブに伝えるためか当初「Proプランでリクエスト数が無制限に使える」とPRしていました。これは「（トークン制限の範囲で）Autoが無制限に使える」を指すものですがのちに訂正されたようです。 Hummmmmmmmmmm@cursor_ai went from "Unlimited" -> "Extended" What does
React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
gemini-cli の google_web_search が最高
$ gemini -p "Webで「Gemini APIの料金」について調べて" Gemini APIの料金は、主に従量課金制で、使用するモデルや機能、利用量によって変わります。無料利用枠と有料プランが提供されています。 ### 料金体系の概要 課金は、以下の要素に基づいています。 * **入力トークン数**: APIに送信するテキストやデータの量。 * **出力トークン数**: APIが生成・応答するテキストやデータの量。 * **キャッシュされたトークン数**: 会話の履歴を記憶させる機能を利用した場合のトークン数。 (略) brave search や perplexity がなくともこれで、馴染み深い Google の結果が返ってくるので、非常に使いやすいです。 自分は今からとりあえずこれを claude-code に繋いでみます。 => した。 .claude/commands/
実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコンポーネントを構築するために重要な技術ですが、従来は JavaScript を使用しなければ Shadow D
今年のLinuxデスクトップ元年はひと味違う。それは、Omakubがあるからだ。 - laiso
omakub.org DHHとApple もともと20年来のMacユーザーでTextMate原人であったDHHだが、HEYアプリが何度もAppStoreでリジェクトされた出来事を通じてか、次第にApple反転アンチ化してきた。 元々オルタネイティブな嗜好を持つDHHだったが、脱クラウド運動などの、近年の彼らのビックテックとの闘争にもつながっている。 年初あたりから自社の支給端末であったMacBookのリプレイスを検討し始め、Windows+WSL2やVSCode*1 、そしてLinuxデスクトップの利用を模索し始めていた。 最終的にUbuntuデスクトップを「安住の地」とし、そのセットアップの知見をすべてOmakubに込めたのだ。 エディタをNeovimに*2、スマホもSamsungに乗り換え*3、そしてFrameworkのラップトップを購入。 「ラップトップ買ってきましたUbuntu環境
私的Chromeカスタム検索エンジン利用頻度ランキング - laiso
Google Chromeのカスタム検索エンジン機能は非常に便利です。 support.google.com 設定したキーワードをアドレスバーに入力するだけで、指定したサイト内で直接検索ができるようになります。 例えば、「yt」をYouTubeの検索キーワードとして設定すれば、アドレスバーに「yt キーワード」と入力するだけでYouTube上で検索が完了します。 いちいちサイトにアクセスして検索フォームに入力する手間が省け、キーボード操作のみで素早く目的の情報に辿り着けます。 私はこの機能を頻繁に利用しており、使えない環境ではストレスを感じるほどです。 集計について そこで、この機能の活用を布教したり、まだ知らないカスタム検索エンジン設定について他の人から教えてもらったりするために、普段使用しているChromeの設定を集計してみました。そこからトップ20のカスタム検索エンジンを抜粋し、その
ふりかえり手法「象、死んだ魚、嘔吐」でチームの闇と向き合おう - Qiita
ふりかえり手法にはKPT、Fun Done Learnなど様々な手法が知られています。 今回はその中でもチームの課題と向き合う手法「象、死んだ魚、嘔吐」について説明します。 また自分達が実際に実践するにあたって行った工夫を紹介します。 ふりかえり手法「象、死んだ魚、嘔吐」とは？ 2024.1.17追記 「象死んだ魚嘔吐のうた」を制作し、Reginal Scrum Gathering Tokyo 2024にて発表しました。 ↑使用したオリジナルの背景画像です。お好きなツールの背景としてどうぞ。 「象、死んだ魚、嘔吐」とは、Airbnbの共同創業者ジョー・ゲビアが提唱した手法です。 カリスマ性があり完璧主義のジョー・ゲビアが率いるチームでは、雰囲気が重苦しく、メンバーはゲビアを恐れ、自分の考えていることを発言できなくなっており、チームは崩壊寸前でした。 そのような状態で考案されたふりかえり手法
Dialog と Popover #7 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ | gihyo.jp
乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載していきます。モダンな仕様の紹介・普段使っているライブラリのコア部分で何が行われているのかの解説・ハンズオンなど、さまざまな内容でお届けする予定です。 CSSの進化 本連載での最初のコンテンツは「CSS Modern Features」です。 CSSの表現力は年々新しい仕様の策定や実装とともに進化しています。従来であれば複雑なCSS定義が必要であったものが簡潔に表現できたり、Ja
WebAssembly製のx86仮想マシン、Webブラウザ上でLinux GUIデスクトップ環境を実行可能に。「WebVM 2.0」が登場
Leaning Technologiesは、Webブラウザ上でx86バイナリをそのまま実行できるWebAsesmbly製の仮想マシン「WebVM」をバージョンアップした「WebVM 2.0」を公開しました。 従来のWebVM 1.0では、Webブラウザ上の仮想マシンでx86版のLinuxを起動し、コマンドラインからさまざまな操作が可能でした。 参考：WebAssembly製のx86仮想マシン「WebVM」が登場、Webブラウザ上でLinuxや各種コマンド、アプリがそのまま実行可能 今回公開されたWebVM 2.0では、GUIを備えたLinuxデスクトップ環境までWebブラウザ上でサポートされたことが最大の特徴です。 下図で示されるように、仮想マシン上でさまざまなプロセスを実行し、さらにLinuxシステムコール経由でGUIのディスプレイ、ローカルディスク、ネットワーキングをサポートしています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS Code（Cursor）で現在開いているタブを一目で分かるようにする方法 - Qiita
Docker MCP Gatewayがすんばらしい👌 - Qiita
ギャルとのペアプロが想像以上に楽しかった（VSCodeのカスタム指示） - Qiita
HTML 仕様のメールアドレス正規表現に最小限の修正を加える - Qiita
Function calling の延長線上で MCP を考察 - Qiita
