"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "序章", "hProperties": { "id": "序章" } }, "depth": 2, "value": "序章" }, { "data": { "id": "背景", "hProperties": { "id": "背景" } }, "depth": 2, "value": "背景" }, { "data": { "id": "config-driven-development-cddとは", "hProperties": { "id": "config-driven-development-cddとは" } }, "depth": 2, "value": "Config Driven Development (CDD)とは?" }, { "data": { "id": "ダイナミックフォームとは", "hProperties": { "id": "ダイナミックフォームとは" } }, "depth": 2, "value": "ダイナミックフォームとは？" }, { "data": { "id": "スキーマの設計", "hProperties": { "id": "スキーマの設計" } }, "depth": 2, "value": "スキーマの設計" }, { "data": { "id": "react-hook-formでフォームを構築する", "hProperties": { "id": "react-hook-formでフォームを構築する" } }, "depth": 2, "value": "React-Hook-Formでフォームを構築する" }, { "data": { "id": "結論", "hProperties": { "id": "結論" } }, "depth": 2, "value": "結論" }]; const readingTime = { "minutes": 2, "words": 714, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "序章", children: ["序章", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#序章", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/connectors/", children: "コネクタ" }), "はLogtoにおいて重要な役割を果たします。それらの助けを借りて、Logtoはエンドユーザーがパスワードレス登録やサインイン、ソーシャルアカウントでのサインイン機能を利用できるようにします。Logtoはユーザーが自分のコネクタをインストールまたは作成できるようにしており、すでに20以上の", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/connectors", children: "公式コネクタ" }), "があります。我々のコネクタは非常に柔軟に設計されており、ユーザーがインストールするだけでなく自分で作成することも可能です。同時に、新しいコネクタを開発するのも簡単です。そのために、Config Driven Development（CDD）に着想を得た「Dynamic Form」というソリューションを設計・実装しました。"] }), "\n", _jsxs(_components.h2, { id: "背景", children: ["背景", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#背景", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Logtoのコネクタの設定はJSONで、柔軟ではありますが、編集や検証が難しい場合があります。最初はそれほど大きな問題ではありませんでした。ほとんどのJSON設定が以下のようだったためです：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"appId\": \"xxx\",\n \"appSecret\": \"xx\"\n}\n" }) }), "\n", _jsx(_components.p, { children: "しかし、サポートするプロバイダーやプロトコルが増えるに従い、状況は変わってきました。「SAMLコネクタ」を例に取ると、JSON設定には10以上のキーがあり、値のタイプも複雑で、文字列、数字、JSON、選択値、証明書用の複数行文字列などがあります。" }), "\n", _jsx(_components.p, { children: "そこで、JSONエディタに代わる、細かくデザインされたフォームを導入する時が来たと考えました。Logto Connectorはサードパーティアプリケーションとして機能するよう設計されているため、フォームをハードコーディングすることは現実的な解決策ではありません。その結果、管理が容易で、かつユーザーエクスペリエンスが優れた動的フォームの強い必要性が生まれました。前述のSAMLコネクタ用フォームは以下のようになります：" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/saml_c9a655b1ed.webp", alt: "SAMLコネクタ設定", width: "700px" }) }), "\n", _jsxs(_components.h2, { id: "config-driven-development-cddとは", children: ["Config Driven Development (CDD)とは?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#config-driven-development-cddとは", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CDD、またはComponent Driven Developmentは、アプリケーション構築における代替アプローチを提供します。従来の方法では、リードアーキテクトがビジネスニーズに基づいて設計を行い、その後アプリケーションが開発・展開され、いかなる変更も追加要素や難しいリファクタリングを通じて実行されます。" }), "\n", _jsx(_components.p, { children: "対照的に、CDDは最も基本的なレベルから独立したコンポーネントを構築することに焦点を当てています。インターフェースは通常JSONであり、これを用いて高次のユーザーインターフェースを組み立てます。再利用可能なコンポーネントとJSON設計図の組み合わせを含むこの方法は、開発者がより柔軟かつスケーラブルにアプリケーションを構築することを可能にします。" }), "\n", _jsx(_components.p, { children: "CDDのエッセンスは、モジュール性を活用して疎結合なコンポーネントの集合を作成し、それらを標準化されたインターフェースを用いて組み合わせることにあります。" }), "\n", _jsxs(_components.h2, { id: "ダイナミックフォームとは", children: ["ダイナミックフォームとは？", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ダイナミックフォームとは", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "設定駆動型開発（CDD）アプローチを採用することで、動的なウェブフォームを作成することができます。これらは静的で変わらないフィールドを持つ通常のフォームではなく、JSONファイルに基づいて生成される動的なエンティティです。これらの動的ウェブフォームの魅力は、柔軟性にあります——フォームフィールドに変更が必要な場合、JSON設定を更新するだけで済みます。この適応性のレベルは、Logtoのコネクタに理想的な解決策となります。" }), "\n", _jsxs(_components.h2, { id: "スキーマの設計", children: ["スキーマの設計", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#スキーマの設計", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "スキーマはフォームアイテムの配列として設計され、各アイテムには名前、ラベル、プレースホルダー、そして最も重要なタイプがあります。我々は6種類のフォームアイテムを持ち、enumとして定義しています：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "enum FormItemType {\n Text = 'Text',\n Number = 'Number',\n MultilineText = 'MultilineText',\n Switch = 'Switch',\n Select = 'Select',\n Json = 'Json',\n}\n" }) }), "\n", _jsx(_components.p, { children: "そしてフォームアイテムの型定義は次のとおりです：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type FormItem = {\n type: FormItemType;\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n" }) }), "\n", _jsx(_components.p, { children: "そして完全なスキーマは次のとおりです：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type Form = FormItem[];\n" }) }), "\n", _jsxs(_components.p, { children: ["しかし小さな問題があります。「select」フォームタイプはオプションのリストを必要とするため、", _jsx(_components.code, { children: "FormItem" }), "にこのフィールドを追加します："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "type BaseFormItem = {\n name: string;\n label: string;\n placeholder?: string;\n required?: string;\n description?: string;\n tooltip?: string;\n};\n\ntype FormItem =\n | ({\n type:\n | FormItemType.Text\n | FormItemType.Number\n | FormItemType.MultilineText\n | FormItemType.Switch\n | FormItemType.Json;\n } & BaseFormItem)\n | ({ type: FormItemType.Select } & BaseFormItem & {\n options: Array<{ value: string; title: string }>;\n });\n" }) }), "\n", _jsxs(_components.h2, { id: "react-hook-formでフォームを構築する", children: ["React-Hook-Formでフォームを構築する", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-hook-formでフォームを構築する", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "スキーマが設定されたので、スキーマに基づいてフロントエンドでフォームを構築できます。これを実現するために、React Hook Formを使用します。" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react-hook-form.com/", children: "React-Hook-Form" }), "は、効率的で使いやすいフォームをReactで構築するための強力なツールです。"] }), "\n", _jsxs(_components.p, { children: ["まずフォームを初期化することから始めます。ここではJSON設定が取得され、", _jsx(_components.code, { children: "formItems" }), "と呼ばれ、フォーム内のデータが", _jsx(_components.code, { children: "formData" }), "と想定します："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "type FormData = Record;\n\ntype Props = {\n formItems: FormItem[];\n formData: FormData;\n};\n\nconst Form = ({ formItems, formData }: Props) => {\n const { register, control, handleSubmit } = useForm({ defaultValues: formData });\n\n const onSubmit = handleSubmit(async (data: FormData) => {\n await submitFormToServer(data);\n });\n\n return ;\n};\n" }) }), "\n", _jsx(_components.p, { children: "次に、タイプに応じてフォームコントロール要素を実装します。以下はシンプルなデモンストレーションです：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {formItems.map((formItem) => (\n

{formItem.label}

\n {formItem.type === FormItemType.Text && (\n \n )}\n {formItem.type === FormItemType.Number && (\n \n )}\n {formItem.type === FormItemType.MultilineText && (\n

\n        )}\n        {formItem.type === FormItemType.Switch && (\n          <input type=\"checkbox\" {...register(formItem.name, { required: formItem.required })} />\n        )}\n        {formItem.type === FormItemType.Select && (\n          <select {...register(formItem.name, { required: formItem.required })}>\n            {formItem.options.map((option) => (\n              <option key={option.value} value={option.value}>\n                {option.title}\n              </option>\n            ))}\n          </select>\n        )}\n      </div>\n    </div>\n  ))}\n</form>\n"
      })
    }), "\n", _jsxs(_components.h2, {
      id: "結論",
      children: ["結論", _jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#結論",
        children: _jsx(_components.span, {
          children: "#"
        })
      })]
    }), "\n", _jsx(_components.p, {
      children: "Logtoのコネクタのケースで見ると、設定駆動型開発（CDD）を動的フォームの作成に適用したとき、その多様性が際立ちます。その利点は2つあります："
    }), "\n", _jsxs(_components.ol, {
      children: ["\n", _jsx(_components.li, {
        children: "開発者にとっては、インタラクティブでユーザーフレンドリーなフォームを作成するプロセスを簡素化します。複雑なコーディングの複雑さに対処する代わりに、開発者はJSONファイルを定義するだけで、Logtoチームによって設計されたよりデザインの良い直感的なユーザーインターフェイスを得ることができます。"
      }), "\n", _jsx(_components.li, {
        children: "ユーザーにとっては、このアプローチはコネクタのセットアッププロセスを大いに簡素化します。統合の複雑さを取り除き、ユーザーがLogtoをソーシャルサインイン機能、メールやSMSサービスと容易に統合することを可能にします。"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "最近、ローコードを推進する記事がインターネット上に溢れています。このソリューションは、実際のユーザーニーズの観点から開発されており、ローコードの優れた表現であると信じています。"
    }), "\n", _jsx(_components.p, {
      children: "試してみたいですか？Logto Cloudに行き、コネクタを選んでください。"
    }), "\n", _jsx(LogtoCloudButton, {
      children: "今すぐLogtoを試してみる"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = {
    ..._provideComponents(),
    ...props.components
  };
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  headings,
  readingTime,
  frontmatter,
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}
</article></body></html>