Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@NegishiS(frencia)

欧米ではやっているSvelteの超初心者向けチュートリアル！

Last updated at Posted at 2024-08-14

第1章: Svelteの紹介と歴史

概要

Svelteは、2016年にRich Harrisによって開発されたオープンソースのJavaScriptフレームワークです。Svelteは、他のフレームワークとは異なり、ビルド時にコードをコンパイルし、ランタイム時のパフォーマンスを向上させます。これにより、より少ないコードで高速なウェブアプリケーションを構築できます。

特徴

  • 仮想DOMを使用しない: Svelteは、ReactやVueのように仮想DOMを使用せず、直接コードを操作します。
  • 少ないコード量: 同じ機能を持つコンポーネントを作成するのに、他のフレームワークよりも少ないコードで済みます。
  • リアクティビティ: データの変更に自動的に反応し、UIを更新します。

第2章: Svelteのインストールとセットアップ

概要

この章では、Svelteをインストールし、プロジェクトをセットアップする方法を紹介します。Svelteを使用するには、Node.jsが必要です。

インストール手順

  1. Node.jsのインストール:

    • Node.jsの公式サイトから最新バージョンをダウンロードし、インストールします。

  2. Svelteのインストール:

    • ターミナルを開き、以下のコマンドを実行してSvelteをインストールします。
    npm install -g svelte

  3. 新しいプロジェクトの作成:

    • プロジェクトを作成するディレクトリに移動し、以下のコマンドを実行します。
    npx degit sveltejs/template svelte-app
cd svelte-app
npm install

  4. 開発サーバーの起動:

    • プロジェクトディレクトリで以下のコマンドを実行し、開発サーバーを起動します。
    npm run dev

第3章: Svelteの基本構文

概要

Svelteの基本的な構文を学び、変数の宣言やテンプレートの使用方法を理解します。Svelteでは、少ないコード量で同じ結果を得ることができます。

コード例

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  カウント: {count}
</button>

第4章: リアクティブなステートメント

概要

Svelteでは、リアクティブなステートメントを使用して、変数の変更に応じてUIを自動的に更新します。これは、コードの可読性を高め、バグを減らすのに役立ちます。

コード例

<script>
  let a = 1;
  let b = 2;
  $: sum = a + b;
</script>

<p>合計: {sum}</p>

第5章: コンポーネントの作成

概要

Svelteでコンポーネントを作成し、再利用可能なUIパーツを構築します。コンポーネントは、アプリケーションの構造を整理し、メンテナンスを容易にします。

コード例

// Button.svelte
<script>
  export let text;
</script>

<button>{text}</button>

第6章: プロパティとイベント

概要

コンポーネント間でデータを渡すためのプロパティとイベントの使用方法を学びます。これにより、コンポーネント間の通信が可能になります。

コード例

// Parent.svelte
<script>
  import Button from './Button.svelte';
</script>

<Button text="クリック me" />

第7章: スロットとコンポジション

概要

スロットを使用して、コンポーネントの柔軟なレイアウトを実現します。スロットは、親コンポーネントが子コンポーネントにコンテンツを渡すための方法です。

コード例

// Layout.svelte
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>

第8章: スタイルとスコープ

概要

Svelteでは、コンポーネントごとにスコープされたスタイルを定義できます。これにより、スタイルの競合を防ぎ、コードの可読性を向上させます。

コード例

<style>
  h1 {
    color: red;
  }
</style>

第9章: ストアの使用

概要

ストアを使用して、アプリケーション全体で共有される状態を管理します。ストアは、グローバルな状態管理を簡素化します。

コード例

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

第10章: ストアのサブスクリプション

概要

ストアの値をサブスクライブして、UIを自動的に更新します。これにより、状態の変化に応じてUIがリアルタイムで更新されます。

コード例

<script>
  import { count } from './store.js';
</script>

<p>{$count}</p>

第11章: フォームと入力管理

概要

フォームの入力とその状態を管理する方法を学びます。Svelteのバインディング機能を使用して、フォームのデータを簡単に管理できます。

コード例

<script>
  let name = '';
</script>

<input bind:value={name} placeholder="名前を入力" />
<p>こんにちは、{name}さん！</p>

第12章: フェッチとデータの取得

概要

外部データをフェッチして表示する方法を学びます。Svelteでは、JavaScriptの標準的なフェッチAPIを使用してデータを取得できます。

コード例

<script>
  let data;

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(json => data = json);
</script>

{#if data}
  <p>{data.message}</p>
{/if}

第13章: アニメーションとトランジション

概要

アニメーションとトランジションを使用して、UIに動きを追加します。Svelteでは、組み込みのトランジション機能を使用して、簡単にアニメーションを追加できます。

コード例

<script>
  import { fade } from 'svelte/transition';
</script>

<div transition:fade>
  フェードインします
</div>

第14章: カスタムディレクティブ

概要

カスタムディレクティブを作成して、特定の動作を追加します。これにより、コンポーネントに独自の機能を簡単に追加できます。

コード例

<script>
  import { onMount } from 'svelte';

  export let node;

  onMount(() => {
    node.focus();
  });
</script>

<input bind:this={node} />

第15章: CRUDアプリケーションのセットアップ

概要

この章では、Svelteを使って基本的なCRUD（作成、読み取り、更新、削除）アプリケーションを設計し、セットアップします。まず、アプリケーションの構造を決定し、必要なコンポーネントを作成します。

セットアップ

  1. プロジェクトの初期化:

    npx degit sveltejs/template svelte-crud-app
cd svelte-crud-app
npm install

  2. ディレクトリ構造:

    • src/ フォルダに以下のコンポーネントを作成します。
      • App.svelte: メインアプリケーションファイル
      • TaskList.svelte: タスク一覧表示
      • TaskForm.svelte: タスク追加・編集フォーム

基本コンポーネントの作成

  • App.svelte: アプリケーションのエントリーポイントとして、タスク一覧とフォームを表示します。
<script>
  import TaskList from './TaskList.svelte';
  import TaskForm from './TaskForm.svelte';

  let tasks = [];
  let currentTask = null;

  function addTask(task) {
    tasks = [...tasks, task];
  }

  function editTask(task) {
    currentTask = task;
  }

  function updateTask(updatedTask) {
    tasks = tasks.map(task => task.id === updatedTask.id ? updatedTask : task);
    currentTask = null;
  }

  function deleteTask(id) {
    tasks = tasks.filter(task => task.id !== id);
  }
</script>

<main>
  <TaskForm {addTask} {currentTask} {updateTask} />
  <TaskList {tasks} {editTask} {deleteTask} />
</main>

第16章: 認証機能の追加

概要

この章では、ユーザー認証機能を追加します。認証は、ユーザーの登録、ログイン、ログアウトを管理し、アプリケーションのセキュリティを強化します。

認証の実装

  1. ストアの作成:
    • auth.js ファイルを作成し、認証状態を管理するストアを定義します。
// src/auth.js
import { writable } from 'svelte/store';

export const user = writable(null);

export function login(username, password) {
  // ダミー認証
  if (username === 'user' && password === 'pass') {
    user.set({ username });
    return true;
  }
  return false;
}

export function logout() {
  user.set(null);
}
  1. ログインフォームの作成:
    • LoginForm.svelte コンポーネントを作成し、ユーザーのログインを処理します。
<script>
  import { login } from './auth.js';
  let username = '';
  let password = '';

  function handleSubmit() {
    if (login(username, password)) {
      alert('ログイン成功');
    } else {
      alert('ログイン失敗');
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input type="text" bind:value={username} placeholder="ユーザー名" />
  <input type="password" bind:value={password} placeholder="パスワード" />
  <button type="submit">ログイン</button>
</form>
  1. ログイン状態の確認:
    • App.svelte でユーザーがログインしているかどうかを確認し、タスク操作を制限します。
<script>
  import { user, logout } from './auth.js';
  import TaskList from './TaskList.svelte';
  import TaskForm from './TaskForm.svelte';
  import LoginForm from './LoginForm.svelte';

  let tasks = [];
  let currentTask = null;

  function addTask(task) {
    tasks = [...tasks, task];
  }

  function editTask(task) {
    currentTask = task;
  }

  function updateTask(updatedTask) {
    tasks = tasks.map(task => task.id === updatedTask.id ? updatedTask : task);
    currentTask = null;
  }

  function deleteTask(id) {
    tasks = tasks.filter(task => task.id !== id);
  }
</script>

<main>
  {#if $user}
    <button on:click={logout}>ログアウト</button>
    <TaskForm {addTask} {currentTask} {updateTask} />
    <TaskList {tasks} {editTask} {deleteTask} />
  {:else}
    <LoginForm />
  {/if}
</main>

第17章: 完成したアプリケーションのデプロイ

概要

この最終章では、完成したCRUDアプリケーションをデプロイします。デプロイは、アプリケーションをインターネット上で公開するプロセスです。

デプロイ手順

  1. ビルドの準備:
    • アプリケーションをビルドして、デプロイ可能な状態にします。
npm run build

  1. Netlifyアカウントの作成:

    • Netlify にアクセスし、アカウントを作成します。

  2. プロジェクトのデプロイ:

    • Netlifyのダッシュボードから新しいサイトを作成し、ビルドされたアプリケーションフォルダをアップロードします。

  3. 公開:

    • デプロイが完了すると、NetlifyがURLを提供し、アプリケーションが公開されます。

まとめ

この章では、Svelteを用いたCRUDアプリケーションの開発とデプロイを学びました。認証機能を追加することで、アプリケーションのセキュリティを強化し、ユーザーに安全な体験を提供できます。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?