【2026年版】フロントエンド技術選定：React・Vue・Angularの現在地と「AI時代の生存戦略」
はじめに 「どのフレームワークを選ぶべきか？」 これは初学者だけでなく、新規事業の技術選定を任された中級者にとっても常に悩ましいテーマです。 いまフロントエンドの世界は、大きな転換期を迎えています。長年使われてきたReact、Vue、Angularの三大フレームワークが、これまでの古い常識を捨てて新しい次元へとアップデートしているからです。さらに忘れてはいけないのが、私たちのすぐ隣には「Claude Code」や「Cursor」のような、最強のAIアシスタントが当たり前のように存在しているということです。 この記事では、初学者が最初のステップを踏み出すための視点から、中級者がモダンなアーキテクチャをどう捉え、AIとどう協業していくべきかまで、各フレームワークの現在地をまとめました。 1. React：サーバー主導UIへの移行と「AIエコシステムの覇者」 現在もフロントエンド業界で圧倒的なシ
技術ニュースを毎朝スマホで流し読みしたい、だから自分専用サイトを開発した話
Next.jsは使っていません。更新は1日1回で動的コンテンツもないので、Viteのbuildで十分です。 テストは先に書いて、実装と分けた Claude Codeに実装を任せるときに怖いのは、テストを通すためだけの嘘実装ができてしまうことです。 ダミーデータで埋めたり、assertを弱めたり、skipを入れたりするパターン。 対策として、テスト設計と実装担当を物理的に分けて、最後にクロスレビューするフローにしています。 1. テスト設計担当がテストとスケルトンを先に書く 2. 僕がテスト観点をレビュー 3. 実装担当がテスト全 PASS するまで書く。テストファイルには触らない 4. テスト設計担当がクロスレビュー。テストファイルのmtimeが自分の作業時刻で止まっているかを確認する Python側99テスト、Web側 35テスト、合計134テストで固めました。 mtimeベースの検証は
大AIエージェント時代！AG-UI準拠でアプリを構築する - Taste of Tech Topics
こんにちは。最近、AI将棋モデルの対局解説動画を見るのにハマっている大塚です。 将棋は全然わからないのですが、AIの予想外の手に驚いている解説を聞くのが結構面白いんですよね。 さて今回は、Agent–User Interaction（AG-UI）がどのような課題を解決するプロトコルなのかを確認します。 また、CopilotKitというフレームワークを利用して、AG-UIに準拠したアプリをどのように作成できるのかも試してみます。 1. AG-UIとは 1.1. AG-UIが解決しようとしている課題感 1.2. 他エージェントプロトコル（MCP・A2A）との違い 1.3. AG-UIが標準化している主なイベント 2. AG-UIを利用する 2.1. AG-UIを利用しない場合 Strands Agentsを利用したバックエンド実装 Google ADKを利用したバックエンド実装 フロントエンド
モダンCSSが変えるフロントエンド設計「アフォーダンスレイヤー」のすすめ
1. はじめに：コンポーネント指向の限界 UIを構築する際、ファイルアップロード用の<input type="file">を、ページ内の他のボタンと同じ見た目（シャドウ、ホバーエフェクト、余白など）にしたいケースはよくありますよね。しかし、ファイル入力をネイティブのUIと競合させずにスタイリングするには、クリック可能な要素として<label>を使用する必要があります。 一見問題ないように思えますが、例えばTailwind Labsの「Catalyst」のようなコンポーネントライブラリを使用している場合、<Button>コンポーネントは<button>要素や<Link>としてしかレンダリングされず、<label>にそのボタンスタイルを適用することができません。asChildのようなプロパティで要素を切り替えられる場合もありますが、これらはスタイルだけでなくコンポーネントの「振る舞い」まで渡し
iOS 27 / Xcode 27 の破壊的変更に備えて今から準備すべきこと | DevelopersIO
現在、iOS 26対応を進めているが、すでにiOS 27（2026年9月リリース予測）で予告されている破壊的変更が気になっている。特にLiquid Glassデザインの完全義務化とUISceneライフサイクルの強制適用は、対応を怠るとアプリが起動すらできなくなるリスクがある。 iOS 26の時点でAppleはこれらの変更を公式に予告しており、猶予期間が設けられている状態だ。しかし、いざiOS 27がリリースされてから慌てて対応するのでは遅いだろう。早めに全体像を把握して、計画的に移行を進めるべきだと考えている。 本記事では、iOS 26で非推奨となったAPIやAppleの公式発言から推測されるiOS 27の破壊的変更について、今から準備すべきことをまとめる。なお、iOS 27は未リリースのため、推測を含む内容が多い点に留意してほしい。 予測されるスケジュールの詳細は後述するが、2027年4
VS Code + GitHub Copilot で並列タスクが快適になったので、やり方を整理する
GitHub Copilot のエージェントモードで複数タスクを並列に進めたい。でも、セッションの切り替えが面倒だったり、今どのタスクが何の状態なのか把握しづらかったりして、結局１つずつ片付けていた。 2026年1月の VS Code アップデート (v1.109) で追加されたエージェントセッション管理UIが、この問題をかなり解決してくれた。この記事では、実際の利用画面とともにこの機能について紹介する。 参考：VS Code v1.109 Release Notes - Agent Session Management 目次 何が変わったのか：エージェントセッション管理UIの全貌 並列タスクの実践ワークフロー 並列開発をうまく回すコツ 現時点での制約：マルチルートワークスペース VS Code + GitHub Copilot で並列開発は十分できる まとめ 1. 何が変わったのか：エー
自社プロダクトを「AIネイティブ」に変貌させる「AI UX Playbook」を公開しました。｜maKunugi
「SaaS is Dead」という言葉が流行ってます。AIエージェントがSaaSを全部代替する、UIは要らなくなる、みたいな話です。様々な論点はありますが、下記の様な構造変化がソフトウェア業界で起ころうとしています。 before:「人間が何かを確認したり、操作をするためのソフトウェア」 after:「AIがタスクを実行し、その結果を承認したり管理するソフトウェア」 つまり、ソフトウェアをAfterの状態にいち早く近づけることが生死を分けるポイントになります。 そこで、「AIネイティブ」なプロダクトを構築するためのガイドとDEMO用意しました。このガイドをAIに食べさせ、バイブコーディングすることで、既存プロダクトも新規プロダクトも爆速で「AIネイティブ」な機能を搭載することができます。 *本記事は株式会社miiboの提供です。実装部分はmiiboのAPIを前提としていますが、UIパターン
SaaSは死なない、ただし「人間がUIを触る前提の設計」は終わる──AIエージェント時代のSaaS再設計論 - Qiita
はじめに 2026年に入って「SaaSは死んだ」という言説を目にする機会が増えました。AIエージェントが業務を代替するようになれば、従来のSaaS製品は不要になる──そういう論調です。 しかし、実際にAIエージェントを開発・運用しているエンジニアの立場で見ると、話はそう単純ではありません。 SaaSは消滅しません。ただし、「人間がUIを操作する前提のSaaS設計」は終わりつつあります。 この記事では、煽りや市場予測ではなく、AIエージェントを組み込む側のエンジニアが直面している技術的な課題と、SaaS側に求められる設計変更を整理します。 この記事の対象読者 AIエージェントの開発・運用に携わっているエンジニア SaaSのAPI設計やアーキテクチャに関わるエンジニア エージェント統合を前提としたシステム設計に興味がある方 この記事で得られること エージェント時代にSaaS設計の何が変わるのか
【WebF】React/Vue/Svelteがそのままネイティブアプリになるよ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この手の話をもう何万回聞いたかわかりませんが、GitHubリポジトリのコミット数や頻度を見るにかなりの本気度を感じます。 そんなわけでJavaScriptをそのままネイティブアプリにするプロジェクトのひとつ、OpenWebFがベータ版に到達したようです。 以下は公式ブログ、Introducing WebF Beta: Bring JavaScript and the Web dev to Flutterの紹介です。 Introducing WebF Beta: Bring JavaScript and the Web dev to Fl
トヨタが独自の“ゲームエンジン”「Fluorite」を開発：FlutterとDartで次世代デジタルコクピットを再定義 | XenoSpectrum
自動車業界の巨人、トヨタ自動車が、自社製ソフトウェアの核心部を自ら構築するという、極めて野心的かつ戦略的な一歩を踏み出した。ベルギーで開催された世界最大級のオープンソースイベント「FOSDEM 2026」において、Toyota Connected North America (TCNA) は、Flutterを基盤としたオープンソースの3Dゲームエンジン「Fluorite」を発表したのだ。 これは一見すると「車載エンターテインメントの強化」と見えるが、その核心は、トヨタが自社のデジタルコクピット（HMI：Human Machine Interface）における支配権を握り、UnityやUnreal Engineといった既存の巨大ゲームエンジンへの依存を脱却するための、周到に準備された技術的独立宣言といえる。 なぜ世界一の自動車メーカーが、あえてゲームエンジンを自社開発するに至ったのか。その背
なぜshadcn/uiは支持されたのか ― Providerモデル以後のUI設計
shadcn/uiとは shadcn/uiはRadix UIが提供するスタイルを持たないHeadless UIコンポーネント群(Radix Primitives)をベースに、Tailwind CSSを用いてデザインされた「コンポーネントのテンプレート集」である。 公式サイトには次のように記されている。 This is not a component library. It is how you build your component library. (これはコンポーネントライブラリではない。あなた自身がコンポーネントライブラリを構築するための方法である) shadcn/ui は、npm パッケージとして完成された UI コンポーネントを提供するのではなく、コードそのものをプロジェクトに取り込み、所有するという前提に立っている点が特徴的だ。 このアプローチが具体的にどのような意味を持つの
GhosttyをVSCodeみたいにしよう！｜Naoki |電電猫猫
English Article 最近はClaude Codeでコーディングすることが増えてきました！しかしこいつもそうだけどVSCodeもメモリをもりもり食います。大食いが5プロジェクトもあるとまあメモリもカツカツです。 そうして流行りのGhosttyに乗り換えたのが半年前なんですが、最近はGhosttyでVSCode環境をそのまま再現したい！という今の自分のGhostty環境をお見せします！ 私の環境Ghostty環境そして私の元々のVSCode環境です。 詳しく見ていきましょう。まずVSCodeのほうですが、簡単にはこれです。一般的な部類だと思いますが、左のサイドバーにファイル一覧とGitのTree表示。右にはClaude Code or Code Editorとその下にターミナルという基本構成です。 これをそのまんまGhosttyで再現したい！ということで実際に使っているのはこれです
Banana X プロンプトパターン集
💬 サポート 🇬🇧 English 🇰🇷 한국어 🇨🇳 简体中文 STYLE #00 Title TOTAL SCORE: 00 / 50 アンケートに答える （🎁 回答特典あり） GENERATION PROMPT お気に入り COPY SHARE DESIGN ANALYSIS
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Claude CodeやCursorを使って、AIがUIデザインを生成することができる「Pencil」が登場！ - Qiita
岩波Web目録
UI Skills
Stitch - Design with AI
GitHub - bradtraversy/design-resources-for-developers: Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
