React

オープンソースの自律エージェント Dexter が注目を集めている。X では「Claude Code の金融版」と紹介され話題になった。約200行のコードで、銘柄スクリーニングから財務分析、投資根拠のレポート作成までを自動で行うツールだ。 Dexter とは Dexter は、virattt 氏が開発したオープンソースの自律型金融リサーチエージェント。2026年3月時点で GitHub スター数は 18,000 を超える。複雑な金融の質問を受けて、自分でリサーチ計画を立て、データを収集し、結果を検証してレポートにまとめる。 主な機能: 割安な銘柄の自動スクリーニング 財務データの詳細分析 投資根拠のレポート化 作業内容の自己検証（セルフバリデーション） アーキテクチャ: 4つのエージェント構成 Dexter は ReAct（Reasoning + Acting）パターンに基づくマルチエージェントアーキテクチャで構成されている。ReAct とは、LLM が「考える（Reasoning）」と「行動する（Acting）」を交互に繰り返すことで、複雑なタスクを段階的に解決するパターンだ。 エージェント 役割 Planning 金融クエリを分析し、リサーチ計画をステップに分解 Action 計画に基づいてツールを呼び出し、リアルタイムデータを取得 Validation 各ステップの完了を検証し、データの十分性をチェック Answer 収集した情報を統合してレポートを生成 この Validation エージェントが Dexter の特徴的な部分だ。金融分野では精度が重要なため、自分自身の出力を検証するレイヤーを設けている。ループ検出やステップ数制限などの安全機構も備えている。 技術スタック ランタイム: Bun（高速な JavaScript ランタイム） 言語: TypeScript UI: React + Ink（React コンポーネントでターミナル UI を構築するライブラリ） LLM オーケストレーション: LangChain.js LLM プロバイダ: OpenAI、Anthropic、Google、ローカル Ollama に対応 データソース: Financial Datasets API（リアルタイム市場データ） 始め方 リポジトリをクローンして依存関係をインストールする。 ...

Tailwind CSSチームのデザイナー Steve Schoger が、「Claude Codeをメインのデザインツールにした」という1時間の解説動画を公開した。Figmaを使わず、Claude Codeだけで金融アプリのランディングページをゼロから構築する過程を全公開している。 Steve Schoger とは Steve Schoger は Tailwind Labs のデザイナーで、Adam Wathan と共に「Refactoring UI」の著者としても知られている。開発者向けにデザインスキルを体系的に教える活動で広く認知されており、X（Twitter）でのデザインTipsや YouTube でのUI改善動画でも人気が高い。 動画の内容 動画では、約50回の対話を通じて初期出力をプロ級の品質に仕上げていく過程が公開されている。 注目すべきは、Schoger 本人が「コマンドラインはディレクトリ移動と Claude 起動しかできない」と語っている点だ。プログラミングの深い知識がなくても、Claude Code との対話だけでプロ品質のLPを作り上げている。 ワークフロー 左画面: ブラウザ（localhost 表示） 右画面: Claude Code のターミナル これだけのシンプルな構成で、Figma は一切使っていない。 技術スタック Vite — ビルドツール Tailwind CSS — ユーティリティファーストCSS React — UIライブラリ デザイナーがCLIに移行する時代 「デザイナーがCLIに移行する」というのは、一見ありえない話に思える。しかし、この動画を見ると、AIコーディングツールがデザインワークフローを根本的に変えつつあることが実感できる。 従来のデザインワークフローでは、Figma などのビジュアルツールでモックアップを作成し、それをエンジニアが実装するという流れが一般的だった。しかし Claude Code を使えば、デザイナーが自然言語で指示を出すだけで、直接コードとして実装されたUIを確認・修正できる。 ui.sh — デザインスキルをAIに組み込むツール Schoger と Adam Wathan は ui.sh というツールも開発している。これは Claude Code や Cursor などのAIコーディングエージェントに、プロレベルのデザイン基準を適用させるスキルツールキットだ。ターミナルを「デザインエンジニア」に変えるというコンセプトで、AIが生成するUIの品質を大幅に向上させることを目指している。 ...

Claude Desktop の Preview 機能に、画面上の要素をクリックするだけで DOM 要素を直接指定できる機能が追加されました。「ヘッダー右のボタンの…」のような言葉での説明が不要になり、フロントエンド開発のワークフローが大きく変わります。 概要 Claude Code の開発者である Lydia Hallie 氏が X で紹介したこの機能では、Claude Desktop の Preview パネルで実行中のアプリをプレビューしながら、修正したい UI 要素をクリックで指定できます。 クリックすると Claude は以下の情報を自動的に取得します: HTML タグ名 CSS クラス 主要なスタイル 周辺の HTML 構造 クロップされたスクリーンショット React アプリの場合は以下の情報も取得されます: ソースファイルのパス コンポーネント名 Props の情報 使い方 Claude Desktop で Preview パネルを開く 修正したい部分をクリックする 「ここを青にして」のように指示する これだけで Claude が該当要素を特定し、コードを修正してくれます。 活用シーン デザイン修正の高速化: 色、サイズ、レイアウトの微調整をクリック＋自然言語で即座に反映 非エンジニアによる UI 変更: コードを読めなくても、画面を見ながら変更指示が可能 バグ箇所の特定: 表示がおかしい要素をクリックするだけで、該当コンポーネントとソースファイルを特定 技術的な仕組み Preview 機能の裏側では、.claude/launch.json で定義された開発サーバーが起動し、ヘッドレスブラウザと接続されます。Claude はスクリーンショット撮影、DOM 検査、クリックシミュレーション、ネットワーク監視などを直接実行できます。 ユーザーが要素をクリックすると、その要素のメタデータ（セレクタ、タグ、テキスト、ソース位置）が Claude Code のセッションコンテキストに自動的に注入される仕組みです。 ...

「Vercelを使えばそこそこ大規模なアプリケーションまでインフラエンジニア要らずにいけるのよな」——元Yahoo!エンジニアで YouTuber のしまぶー氏（@shimabu_it）のポストが話題になった。Vercel CEO の Guillermo Rauch 氏の投稿に対するコメントで、「しかも大抵の場合インフラエンジニアがAWSやGCPで構築したものより高機能、高可用性、高パフォーマンス」と踏み込んだ発言をしている。 Vercelが実現する「インフラレス」開発 Vercelは Next.js の開発元として知られるが、プラットフォームとしての本質は開発者からインフラの複雑さを隠蔽することにある。 Framework-defined Infrastructure（FdI） Vercelが推進する Framework-defined Infrastructure は、Infrastructure as Code（IaC）の進化形だ。 従来のIaCでは、開発者がTerraformやCloudFormationでインフラを明示的に定義する必要があった。FdIでは、フレームワークのコードからインフラ構成が自動的に導出される。 ビルド時にソースコードを解析し、開発者の意図を理解 必要なインフラ構成（Edge Functions、Serverless Functions、Static Assets、ISR設定など）を自動生成 開発者は「何を作るか」に集中し、「どこにデプロイするか」を考える必要がない Self-driving Infrastructure Vercelは Self-driving Infrastructure というコンセプトも掲げている。本番環境の運用を自律的に管理し、実世界のインサイトを基にアプリケーションコードの改善まで行うというビジョンだ。 6人のエンジニアで年間360億トークンを処理 Vercelの「インフラ不要」の主張を裏付ける事例として、Durable社のケースが象徴的だ。 6名のエンジニアチームで300万ビジネスをサポート 年間360億トークン（日次1.1億トークン）を処理 新しいAIエージェントを1日で本番環境に展開可能 自社ホスティング比で3〜4倍のコスト削減 創業者は「インフラ構築ではなくエージェント開発に注力できるようになった」と評価している。 インフラエンジニアは本当に不要になるのか？ しまぶー氏は以前から「インフラエンジニアは二極化する」と指摘している: 高待遇化: クラウドサービスの基盤自体を作れるエンジニア 活躍の場が減少: アプリケーションのインフラを構築する程度のエンジニア 「基盤自体を作れるエンジニア」とは、VercelやAWSのサービスそのものを開発・運用する側のスキルセットを指す。具体的には以下のような領域だ: 分散システム設計: AWS LambdaやVercel Edge Functionsの実行基盤を設計・構築するスキル コンテナランタイム/オーケストレーション: Kubernetesを「使う」のではなく「作る・拡張する」レベル ネットワーク基盤: CDN、ロードバランサ、DNSを大規模に設計・運用するスキル ストレージエンジン: 分散データベースやオブジェクトストレージの内部実装 コンパイラ/ランタイム: サーバーレスプラットフォームのビルドパイプラインや実行環境の開発 つまり「AWS上にアプリをデプロイする」のではなく「AWSのようなサービスを作る」側の人材であり、このレベルのエンジニアはプラットフォームの進化によってむしろ需要が高まっている。 Vercelの基盤は何で動いているのか 「基盤を作る」とは具体的にどのレベルなのか。Vercel自身の技術スタックを見ると、その深さがわかる。 Vercelは当初 AWS Fargate でビルド処理を実行していたが、プロビジョニングに90秒かかる問題があった。そこで2023年に独自のコンピュート基盤「Hive」を構築し、起動時間を5秒に短縮した。 Hiveの技術スタックは以下の通りだ: レイヤー 技術 物理基盤 ベアメタルサーバー（“Boxes”） VM隔離 Firecracker microVM + KVM ビルド基盤 Hive（独自コントロールプレーン） 関数実行 AWS Lambda、Edge Functions オーケストレーション Amazon EKS（一部）+ 独自制御 ストレージ/キュー Amazon S3、SQS ネットワーク Amazon Global Accelerator 注目すべきは、OpenShiftのような既存のKubernetesディストリビューションは使われていない点だ。Firecracker はAWSがLambdaとFargateのために開発したオープンソースのmicroVMで、約300ミリ秒でVMを起動できる。Vercelはこの Firecracker + KVM の上に独自のオーケストレーション層を構築している。 ...

awesome-claws — OpenClaw エコシステム 28 エージェント完全マップ @tom_doerr 氏が X で紹介した、OpenClaw インスパイアのエージェントキュレーションリストが注目されています。 List of agents for OpenClaw machinae/awesome-claws は、OpenClaw にインスパイアされた 28 の AI エージェントプロジェクトをキュレーションしたリストです。Rust、TypeScript、Python、Go、C、Zig まで、8 言語にまたがるエコシステムが形成されています。 本記事では、GitHub 史上最速で最多スターを獲得した OpenClaw の背景と、そこから派生した 28 エージェントを設計思想別に分類して解説します。 OpenClaw とは何か GitHub 史上最速の成長 OpenClaw は、オーストリアの開発者 Peter Steinberger 氏が開発したオープンソースの自律型 AI エージェントです。 指標 数値 GitHub スター 247,000+（2026 年 3 月時点） 14 日間での獲得スター 190,000（GitHub 史上最速） フォーク数 47,700+ 対応チャネル 20+（WhatsApp、Telegram、Slack 等） AgentSkills 5,700+ 比較として、Kubernetes は約 10 年で 120,000 スター、Linux カーネルは 30 年以上で 195,000 スターです。OpenClaw は 14 日で 190,000 スターを達成し、React を抜いて GitHub 最多スターのソフトウェアプロジェクトになりました。 ...

「Claude Codeが無料で使える最強AIエージェント」は本当か — Accomplish の実態とAI煽りの再来 ガガロットAI(@gagarotai200)氏のポストが604いいね、764ブックマーク、約42,000表示と大きな反響を呼んでいます。 『Claude Code』が無料で使える最強AIエージェントが登場したww Accomplishっていうローカルで動くAIエージェントがGitHubに上がってたから共有する。これ入れれば、Claude Codeレベルの AIエージェントがサブスク購入なしで永遠に使えるwww — ガガロットAI(@gagarotai200) この投稿者は、以前「OpenClawで5人解雇」という根拠不明の煽りポストでも注目を集めた人物で、AIスクールを運営しています。今回も「最強」「無料」「永遠に使える」というキーワードが並んでいますが、主張はどこまで正確なのでしょうか。Accomplish の実態を公式情報から検証します。 Accomplish とは何か Accomplish は2026年1月13日に公開されたオープンソース（MITライセンス）のデスクトップ AI エージェントです。GitHub Stars 9.6k、Forks 1k、コントリビューター31名と、一定の支持を集めています。 基本情報 項目 内容 開発元 accomplish-ai ライセンス MIT 技術スタック Electron + React + TypeScript 対応OS macOS（Apple Silicon / Intel）、Windows 11 最新バージョン 0.3.10 内部構造 OpenCode CLI を node-pty 経由で起動 主要機能 ブラウザ自動化: Web検索、フォーム入力、データ抽出 ファイル管理: フォルダ整理、ファイル名変更、コンテンツベースの分類 ドキュメント作成: レポート作成、要約、メール下書き ワークフロー自動化: 反復タスクの自動化 対応 AI モデル カテゴリ プロバイダー クラウドAPI Anthropic（Claude）、OpenAI、Google AI、xAI、DeepSeek、Moonshot AI 等 クラウドインフラ Amazon Bedrock、Azure Foundry、OpenRouter、LiteLLM ローカル Ollama、LM Studio 主張の検証 主張1: 「Claude Codeレベルの AIエージェント」 検証結果: 大幅に誇張 ...

Theatre.js — GUI でWebアニメーションを直感的に作れるモーションデザインエディタ しば（@shiba_program）氏のポストが、GUI でWebアニメーションを作成できる JavaScript ライブラリ「Theatre.js」を紹介しています。 GUIで直感的にWebアニメーションが作れる「theatre.js」すごいな。編集した内容が即座に反映されるので、これは微調整捗る。GUIで編集できるから、デザイナーに調整任せることもできそう。デモにある高度なものだけでなく、Webサイトで使うシンプルなアニメーションの作成もかなり楽にしてくれるはず — しば（@shiba_program） 投稿が注目している「デザイナーに調整を任せられる」という点は、Theatre.js の設計思想の核心です。コードでアニメーション対象を定義し、ブラウザ上の GUI エディタで動きを調整する。このワークフローにより、エンジニアとデザイナーの協業が自然に成立します。 Theatre.js とは何か Theatre.js はフィンランド・ヘルシンキの Theatre.js Oy が開発するオープンソースの Web モーションデザインライブラリです。GitHub Stars 12.2k、1,600以上のプロジェクトが依存しており、Web アニメーション領域で確固たる地位を築いています。 基本情報 項目 内容 開発元 Theatre.js Oy（ヘルシンキ） ライセンス Apache 2.0（@theatre/core）/ AGPL 3.0（@theatre/studio） 言語 TypeScript 82.6% GitHub Stars 12.2k 現バージョン 0.5（1.0 開発中） 対応技術 Three.js、React Three Fiber、HTML/SVG、任意のJSライブラリ 2つのパッケージ構成 Theatre.js は2つの独立したパッケージで構成されます。 パッケージ 役割 使用場面 @theatre/core アニメーション再生エンジン 開発・本番の両方 @theatre/studio GUI エディタ（シーケンスエディタ、グラフエディタ、プロパティパネル） 開発時のみ この分離設計が重要です。Studio は開発時にのみ使い、本番ビルドには core だけを含めます。エディタのコードが本番バンドルに入らないため、パフォーマンスへの影響はありません。 4つの基本概念 Theatre.js には、理解すべき4つの概念があります。 ...

オープンソース AI は「無料」でも「民主化」でもない — 重みの公開と推論コストの間にある物理法則の壁 @kubotamas 氏が X で共有した、Anthropic CEO Dario Amodei の発言が議論を呼んでいます。 AIのオープンソース化は無料でも民主化でもない。モデルの重みをダウンロードすることは出来ても、実際に推論するのにコストがかかる。AIは従来のオープンソースとは本質的に異なる。重みを手に入れても計算資源がなければ、解釈・改変することはできない。オープン化という約束は物理法則の壁で制限されている この投稿は、@r0ck3t23 氏（Dustin）のツイートを引用しています。Dustin 氏は Amodei の動画インタビューから「オープンソース AI は無料ではなかった。一度もそうだったことはない」とまとめ、1,200 以上のいいねを集めました。 本記事では、この「オープンソース AI の幻想」の構造を掘り下げます。 Amodei の主張 — 「これは Linux ではない」 Dario Amodei はインタビューの中で明確に述べています。 “It’s not free. You have to run it on inference and someone has to make it fast on inference.” （無料ではない。推論を実行する必要があり、誰かがそれを推論で高速にする必要がある） “This is not Linux. You can’t see inside.” （これは Linux ではない。中身は見えない） 従来のオープンソースソフトウェア — Linux、PostgreSQL、React — は、ソースコードを読み、理解し、フォークし、改変できます。ノートパソコン 1 台で動かせます。しかし AI モデルの「重み」は、数百ギガバイトの数値の羅列です。ソースコードのように「読んで理解する」ことはできません。 ...

リクルート新卒研修の React 資料が「無料で最高の教材」と言われる理由 sigumataityouda 氏のポストが、リクルートの新卒研修資料を「React を語る上で欠かせないもの」「完成度が非常に高い」と紹介しています。リクルートは 2017 年から毎年、新卒エンジニア向け研修資料を無料公開しており、React 研修資料は特に業界で高く評価されています。 React語る上で欠かせないものとしてリクルートの新卒研修資料というのもがある。完成度が非常に高い。 リクルートの React 研修資料とは React 研修 (2024) は、リクルートのエンジニアコース新卒研修「BootCamp」で使われている講義資料です。約 170 スライド以上で構成され、Speaker Deck で無料公開されています。 研修の位置づけ リクルートの新卒エンジニアは配属前に約 3 ヶ月間の BootCamp を受講します。2024 年度は 24 講座以上が開講されており、React 研修はフロントエンド技術スタックの中核として位置づけられています。 研修カテゴリ 主な講座 フロントエンド JavaScript、TypeScript、React、Next.js バックエンド データベース設計、API 設計 品質・テスト テスト駆動開発（講師: t_wada 氏） セキュリティ セキュリティ演習 AI テキスト生成 AI 活用 マインドセット ソフトウェアエンジニアとしての姿勢と心構え 最初の講座「ソフトウェアエンジニアとしての姿勢と心構え」は、技術顧問の t_wada 氏が担当し、「技術の学び方を学ぶ」ことに重点を置いています。 資料の構成 React 研修資料は 5 つのセクションで構成されています。 1. Web アプリ開発の変遷 React を学ぶ前に、Web アプリケーション開発がどう進化してきたかを整理します。 世代 アーキテクチャ 特徴 第 1 世代 MPA（クラシック SSR） サーバーが HTML を生成、ページ遷移ごとにリロード 第 2 世代 MPA + jQuery DOM 操作で部分的な動的 UI を実現 第 3 世代 SPA（CSR のみ） クライアントで描画、リッチな UX 第 4 世代 SPA（CSR + 事前レンダリング） SSR / SSG で初期表示を高速化 この変遷を理解することで、「なぜ React が必要になったのか」という文脈が掴めます。jQuery 時代の命令的 UI と React の宣言的 UI の違いを、歴史的な流れの中で説明しているのが特徴です。 ...

ローカルの開発モックを ngrok で公開し、Backlog Wiki を自動更新するシェルスクリプト レビュー担当者にモックアプリを見せたいとき、毎回「URL 変わりました」と連絡するのが面倒になったので、ngrok 起動 → Backlog Wiki 自動更新を1コマンドで済ませるスクリプトを作りました。 背景 社内プロジェクトで React のモックアプリを開発しています。レビュー担当者（非エンジニア）にモック画面を確認してもらう際、以下のような手順を毎回踏んでいました： npm run dev でローカルサーバーを起動 ngrok http 3000 でトンネルを張る 発行された URL をコピー Backlog の Wiki ページを開いて URL を貼り替える レビュー担当者に連絡 ngrok の無料プランでは URL が起動ごとに変わるため、毎回 Wiki を手動更新する必要がありました。これを自動化します。 スクリプトの全体像 ./scripts/serve-public.sh [user:password] 1コマンドで以下が実行されます： Vite dev server 起動 ↓ ngrok トンネル開通（Basic認証付き） ↓ Backlog Wiki に URL を自動反映 ↓ Ctrl+C で全プロセス停止 実装のポイント 1. Vite の起動待ち Vite dev server はバックグラウンドで起動しますが、すぐには HTTP リクエストを受け付けません。ポーリングで起動完了を待ちます： 1 2 3 4 5 6 for i in $(seq 1 15); do if curl -s -o /dev/null http://localhost:$PORT 2>/dev/null; then break fi sleep 1 done 15秒以内に応答がなければエラーとして終了します。 ...