React開発者のためのSvelte 5入門講座　第一章

Last updated at 2024-08-14Posted at 2024-08-13

Introduction

こんにちわ、milkyskiesだよ♪
Svelte 5の講座を始めるよ♪
React厨の皆様ならば１時間で覚えられるね♪

使われる技術

React

NextJS (App Router）
TypeScript
Tailwind CSS

Svelte 5

SvelteKit
TypeScript
Tailwind CSS

State

Stateの基本

React	Svelte 5
`useState`	`$state`

React

src/app/page.tsx

import React, { useState } from "react";

export default function Page() {
    const [name, setName] = useState("太郎");

    return (
        <p>
            こんにちは、{name}！
        </p>
    );
}

Svelte 5

src/routes/+page.svelte

<script lang="ts">
    let name = $state("太郎");
</script>

<p>
    こんにちは、 {name}！
</p>

Stateの変更

ついでにuseEffectのSvelte 5版も紹介するよ！

React	Svelte 5
`setName("次郎")`	`name = "次郎"`
`useEffect`	`$effect`

React

src/app/page.tsx

import React, { useState, useEffect } from "react";

export default function Page() {
    const [name, setName] = useState("太郎");

    useEffect(() => {
        setName("次郎");
    }, []);

    return (
        <p>
            こんにちは、{name}！
        </p>
    );
}

Svelte 5

src/routes/+page.svelte

<script lang="ts">
    let name = $state("太郎");

    $effect(() => {
        name = "次郎";
    });
</script>

<p>
    こんにちは、 {name}！
</p>

ボタンでstateを変更

SvelteではonClickじゃなくてonclickだよ！本来のHTMLと一緒だよ！

React	Svelte 5
`onClick`	`onclick`

React

src/app/page.tsx

import React, { useState, useEffect } from "react";

export default function Page() {
    const [count, setCount] = useState(0);

    function increaseCount(amount: number) {
        setCount((count) => count + amount);
    }

    return (
        <>
            <p>count: {count}</p>
            <button onClick={() => increaseCount(1)}>countを増やす</button>
        </>
    );
}

Svelte 5

src/routes/+page.svelte

<script lang="ts">
    let count = $state(0);

    function increaseCount(amount: number) {
        count += amount;
    }
</script>

<p>count: {count}</p>
<button onclick={() => increaseCount(1)}>countを増やす</button>

入力欄でリアルタイムでstateを更新

ここに関しては、ReactとSvelteがかなり違ってくる。
個人的にはSvelteのほうが圧倒的に書きやすいと思う。

React	Svelte 5
`onChange`	`bind`

React

src/app/page.tsx

import React, { ChangeEvent, useState } from "react";

export default function Page() {
  const [name, setName] = useState("");

  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
      setName(event.target.value);
  }

  return (
      <>
          <input onChange={handleInputChange}>
          <p>こんにちは、{name}！</p>
      </>
  );
}

Svelte 5

src/routes/+page.svelte

<script lang="ts">
    let name = $state("");
</script>

<input bind:value={name}>
<p>こんにちは、{name}！</p>

Components

Componentの作成

ついでにTailwindの使い方も少し紹介するよ！

React	Svelte 5
`className`	`class`

別ファイルでcomponentを作成する方法

React

src/components/card.tsx

type CardProps = {
    title: string
    text: string
};

export function Card({ title, text }: CardProps) {
  return (
    <div className="bg-slate-200 h-screen w-screen flex items-center justify-center">
        <div className="bg-white shadow-2xl rounded-lg w-96 min-h-32 p-4">
            <h2 className="text-2xl font-bold">{title}</h2>
            <p className="text-slate-500 mt-2">{text}</p>
        </div>
    </div>
  );
}

src/app/page.tsx

import { Card } from '@/components/card';

export default function Page() {
  return (
    <Card title="カード" text="こんにちは！" />
  );
}

Svelte 5

src/components/card.svelte

<script lang="ts">
    type CardProps = {
		title: string
		text: string
	};

	let { title, text }: CardProps = $props();
</script>

<div class="bg-slate-200 h-screen w-screen flex items-center justify-center">
    <div class="bg-white shadow-2xl rounded-lg w-96 min-h-32 p-4">
        <h2 class="text-2xl font-bold">{title}</h2>
        <p class="text-slate-500 mt-2">{text}</p>
    </div>
</div>

src/routes/+page.svelte

<script lang="ts">
    import Card from '@components/card.svelte';
</script>

<Card title="カード" text="こんにちは！" />

同じファイルでcomponentを作る方法

React

src/app/page.tsx

type CardProps = {
    title: string
    text: string
};

function Card({ title, text }: CardProps) {
  return (
    <div className="bg-slate-200 h-screen w-screen flex items-center justify-center">
        <div className="bg-white shadow-2xl rounded-lg w-96 min-h-32 p-4">
            <h2 className="text-2xl font-bold">{title}</h2>
            <p className="text-slate-500 mt-2">{text}</p>
        </div>
    </div>
  );
}

export default function Page() {
  return (
    <Card title="カード" text="こんにちは！" />
  );
}

Svelte 5

こっちはあまりおすすめしないかも！Componentを作るときはだいたい上記みたいに別ファイルで作りましょう！

src/routes/+page.svelte

<script lang="ts">
	type CardProps = {
		title: string;
		text: string;
	};
</script>

{#snippet card({ title, text }: CardProps)}
	<div class="bg-slate-200 h-screen w-screen flex items-center justify-center">
		<div class="bg-white shadow-2xl rounded-lg w-96 min-h-32 p-4">
			<h2 class="text-2xl font-bold">{title}</h2>
			<p class="text-slate-500 mt-2">{text}</p>
		</div>
	</div>
{/snippet}

<div class="bg-slate-2000 h-screen w-screen flex items-center justify-center">
	{@render card({ title: 'カード', text: 'こんにちは！' })}
</div>

現時点(2024-08-13)、Svelte 5のコードブロックはまだQiitaに完全対応されていないようなので、コードブロックにエラーが出ていますが、コード自体は大丈夫です。

Componentにcomponentを渡す方法

Reactと同じく、一つの引数をchildrenと名付けるとcomponentの中にcomponentを入れられるようになる！
childrenじゃなくてもいいけど、Reactと同じくその場合は他のpropと同じように渡さないといけなくなるから注意！

React	Svelte 5
`ReactNode`	`Snippet`

React

src/components/card.tsx

import { ReactNode } from 'react';

type CardProps = {
    title: string
    children: ReactNode
};

export function Card({ title, children }: CardProps) {
  return (
    <div className="bg-slate-200 h-screen w-screen flex items-center justify-center">
        <div className="bg-white shadow-2xl rounded-lg w-96 min-h-32 p-4">
            <h2 className="text-2xl font-bold">{title}</h2>
            <div className="text-slate-500 mt-2">
              {children}
            </div>
        </div>
    </div>
  );
}

src/app/page.tsx

import { Card } from '@/components/card';

export default function Page() {
  return (
    <Card title="カード">
        <p>こんにちは！</p>
    </Card>
  );
}

Svelte 5

src/components/card.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';

	type CardProps = {
		title: string;
		children: Snippet;
	};

	let { title, children }: CardProps = $props();
</script>

<div class="bg-slate-200 h-screen w-screen flex items-center justify-center">
	<div class="bg-white shadow-2xl rounded-lg w-96 min-h-32 p-4">
		<h2 class="text-2xl font-bold">{title}</h2>
		<p class="text-slate-500 mt-2">
			{@render children()}
		</p>
	</div>
</div>

src/routes/+page.svelte

<script lang="ts">
    import Card from '@components/card.svelte';
</script>

<Card title="カード">
    <p>こんにちは！</p>
</Card>

HTMLElementを継承してComponentを作る方法

React

src/components/button.tsx

import { ButtonHTMLAttributes } from 'react';

type ButtonProps = {
  label: string;
  className?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export const Button = ({ label, className, ...restProps }: ButtonProps) => {
  return (
    <button type="button" className={`bg-blue-500 text-white px-4 py-2 rounded-md ${className}`} {...restProps}>
      {label}
    </button>
  );
};

Svelte 5

src/components/button.svelte

<script lang="ts">
	import type { HTMLButtonAttributes } from 'svelte/elements';

	type ButtonProps = {
		label: string;
		class?: string;
	} & HTMLButtonAttributes;

	let { label, class: className, ...restProps }: ButtonProps = $props();
</script>

<button class={`bg-blue-500 text-white px-4 py-2 rounded-md ${className}`} {...restProps}>
	{label}
</button>

現時点(2024-08-13)、Svelte 5のコードブロックはまだQiitaに完全に対応されていないようなので、コードブロックにエラーが出ていますが、コード自体は大丈夫です。

まとめ

いかがでしたか！Svelte 5はSvelte 4と比較すると、よりReactっぽい書き方になっている感じするね！

次回は、Svelteの条件分岐やループなどの紹介もしていきたいと思います。

ほな！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

React開発者のためのSvelte 5入門講座 第一章

Introduction

使われる技術

State

Stateの基本

Stateの変更

ボタンでstateを変更

入力欄でリアルタイムでstateを更新

Components

Componentの作成

別ファイルでcomponentを作成する方法

同じファイルでcomponentを作る方法

Componentにcomponentを渡す方法

HTMLElementを継承してComponentを作る方法

まとめ

React開発者のためのSvelte 5入門講座　第一章