Framer + RemixでWebサイトをつくる #10 - 再利用可能性のあるものをコンポーネントにまとめる（前編）

これはAdvent Calender 2021 #Framer 10日目の記事です。
9日目の記事はこちら

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。サイトの要件などに興味ある方は1日目の記事をご覧ください。

10日目 - コンポーネントにまとめる （前編）

やっと10日目。25日全部埋めるのは無理なのでRemixのところまでつくってデプロイしたらアドベントカレンダーの記事としては良しとしよう。そうしよう。

というわけで、今回は表題の通りでRemix + Framerでウェブサイトをつくるのに極めて重要なコンポーネントの話です。

Framerではコンポーネントは2種類存在します。一つはFramerの機能のみで作成でき、以前はDesign Componentとも呼ばれていた「Smart Components」。あとはReact.jsのTsx/Jsxのコードで作成できる「Code Components」です。今回は主にSmart Componentsの話です。

---

コンポーネントとは

ところで、コンポーネントとはそもそもなんぞやと思う方もいるかもなので簡単に説明します。

コンポーネントとは言葉の意味としては「部品」です。物理的な意味での部品とは例にすれば「ネジ」とか「釘」みたいなもので、ソフトウェアを実装する中で部品として組み合わせて使うもののことをコンポーネントと呼びます。

ただ、今回話すコンポーネントは主にGUI（Graphical User Interface） におけるコンポーネントを指します。ですのでコンポーネントには以下の要素が存在します。

• ビジュアル（視覚情報）とレイアウト
• 機能

また、部品とはいえなんでもかんでもコンポーネントにするべきかという点については次の指針のもとに検討するのが一般的です。またこの指針をもとに設計したり実装したりすることを「コンポーネント指向」と呼びます。

• カプセル化するため
  • カプセル化とは処理や情報などの内部的に必要なものは使う側が気にしなくていいようにすること
  • 責務や関心ごとで区分けする
• 再利用性があるため
  • 再利用性とはその名の通り同じビジュアルや機能を複数回使う見込みがあるかどうかのこと

ちなみに手前味噌で2016年と古いスライドですが、コンポーネント指向やコンポーネント設計についてまとめたスライドです。参考までに。

Framerでのコンポーネント

FramerのSmart Componentsもコンポーネント指向で考えられており次の要素を持っています。

要素	説明
Variants	主にビジュアルなどの状態（clicked, hover, その他いろいろ）を用意でき、Variablesで切り替えできます
Variables	変数のこと。テキストや数値、画像、コンポーネントなど渡せます
Intractions	各種Eventを渡すことができます

---

実際にSmart Componentsにしてみる

とりあえずSmart Componentsにできそうなコンポーネント指向に当てはまる要素を探します。

現在までで再利用性が高いのは次のいずれかです。

• 紹介ページの見出し + 本文のセクション
• ドロワーのナビゲーションアイテム

今回は「ドロワーのナビゲーションアイテム」をSmart Componentsにしていきます。

Smart Componentsの作り方

Smart Componentsを作成するには、ComponentにしたいFrameまたはStack、Textを選択しFramer画面上部にある「Component」ボタンをクリック。

「New Component」ダイアログが表示されたら任意の名前でComponentを作成。
作成後はComponent用の画面に切り替わります。

とりあえずこれでSmart Componentsにすることができました。

---

変数にする

Smart Components化できましたがこのままではメニューのラベルが「紹介」のままになってしまいます。このラベルはComponentを使う際に自由に設定できるようにしたいので「変数（Variables）」にします。

メニューラベルを変数にする

変数（Variables）にするには変数にしたいプロパティを右のコンパネから選択し、プロパティにhoverすると出てくる「➕ボタン」をクリックします。

「➕ボタン」をクリックすると「変数（Variables）用のモーダルが表示されます。
この各項目を入力することで変数の名前や初期値やPlaceholder、フォームにするかどうかを設定できます。

アイコンも変数にする

メニューの左にアイコンを置いています。これはFramerがデフォルトで用意している「Iconoir」アイコンコンポーネントを使っています。

プロパティの Icon はセレクタになっており色々な種類のアイコンを選択して使用することができます。
この Icon プロパティも変数にします。ラベル同様に変数にしたいプロパティをクリックして変数モーダルを開いて設定します。

↓ 変数にするとSmart Componentsにした「NavItem」 Componentを選択すると右のコンパネから Iconプロパティでアイコンを色々変更できます。

イベント（Interaction）も変数にする

変数にできるのはプロパティの数だけあります。つまり、Interaction = イベントも変数にできます。
ただ、今回の場合はSmart Componentsにする前にInteractionを設定していたので自動的に変数になっていました。

せっかくなので変数名を onTap に命名規則をJavascriptぽくするために変えてみました。

というわけでここまでのプレビューです。Smart Componentsにしただけなのでほとんど前回の記事と変わってませんが…。

https://framer.com/share/kamakura-dev-components-01--3bEtqOxVyYqAcubkXaUG/Ih6d4c8rJ

---

ReactとFramer

ちなみにFramerはReact.jsベースで作られています。つまり、この変数の考え方はReact ComponentにおけるPropsと同じです。
Smart　ComponentsをReact Component風に書くとこんな感じですかね。

const NavItem: React.VFC<Props> = ({label, icon, onTap}) => {
  return (
    <Stack direction="verticall">
      <Stack name="Contents" direction="horizotal">
        <Stack name="Icon" direction="vertical">
	  <Iconoir type={icon} />
	</Stack>
        <Text name="Label" value={label} />
      </Stack>
      <Frame name="Separation"><Svg name="border" /></Frame>
    </Stack>
  )
}

type Props = {
	label: string
	icon: "Home" | "ArrowRightCircled" | "Bag"　//|... 他にも色々ある
	onTap: ()=> void
}

---

というわけで、Smart Componentsにし、各種変数（Variables）することができました。
ちょっと記事が長くなってきたので表示上の状態や任意のオブジェクトをSmart Componentsに差し替える話は次回話そうと思います。

11日目の記事はこちら