はじめに
「マーケティングチームがLPの文言を直したいだけなのに、エンジニアの手が空くまで数日待ってもらう」——こんなやり取りに心当たりはないでしょうか。CMSを導入すればコンテンツ編集は楽になりますが、今度はコンポーネントの見た目やレイアウトまで自由に組み替えたいとなると、結局エンジニアの出番が必要になりがちです。
Builderは、この「デザイン・コンテンツ編集」と「実装」の境界線をドラッグ&ドロップで越えられるようにするビジュアル開発プラットフォームです。React、Vue、Svelte、Qwikなど主要フレームワークに対応しており、既存のコードベースに後から組み込むこともできます。今回はこのBuilderを、実際にコードを書きながら紹介していきます。
Builderとは
Builderは、Figmaのデザインやビジュアルエディタ上で組んだUIを、そのままアプリケーションのコンポーネントとして描画できるプラットフォームです。単なるノーコードツールではなく、開発者が定義した既存のReactコンポーネントを「登録」しておくことで、非エンジニアがそれらを自由に配置・編集できるようになる点が特徴です。GitHub上ではSDK群やスターター、プラグインがモノレポで公開されており、8,000以上のスターを集めています。
主な特徴
- マルチフレームワーク対応 - React、Vue、Svelte、Qwikなど、既存の技術スタックを変えずに導入できます
- 既存コンポーネントの再利用 - ゼロからページを作るのではなく、開発者が作ったコンポーネントを非エンジニアが組み合わせて使えます
- コンテンツのAPI取得 - 編集された画面データはJSONとして取得できるため、SSR/SSGとの相性も良好です
インストール
React向けのSDK（Gen 1）は次のコマンドで導入できます。
npm install @builder.io/react
プロジェクトへの初期セットアップを対話形式で進めたい場合は、公式のセットアップコマンドも用意されています。
npm init builder.io@latest
基本的な使い方
まず、Builderのダッシュボードで発行したPublic APIキーを使って、コンテンツを取得・描画する最小構成です。
// App.tsx
import { BuilderComponent, builder } from "@builder.io/react";
import { useEffect, useState } from "react";
// 環境変数からAPIキーを読み込む（ハードコードしない）
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY as string);
function Page() {
const [content, setContent] = useState<any>(null);
useEffect(() => {
builder
.get("page", { url: window.location.pathname })
.promise()
.then(setContent);
}, []);
if (!content) {
return <p>読み込み中です...</p>;
}
return <BuilderComponent model="page" content={content} />;
}
export default Page;
builder.init に渡すAPIキーはBuilder管理画面から発行できるPublicキーで、書き込み権限を持たない読み取り専用の値です。ページ側のURLに紐づいたコンテンツを取得し、BuilderComponent に渡すだけで描画が完了します。
実践的なユースケース
自作のReactコンポーネントを、非エンジニアでも編集画面から配置できるように登録してみましょう。
// components/PromoBanner.tsx
import { Builder } from "@builder.io/react";
interface PromoBannerProps {
title: string;
ctaLabel: string;
}
function PromoBanner({ title, ctaLabel }: PromoBannerProps) {
return (
<section className="promo-banner">
<h2>{title}</h2>
<button type="button">{ctaLabel}</button>
</section>
);
}
// Builderのビジュアルエディタで扱えるように登録する
Builder.registerComponent(PromoBanner, {
name: "PromoBanner",
inputs: [
{ name: "title", type: "string", defaultValue: "期間限定キャンペーン" },
{ name: "ctaLabel", type: "string", defaultValue: "詳しく見る" },
],
});
export default PromoBanner;
このように登録しておけば、マーケティングチームはBuilderのエディタ画面から PromoBanner を選び、テキストの差し替えやページ内での配置転換を、コードを書かずに行えるようになります。ランディングページのA/Bテストやキャンペーンバナーの差し替えなど、リリース頻度の高い施策との相性が良いユースケースです。
まとめ
Builderは、既存のReactコンポーネントを土台にしながら、コンテンツ編集や画面構成の自由度を非エンジニアにも開放できるビジュアル開発プラットフォームです。フレームワークを問わず導入でき、開発者はコンポーネント設計に集中し、運用チームはそれを自由に組み替えられる——という役割分担を実現できます。まずは小さなセクション単位のコンポーネントから登録し、編集フローを試してみるのがおすすめです。