Web フレームワーク初心者が複数のフレームワークを触ってみて気づいたことまとめ

これまで Web フレームワークをほぼ触ったことがなく、純粋に HTML + CSS + JavaScript だけを使って Web ページを書いてきた。だが最近になって React に触る機会があり、 React を触っていると、他のフレームワークはどうなっているんだろう、という興味が自ずと湧いてきた。
そこで、今時の CSR の Web フレームワークを少しでも理解するために、それぞれのフレームワークを使ってなるべく同じ動作をするような簡単な作品を作ることにした。
ここではこの作品を作る際に感じた、それぞれのフレームワークごとの特徴の違いをまとめる。

※ 作品についての解説記事ではありません。作品の公開や作品についての説明には手が回ってないので、やっていません。
※ Vue と Svelte の比較については、ここ最近の Vuefes でも語られているようです: [Vue 3 と Svelte 5 のランタイムを比較する 〜技術を一段深く理解する〜](https://docs.google.com/presentation/d/1xvcDewSssDweawP3ZnkQi0L-1AjaOl5oD8YFiiZuk3A)

## 対象としたフレームワーク

以下のフレームワークを対象とした。

* React
* Preact
* Solid.js
* Vue.js (Vue 3)
* Svelte (Svelte 5)
* Lit
* Angular (AngularJS ではない)

※ いずれも TypeScript を使用する。
※ また新しいフレームワークで作品を作り、特徴を調べたら、ここに書き足す可能性はある。

## 基本的なコンポーネントの組み立て方

どのフレームワークにあっても次の点は変わりない。
* コンポーネント単位で構成する。
* コンポーネントは次のような HTML 要素の記法により呼び出され、要素の属性によりパラメータやイベントが渡される。
	```html
	<my-compoment key1="value1" key2="value2" />
	```
* コンポーネント内の実装では JavaScript のロジックが実行された後、 HTML の記法によりレンダーされる内容が決まる。

そして、このコンポーネントの宣言の仕方はフレームワークによって異なる。そこでまず、それぞれのフレームワークのコンポーネントの作り方について説明する。

### React, Preact, Solid.js

これら3つのフレームワークでは、1つのコンポーネントを関数によって記述する。属性の内容を引数で受け取り、コンポーネントに対応するレンダー内容を戻り値として返すようになっている。レンダー内容は JavaScript 中に HTML 記法を直接記述する JSX 拡張により記述できる。 TypeScript で JSX を使用するファイルの拡張子は `.tsx` である。

* React, Preact の場合

	```tsx
	import { useState } from "react";
	// or
	import { useState } from "preact/hooks";

	interface Props {
		label: string;
		disabled: boolean;
		onButtonClick: () => void;
	};
	const MyButton = (props: Props) => {
		const [counter, setCounter] = useState<number>(0);

		const handleClick = () => {
			setCounter(counter+1);
			props.onButtonClick();
		};

		return (
			<button
				type="button"
				title={`${counter} times clicked`}
				disabled={props.disabled}
				onClick={handleClick}
				style={{
					color: "#007AFF",
					backgroundColor: "transparent",
					border: "none"
				}}
			>{props.label}</button>
		);
	};
	export default MyButton;
	```

* Solid.js の場合

	```tsx
	import { createSignal } from "solid-js";

	interface Props {
		label: () => string;
		disabled: () => boolean;
		onButtonClick: () => void;
	};
	const MyButton = (props: Props) => {
		const [counter, setCounter] = createSignal<number>(0);

		const handleClick = () => {
			setCounter(counter+1);
			props.onButtonClick();
		};

		return (
			<button
				type="button"
				title={`${counter()} times clicked`}
				disabled={props.disabled()}
				onClick={handleClick}
				style={{
					color: "#007AFF",
					backgroundColor: "transparent",
					border: "none"
				}}
			>{props.label()}</button>
		);
	};
	export default MyButton;
	```

React や Preact では返された JSX から仮想 DOM が生成され、実際の DOM との差分を取り、差分だけを実際の DOM に反映させる機構をもつ。但し、 Preact の方が軽量化されている。一方で Solid.js では JSX が実際の DOM に直接反映される。

### Vue.js, Svelte

これらのフレームワークでは、1つのコンポーネントを1つの専用ファイルで記述する。 (逆に言えば1つのファイルで複数のコンポーネントを定義することはできない) このファイルでは HTML のテンプレート、 CSS、 JavaScript の3つの領域に分かれており、ロジックとスタイルとレンダー内容を明確に分けることができる。引数の内容は JavaScript 内で規定する。コンポーネントを記述する専用ファイルの拡張子は `.vue` や `.svelte` である。
Vue.js には Options API と Composition API があるが、ここでは Copmposition API のみに言及する。

* Vue.js の場合

	```vue
	<script setup lang="ts">
	import { ref } from "vue";
	const props = defineProps<{ label: string; disabled: boolean; }>();
	const emits = defineEmits<{ buttonClick: [] }>();

	const counter = ref<number>(0);

	const handleClick = () => {
		counter.value++;
		emits("buttonClick");
	};
	</script>

	<template>
		<button
			type="button"
			:title="`${counter.value} times clicked`"
			:disabled="props.disabled"
			@click="handleClick"
		>{{ props.label }}</button>
	</template>

	<style lang="css">
	button {
		color: #007AFF;
		background-color: transparent;
		border: none;
	}
	</style>
	```

* Svelte の場合

	```svelte
	<script lang="ts">
		import { createEventDispatcher } from "svelte";
		const dispatch = createEventDispatch();

		export let label: string;
		export let disabled: boolean;
		let counter: number = 0;

		const handleClick = () => {
			counter++;
			dispatch("buttonClick");
		};
	</script>

	<button
		type="button"
		title={`${counter} times clicked`}
		disabled={disabled}
		on:click={handleClick}
	>{label}</button>

	<style>
	button {
		color: #007AFF;
		background-color: transparent;
		border: none;
	}
	</style>
	```

### Lit, Angular

これらのフレームワークでは、1つのコンポーネントを1つの JavaScript のクラス定義によって記述する。引数はクラスのメンバ変数として規定し、レンダー内容は文字列により記述される。
文字列で指定するためか、エディタによっては HTML や CSS の補完が効かないし、テンプレート中の要素にホバーしてもコンポーネントの情報を参照することができなかったりする。また、 TypeScript として引数の型チェックが作動しない。

* Lit の場合

	```ts
	import { LitElement, html, css } from "lit";
	import { customElement, property, property } from "lit/decorators.js";

	@customElement("my-button")
	export class MyButtonImpl extends LitElement {
		@property({ attribute: "label" })
		label!: string;
		@property({ attribute: "disabled" })
		disabled!: boolean;

		private counter: number = 0;

		private handleClick() {
			this.counter++;
			const event = new CustomEvent("buttonClick", { bubbles: false, composed: true });
			this.dispatchEvent(event);
		}

		render() {
			return html`
				<button
					type="button"
					title="${this.counter} times clicked"
					.disabled=${this.disabled}
					@click=${this.handleClick}
				>${this.label}</button>
			`;
		}

		static styles = css`
			button {
				color: #007AFF;
				background-color: transparent;
				border: none;
			}
		`;
	}
	export default MyButtonImpl;
	```

	`html`, `css`, `svg` などを文字列の前に付加することで、その文字列は HTML などとして解析される。

* Angular の場合

	```ts
	import { Component, Input, Output, EventEmitter } from "@angular/core";

	@Component({
		selector: "my-button",
		standalone: true,
		template: `
			<button
				type="button"
				[title]="counter + ' times clicked'"
				[disabled]="disabled"
				(click)="handleClick"
			>{{ label }}</button>
		`,
		styles: `
			button {
				color: #007AFF;
				background-color: transparent;
				border: none;
			}
		`
	})
	export class MyButtonImpl {
		@Input("label")
		label!: string;
		@Input("disabled")
		disabled: boolean;
		@Output("button-click")
		buttonClick = new EventEmitter<undefined>();

		protected counter: number = 0;

		protected handleClick() {
			counter++;
			this.buttonClick.emit();
		}
	}
	export default MyButtonImpl;
	```

	* `template` や `styles` の代わりに `templateUrl` や `styleUrls` を使うことで別の `.html` ファイルや `.css` ファイルに記述されている内容をテンプレートやスタイルとして使用することができる。 (むしろ昔はその方法しかなかったか)
	* 他所で使わない場合でもクラス定義に `export` を付けるのは必須である。クラスの変数やメソッドで `private` を付加するのも認められておらず、せめて `protected` にしなければならない。

## 特徴的な違い

以下では、自分が気付いた範囲でコンポーネントごとに特異な違いが生まれる箇所を個別に説明していく。

### コンポーネントの参照の仕方

#### React, Preact, Solid.js

これらのコンポーネントは関数であり、関数名を要素名とした HTML タグにより参照することができる。

```tsx
// MyButton.tsx
const MyButton: FC<Props> = (props) => { ... };
export default MyButton;

// App.tsx
import MyButton from "./MyButton.tsx";

const MyButton2: FC<Props> = (props) => { ... };

const App: FC = () => {
	return (
		<MyButton label="Click Me" />
		<MyButton2 label="Click Me" />
	);
};
```

故に、要素名には JavaScript の変数名として利用可能な PascalCase や camelCase、 snake_case を利用することができる。おそらく PascalCase が推奨されている。

#### Vue, Svelte

Vue, Svelte でもコンポーネントファイルからインポートすることを踏まえると、変数名と同じルールで PascalCase、 camelCase、 snake_case のいずれかである。

```vue
<script setup lang="ts">
import MyButton from "./MyButton.vue";
</script>

<template>
	<MyButton label="Click Me" />
</template>
```

```svelte
<script lang="ts">
import MyButton from "./MyButton.svelte";
</script>

<MyButton label="Click Me" />
```

#### Angular

Angular ではクラスに対する `@Component` デコレータにおいて文字列を使って要素名を指定するために、 kebab-case でも snake_case でも PascalCase でも camelCase でも利用可能である。おそらく kebab-case が推奨されている。
別のコンポーネントを使用するには `imports` でクラスを与えなければ認識されない。

```ts
// MyButton.ts
@Component({
	selector: "my-button",
	standalone: true,
	template: ``
})
export class MyButton { ... }
export default MyButton;

// App.ts
import MyButton from "./MyButton.ts";

@Component({
	selector: "app",
	standalone: true,
	imports: [ MyButton, MyButton2 ]
	template: `
		<my-button label="Click Me" />
		<my-button-2 label="Click Me" />
	`
})
export class App { ... }
```

#### Lit

Lit は一番ややこしい。 Angular と同様に `@customElement` デコレータ内で要素名を文字列で指定できるのたが、次の制約を受ける。

* 必ず kebab-case にしなければならない。
* HTML 標準の要素と区別するために、必ずハイフンを使って2語以上を繋いだような要素名にしなければならない。
	*　つまり、コンポーネント名として `app` は許されず、必ず `app-view` などとしなければならない。

また、 Angular では `imports` にクラスを指定したコンポーネントのみを使用することができたが、 Lit では `imports` のような機構がないため、特に指定しなくてもあらゆるカスタムコンポーネントを使用することができそうである。言い方を変えれば...

* `import "./MyButton.ts";` のような JavaScript の `import` 文でコンポーネントが確実に1回は読み込まれていたら、どこにあっても使用できそう。
* プロジェクト全体で要素名が衝突するようなことがあってはならない。
* Angular と同様に要素の属性は TypeScript による型チェックが行われないが、 Lit ではさらに、指定した要素名のコンポーネントの存在までもチェックされない。

さらにややこしいことに、 Lit のテンプレート中では `input` 要素や `img` 要素のように「内側に内容を持たない要素」であっても、 `<input />` のように記載することはできず、必ず `<input></input>` などのように記載しなければならない。もちろんこれは内側に内容を持たないカスタムコンポーネントに対しても同様である。

```ts
// MyButton.ts
@customElement("my-button")
export class MyButton extends LitElement { ... }
export default MyButton;

// App.ts
import MyButton from "./MyButton.ts"; // どこかで import していればそれで十分

@customElement("app-view")
export class App extends LitElement {
	render() {
		return html`
			<my-button label="Click Me"></my-button>
		`;
	}
}
```

### コンポーネント・ノードの型

コンポーネントを変数として扱ったりする場合もあるので、コンポーネントを表す型が用意されていた方が良い。

#### React, Preact, Solid.js

React, Preact, Solid.js では、関数がコンポーネントを構成することで共通しており、この関数を表すための型が用意されている。

| | 型 | |
|:--:|:--:|:--|
| React | `FC<P>` | from `"react"` |
| Preact | `Preact.FunctionalComponent<P>` | from `"preact"` |
| Solid.js | `Component<P>` | from `"solid-js"` |

* 型パラメータ `P` には受け取れる属性に該当するオブジェクトの型を指定する。
* 基本的には `(props: P) -> [JSX の型]` のエイリアスである。特に Solid.js は他の引数などもなく、純粋にこの形の関数として型定義されている。

JSX 記法で生成される、単一の要素を表す型として、次のものがそれぞれ用意されている。

| | 型 | |
|:--:|:--:|:--|
| React | `JSX.Element` | from `"react"` |
| Preact | `JSX.Element` | from `"preact"` |
| Solid.js | `JSX.Element` | from `"solid-js"` |

これらは関数コンポーネントの型として `FC` などを使わずに自作する必要がある場合に、返値の型として使用することができる。

* React, Preact には `JSX.Element` の他にそれぞれ `ReactNode` や `ComponentChildren` が用意されている。これらは `JSX.Element` の他に `string` や `number`, `undefined` などの論理和型になったものである。後述する子要素を扱う際の型として利用することができる。
* React, Preact では同じ `JSX.Element` を何回でも使い回すことができるが、 Solid.js では使い回すことができない。複数の箇所で同じ JSX を使いたければ、同じ内容の JSX を生成するように工夫しなければならない。

#### Vue.js, Svelte

Vue.js や Svelte では、おそらく `.vue` ファイルや `.svelte` ファイルで定義されたコンポーネントを包括的に扱う型は存在する。それぞれ `DefineComponent` や `SvelteComponent` である。

```ts
// Vue.js
import type { DefineComponent } from "vue";
// Svelte
import type { SvelteComponent } from "svelte";
```

これらの型は型パラメータを持ち、コンポーネントごとに特有の型が当てはまると考えられるが、 React の `FC` 型のように単一の型パラメータだけ渡せば使えるという簡単なものではなさそうだ。ゆえにこれらの型を直接扱うというのは難しそうだ。

一方で、ファイルからインポートしたコンポーネント自体の型を取るのは簡単である。 TypeScript 組み込みの `InstanceType` 型と、 `typeof` キーワードを使って取り出せる。

```ts
import Buttons from "./Buttons.vue";
// or
import Buttons from "./Buttons.svelte";

type ButtonsType = InstanceType<typeof Buttons>;
```

インポートされる `Buttons` コンポーネントがどのような JavaScript のデータ構造なのかよく分からないが、 `InstanceType` を挟むことで型が得られるということから、 `Buttons` はクラス定義であり、そのインスタンスの型を取ったと考えられる。

あるコンポーネントに対し、取りうる全ての属性を1つにまとめたオブジェクトの型は、上記で取り出した型を使って次のように得られる。

```ts
// Vue.js
type ButtonsProps = ButtonsType["$props"];
// Svelte
import { CompomnentProps } from "svelte";
type ButtonsProps = ComponentProps<ButtonsType>;
```

但し、 Vue.js の場合にこの方法で型を得ると、実際の型以上に結構複雑な型が返ってくるので、あまり使い勝手は良くないかもしれない。

`React.FC<Props>` のように、特定の形式の属性を持った任意のコンポーネントを受け取るための型を定義することはできる。
また、こうして変数として受け取ったコンポーネントをテンプレート中で使用するための方法も存在する。
以下には特定の属性形式を持ったコンポーネントを属性として受け取り、それをそのまま表示するだけのコンポーネントの実装例を示している。

* Vue.js の場合

	```vue
	<!-- Wrapper.vue -->
	<script setup lang="ts">
	import type { DefineComponent, Component } from "vue";

	// 対象コンポーネントの属性の形式
	type ButtonProps = {
		label: string;
		disabled?: boolean;
	};
	// 対象コンポーネントの型
	type ButtonComp = DefineComponent<ButtonProps>;

	// このコンポーネントの属性の形式
	// 対象コンポーネントにそのまま渡す
	type Props = {
		buttonComp: ButtonComp;
	} & BBProps & Component;
	</script>

	<template>
		<component :is="props.buttonComp" :="props" />
	</template>

	<!-- Parent.vue -->
	<script setup lang="ts">
	import Button from "./Button.vue";
	import Wrapper from "./Wrapper.vue";
	</script>

	<template>
		<Wrapper :buttonComp="Button" label="Click Me" :disabled="false" />
	</template>
	```

* Svelte

	```svelte
	<!-- Wrapper.svelte -->
	<script lang="ts">
		import type { SvelteComponent } from "svelte";

		// 対象コンポーネントの属性の形式
		type ButtonProps = {
			label: string;
			disabled?: boolean;
		};
		// 対象コンポーネントの型
		type ButtonComp = $$Generic<typeof SvelteComponent<ButtonProps>>;
		
		// このコンポーネントの属性
		export let buttonComp: ButtonComp;
		// 対象コンポーネントにそのまま渡す属性
		export let props: ButtonProps;
	</script>
	
	<svelte:component this={buttonComp} {...props} />

	<!-- parent.svelte -->
	<script lang="ts">
		import Button from "./Button.svelte";
		import Wrapper from "./Wrapper.svelte";
	</script>

	<!-- `props` の中身を直接属性として表す方法はなさそう -->
	<Wrapper buttonComp={Button} props={{ label: "Click Me", disabled: false }} />
	```

#### Vue.js (仮想DOM)

一方で Vue.js には `.vue` で定義されるコンポーネントとは別に、 React と同様の仮想 DOM の機構が用意されており、値として扱うことができる。
また、 JSX でも表現可能。

```vue
<script setup lang="tsx">
import { h, type VNode, ref } from "vue";

const vNode1: VNode = h("div", { "id": "vnode-div-1"}, "Hello from VNode");
const vNode2: VNode = <div id="vnode-div-2">Hello from VNode</div>;

const vNode1Ref = ref<VNode>(vNode1);
const vNode2Ref = ref<VNode>(vNode2);
</script>

<template>
	<!-- 仮想DOMをテンプレート中に埋め込む -->
	<component :is="vNode1Ref" />
	<component :is="vNode2Ref" />
</template>
```

上記の例のように、 `ref` に `VNode` を与えることで、テンプレート中に埋め込んだり、後で仮想DOMの内容を書き換えたりすることができる。

#### Lit

Lit では `LitElement` が全てのコンポーネントの親クラスになっている。これは DOM の `HTMLElement` 型の拡張となっているため、クラス定義から `addEventListener` や `className` などといったお馴染みの名前のメソッドやプロパティを使用することができる。

文字列の先頭に (関数である) `html`, `css`, `svg` を付加することで HTML などとして解析されるということであったが、 `html` などを付加した文字列は専用の型で扱われる。

| 関数 | 返値の型 |
|:--:|:--:|
| `html` | `TemplateResult<1>` |
| `svg` | `TemplateResult<2>` |
| `css` | `CSSResult` |

※ `svg` は `<svg></svg>` の内部のデータを扱うのに特化した型で、 `<svg></svg>` 要素も含む全体を扱うのであれば通常通り `html` を使用した方が良さそうである。

これらは最初に示したコード例のように `render()` メソッドや `styles` プロパティで返したり与えたりするのみならず、 React の `JSX.Element` のようにコード断片の値として扱うことができ、別の `html` を付加した文字列中に埋め込むこともできる。

#### その他

Angular ではおそらくコンポーネントを包括的に扱う型は用意されていないし、 React の `JSX.Element` のように要素のツリーを扱うための型もおそらく用意されていない。
但し、 Vue.js では JSX が使用可能なので、それについては単独で扱うことは可能だろう。

### 子要素へのアクセスの仕方

`<div> <input /> </div>` のように、 `div` 要素は内側にコンテンツを含めることができ、カスタムコンポーネントであっても内部にコンテンツを含めることができる。

#### React, Preact

React, Preact では関数コンポーネントの引数で `children` フィールドを加えることにより受け取れる。
`children` フィールドは、 React では `reactNode` 、 Preact では ChildComponent にしておく。

```tsx
import { ReactNode } from "react";

interface Props {
	children: ReactNode;
};
const MyBox: FC<Props> = (props) => {
	return (
		<div id="box">
			{props.children}
		</div>
	);
};

const App: FC = () => {
	return (
		<MyBox>
			<input type="button" value="Click Me" />
		</MyBox>
	);
};
```

#### Solid.js

Solid.js は  React, Preact と似ているが微妙に異なる。
引数で `children` フィールドを使って受け取り、 `children` 関数を通す。

```tsx
import { JSX, children } from "solid-js";

interface Props {
	children: JSX.Element;
};
const MyBox: FC<Props> = (props) => {
	const getChildren = children(() => props.children);

	return (
		<div id="box">
			{getChildren()}
		</div>
	);
};
```

#### Vue.js, Svelte

Vue.js や Svelte ではテンプレート中で `<slot />` を記載することにより、その部分に展開される。

```vue
<script setup lang="ts">
</script>

<template>
	<div id="box">
		<slot />
	</div>
</template>
```

```svelte
<script lang="ts">
</script>

<div id="box">
	<slot />
</div>
```

公式ドキュメントには複数個の slot を設定する場合も説明されているが、自分の中では使い道がなかったので調べていない。

#### Angular

Angular では `<ng-content />` と記載すると展開される。

```ts
@Component({
	selector: "my-box",
	standalone: true,
	template: `
		<div id="box">
			<ng-content />
		</div>
	`
})
export class MyBox {}
```

#### Lit

Lit では `<slot></slot>` と記載すると展開される。

```ts
@customElement("my-box")
export class MyBox extends LitElement {
	render() {
		return html`
			<div id="box">
				<slot></slot>
			</div>
		`;
	}
}
```

しかし、後述する Shadow DOM を使わない場合では `<slot></slot> の箇所に展開されじ、代わりにテンプレートの先頭に展開されてしまうことが知られている。なので、代わりの方法を用意しなくてはならない。例えば次のように属性として与えるという方法でもさほど苦しいものにはならない。

```ts
@customElement("my-box")
export class MyBox extends LitElement {
	@property()
	private inner!: TemplateResult;

	createRenderRoot() { return this; }
	render() {
		return html`
			<div id="box">
				${this.inner}
			</div>
		`;
	}
}

@customElement("app-view")
export class App extends LitElement {
	render() {
		return html`
			<my-box .inner=${html`
				<input type="button" value="Click Me"></input>
			`}></my-box>
		`;
	}
}
```

### 状態変数の定義の仕方

状態変数は、コンポーネント内部で保持される変数であり、この値が変化すると再度コンポーネントがレンダリングされる。子コンポーネントに渡すこともできる。

#### React, Preact

React, Preact では `useState` 関数により状態変数やそのセッターを用意することができる。

```ts
import { useState } from "react";
// または
import { useState } from "preact/hooks";

const [counter, setCounter] = useState<number>(0);
```

上記の `number` 型の状態変数であれば、 `counter` が `number` 型の値そのもの、 `setCounter` がセッターとなっており、引数として新しい値を渡すか、新しい値を返す関数を与える。

```ts
setCounter(1);
// 或いは
setCounter( (previousValue) => previousValue + 1 );
```

| | セッター関数の型 |
|:--:|:--:|
| React | `Dispatch<SetStateAction<T>>` from `"react"` |
| Preact | `Dispatch<StateUpdater<T>>` from `"preact/hooks"` |

ここで現れる型は具体的には次のように定義されている。

| | |
|:--:|:--|
| `Dispatch<T>` | = `(value: T) => void` |
| `SetStateAction<T>`<br>`StateUpdater<T>` | = `T \| ((prevValue: T) => T)` |

つまり、セッターを実行する際には新しい値か、或いは前の値を受け取って新しい値を返す関数を渡す。

#### Solid.js

React, Preact に似ているが、実際の値の代わりにゲッター関数が返される。

```ts
import { createSignal } from "solid-js";

const [getCounter, setCounter] = createSignal<number>(0);
// 値を読み出す時は
getCounter();
// 値を書き込む時は
setCounter(1);
setCounter((previousValue) => previousValue + 1);
```

#### Vue

`ref` 関数により与えられるオブジェクトを介して管理できる。

```ts
import { ref } from "vue";

const counter = ref<number>(0);
// 値を読み出す時は
counter.value;
// 値を書き込む時は
counter.value = 1;
```

#### Svelte

単純に `let` を使って変数宣言するだけで状態変数として扱われる。

```ts
let counter: number = 0;
```

状態変数としては他に `svelte/store` で定義されている `Writable`, `Readable` を使用する方法もある。これは Svelte に用意されている、コンポーネント間で状態変数を簡単に共有できるようにする仕組みである。2者の違いは他所から状態変数に書き込みできるか否かである。

```svelte
<script lang="ts">
	import { type Writable, type Readable, readable, writable } from "svelte/store";

	// 変数の定義
	const counterW: Writable<number> = writable(0);
	const counterR: Readable<number> = readable(0);

	// writable は `set` や `update` を使って値を設定することができる。
	counterW.set(1); // 新しい値の指定
	counterW.update((oldVal) => oldVal + 1); // 現在の値から新しい値を生成

	// readable も writable も subscribe を使って値を読み出すことができる
	// 値の更新時に関数が実行されて返される
	counterR.subscribe((newVal) => {
		console.log(newVal);
	});
	let currentValue: number;
	counterW.subscribe((newVal) => {
		currentVal = newVal;
	});

	// 或いは簡単に get で値を取得することもできる (内部的には subscribe を使ってる?)
	const doubledCounter = () => counterR.get() * 2;
</script>

<!-- テンプレート中からは get の代わりに $ を使って取り出すこともできる -->
<div>The current value is: {$counterW}</div>
```

readable でも writable でも定義時に第2引数でコールバック関数を指定できる。これは初めて subscribe が呼び出された際のみに実行される関数で、渡されたセッター関数を使って値を書き換えることができる。というか readable の値を書き換える唯一の方法っぽい。

```ts
const counterR: Readable<number> = readable<number>(0, (setCount) => {
	setInterval(() => {
		setCount(counterR.get() + 1);
	}, 1000);
});
```

#### Angular

クラスのインスタンス変数として定義すれば状態変数となる。

```ts
@Component({ ... })
export class MyButton {
	protected counter: number = 0;
}
```

#### Lit

`@state()` デコレータを付したインスタンス定数として定義すれば状態変数になる。

```ts
@customElement("my-button")
export class MyButton extends LitElement {
	@state()
	private counter: number = 0;
}
```

### テンプレート中での値の埋め込み方

#### React, Preact, Solid.js, Svelte

React, Preact, Solid.js はどれも JSX で表記するため同じである。
Svelte は JSX と大体同じであるため、ここでまとめて扱う。

JSX や Svelte テンプレート中では属性を HTML と同じように記述することができ、 `string` 型の値として渡される。

```tsx
<button title="Click here to run the action">Click Me</button>
```

変数や式を与える場合は `{}` で記載する。
`string` 以外の型の値を与えることもできる。

```tsx
const [isInactive, setIsInactive] = useState<boolean>(false);
return (
	<button
		disabled={isInactive}
		title={`The button${isInactive ? " (inactive)" : ""}`}
	>Click Me</button>
);
```

`boolean | undefined` 型の属性であれば、属性指定の有無によって値を決定することもできる。

JSX でイベントハンドラは `onClick` のような名前の属性になっている。

```tsx
const handleClick = () => { ... };
return (
	<button onClick={handleClick}>
		Click Me
	</button>
);
```

Svelte の場合、 `on:click` のような名前の属性になっている。

```svelte
<script lang="ts">
	const handleClick = () => { ... };
</script>
<button on:click={handleClick}>
	Click Me
</button>
```

オブジェクトで属性のキーと値を定義して、まとめて渡すことができる。

```tsx
const [isInactive, setIsInactive] = useState<boolean>(false);

const buttonProps = {
	disabled: isInactive,
	title: `The button${isInactive ? " (inactive)" : ""}`,
}
return <button {...buttonProps}>Click Me</button>;
```

属性だけでなく、テキストや HTML 自体も構築できる。
JSX 中や Svelte のテンプレート中では `${}` ではなく単純に `{}` で埋め込むことができる。

```tsx
const label = "Click Me";
return (
	<button title="Click here to run the action">
		{label}
	</button>
);
```

#### Vue.js

テンプレート中で HTML と同じように記述すると `string` 型の値として渡される。

```vue
<template>
	<button title="Click here to run the action">Click Me</button>
</template>
```

変数や式などを扱う場合は属性名の先頭に `:` を付ける。
`string` 以外の型の値を与えることもできる。

```vue
<script setup lang="ts">
const isInactive = ref<boolean>(false);
</script>
<template>
	<button
		:disabled="isInactive.value"
		:title="`The button${isInactive.value ? " (inactive)" : ""}`"
	>Click Me</button>
</template>
```

イベントハンドラは `@click` のような表記になる。

```vue
<script setup lang="ts">
	const handleClick = () => { ... };
</script>
<template>
	<button @click="handleClick">
		Click Me
	</button>
</template>
```

オブジェクトで属性のキーと値を定義して、まとめて渡すことができる。

```vue
<script setup lang="ts">
const isInactive = ref<boolean>(false);
const buttonProps = computed(() => (
	{
		disabled: isInactive.value,
		title: `The button${isInactive.value ? " (inactive)" : ""}`,
	}
));
</script>
<template>
	<button :="buttonProps.value">Click Me</button>
</template>
```

属性だけでなく、テキストや HTML 自体も構築できる。
Vue のテンプレート中では `${}` ではなく `{{}}` で埋め込むことができる。

```vue
<script setup lang="ts">
const label = "Click Me";
</script>
<template>
	<button title="Click here to run the action">
		{{ label }}
	</button>
</template>
```

#### Angular

テンプレート中で HTML と同じように記述すると `string` 型の値として渡される。

```ts
@Component({
	...
	template: `
		<button title="Click here to run the action">
			Click Me
		</button>
	`
})
export class App { ... }
```

変数や式などを扱う場合は属性名を `[]` で囲む。
`string` 以外の型の値を与えることもできる。
`this.` を付ける必要はない。

```ts
@Component({
	...
	template: `
		<button
			[disabled]="isInactive"
			[title]="titleText"
		>Click Me</button>
	`
})
export class App {
	protected isInactive: boolean = false;
	protected get titleText(): string {
		return `The button${this.isInactive ? " (inactive)" : ""}`;
	}
}
```

イベントハンドラは `()` で囲んで `(click)` のような表記になる。
第1引数が `$event` 変数で与えられる。

```ts
@Component({
	...
	template: `
		<button (click)="handleClick($event)">
			Click Me
		</button>
	`
})
export class App {
	protected handleClick() { ... }
}
```

属性だけでなく、テキストや HTML 自体も構築できる。

```ts
@Compoment({
	...
	template: `
		<button title="Click here to run the action">
			{{ label }}
		</button>
	`
})
export class App {
	protected label = "Click Me";
}
```

#### Lit

テンプレート中で HTML と同じように記述すると `string` 型の値として渡される。

```ts
@customElement("app-view")
export class AppView extends LitElement {
	render() {
		html`
			<button title="Click here to run the action">
				Click Me
			</button>
		`;
	}
}
```

変数や式などを扱う場合は通常の JavaScript と同じように `${}` の記法を使う。
`string` 以外の型の値を与えることもできる。値をタブルクォートで囲むか否かは自由である。
通常は HTML の属性として値が与えられるが、 JavaScript のプロパティとして与える (= `string` 以外の値を与えることもできる) には属性名の先頭に `.` (ドット) を付ける。

```ts
@customElement("app-view")
export class AppView extends LitElement {
	@state()
	private isInactive: boolean = false;
	private get titleText(): string {
		return `The button${this.isInactive ? " (inactive)" : ""}`;
	}
	render() {
		return html`
			<button
				title="${this.title}"
				.disabled=${this.isInactive}
			>Click Me</button>
		`;
	}
}
```

イベントハンドラは `@click` のような表記になる。

```ts
@customElement("app-view")
export class AppView extends LitElement {
	private handleClick() { ... }
	render() {
		return html`
			<button @click=${this.handleClick}>
				Click Me
			</button>
		`;
	}
}
```

属性だけでなく、テキストや HTML 自体も構築できる。

```ts
@customElement("app-view")
export class AppView extends LitElement {
	private label = "Click Me";
	render() {
		return html`
			<button title="Click here to run the action">
				${this.label}
			</button>
		`;
	}
}
```

### 親子コンポーネント間でデータの受け渡しを行う方法

#### React, Preact, Solid.js

親子間のデータのやり取りは、子コンポーネントの `Props` の定義を介して行われる。
親→子では値をフィールドに含めて渡す。 `useState` / `createSignal` を介して値を用意して子に渡すことで、値の変化時には適切に再描画が実行されるだろう。
子→親では、 `useState` / `createSignal` のセッターや、親側で用意した関数を子に渡し、子がこれら関数を実行することで親に渡すことができ、適切に再描画がされたりするだろう。

```tsx
type Props = {
	count: number;
	setCount: React.Dispatch<React.SetStateAction<number>>;
};
export const MyButtons: FC<Props> = (props) => {
	const increment = () => props.setCount(props.count+1);
	const reset = () => props.setCount(0);
	return (
		<button onClick={increment}>
			Counter: {props.count}
		</button>
		<button onClick={reset}>Reset</button>
	);
};

export const App: FC = () => {
	const [count, setCount] = useState<number>(0);
	return <MyButtons count={count} setCount={setCount} />
};
```

#### Vue.js

親→子の受け渡しは、子で `defineProps` を使って用意された `props` を介して行われる。 `props` の型指定により受け取る値を定義できる。
子→親では `defineEmits` で生成された `emit` でイベントを発火させて、イベントハンドラで親の関数が実行されることにより、親にデータが渡る。 React のように `props` で関数を渡しても機能しないはず。

```vue
<!-- 子のコンポーネント (MyButtons.vue) -->
<script setup lang="ts">
type Props = {
	count: number;
};
const props = defineProps<Props>();

type Emits = {
	setCount: [number];
};
const emits = defineEmits<Emits>();

const increment = () => emits("setCount", props.count + 1);
const reset = () => emits("setCount", 0);
</script>

<template>
	<button @click="increment">
		Counter: {{ props.count }}
	</button>
	<button @click="reset">Reset</button>
</template>

<!-- 親のコンポーネント (App.vue) -->
<script setup lang="ts">
import { ref } from "vue";
import MyButtons from "./MyButtons.vue";

const count = ref<number>(0);
const setCount = (newVal: number) => count.value = newVal;
</script>

<template>
	<MyButtons
		:count="count.value"
		@setCount="setCount"
	/>
</template>
```

`defineProps` に使用する `Props` 型の各フィールドは JavaScript の規約に合わせて camelCase になっているだろうが、対応する親コンポーネントでの属性は Vue.js により kebab-case で扱われることに注意する。つまり、 props で `myAttr` というフィールドを用意したら、属性では `my-attr` でアクセスできるようになる。

#### Vue.js (双方向バインディング)

上記の例のように、同じ変数に対して親子間双方でやりとりしている場合、両方向のやり取りをひとまとめにして扱うことができる。
親では `ref` を使って読み書き可能な参照を用意しているが、 `defineModel` を使って同様のインターフェースで子でも読み書きができるようになっている。
`ref` は `Ref<T>` 型、 `defineModel` は `ModelRef<T>` 型を返す。

```vue
<!-- 子のコンポーネント (MyButton.vue) -->
<script setup lang="ts">
// `defineProps` と `defineEmits` はまとめて `defineModel` で扱えるようになる。
// 一方で、 `defineProps` と `defineEmits` は全ての変数とイベントをまとめて扱えたが、 `defineModel` は1つ1つの変数に対して用意する必要がある。
const count = defineModel<number>("count");

const increment = () => count.value += 1;
const reset = () => count.value = 0;
</script>

<template>
	<button @click="increment">
		Counter: {{ count.value }}
	</button>
	<button @click="reset">Reset</button>
</template>

<!-- 親のコンポーネント (App.vue) -->
<script setup lang="ts">
import { ref } from "vue";
import MyButton from "./MyButton.vue";

const count = ref<number>(0);
</script>

<template>
	<!-- `count` の参照を直に渡すだけで済む -->
	<MyButtons :count="count" />
</template>
```

`defineModel` を使うにあたっての注意点が2つある。
*`defineModel` の引数で指定される、属性名に対応する文字列は camelCase で記載しないと認識されない。そして、親での属性指定は kebab-case を使う。
	* 文字列で与えるんだし、親の属性指定は kebab-case なんだから、 `defineModel` にも kebab-case で与えたくなるが、動作しない。
* `defineModel` に指定する型はおそらくプリミティブ型でなければならない。
	* どうやら `defineModel` は型バリテーションを行っているようで、指定した型情報を参照しているらしい。プリミティブでない型を使用すると `defineModel` が機能しない。
	* 例えば `type RGB = "Red" | "Green" | "Blue";` のような列挙型を扱いたい場合は、次のように一旦プリミティブな `string` 型を通してからキャストして扱うようにした方が良さそうだ。

	```ts
	const colorChannel = defineModel<string>("colorChannel") as ModelRef<RGB>;
	```

`Ref<T>` や `ModelRef<T>` は、言わばゲッターとセッターを兼ね備えたものだと考えられるが、ゲッターとセッターを分離したり、逆にゲッターとセッターから `Ref<T>` を生成することもできる。これにより、単に値を横流しするだけでなく、何か処理を間に挟む、といったこともできる。

```ts
import { ref, computed } from "vue";

// ゲッター + セッター
const countRef = ref<number>(0);

// ゲッターとセッターに分離
const getCount = () => countRef.value;
const setCount = (newVal: number) => { countRef.value = newVal; };

// ゲッターとセッターを合わせた `Ref` を作成する
const countRef2 = computed({
	get: getCount, set: setCount
});
```

#### Svelte

親→子の受け渡しは、子において `export` が付加された変数を介して行われる。
子→親では、 `createEventDispatcher` で生成された `dispatch` 関数からイベントを発火させて、イベントハンドラで親の関数が実行されることにより、親にデータが渡る。 React のように関数を渡しても機能しないはず。

```svelte
<!-- 子のコンポーネント (MyButtons.svelte) -->
<script lang="ts">
	import { createEventDispatcher } from "svelte";
	const dispatch = createEventDispatcher();

	export let count: number;

	const increment = () => dispatch("setCount", count + 1);
	const reset = () => dispatch("setCount", 0);
</script>

<button on:click="increment">
	Counter: {count}
</button>
<button on:click="reset">Reset</button>

<!-- 親のコンポーネント (App.svelte) -->
<script lang="ts">
	import { MyButtons } from "./MyButtons.svelte";
	
	let count: number = 0;
	const setCount = (newVal: number) => count = newVal;
</script>

<MyButtons
	count={count}
	on:setCount={setCount}
/>
```

#### Svelte (双方向バインディング)

Vue.js と同様に親子間の双方向にやり取りできる方法がある。親での属性指定で `bind:` を付けることで実現する。

```svelte
<!-- 子のコンポーネント (MyButtons.svelte) -->
<script lang="ts">
	export let count: number;

	const increment = () => { count += 1; };
	const reset = () => { count = 0; };
</script>

<button on:click="increment">
	Counter: {count}
</button>
<button on:click="reset">Reset</button>

<!-- 親のコンポーネント (App.svelte) -->
<script lang="ts">
	import { MyButtons } from "./MyButtons.svelte";

	let count: number = 0;
</script>

<MyButtons bind:count={count} />
```

しかし、 Vue.js と違って、既存のゲッター、セッターをまとめる方法はない。

#### Svelte (writable を使う方法)

`svelte/store` の `writable` をコンポーネント間で渡せば、コンポーネント間で双方向にやり取りはできそうである。

```svelte
<!-- 子のコンポーネント (MyButtons.svelte) -->
<script lang="ts">
	import type { Writable } from "svelte/store";

	export let count: Writable<number>;

	const increment = () => { count.update(($count) => $count + 1); };
	const reset = () => { count.set(0); };
</script>

<button on:click="increment">
	Counter: {count}
</button>
<button on:click="reset">Reset</button>

<!-- 親のコンポーネント (App.svelte) -->
<script lang="ts">
	import { writable } from "svelte/store";
	import { MyButtons } from "./MyButtons.svelte";

	let count = writable<number>(0);
</script>

<MyButtons count={count} />
```

#### Angular

親→子の受け渡しは、子のクラス中で `@Input` デコレータが付加されたインスタンス変数を介して行われる。
子→親では、 `EventEmitter` をインスタンス変数で保持し、そこに `@Output` デコレータを付加し、`EventEmitter` 関数からイベントを発火させて、イベントハンドラで親の関数が実行されることにより、親にデータが渡る。
`@Input`, `@Output` デコレータの引数には親からアクセスするときの属性としての名称を指定する。

```ts
import { Component, Input, Output, EventEmitter } from "@angular/core";

@Component({
	selector: "my-buttons",
	standalone: true,
	template: `
		<button (click)="increment">
			Counter: {{ count }}
		</button>
		<button (click)="reset">Reset</button>
	`
})
export class MyButtons {
	@Input("count")
	protected count!: number;

	@Output("set-count")
	protected setCountEmitter = new EventEmitter<number>();
	protected setCount(newVal: number) {
		this.setCountEmitter.emit(newVal);
	}

	protected increment() {
		this.setCount(this.count + 1);
	}
	protected reset() {
		this.setCount(0);
	}
}

@Component({
	selector: "app",
	standalone: true,
	imports: [ MyButtons ]
	// 第1引数は `$event` 変数で与えられる。たとえ `number` 型であっても。
	template: `
		<my-buttons [count]="count" (set-count)="count = $event">
	`
})
export class App {
	protected count: number = 0;
}
```

#### Lit

親→子の受け渡しは、子のクラス中で `@property` デコレータが付加されたインスタンス変数を介して行われる。
子→親では、 Lit コンポーネントが `HTMLElement` クラスを継承していることを利用して、イベントを作成し。 `dispatchEvent` メソッドでイベントを発火させ、イベントハンドラで親の関数が実行されることにより、親にデータが渡る。

```ts
import { LitElement, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";

@customElement("my-buttons")
class MyButtons extends LitElement {
	@property()
	count!: number;

	private setCount(newVal: number) {
		const event = new CustomEvent("set-count", {
			detail: newVal,
			bubbles: false, composed: true
		});
		this.dispatchEvent(event);
	}

	private increment() { this.setCount(this.count+1); }
	private reset() { this.setCount(0); }

	render() {
		return html`
			<button @click=${this.increment}>
				Counter: ${this.count}
			</button>
			<button @click=${this.reset}>Reset</button>
		`;
	}
}

@customElement("app-view")
class AppView extends LitElement {
	@state()
	private count: number = 0;

	// 引数は `number` 型そのものではなく Event の形式になっていることに注意
	private countReceiver(event: { detail: number }) {
		this.count = event.detail;
	}

	render() {
		return html`
			<my-buttons
				.count=${this.count}
				@setCount=${this.countReceiver}
			></my-buttons>
		`;
	}
}
```

### コンポーネントの再レンダリング時の挙動

#### React, Preact

コンポーネント関数は `useState` で与えられた状態変数が変化する度に実行される。実行する度に得られる JSX から仮想 DOM を構成して差分を実際の DOM に反映させている。

一部の状態変数が変化した場合にのみ作用する処理を記述するには `useEffect` を使用する。第2引数には変化を監視する対象となる変数のリストを与える。

```ts
import { useState, useEffect } from "react";
// or
import { useState, useEffect } from "preact/hooks";

const [selected, setSelected] = useState<1|2|3>(1);

useEffect(() => {
	const previousTitle = document.title;
	document.title = `item ${selected} is selected`;
	console.log(`selected: ${selected}`);

	return () => { document.title = previousTitle; };
}, [selected]);
```

React コンポーネントは状態変数が同じであればレンダーされる DOM は同じになる「純粋関数」であることが期待されており、状態変数の変化に伴うレンダー以外の変化を記述するために `useEffect` 関数を使うこととされている。上記の例のように `document.title` の変更がまさにそれである。
純粋性を保つために監視対象の変数としては `useEffect` の関数内部で使用されている変数全てを本来は示さなくてはならないし、使用されていない変数は含んではいけないのだが、実際は純粋性を気にせず、呼び出されるタイミングを制御するために使用されることが多い。
`useEffect` のコールバック関数は戻り値として関数を返すことが任意でできる。これは次に状態が変化した際やコンポーネントが破棄された際に呼び出される関数で、「 `useEffect` で作用させた変化を元に戻す」ことに対応する。

状態変数に依存して与えられる値や関数は普通にコンポーネント関数内で変数定義すれば、状態変数が変化した際も新しい値を用いて定義し直される。しかし、こうした値や関数の再生成のコストが大きい場合や、不用意に再生成して欲しくない場合はそれぞれ `useMemo`, `useCallback` を使うことで、特定の状態変数が変化した場合にのみ再生成させる、といった制御が可能になる。

```ts
const [selected, setSelected] = useState<1|2|3>(1);

const description = useMemo(() => `The current value is: ${selected}`, [selected]);
const explain = useCallback(() => { console.log(description); }, [description]);
```

#### Solid.js

React と同じようなコンポーネント関数に見えるが、この関数は1度しか呼び出されない。状態変化しても呼び出されることはない。
これを踏まえると、以下の2点のことが言える。

* コンポーネント関数内で値を変数に置くような場面はあまり見かけられないだろう。
	* 1回しか呼び出されないので、値を直接変数においてしまうと状態の変化に対応できないからだ。
	* 逆に関数内の値とか参照オブジェクトに含まれる値とかであれば状態の変化に対応できる。 `createSignal` が `useState` と異なり実際の値の代わりにゲッター関数を返すのはこれが理由だと考えられる。
* React の `useCallback` に対応する概念は存在しない。
	* コンポーネント関数は1回しか呼び出されないのだから、その中で定義された関数も変化することはない。
	* つまり `useCallback` を通さずに直接関数を定義すればよい。

状態変数から値を計算する場合は、関数となるように記述する。

```ts
// React なら
const [firstName, setFirstName] = useState<string>("");
const [lastName, setLastName] = useState<string>("");
const fullName = `${firstName} ${lastName}`;
// firstName, lastName, fullName: string

// Solid.js なら
const [firstName, setFirstName] = createSignal<string>("");
const [lastName, setLastName] = createSignal<string>("");
// firstName, lastName: () => string
const fullName = () => `${firstName()} ${lastName()}`;
// firstName, lastName, fullName: () => string
```

React の `useMemo` に対応する概念として、 `createMemo` が存在する。依存関係に応じて必要な場合のみ計算される。
`useMemo` より軽量なので、割と多くのケースで `createMemo` を使うことができそう。 (流石に下記の例はオーバースペックだけど)

```ts
const fullName = createMemo(() => `${firstName()} ${lastName()}`);
```

また、 `useEffect` に対応する概念として `createEffect` が存在する。

```ts
const [selected, setSelected] = createSignal<1|2|3>(1);

createEffect(() => {
	const previousTitle = document.title;
	document.title = `item ${selected()} is selected`;
	console.log(`selected: ${selected()}`);

	return () => { document.title = previousTitle; };
});
```

`createEffect` と `createMemo` はどちらも依存関係を明示していないが、関数内で使用される状態変数を自動で検出し、依存する変数として扱うことができる。というのも、初めて `createMemo` や `createEffect` を実行した際にコールバック関数内でゲッター関数を呼び出すと、依存する変数としてカウントする機能を備えているから、このようなことができるようだ。

また、 `on` 関数を間に挟むことで、依存する変数を手動で指定することもできる。

```ts
createEffect(
	on([selected], () => {
		const previousTitle = document.title;
		document.title = `item ${selected()} is selected`;
		console.log(`selected: ${selected()}`);

		return () => { document.title = previousTitle; };
	})
);
```

最後にコンポーネント関数の返値である JSX について説明する。

```tsx
const MyStatus: Component = () => {
	const [selected, setSelected] = createSignal<1|2|3>(1);

	return (
		<div>The selected item is {selected()}</div>
	);
};
```

状態変数に依存してレンダーされる場合、上記のようにゲッター関数を実行した結果を埋め込む、という形式になっている。
1回しかコンポーネント関数が呼び出されないことを踏まえると、返値も1回しか評価されないため、上記を素直に JavaScript のコードとして読めば、 `selected` は (値が変化しても) JSX 上では最初の値が使い回されているようになるはずだ。だけど実際にはこんなおかしなコードでもちゃんと値の変化に対応したコンポーネントが生成される。
実は Solid.js ではビルド時に上記コードを状態変数の変化に対応するコードに変換してしまうのだ。

#### Vue.js

Vue.js の `<script></script>` の部分は Composition API を使っている場合、 Solid.js と同様に1度しか呼び出されない。
なので、値も `ref` や `defineProps` から返されるオブジェクトを介して操作することになるし、また React の `useCallback` に相当する概念はなさそう。

状態変数から値を計算する場合は、 `computed` を使用する。

```ts
import { ref, computed } from "vue";

const firstName = ref<string>("");
const lastName = ref<string>("");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
```

React の `useEffect` のように、状態変数の変化を監視して必要な場合のみ実行される関数を定義するには `watch` 或いは `watchEffect` を使用する。
`watch` は依存する変数を指定して扱うが、 `watchEffect` では自動追跡される。

```ts
const selected = ref<1|2|3>(1);

watch([selected], ([s]) => {
	// 第1引数で変化後の値を返す
	// 第2引数で変化前の値を返す
	document.title = `item ${s} is selected`;
	console.log(`selected: ${s}`);
});
// 或いは
watchEffect(() => {
	// 第1引数で変化後の値を返す
	// 第2引数で変化前の値を返す
	document.title = `item ${selected.value} is selected`;
	console.log(`selected: ${selected.value}`);
});
```

#### Svelte

Svelte の `<script></script>` の部分は少々扱いが特殊ではあるが、基本的には1度しか呼び出されないと考えた方が良い。
`const`, `let`　などの定義を後で新しく生やすことはできないが、 `let` は状態変数に使用するので、その値は後で書き換えられる。

状態変数から値を計算する場合は、次のように予め計算後の値を格納する変数を用意しておき、 `$:` を付けた行で変数に代入を行う。
複数行ある場合は `$: { ... }` で囲んで使用する。

```ts
let firstName: string = "";
let lastName: string = "";
let fullName: string;
$: fullName = `${firstName} ${lastName}`;
```

また、 `readable` や `writable` を使って状態変数を用意している場合は、 `derived` 関数を使って値を計算できる。

```ts
import { writable, derived } from "svelte/store";

const firstName = writable<string>("");
const lastName = writable<string>("");

const fullName = derived(
	[firstName, lastName],
	($firstname, $lastName) => `${$firstName} ${$lastName}`
);
```

`$:` で与える方法では依存する変数を手動で指定することはできないが、 `derived` であれば依存する変数を手動で指定でき、 React の `useMemo` と同等の機能を果たす。

#### Angular

Angular はクラスによってコンポーネントを規定するから、特に実行されるタイミングを言及するまでもないだろう。

状態変数から計算して値を得る場合について特に決まりはないが、例えばゲッターを使うと良さそうである。

```ts
@Component({ ... })
export class App {
	protected firstName: string = "";
	protected lastName: string = "";

	protected get fullName(): string {
		return `${this.firstName} ${this.lastName}`;
	}
}
```

`useEffect` や `createEffect`, `watch` に相当する機能は持っていない。なので手動で実装する必要があるだろう。
この時、状態変数の値が変更されたことをトリガーにして作動させることになるだろう。同一クラス内ならインスタンス変数に直接値をセットするのではなく、セッター関数を使って値を設定するようにすればトリガーでき、親コンポーネントとかからは `ngOnChanges` メソッドを使ってトリガーさせる必要がある。

```ts
import { Component, OnChanges, type SimpleChanges } from "@angular/core";

@Component({ ... })
export class App extends OnChanges {
	// `ngOnChanges` で監視するには `OnChanges` を継承する必要がある

	@Input("selected")
	selected: 1|2|3 = 1;

	// このコンポーネント内から書き換える場合には、このセッターを介して呼び出す
	protected setSelected(newVal: 1|2|3) {
		this.selected = newVal;
		this.onChangeSelected();
	}

	// 親コンポーネントから書き換えられた場合は、このイベントが呼び出される
	ngOnChanges(changes: SimpleChanges) {
		// selected が書き換わった場合
		if (changes["selected"]) this.onChangeSelected();
	}

	// 実際に呼び出される内容
	onChangeSelected() {
		document.title = `item ${this.selected} is selected`;
		console.log(`selected: ${this.selected}`);
	}
}
```

#### Lit

Lit も Angular と同じく、実行されるタイミングを明示する必要はないだろう。
また、 `useEffect` や `createEffect`, `watch` に相当する機能も持っていない。
Angular と同様に、セッター関数と、親コンポーネントからの変更を受け取るメソッドを用意して対応する。

```ts
import { LitElement, html, type PropertyValues } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("app-view")
export class AppView extends LitElement {

	@property()
	selected: 1|2|3 = 1;

	// このコンポーネント内から書き換える場合には、このセッターを介して呼び出す
	private setSelected(newVal: 1|2|3) {
		this.selected = newVal;
		this.onChangeSelected();
	}

	// 親コンポーネントから書き換えられた場合は、このイベントが呼び出される
	private updated(chagedProperties: PropertyValues) {
		// selected が書き換わった場合
		if (changedProperties.has("selected")) this.onChangeSelected();
	}

	// 実際に呼び出される内容
	onChangeSelected() {
		document.title = `item ${this.selected} is selected`;
		console.log(`selected: ${this.selected}`);
	}
}
```

### `class` 属性と `label` の `for` 属性

多くの HTML 要素で指定できる `class` 属性と、 `label` 要素に対する `for` 属性は JavaScript の予約語であるため、 DOM ではそれぞれ `className` と `htmlFor` フィールドからアクセスできるようになっている。
しかし、フレームワークによっては `class` や `for` 属性をテンプレートを記述できるようになっていたりする。
そこで、以下には各フレームワークの状況をまとめている。

| | `class` 属性 | `for` 属性 |
|--:|:--:|:--:|
| React | `className` | `htmlFor` |
| Preact | **`class`** / `className` | **`for`** / `htmlFor` |
| Solid.js | `class` | `for` |
| Vue.js | `class` | `for` |
| Svelte | `class` | `for` |
| Angular | `class` | `for` |
| Lit | `class` | `for` |

基本的に React 以外は `class`, `for` を使うことになっている。 Preact は互換性から両方に対応していると考えられる。

### 要素のDOMへのアクセス

テンプレート中の要素の DOM にアクセスする方法が用意されており、 DOM を直接操作することもできる。
TypeScript を使う場合は要素に対応する DOM での型を予め知っている必要がある。

#### React, Preact

`useRef` で DOM 型が入る参照を作っておいて `ref` 属性に与えることで、レンダー時に代入された状態になる。

```tsx
import { useRef } from "react";
// or
import { useRef } from "preact/hooks";

const MyTextBox = () => {
	const inputRef = useRef<HTMLInputElement|null>(null);

	const handleChange = () => {
		const input = inputRef.current;
		if (input == null) return;
		console.log(input.value);
	};

	return (
		<input
			ref={inputRef}
			type="text" onChange={handleChange}
		/>
	);
};
```

#### Solid.js

DOM 型の変数を作っておいて `ref` 属性に与えることで、レンダー時に代入された状態になる。

```tsx
const MyTextBox: Component = () => {
	let input!: HTMLInputElement;

	const handleChange = () => {
		console.log(input.value);
	};

	return (
		<input
			ref={input}
			type="text" onChange={handleChange}
		/>
	);
};
```

#### Vue.js

`ref` で DOM 型が入る参照を作っておいて `ref` 属性に与えることで、レンダー時に代入された状態になる。 `:ref` ではない。

```vue
<script setup lang="ts">
import { ref } from "vue";

const inputRef = ref<HTMLInputElement|null>(null);

const handleChange = () => {
	const input = inputRef.value;
	if (input == null) return;
	console.log(input.value);
};
</script>

<template>
	<input
		ref="inputRef"
		type="text" @change="handleChange"
	/>
</template>
```

#### Svelte

DOM 型の変数を作っておいて `bind:this` 属性に与えることで、レンダー時に代入された状態になる。

```svelte
<script lang="ts">
	let input: HTMLInputElement;

	const onChange = () => {
		console.log(input.value);
	};
</script>

<input
	bind:this={input}
	type="text" on:change={handleChange}
/>
```

#### Angular

参照のインスタンス変数を用意し、 `@ViewChild("selector")` デコレータを付け、テンプレート中で `#selector` の形でセレクタを指定することで、レンダー時に代入された状態になる。

```ts
import { Component. ViewChild, ElementRef } from "@angular/core";

@Component({
	selector: "my-text-box",
	standalone: true,
	template: `
		<input
			#myInputElement
			type="text"
			(change)="handleChange"
		/>
	`
})
export class Input {
	@ViewChild("myInputElement")
	inputRef!: ElementRef<HTMLInputElement>;

	protected handleChange() {
		const input = this.inputRef.nativeElement;
		console.log(input.value);
	}
}
```

#### Lit

DOM 型のインスタンス変数を用意し、 `@query` デコレータで対象要素にマッチする CSS セレクタを指定することで、レンダー時に代入された状態になる。
後述するように Shadow DOM で構築されることから、セレクタにマッチするのはコンポーネント内の要素のみだと考えられる。

```ts
import { LitElement, html } from "lit";
import { customElement, query } from "lit/decorators.js";

@customElement("my-text-box")
export class MyTextBox extends LitElement {
	@query('input[type="text"]')
	private input!: HTMLInputElement;

	private handleChange() {
		console.log(this.input.value);
	}

	render() {
		return html`
			<input type="text" @change=${this.handleChange} />
		`;
	}
}
```

### テンプレート中の制御構文 (条件分岐やループ)

条件にレンダーされる内容を変えたり、有限回同じコンポーネントを作ったり、リストに対応するコンポーネントを作ったりする必要がある。そういうケースに対処するためにテンプレート内で `if` 構文や `for` 構文が使えるようになっている。

どのフレームワークにおいても `for` 構文を使う際には `key` の指定が推奨される。これは要素ごとに一意に決まるプリミティブ型の値を `key` として与えることで、再描画の前後で要素の対応付けを行い、対応した要素同士を比較することで効率よく描画を行えるようにする仕組みである。要素の増減にも対応しやすいだろう。
`for` 構文の外で `key` を指定する場合もある。例えば意図的に `key` の値を書き換えることで強制的に再描画を発生させる、といった使い方がされている。

#### React, Preact, Solid.js

これらは JSX を使用しており、制御構文は JavaScript の記法に従う。

条件分岐であれば次のように `if` 文や3項演算子で表現可能。

```tsx
const isExpired: boolean = false;
const isInvalid: boolean = false;

if (isExpired) return <span>Timed out</span>;
else if (isInvalid) return <span>Invalid request</span>;
else return <button>Proceed</button>;
// or
return (
	{
		isExpired ? <span>Timed out</span> :
		isInvalid ? <span>Invalid request</span> :
		<button>Proceed</button>
	}
);
```

リストからコンポーネントを生成する場合は、リストに対して `map` を実行して、返値のリストを埋め込む。
キーは `key` 属性で与える。
但し Solid.js においては `key` 属性を与える必要はない。

```tsx
const numbers = ["One", "Two", "Three"];
return (
	{numbers.map((numStr) => (
		<div key={numStr}>{numStr}</div>
	))}
);
```

整数個の要素を作る場合は、 `Array.from` を使う方法でリストを作成して `map` する。

```tsx
const num = 4;

return (
	{Array.from({ length: num }).map((,index) => (
		<span key={index}></span>
	))}
);
```

#### Vue.js

条件分岐であれば次のように対象となる要素に `v-if`, `v-else-if`, `v-else` 属性で条件を与える。

```vue
<script setup lang="ts">
const isExpired: boolean = false;
const isInvalid: boolean = false;
</script>
<template>
	<span v-if="isExpired">Timed out</span>
	<span v-else-if="isInvalid">Invalid request</span>
	<button v-else>Proceed</button>
</template>
```

複数の要素を条件分岐に組み込みたい場合や、構造を明確化したい場合には `template` 要素の中に内容を入れて使う。

```vue
<template>
	<template v-if="isExpired">
		<span>Timed out</span>
	</template>
	<template v-else-if="isInvalid">
		<span>Invalid request</span>
	</template>
	<template v-else>
		<button>Proceed</button>
	</template>
</template>
```

リストからコンポーネントを生成する場合は、対象とする要素 or `template` 要素 (複数要素の場合とか) に `v-for` 属性を加える。キーは同じ要素に対する `:key` 属性を使用する。

```vue
<script setup lang="ts">
const numbers = ["One", "Two", "Three"];
</script>
<template>
	<div
		v-for="numStr in numbers"
		:key="numStr"
	>{{ numStr }}</div>
</template>
```

整数個の要素を作る場合は、リストの代わりに整数を与えれば同様にできる。

```vue
<script setup lang="ts">
const num = 4;
</script>
<template>
	<span v-for="index in num" :key="index"></span>
</template>
```

#### Svelte

条件分岐であれば次のように `#if` - `:else if` - `:else` - `/if` 節を使用する。

```svelte
<script lang="ts">
	const isExpired: boolean = false;
	const isInvalid: boolean = false;
</script>

{#if isExpired}
	<span>Timed out</span>
{:else if isInvalid}
	<span>Invalid request</span>
{:else}
	<button>Proceed</button>
{/if}
```

リストからコンポーネントを生成する場合は `#each` - `/each` 節を使用する。キーは `#each` 節の末尾の括弧 `()` で指定する。

```svelte
<script lang="ts">
	const numbers = ["One", "Two", "Three"];
</script>

{#each numbers as numStr (numStr)}
	<div>{numStr}</div>
{/each}
```

整数個の要素を作る場合は、 `Array.from` を使う方法でリストを作成して `#each` 節を使用する。

```svelte
<script lang="ts">
	const num = 4;
</script>

{#each Array.from({ length: 4 }) as _,index (index)}
	<span></span>
{/each}
```

他のフレームワークと異なり、キーは属性によるものではないので、再描画するかどうかを決めるためのキーを指定するための以下のような専用の構文がある。
`currentKey` の値が変更されたら再描画される。

```svelte
{#key currentKey}
	<div>{new Date()}</div>
{/key}
```

#### Angular

Angular テンプレート中で使用する変数は全てインスタンス変数か、テンプレート中で `@let` を使って定義された変数でなければならない。つまり、 `static` のついたクラス変数や、クラス外のどこかで定義された変数にはアクセスできないようである。
また、オブジェクトのメンバーにアクセスするためのドット演算子も使えない場合がある。

条件分岐であれば次のように `@if` - `@else if` - `@else` 節を使用する。

```ts
@Component({
	...
	template: `
		@let isExpired = false;
		@let isInvalid = false;
		@if (isExpired) {
			<span>Timed out</span>
		}
		@else if (isInvalid) {
			<span>Invalid request</span>
		}
		@else {
			<button>Proceed</button>
		}
	`
})
export class CondState {}
```

また、 JavaScript の `switch` 文に相当する `@switch` 節も存在する。

```ts
@Component({
	...
	template: `
		@switch (index) {
			@case (1) { <span>First item</span> }
			@case (2) { <span>Second item</span> }
			@case (3) { <span>Third item</span> }
			@default { <span>Other item</span> }
		}
	`
})
export class CondState {
	const index: number = 1;
}
```

リストからコンポーネントを生成する場合は `@for` 節を使用する。キーは `@for` 節の引数の2つ目の項の `track` で指定する。

```ts
@Component({
	...
	template: `
		@let numbers = ["One", "Two", "Three"];
		@for (numStr of numbers; track numStr) {
			<div>{{ numStr }}</div>
		}
	`
})
export class CondState {}
```

通常は `@for` 構文を使えば良いが、たまにうまくいかないことがある。その場合は次の `*ngFor` 属性を使用する方法もある。

```ts
import { CommonModule } from "@angular/common";

@Component({
	...
	imports: [ CommonModule ],
	template: `
		<div *ngFor="numStr of numbers; trackBy: numStrForTracking">{{ numStr }}</div>
	`
})
export class CondState {
	protected numbers = ["One", "Two", "Three"];
	// trackBy にはインスタンスで定義された関数を入れないと機能しないので、こんな恒等関数を用意して渡す必要がある。
	protected numStrForTracking(numStr: string) { return numStr; }
}
```

整数個の要素を作る場合は、 `Array.from` を使う方法でリストをインスタンス変数で作成して `@for` 節を使用する。

```ts
@Component({
	...
	template: `
		@for (index of indexes; track index) {
			<span></span>
		}
	`
})
export class CondState {
	// `Array` はインスタンス変数ではないので、 `@let` 式で `indexes` を用意できない。
	protected indexes = Array.from({ length: 4 });
}
```

#### Lit

Lit では JSX と同様に JavaScript に依拠している。

条件分岐であれば次のように `if` 文や3項演算子で表現可能。

```ts
@customElement("cond-state")
class CondState extends LitElement {
	private isExpired: boolean = false;
	private isInvalid: boolean = false;
	
	render() {
		if (isExpired) return html`<span>Timed out</span>`;
		else if (isInvalid) return html`<span>Invalid request</span>`;
		else return html`<button>Proceed</button>`;
	}
	// or
	render() {
		return html`
			${
				isExpired ? html`<span>Timed out</span>` :
				isInvalid ? html`<span>Invalid request</span>` :
				html`<button>Proceed</button>`
			}
		`;
	}
}
```

リストからコンポーネントを生成する場合は、専用の `repeat` 関数を用いて処理を行い、返値を埋め込む。
キーは第2引数の関数の戻り値として指定できる。

```ts
import { repeat } from "lit/directives/repeat.js";

const numbers = ["One", "Two", "Three"];

@customElement("cond-state")
class CondState extends LitElement {
	render() {
		return html` ${repeat(
			// 配列
			numbers,
			// キーを返す関数
			(numStr) => numStr,
			// レンダー内容を返す関数
			(numStr) => html`<div>${numStr}</div>`,
		)} `;
	}
}
```

整数個の要素を作る場合は、 `Array.from` を使う方法でリストを作成して `repeat` 関数を用いる。

```ts
const num = 4;

@customElement("cond-state")
class CondState extends LitElement {
	render() {
		return html` ${repeat(
			Array.from({ length: num }),
			(_,index) => index,
			() => html`<span></span>`,
		)} `;
	}
}
```

### 展開された時の DOM ツリー

コンポーネントは多くのフレームワークでは次のように展開される。

```html
<!-- こんな表記で -->
<MyBox>
	<MyButton label="Click Me" />
</MyBox>
<!-- MyBox と MyButton を適切に定義していればこんな風に -->
<div id="box">
	<button type="button">Click Me</button>
</div>
```

ここではこの通りに展開されないフレームワークについて説明する。

#### Angular

Angular では `my-box` や `my-button` はそのまま残り、それぞれの内側に展開される。

```html
<!-- こんな表記で -->
<my-box>
	<my-button label="Click Me" />
</my-box>
<!-- my-box と my-button を適切に定義していればこんな風に -->
<my-box>
	<div id="box">
		<my-button>
			<button type="button">Click Me</button>
		</my-button>
	</div>
</my-box>
```

#### Lit

Lit ではデフォルトで Shadow DOM として展開される。つまり CSS のスタイル指定や DOM ツリーが外界と隔絶された環境でコンポーネントが構築される。

CSS が隔絶されることで、 `div > button` のようなセレクタは跨った状態で指定できないし、外側でインポートしたスタイルシートで宣言されるスタイルは内側には適用されない。
DOM の隔絶も `childNodes` などを使って内部の要素の DOM へアクセスする方法が一切ないことを示す。

```html
<my-box>
	<!-- my-box の内側と外側で隔絶される -->
	<div id="box">
		<my-button>
			<!-- my-button の内側と外側で隔絶される -->
			<button type="button">Click Me</button>
		</my-button>
	</div>
</my-box>
```

Shadow DOM にしないようにするためには、コンポーネント中で次のように `createRenderRoot` メソッドを規定する。
これにより、 Angular と同様のツリー構造が得られる。

```ts
@customElement("my-box")
export class MyBox extends LitElement {
	createRenderRoot() { return this; }
	render() { ... }
}
```

### コンポーネントに型パラメータを与える

複数の場所でコンポーネントを共用したい場合などに、引数で受け取る値の型を場所ごとに変えたいという需要も考えられる。特に列挙型を引数で受け取るケースだと、受け取る列挙型の種類を変えられるのは意外と便利である。
コンポーネント自体が型パラメータを取り、引数がその型で与えられるようにすれば実現できそうである。ここでは、それぞれのフレームワークの型パラメータの対応状況を説明する。

#### React, Preact, Solid.js

これらのフレームワークでは関数によりコンポーネントを構成するので、 TypeScript で通常の関数に型パラメータを与えるのと同じ手法で型パラメータを与えられる。

```tsx
const Describe = <T extends string>({ value: T }) => {
	return <div>value is : {value}</div>;
};
```

上記の例のように `extends` を付けている場合や、複数の型パラメータを使っている場合は特に問題ないのだが、 `<T>` のように単一の型パラメータで制約条件がない場合は `.tsx` ファイル (TypeScript + JSX) では HTML 要素との見分けがつかないことから `<T,>` などと末尾にコンマをつける必要がある。

また、関数コンポーネントを型として扱う時には標準の `FC`, `FunctionalComponent`, `Component` を使う限りは型パラメータを設定することはできないので、次のように手動で関数コンポーネントの型を定義する必要がある。

```ts
const DescribeFC = <T extends string>(props: { value: T }) => JSX.Element;
```

※ `React.FC` の型定義を見ると、関数の返値の型は `ReactNode` になっており、それに合わせてカスタム型定義の返値も `ReactNode` にしてしまうと、この型に従うコンポーネントを別のコンポーネントの JSX に埋め込む際に型エラーが発生する。何故かはよく分かっていない。

#### Vue.js, Svelte

コンポーネントの `<script>` タグに Vue.js なら `generic` を、 Svelte なら `generics` 属性で型パラメータを定義することにより、型パラメータを使用することができる。

```vue
<script setup lang="ts" generic="T extends string">
type Props = {
	value: T;
};
const props = defineProps<Props>();
</script>

<template>
	<div>value is: {{ props.value }}</div>
</template>
```

```svelte
<script lang="ts" generics="T extends string">
	let value: T;
</script>

<div>value is: {value}</div>
```

公式ドキュメントでは複数の型パラメータを持つ場合にどのように記載すればいいのか説明がなされていないが、おそらくコンマ区切りで `generic` / `generics` に指定するのだと思われる。

#### Angular / Lit

これらのフレームワークではクラスがコンポーネントを構成することから、クラス名に型パラメータを与えれば簡単に実現できる。

```ts
@Component({ ... })
export class Describe<T> { ... }
```

### HTML への埋め込み方

コンポーネントはフレームワーク内でツリー構造をなすが、ルートコンポーネントは適切な手段で DOM 内や HTML 内に展開されなければ動作しない。
ここではそれぞれのフレームワークでのルートコンポーネントを HTML へ埋め込む方法を説明する。

#### React

ルートコンポーネントを `App` とし、 `body` 要素中に `<div id="root"></div>` が存在する状態で以下を実行する。

```tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

createRoot(document.getElementById("root")!)
.render(
	<StrictMode>
		<App />
	</StrictMode>
);
```

#### Preact

ルートコンポーネントを `App` とし、 `body` 要素中に `<div id="root"></div>` が存在する状態で以下を実行する。

```tsx
import { render } from "preact";
import { App } from "./App.tsx";

render(
	<App />,
	document.getElementById("root")!
);
```

#### Solid.js

ルートコンポーネントを `App` とし、 `body` 要素中に `<div id="root"></div>` が存在する状態で以下を実行する。

```tsx
import { render } from "solid-js/web";
import { App } from "./App.tsx";

render(
	() => <App />,
	document.getElementById("root")!
);
```

#### Vue.js

ルートコンポーネントを `App` とし、 `body` 要素中に `<div id="root"></div>` が存在する状態で以下を実行する。

```ts
import { createApp } from "vue";
import App from "./App.vue";

createApp(App)
.mount(document.getElementById("root")!);
```

#### Svelte

ルートコンポーネントを `App` とし、 `body` 要素中に `<div id="root"></div>` が存在する状態で以下を実行する。

```ts
import App from "./App.svelte";

new App({
	target: document.getElementById("root")!
});
```

#### Angular

要素名が `app` であるルートコンポーネントを `App` とし、 HTML の `body` 要素中に `<app></app>` が存在する状態で以下を実行する。

```ts
import { bootstrapApplication } from "@angular/platform-browser";
import App from "./App.ts";

bootstrapApplication(
  App, { providers: [] }
);
```

#### Lit

要素名が `app-view` であるコンポーネントを用意し、 HTML の `body` 要素中に `<app-view></app-view>` が存在している状態であれば、コンポーネントを含む JavaScript ファイルを読み込むことで描画される。

#### 埋め込みに関する所感

React, Preact, Solid.js, Vue.js, Svelte では `<body></body>` 中に既にある `<div id="root"></div>` を `document.getElementById("root")` で取ってきて、そこにコンポーネントを生やす、ということを上記でやっているため、実質的に `HTMLElement` 型の DOM 要素が与えられれば何でも良さそうで、オフスクリーンでフレームワークを走らせる、といったことも十分やれそうである。
一方、 Angular, Lit では HTML 中に既にルートコンポーネントに対応する要素が存在する前提になっているコードだから、あまり変なことはできなそう。

## まとめ

1つのフレームワークで使われている考え方が意外と他のフレームワークでも通用したり、或いはしなかったり、というのを学ぶことができて割と面白い。1つしか触っていないときに比べて視野が広くなったような気になった。