自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。 自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。バックエンドや CLI ツールの開発では、生成したコードはターミナル上で実行されログが表示されるため、AI エージェントはコードの実行結果を容易に取得できます。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行され
Browser and UI #3の登壇資料です。 スライド内のリンクは、 …
サーバーからクライアントへ Promise をそのまま渡せる時代へ！ こんにちは、React の世界は日々進化していますね。最近のアップデートで、Server Component から Client Component へ Promise を返して、さらにデータストリーミングができるようになったんです！ この新機能のおかげで、サーバーで作成した Promise をそのままクライアントに渡し、Suspense と連携させることで、シームレスに非同期データを扱えるようになりました！ どういうこと？ 簡単に言うと、サーバー側で Promise を生成し、そのままクライアント側で use API を使って解決できます。今までなら、サーバーサイドで await してからデータを props として渡す必要がありましたが、これでレンダリングのブロッキングを回避できる可能性が広がります。 こんなコードで
サーバーからクライアントへ Promise をそのまま渡せる時代へ！ こんにちは、React の世界は日々進化していますね。最近のアップデートで、Server Component から Client Component へ Promise を返して、さらにデータストリーミングができるようになったんです！ この新機能のおかげで、サーバーで作成した Promise をそのままクライアントに渡し、Suspense と連携させることで、シームレスに非同期データを扱えるようになりました！ どういうこと？ 簡単に言うと、サーバー側で Promise を生成し、そのままクライアント側で use API を使って解決できます。今までなら、サーバーサイドで await してからデータを props として渡す必要がありましたが、これでレンダリングのブロッキングを回避できる可能性が広がります。 こんなコードで
静的サイトジェネレータのAstro、「Server Islands」を実験的実装。サーバで動的生成したコンポーネントをWebページ表示後に組み込み オープンソースで開発されている静的サイトジェネレータ「Astro」は、新機能の「Server Islands」を実験的実装した新バージョン「Astro 4.12」をリリースしました。 Full details on the blog:https://t.co/jd8GfFwbjB — Astro (@astrodotbuild) July 18, 2024 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWe
この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。 shadcn/uiとはそもそも何なのか? ui.shadcn.com shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。 2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネン
What's in a price? How to price your products and services
ポリシー: この世界では常に最新版を使うという気持ちで生きていく Node.js は枯れるという概念がなく、常に古いことはリスク という認識。LTS も短め(3年) 古いAPIのドキュメントは常に消失する モダンなツールは、モダンな前提を要求する ~2020: CJS/ESM 関連で断絶がある(jestが動かなくなりつつある) ~2019: パフォーマンス意識が低い時代の実装が多い ~2015: Node.js のみでしか動かないものが多い。peerDeps の意識が低い この辺で目視でポチポチする npm: npm-check-updates - npm yarn upgrade-iteractive pnpm upgrade -i サーバーランタイムには安定を、ツールチェインにはパフォーマンスを サーバーランタイム(Node.js) Node 本体は Stable LTS か、一つ前の
ソーシャル経済メディア「NewsPicks」エンジニアの韓です。 先日、弊社ユーザベースオフィスでフロントエンド・オブザーバビリティ Meetupを開催しました。 本記事ではそのイベントレポートをお届けいたします！ イベントについて 🎤 セッション フロントエンドエンジニアとして、オブザーバビリティにコミットすること（イイダユカコさん） ClassiにおけるSentry活用事例（lacolacoさん） observabilityを支える要素技術（sadnessOjisanさん） こつこつ育てる SLO（ニッシー☆） アーカイブ動画 おわりに イベントについて UzabaseではUB Techという技術イベントを定期的に開催しています。 社内での技術的取り組みを発信する機会を作ることと社外の方々にUzabaseのエンジニア組織について知っていただく機会を作ることを目的に毎回様々な技術テーマ
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
sumirenです。 背景 フロントエンド界隈はベンダやコミュニティ主導で新しいアーキテクチャや技術的手法がどんどん出ていて素晴らしいです。 一方、そうして量産されてきた用語が、界隈の変化に置いていかれている側面もあるように思います。例えば、SSRという用語を取り上げると、コンポーネントからHTMLへの変換を指すこともあれば、サーバー側でデータを取得することを指すこともあります。 実際、業界のパイオニアであるVercel/Next.jsも、そうした現状に対する懸念を持っているように思われます。実際、Next.js App Routerでは、以下のような変化が見られます。 getXXXPropsが廃止され、fetchに対する引数で表現されるようになった SSRやISRという「レンダリング」という言葉を、フェッチの文脈で使わなくなっている しかし、そっとドキュメントを書き換えた程度では、人々に
at #ワインと鍋js なぜフロントエンドに Edge Worker が必要なのか、Cloudflare Workers をどう使っていくかみたいな話をしました
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
