Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 - ICS MEDIA
Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 通常のウェブページでは、リンクをクリックしてから次のページの読み込みが始まります。もしクリックする前にブラウザーが次のページを裏側で準備していたら、クリック直後にページが表示され、待ち時間をほとんど感じません。この「先読み」をブラウザーの機能として実現するのが「Speculation Rulesスペキュレーションルールズ API」です。リンクをたどるたびに感じていた読み込みの間が少なくなり、ページ間の移動がスムーズに感じられるようになります。 たとえばユーザーがリンクにマウスカーソルを乗せたタイミングで、ブラウザーがそのリンク先のページをバックグラウンドで先読みします。リンクをクリックした時点ですでにページの準備が終わっているため、瞬時にページが切り替わります。先読
Storybook MCP を試してみた
Storybook MCP のセットアップ Storybook MCP を使用するには @storybook/addon-mcp アドオンが必要です。以下のコマンドでインストールします。 npm install @storybook/addon-mcp .storybook/main.ts ファイルを開いて、@storybook/addon-mcp をアドオンに追加します。 export default { "stories": [ "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)" ], "addons": [ "@chromatic-com/storybook", "@storybook/addon-vitest", "@storybook/addon-a11y", - "@storybook/addon-
業務アプリのフロントエンド負債と向き合い、Tailwind CSS から Panda CSS への移行を決めた話
はじめに はじめまして。2025 年 10 月より、レバテック開発部にジョインした早川です。 私たちのチームでは、社内業務を効率化するための Web アプリケーションを Next.js（App Router）+ TypeScript で開発しています。フロントエンドのスタイリングには Tailwind CSS を採用しており、プロジェクト開始から 1 年半が経過してコードベースは 200 ファイルを超える規模になっていました。 私が入ったタイミングでは、すでにフロントエンドの技術選定に関わったメンバーは異動しており、デザイナーも不在。スタイルのルールが不明確なまま、画面数とコードが増え続けている状態でした。 初めてプロダクトに触れたとき、「画面ごとに見た目が少しずつ違っていて、統一感がないな」と感じました。業務に支障はないものの、文字サイズやフォントの太さ、余白の取り方が画面ごとにバラつい
2026年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2025年のWebアクセシビリティに関連する出来事を振り返りつつ、2026年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2と関連文書 Webアクセシビリティの国際規格であるISO/IEC 40500について、WCAG 2.0であったISO/IEC 40500:2012から実に13年ぶりに、WCAG 2.2と同等の内容となるISO/IEC 40500:2025に改訂されたというのが昨年のWebアクセシビリティに関する大きなトピックでした。 WCAG 2.2のエラッタ 細かい話になるのですが、ISO/IEC 40500:2025のベースとなったのは、2023年版のWCAG 2.2であり、その後エラッタ（正誤表）の内容を反映して発行された2024年版のWCAG 2.2ではあ
React の状態管理の歴史と、最新 API に込められた React の思想
はじめに React が誕生して10年以上が経ちましたが、「状態管理」の議論は今も終わりません。Redux、Recoil、Zustand、そして useSyncExternalStore。なぜこれほど多様なライブラリが生まれ、React 公式はついに"標準 API"を出したのでしょうか？ 本記事では、「状態管理の歴史」と「React が見ている世界」を整理しながら、最新 API が登場した背景まで深く掘り下げます。また、この内容は JSConf.jp 2025 Pre Event で話した内容の補足や詳細です。 この記事の読み方 記事全体を通して読むことで状態管理の歴史が体系的に理解できますが、すでに知っている部分は読み飛ばしても問題ありません。 あなたの状況 おすすめの読み始め tl;dr 状態管理は UI = f(state) という React の思想を支える根幹 Redux → R
Storybook を MCP サーバ化したらフロントエンド開発が自動化される未来が見えた - PLAY DEVELOPERS BLOG
こんにちは。テックリードの丸山 @maruyamaworks です。最近は Claude Code に全部賭けています。 前回、GitHub Copilot を使って Storybook を作った話を書きました。 developers.play.jp 今回はその応用編として、Storybook を MCP サーバ化して LLM に提供することで、社内 UI コンポーネントを使用したフロントエンドの開発を自動化できるのではないか、ということで実験してみたいと思います。（これをやるために Storybook を作ったといっても過言ではない） 何をやろうとしているのか まずは先駆者から学ぼう MCP サーバを実装する 実際に試してみた 今後の展望 おわりに 何をやろうとしているのか この記事では何をやろうとしているのか、最初に概要を説明します。 やりたいことは、LLM にプロンプトを投げてコード
GoogleのUI生成AIツール「Stitch」を試してみた | DevelopersIO
こんにちは！運用イノベーション部の大野です。 最近ひょんなことから知り合ったカナダ在住エンジニアの方に、「UI作成ならStitchが便利」というお話を伺いました。 ...が恥ずかしながら「Stitch」について全くの無知だったため、軽くですが実際に触って確かめてきました。 今回はその感想を共有させていただきます。 Stitchってなんだ？ Stitchとは、Google Labs提供のUIデザイン生成支援用AIツールです。 2025年5月に行われた「Google I/O 2025」にて発表されました。 自然言語や画像を入力として与えることで、AIによってWebやモバイル画面のUIを生成してくれる機能を持っています。 また、生成したUIをHTMLコードとして表示することや、Figmaに直接エクスポートすることが可能です。 UI生成可能なAIツールは他にも多数存在しますが、以下の点においてSt
【海外記事紹介】HTMLは死んだ — 問題だらけのWeb技術をどう未来につなげるか
8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 8月6日、acko.netが「HTML is Dead, Long Live HTML」と題した記事を公開し、話題を呼んでいる。この記事では、HTMLとDOMの現在の構造的問題点を検証し、現代的なUI開発との乖離、そして将来に向けた再構築の必要性について詳しく紹介されている。 以下に、その内容を紹介する。 DOMとHTMLの現状：終焉と限界 記事は、Web開発の現場において、HTMLやDOMが肥大化し、今や誰も全容を把握できないほど複雑化しているという問題意識から始まる。 たとえば、Chromeにおけるdocumen
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
MCPとデザインシステムに立脚したデザインと実装の融合
Offers.DeepDive どこまで簡略化できてる？サイバーエージェント／Ubieに聞く MCPで変わる爆速UI/UX実装 https://offers-jp.connpass.com/event/365001/
AIエージェントで拓く、デザインレビューの新しいかたち｜みっちー
本記事は、#IVRy_AIブログリレー の9月4日（4日目）の記事です。昨日は、IVRyのAI推進担当の植田 (chama) さんが「なぜAIの活用を推進するのか」という記事を公開しました。ブログリレーの記事一覧は「IVRy AIブログリレー全記事まとめ」をぜひご覧ください。 はじめにこんにちは、IVRy（アイブリー）でプロダクトデザイナーをしているみっちー（@michiminstar）です。 最近、Figma MakeやCanvaなどデザインツールにAI機能が搭載されるのが当たり前になってきましたね。ちょっとした画像の生成や、UIデザインのアイデア出しなど、AIが身近な存在になったと感じているデザイナーの方も多いのではないでしょうか。 私自身も、こうした便利なAIツールに日々助けられています。その一方で、「日々の作業を少し効率化するだけじゃなく、もっとチーム全体の根本的な課題解決にAIを
モダンなフロントエンドにおけるテストについて ［Modern Featured Test］ | gihyo.jp
本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームのnus3です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。 本記事では、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します[1]。 モダンフロントエンドでのテスト ここ数年のWebフロントエンドでは次のように、さまざまな変化がありました。 ReactやVue.jsといった宣言的UIを採用したライブラリの普及 TypeScript中心としたエコシステムの発展 ES Modulesの採用の広がり ViteやSWC、RspackやTurbopackなどの新しいビルドツールの登場 この変化に合わせて、Webフロントエンドを対象にしたテストのツールや手法も増えてきました。
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 の可能性を探るべく、ターミナルで動くゲームを実装して
「iOS 26」正式発表 12年ぶりにデザイン刷新、“液体ガラス”のようなUIに
同社のAI「Apple Intelligence」を拡充。電話、メッセージ、FaceTimeに「ライブ翻訳」を実装、テキストと音声をリアルタイムで翻訳。メッセージを直接相手の言語に変換して送信することも可能だ。生成AIを使った絵文字「Genmoji」を合体させて新しい絵文字を作る「Mix emoji」も利用できる。 カメラや画像などを処理できるVisual Intelligence機能も強化。あらゆるアプリの画面上の内容を検索・操作できる他、店舗や運送業者からのメールから注文追跡情報を自動特定・要約する機能なども追加する。 電話アプリは統一レイアウトを採用。ライブ留守番電話がアップデートし、通話スクリーニング機能を搭載する。担当者が電話に出るとユーザーに通知する保留アシストも搭載する。メッセージアプリでは、不明な送信者からのメッセージを専用フォルダに表示してスクリーニングできる機能を追加す
🚀 Figma MCP × Cursorで加速するUI実装とその先の工夫
はじめに 近年、プロダクト開発の現場では「Design to Code」という概念が大きな注目を集めています。 これは、デザインツールで作成されたUIデザインを直接コードに変換する技術のことで、開発効率の大幅な向上が期待されています。 この流れの中で、Figma社は、Dev Mode（開発者向けの表示モード）やCode Connect（コードとデザインの同期機能）といった機能をリリースしてきました。 このような背景の中、つい最近では「Figma MCP」が話題となりました。 私たちのチームでは、このFigma MCPとAI搭載コードエディタ「Cursor」を組み合わせることで、実際のプロダクト開発に挑戦してみました！ 本記事では、その導入過程で得られた知見、そして実際の運用における工夫について紹介します。 🤖 Figma MCPとは Figma MCPについては、こちらの記事が非常にわか
社内デザインシステムをMCPサーバー化したらUI実装が爆速になった
はじめに こんにちは、普段 Ubie で症状検索エンジンユビー(https://ubie.app/)の開発をしている江崎です。 最近、Cursor エディタや GitHub Copilot などのコーディングアシスタントツールが進化し続けていますが、社内固有のデザインシステムとの連携はまだまだ課題が残っていました。そこで社内エンジニアである sosuke とともに、Ubie Vitals というデザインシステムを MCP サーバー化することで、UI 開発の速度と精度が劇的に向上した体験を共有します。 目次 デザインシステムと開発の現状課題 MCP サーバーの登場 Ubie UI MCP の構築 デモ テキストだけで UI 実装が可能に デザイナーの壁打ち相手としての可能性 今後の展望 デザインシステムと開発の現状課題 Ubie では「Ubie Vitals」というデザインシステムに則って
Vercel v0からReact+Hono環境への移行戦略──Cursor活用で進める段階的マイグレーション｜只野剛【Go】
はじめまして。Algomatic ネオセールスカンパニーでソフトウェアエンジニアをしております、只野と申します。 2023年12月に入社して以来、生成AIの急速な進化を肌で感じながら、生成AIプロダクト開発にどっぷりと浸かる日々を送っています。 「2025年はLLMエージェントの年になる」と言われていますが、それは単なる流行ではなく、私たちエンジニアの働き方そのものも再定義されることを意味しています。 従来の常識が塗り替えられていく感覚。その波の真ん中に自分がいると思うと、恐れよりも、胸の高鳴りが勝ります。コードを書くたびに、未来が少しずつ姿を現す――そんなワクワクとともに、今日も開発に取り組んでいます。 この記事を読んだら得られることVercel v0から自社環境への移行戦略: プロトタイプからReact+Hono環境へ、段階的に移行するプロセスを解説 Cursorの効果的な活用法: コ
個人開発動画編集ソフト「Beutl」の紹介
はじめに こんにちは。yutotuyです。 今回は、わたしが個人開発している動画編集ソフト、Beutlを紹介していきます。 また、次回以降の記事からはBeutlの開発中に発生した課題と解決策を載せていきます。 背景 私が動画編集ソフトの開発を始めたのは、中学生の頃にさかのぼります。当時、趣味で動画編集をしていた私は、使っていたAviUtlというソフトのスクリプト言語を通じてプログラミングに興味を持ちました。 コロナ禍で自宅にいる時間が増えたこともあって、「もっと性能が良く、安定した動画編集ソフトがあったらいいな」という単純な思いから、プログラミングの勉強と並行して「BEditor」（Beutlの前身）の開発を開始しました。実は、開発する前はAviUtlの利用を便利にするソフトの開発を行っていましたが、AviUtl本体のパフォーマンスや安定性に根本的な課題を感じ、ゼロから新しいソフトを作るこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stitch - Design with AI
Storybookの情報をMCPサーバー化する
