---
title: "コンポーネントからコードを閲覧・編集"
slug: "view-and-edit-the-code-from-a-component"
abstract: "コンポーネントコード抽出は、AIによる提案やコード編集の恩恵を受けられます"
---
# コンポーネントからコードを閲覧・編集

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

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

> !注Design Studioはデプロイ時にコード抽出を使ってコンポーネントプレビューを更新します。つまり、コンポーネントの更新はデプロイが行われた後にのみDesign Studioに反映されます。もしコードベース内のコンポーネントのコードに変更を加えた場合、Portalでの [環境再デプロイ](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/deploy-a-project-and-environment.html#UUID-8b163b37-1ca0-e5e7-a315-6429b6bd8e65_section-idm234376068692361) 後もDesignライブラリのコードが更新されます。

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

1.  ナビゲーションヘッダーで **「デザイン**」をクリックします。
2.  実験したいコンポーネントについては、「 **Studioで開く**」をクリックしてください。Studioでは、ドロップダウンメニューを使って別のバリアントや他のサイトのバリアントを表示できます。
3.  トップのツールバーの **Code** :mdiCodeTags: modeで、このバリアントのコードを見ることができます。
4.  コードを編集して、変更点を視覚化するために **Design** :mdiFountainPenTip: modeに戻してください。