TauriのUIテンプレートをまとめた

# はじめに
Tauriを使ってマークダウンエディターを作ろうと現在奮闘中です。
（[このライブラリ](https://milkdown.dev/)をつかいたい）

そこでUIテンプレートに`React`を指定していたのですが、どうもうまく作れず・・。
Reactが理解出来る気がしない・・。

ということで、他のUIテンプレートがなにあったっけ？と調べようと思ったのですがリスト出してくれているページが全くなかったので、まとめておきました。

**JavaScript系のフレームワークはほぼほぼ触ったことがないので、知識皆無です。
検討ハズレな感想があっても見逃してください・・。**

# UIテンプレート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603116/2faaaa23-1034-bcbb-37e5-c2ca2171a1c3.png)

2024/05/02追記：一生懸命頑張っていろんなフレームワークでのコード例を集めたのですが、こんな便利なサイトがありました。

https://component-party.dev/

このサイト片手にフレームワーク一覧眺めるだけで、どんなコードがかけるか把握できると思います。

## Vanilla
ピュアJavaScriptってやつですね。
なんだかんだこれで良くない？という気持ちもありつつ、それだと勉強にならないだろ！！
と自分を戒めている。

## Vue
[Tutorial | Vue.js](https://ja.vuejs.org/tutorial/#step-1)
[Vue.js概要？](https://qiita.com/asip2k25/items/bd4bdccd5201d542953c)

<details>
<summary>サンプル</summary>

```html:app.vue
<script setup>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'

const groceryList = ref([
  { id: 0, text: 'Vegetables' },
  { id: 1, text: 'Cheese' },
  { id: 2, text: 'Whatever else humans are supposed to eat' }
])
</script>

<template>
  <ol>
    <!--
      We are providing each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which is explained in the guide section on v-for.
    -->
    <TodoItem
      v-for="item in groceryList"
      :todo="item"
      :key="item.id"
    ></TodoItem>
  </ol>
</template>
```

```html:TodoItem.vue
<script setup>
const props = defineProps({
  todo: Object
})
</script>

<template>
  <li>{{ todo.text }}</li>
</template>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603116/4cf7b358-8063-ce40-5576-5c8ce9eb53aa.png)

</details>

割ととっつきやすそうな印象ではあります。

## Svelte
[Introduction / Svelte にようこそ • Svelte Tutorial](https://learn.svelte.jp/tutorial/welcome-to-svelte)
[Svelteのすすめ](https://qiita.com/kurata04/items/d39e004dc3c837bfc4a1)

<details><summary>サンプル</summary>

```html:App.svelte
<script>
	import Nested from './Nested.svelte';
</script>

<Nested answer={42} />
```

```html:Nested.svelte
<script>
	export let answer;
</script>

<p>The answer is {answer}</p>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603116/94b76668-a291-08af-cc9f-f30fe741d452.png)

</details>

割とシンプルなコードで書けそうな印象。
(importとかは流石に必要になる・・よね・・・？)

また、「Svelteのすすめ」に書いてありましたが実行前にコンパイルしてくれるため処理が早いらしいです。

## React
[チュートリアル：三目並べ – React](https://ja.react.dev/learn/tutorial-tic-tac-toe)
[【初心者向け】「何となく」理解するReact](https://qiita.com/ForestMountain1234/items/69f868948393f6109fc1)

:::note warn
公式のチュートリアルがごつすぎたのでサンプルは省略します
:::

中途半端にしか学んでいない状態でアプリ制作に取り組んだのが全面的に悪いのですが、他のフレームワークと比べて複雑性がかなり高い印象です。

ただ、フレームワーク自体が複雑な割に、「シンプルかつ同期的なモノ」に適しているような動き方をするのでちょっと個人的にはしっくり来なかったです。

## Solid
[solidjs.com/tutorial/introduction_basics](https://www.solidjs.com/tutorial/introduction_basics)
[次のプロジェクトSolidJSで作りませんか？](https://qiita.com/tonio0720/items/ad2c33d9bea57435f5ea)

<details><summary>サンプル</summary>

```html:main.jsx
import { render } from "solid-js/web";
import Nested from "./nested";

function App() {
  return (
    <>
      <h1>This is a Header</h1>
      <Nested />
    </>
  );
}

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

```html:nested.jsx
export default () => <p>This is a Paragraph</p>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603116/059512af-f2fd-c419-8971-d4d78211eb20.png)

</details>

参考のqiita記事や公式にもある通り、かなりReactに近い書き心地。
つまり僕には合わない・・。

## Angular
[Angular - はじめてのAngularアプリケーションを作ろう](https://angular.jp/tutorial/first-app)
[Angularってどんなもの](https://qiita.com/HITOSUKE/items/19a5cbaaee039548e8bd)

<details><summary>サンプル</summary>

```html:index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Homes</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>
```

```ts:app.component.ts
import { Component } from '@angular/core';
import { HomeComponent } from './home/home.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    HomeComponent,
  ],
  template: `
    <main>
      <header class="brand-name">
        <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
      </header>
      <section class="content">
        <app-home></app-home>
      </section>
    </main>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'homes';
}
```

```ts:home.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HousingLocationComponent } from '../housing-location/housing-location.component';
@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    CommonModule,
    HousingLocationComponent
  ],
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city">
        <button class="primary" type="button">Search</button>
      </form>
    </section>
    <section class="results">
      <app-housing-location></app-housing-location>
    </section>
    `,
  styleUrls: ['./home.component.css'],
})

export class HomeComponent {

}
```

```ts:housing-location.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-housing-location',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>
      housing-location works!
    </p>
  `,
  styleUrls: ['./housing-location.component.css'],
})

export class HousingLocationComponent {

}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603116/84943287-d66c-36eb-913a-989c56ad0603.png)

</details>

重い！！
使い勝手はもしかしたら良いのかもしれないけど、なんというか一つひとつに必要な分量が多い・・。
ちょっと古めのjavaのフレームワークとかを見てる気分になりました。

## Preact
[Virtual DOM – Preact Tutorial](https://preactjs.com/tutorial/01-vdom)
[Preactの始め方&Reactとの違い](https://qiita.com/akashixi/items/e0e42e10ba8e088bf996)

PrettyなReactなので、Preactです。
多分。

記法などはReactと大差なさそうだし、むしろReactよりもライブラリの互換性が狭くなるんじゃないかな・・？

# おわりに
今まで名前しか聞いたことのなかったJSフレームワークの勉強になりました。
とりあえずSvelteを勉強してみようかな？