Components
コンポーネントは、 プロトタイプ全体でレイヤーとインタラクションを 再利用できるようにセットで保存されます。シーン全体にコンポーネン トのインスタンスを作ることで、どんなレイヤーとインタラクションの セットでもコンポーネントに変え、再利用することが出来ます。コンポ ーネントを使用することで、不要な繰り返し作業を避け、シーンごとの 読みやすさを向上させ、最終的にプロトタイプの作業速度を上げること ができます。
Using Components
Creating Components in a Scene
シーンにコンポーネントを作ることが出来ます。コンポーネントに変えたいレイヤーを一 つまたは複数選択し、ツールバーにある「コンポーネント」アイコンをクリックしてくだ さい。または、選択したレイヤーを右クリックして、コンテキストメニューから「コンポ ーネントに変換」を選択します。選択したレイヤーとそれに関連したインタラクションを 含むコンポーネントが自動的に作成されます。なお、オリジナルのレイヤーはコンポーネ ントのインスタンスに置き換えられます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/f4ed33af24017fa028ca86f11eeb69df4558b787-2175x1200.png/creating_components_in_a_scene.png)
Creating Components Directly
スクラッチからもコンポーネントを作成することが出来ます。左側にあるコンポーネント パネルを開き、プラスアイコンをクリックしてください。空のコンポーネントが作成さ れ、コンポーネントのカスタマイズを始めることができます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/9831c9731ea3425f1a2d2b88847c459a121e6ac6-2175x1200.png/creating_components_directly.png)
Adding Component Instances
コンポーネントパネルからシーンのキャンバスにコンポーネントをドラッグし、コンポー ネントのインスタンスを作成できます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/ebf15dec3b5fe1c4a10af9991c081bdacd0d64d9-2175x1200.png/adding_component_instances.png)
Editing Components
Main Component
マスターコンポーネントを編集したいときは、コンポーネント編集モードに切り替えてく ださい。コンポーネントパネルにてコンポーネントをクリックするか、または、コンポーネントのインスタンスを右クリックしてコンテキストメニューから「マスターコンポーネ ントに移動」を選択します 。
マスターコンポーネントの編集はシーンの編集と似ていて、コンポーネント内のレイヤー や変数、トリガー、レスポンスを作成または修正、削除することができます。変更箇所 は、コンポーネントのすべてのインスタンスに適用されます。
右上にある「シーンへ移動」ボタンをクリックしてシーンに戻ることができますが、シー ンパネルでシーンをクリックすれば他のシーンへ移動することもできます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/729336c7e65cedd556de25a0040248f3634291ce-2175x1200.png/main_component.png)
Instance
コンポーネントインスタンスのサブレイヤーのプロパティーを変更するということは、単 純にこのプロパティーが上書きされるという意味です。上書きされたプロパティーはイン スタンスにのみ適用されるためマスターコンポーネントには影響しません。マスターコン ポーネントを変更しても上書きされたインスタンスのプロパティーは残ります。上書きす ることで同じマスターコンポーネントのインスタンスを保ちつつ、インスタンスが互いに 異なるようにインスタンスをカスタマイズできます。
インスタンスの上書きをリセットしたい場合、インスタンスを右クリックしコンテキスト メニューから「上書きリセット」を選択します。 すべての上書きが削除され、インスタン スはマスターコンポーネントと同じようになります。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/008bbf1447860b58d06393bd1f75b79a1934afde-1580x870.png/image.png)
Link with Main
コンポーネントのインスタンスをマスターコンポーネントとリンクすることができます。 コンポーネント編集モードに移動しなくてもインスタンスを編集することで、マスターコ ンポーネントを編集できます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/1e1d092d08a9d3a2271171cc538bd7ecd42a4a55-2175x1200.png/link_with_main.png)
Variable Overrides
変数の初期値を上書きすることも可能です。変数の値を上書きしたい場合、マスターコン ポーネントの変数の「上書きを可能にする」オプションをオンにしてください。このオプ ションをオンにすると、コンポーネントインスタンスのプロパティーパネルで変数の値を 上書きすることが出来ます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/96065e599def016321ad4bd26cb92ab9ef23abd8-1450x800.png/overridable.png)
Swap Component Instances
右側にあるプロパティパネルで、コンポーネントのインスタンスを他のインスタンスに交換できます。ネストされたコンポーネントのインスタンスも同じ方法で交換できます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/03b55001bdc3c7db29aea63d8b9a31714ef02e75-1450x800.png/swap_component_instances.png)
Grouping Components
コンポーネントの名前に、'/'を使用しグループを作成したり、区分したりすることができます。 例えば、1つ目のコンポーネントの名前を「button/primary/normal」とし、2つ目のコンポーネントの名前を「button/secondary/normal」とすると、以下の通りにグループ化されます。
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/a685c70536de49735c5ad6cde39dbddf83cfec92-1450x800.png/grouping_components.png)