1. デザインスタジオ

コンポーネントからコードを閲覧・編集

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

コード抽出はDesign Studioの基盤機能であり、AIやコンポーネント可視化によるコード生成の強化を可能にします。

アプリのコードベースからコンポーネント定義やメタデータを自動取得し、開発者体験を効率化し、可視化の値生成やGen AI搭載の提案などの高度な機能をサポートします。

注記

Design Studioはデプロイ時にコード抽出を使ってコンポーネントプレビューを更新します。つまり、コンポーネントの更新はデプロイが行われた後にのみデザインスタジオに反映されます。もしコードベース内のコンポーネントのコードに変更を加えた場合、Portalでの 環境再デプロイ 後にDesignライブラリのコードも更新されます。

コンポーネントバリアントのコードを閲覧・編集するには:

  1. ナビゲーションヘッダーでDesignをクリックしてください。

  2. 試したいコンポーネントについてはOpen in Studioをクリックします。スタジオ内では、ドロップダウンメニューを使って別のバリアントや他サイトのバリアントを表示できます。

  3. 上部のツールバーのCode モードで、バリアントのコードを見ることができます。

  4. コードを編集して、変更点をDesign モードに戻して視覚化してください。

この記事を改善するための提案がある場合は、 お知らせください!