React on hdknr blog

Dexter: 約200行で動く自律型金融リサーチエージェント

Thu, 26 Mar 2026 00:00:00 +0000

約200行のTypeScriptで動くオープンソースの金融リサーチAIエージェント Dexter の仕組み、アーキテクチャ、始め方を解説

Claude Codeをメインのデザインツールに：Tailwind CSSデザイナーSteve Schogerの1時間解説動画

Mon, 23 Mar 2026 00:00:00 +0000

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要素を直接指定してUI修正できる新機能

Mon, 23 Mar 2026 00:00:00 +0000

Claude Desktop Preview に追加された DOM 要素クリック機能の使い方と仕組み、CLI 版 Claude Code との違い、Chrome DevTools MCP による代替手段を解説します。

Vercelを使えばインフラエンジニア不要？ Framework-defined Infrastructureが変えるWebアプリ開発

Thu, 12 Mar 2026 00:00:00 +0000

「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エージェント完全マップと設計思想5分類

Thu, 05 Mar 2026 00:00:00 +0000

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煽りの再来

Wed, 04 Mar 2026 00:00:00 +0000

「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アニメーションを直感的に作れるモーションデザインエディタ

Wed, 04 Mar 2026 00:00:00 +0000

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 は「無料」でも「民主化」でもない --- 重みの公開と推論コストの間にある物理法則の壁

Mon, 02 Mar 2026 00:00:00 +0000

オープンソース 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 資料が「無料で最高の教材」と言われる理由

Mon, 02 Mar 2026 00:00:00 +0000

リクルート新卒研修の 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 を自動更新するシェルスクリプト

Wed, 11 Feb 2026 00:00:00 +0000

ローカルの開発モックを 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秒以内に応答がなければエラーとして終了します。

JAMStack

Thu, 19 Sep 2024 00:00:00 +0000

JAMStack

記事

セキュリティ:

【2024年】サイバーセキュリティの現状と今後の方向性

Wordpress

Jamstack、ノーコード vs WordPress？　2024年のWeb制作トレンドを予想しよう【おすすめUdemy講座紹介
ブロックエディタ
FSE
Snow Monkey, SWell
Wordpress + Snow Monkey, Wordpress + Astro
データ主権

マーケットシェア

Wordpressは 60% (40%など調査主体による)
シェア 0.2% 高トラフィックサイトで利用されている。

Netlify対Wix:違いは何ですか？

はじめに:

この記事では、NetlifyとWixの主な違いについて説明します。これらのプラットフォームはさまざまな目的を果たし、Netlifyは人気のあるWeb開発およびホスティングプラットフォームですが、WixはWebサイトビルダーおよびホスティングプラットフォームです。それらの違いを理解することは、個人や企業がWeb関連のニーズに合った適切なプラットフォームを選択するときに、情報に基づいた決定を行うのに役立ちます。

導入プロセス:Netlifyは、開発者がGitを使用してWebサイトを簡単に構築、テスト、および展開できるようにする、最新の合理化された展開プロセスを提供します。継続的な展開、バージョン管理、ワンクリック展開を提供し、高速で効率的なワークフローを求める開発者に最適です。一方、Wixは、Webサイトを作成するためのよりユーザーフレンドリーなドラッグアンドドロップインターフェイスを提供します。これは、技術的な専門知識のない個人に対応する簡略化されたWebサイト構築エクスペリエンスを提供します。

Gatsby レイアウト

Wed, 04 Sep 2024 00:00:00 +0000

Gastby レイアウト

`wrapper.js`

Gatsbyのwrapper.jsファイルは、ページ全体をラップするために使用されるファイルです。このファイルを使用することで、特定のHTML要素やReactプロバイダーでページをラップすることができます。これにより、ページ全体に共通のレイアウトや機能を簡単に適用できます。

例えば、以下のようにwrapper.jsファイルを作成し、ページを特定のコンポーネントでラップすることができます。

1
2
3
4
5
6


import React from 'react';
import Layout from './src/components/Layout';

export const wrapPageElement = ({ element, props }) => {
 return <Layout {...props}>{element}</Layout>;
};

この例では、Layoutコンポーネントでページ全体をラップしています。これにより、すべてのページに共通のレイアウトが適用されます。

さらに詳しい情報や具体的な使用例については、Gatsbyの公式ドキュメントを参考にすると良いでしょう¹。

他に知りたいことがあれば教えてくださいね！

ソース: Copilot との会話、 2024/9/4 (1) gatsby-plugin-wrap-pages | Gatsby. https://www.gatsbyjs.com/plugins/gatsby-plugin-wrap-pages/. (2) Gatsby公式チュートリアルやったよ #JavaScript - Qiita. https://qiita.com/irico/items/cf87eb29ecaf7e135fcd. (3) Gatsby.js 入門 - Zenn. https://zenn.dev/dev8/articles/gatsby_tutorial. (5) en.wikipedia.org. https://en.wikipedia.org/wiki/Gatsby_(software).

wrapper.js:

1
2
3
4
5
6
7
8
9


import React from "react";
import Layout from "./layout";
export const wrapPageElement = ({ element }) => {
 return (
 <>
 <Layout>{element}</Layout>
 </>
 );
};

layout.js:

React

Wed, 04 Sep 2024 00:00:00 +0000

React

`ReactDOM.render`

React 18以降では、ReactDOM.renderは非推奨となり、代わりにcreateRootを使用することが推奨されています。以下に新しい方法の例を示します。

まず、react-dom/clientからcreateRootをインポートします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

このコードでは、createRootを使用してルートを作成し、そのルートに対してrenderメソッドを呼び出しています。これにより、React 18の新しいレンダリングAPIを利用することができます¹²。

Puppeteer

Tue, 23 May 2023 00:00:00 +0000

Puppeteer

Puppeteer とヘッドレス Chrome を使って React の SPA サイトをクロールするためのスクリプトを記述するには、以下のようなコードを記述することができます ¹。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const puppeteer = require("puppeteer");

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto("https://example.com");
 // SPA のページ遷移を待つ
 await page.waitForNavigation({ waitUntil: "networkidle0" });
 // スクリーンショットを撮る
 await page.screenshot({ path: "example.png" });
 await browser.close();
})();

上記のコードでは、Puppeteer を使ってブラウザを起動し、指定した URL にアクセスしています。その後、SPA のページ遷移が完了するまで待機し、スクリーンショットを撮影しています。必要に応じて、このコードを改良していただければと思います。