記事の概要
この記事では、WebサイトやWebアプリを作るためのフレームワークであるSvelteを使って、macOSとDockerコンテナでの開発環境の構築からシンプルなWebアプリ開発、実行までの流れを紹介します。
この記事を参考に、SvelteやWebアプリ開発のスタートの一助となれば幸いです。
今回の記事の対象者
この記事は次のような方に向けています：
- Svelteの環境を構築してWebアプリ開発を始めたい方
- macOSとDockerコンテナを使ってローカルとサーバーの開発環境を構築したい方
- シンプルなWebアプリでSvelteの実装イメージを理解したい方
はじめに
今回は、Svelteを使った開発環境の構築と、シンプルなWebアプリの開発を解説します。Svelteを素の状態から学ぶため、アプリケーションフレームワークであるSvelteKitは使いません。
開発環境は、以下2つの環境を構築します。
- macOS：macOS Sonomaを使ったローカル開発環境
- Dockerコンテナ：Docker Desktopを使ったサーバー開発環境
Webアプリは、以下の機能を開発し具体的なコードでSvelteについて学べる構成としています。
「ダークモード対応カウントアップアプリ」
- カウントアップ機能
- ページに「カウントアップ」ボタンを配置。このボタンをクリックするたびにカウントが1つ増える。
- ダークモードとライトモードの切り替え
- ページに「ダークモードをオン/オフする」スイッチを配置。これをクリックすると、画面のテーマがダークモードとライトモードで切り替わる。
また、作成したソースコードをもとに、Svelteの基礎を詳細に解説していますので、是非活用してみてください。さらに、初心者向けにSvelteの基本文法も動かせるサンプルコード付きで解説してます。
目次
- Svelteとは
- ソフトウェア・ハードウェア
- Svelte開発環境の構築
- Webアプリの概要と学習のポイント
- ダークモード対応カウントアップアプリ
- 学習ポイントの解説
- まとめ
- おまけ：Svelteの基本文法（動かせるコード付き）
Svelteとは
Svelteは、Web技術を使ったアプリ開発をもっと簡単に速くするためのツールです。シンプルで軽量、そして学びやすいという特徴があるので、これからWebアプリ開発を始めたい人にとって、とても魅力的な選択肢となります。
Svelteの特徴
- 簡単に書けるコード
- Svelteでは、HTML、CSS、JavaScriptといった基本的なWeb技術を使いますが、それをもっと簡単に書けるように工夫されています。複雑な設定や大量のコードを書く必要がなく、少ないコードで多くのことを実現できます。
- 速く動くアプリ
- Svelteは、他のフレームワークとは違い、Webブラウザで動く部分（JavaScriptのコード）をコンパイルによりできるだけ少なくしています。これにより、Svelteで作ったアプリは非常に速く動きます。ページを表示するたびに重くならないので、ユーザーにとっても快適です。
- シンプルな状態管理
- 状態管理（例えば、ボタンをクリックした回数を記録したり、ユーザーが選んだテーマを覚えたりすること）はSvelteでとても簡単です。通常は複雑なコードが必要なことも、Svelteではシンプルに書けるので、初心者でも扱いやすいです。
Svelteは、特に以下のようなシステムやアプリケーションの開発に向いています。
- シングルページアプリケーション (SPA)
- Svelteは、ユーザーがページを移動するときに再読み込みせずに、素早く画面が切り替わる「シングルページアプリケーション」の開発に適しています。たとえば、ToDoリストアプリやダッシュボードなど、ユーザーが頻繁に操作するインターフェースを持つアプリケーションに向いています。
- パフォーマンスが重要なアプリケーション
- Svelteは、あらかじめコードをコンパイルして効率的なJavaScriptに変換するため、パフォーマンスが非常に高いです。そのため、動作速度が重要なウェブアプリケーションに向いています。たとえば、リアルタイムでデータを表示するようなアプリケーション（チャットアプリ、株価表示ツールなど）に適しています。
- 静的サイトジェネレーション
- SvelteKit（Svelteのフレームワーク）は、静的サイトの生成にも適しており、ブログやポートフォリオサイトのようなものを高速に表示させるための開発にも向いています。
ソフトウェア・ハードウェア
必要なツール、ライブラリ、端末は以下の通りです。
開発ツール
以下、開発ツールとその公式サイトの一覧です。導入しておくと開発作業が楽になります。
端末
以下、今回の環境を構築する対象の端末スペックです。
| 項目 | 詳細 |
|---|---|
| ハードウェア | Apple Silicon M3, RAM 24GB |
| OS | macOS Sonoma 14.6 |
本記事で紹介するソフトウェアおよびツールは、筆者の個人的な使用経験に基づくものであり、公式のサポート外の設定や使用方法を含む場合があります。利用に際しては、公式サイトの指示およびガイドラインを参照し、自己責任で行ってください。
Svelte開発環境の構築
Node.jsのインストール
まずは、Node.jsをインストールして、プログラムを実行できる環境を整えます。Node.jsの公式サイトからインストーラをダウンロードしてインストールします。
Node.jsについては、以下の記事で詳細に解説しています。
Svelteプロジェクトの作成
プロジェクトフォルダを作成し、Svelteプロジェクトを初期化します。
mkdir svelte-dark-mode-app
cd svelte-dark-mode-app
npm init vite@latest
Svelteプロジェクトの初期化パラメータは以下の通りです。
✔ Project name: svelte-dark-mode-app
✔ Select a framework: › Svelte
✔ Select a variant: › JavaScript
(base) xxxxxxx@xxxxxxx test-pj % mkdir svelte-pj
(base) xxxxxxx@xxxxxxx test-pj % cd svelte-pj
(base) xxxxxxx@xxxxxxx svelte-pj % npm init vite@latest
> npx
> create-vite
✔ Project name: … svelte-dark-mode-app
✔ Select a framework: › Svelte
✔ Select a variant: › JavaScript
Scaffolding project in /Users/xxxxxxx/test-pj/svelte-pj/svelte-dark-mode-app...
Done. Now run:
cd svelte-dark-mode-app
npm install
npm run dev
npm notice
npm notice New patch version of npm available! 10.8.1 -> 10.8.2
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.8.2>
npm notice To update run: npm install -g npm@10.8.2
npm notice
(base) xxxxxxx@xxxxxxx svelte-pj %
続いて、依存関係をインストールします。
cd svelte-dark-mode-app
npm install
(base) xxxxxxx@xxxxxxx svelte-pj % cd svelte-dark-mode-app
(base) xxxxxxx@xxxxxxx svelte-dark-mode-app % npm install
added 37 packages, and audited 38 packages in 4s
3 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
(base) xxxxxxx@xxxxxxx svelte-dark-mode-app %
開発サーバーを起動し、起動後に自動的にデフォルトのWebブラウザでプロジェクトを開きます。
npm run dev -- --open
コマンド実行結果のログです。アプリが起動して、http://localhost:5173/が自動でWebブラウザに表示されます。
(base) xxxxxxx@xxxxxxx svelte-dark-mode-app % npm run dev -- --open
> svelte-dark-mode-app@0.0.0 dev
> vite --open
Forced re-optimization of dependencies
VITE v5.4.2 ready in 306 ms
➜ Local: <http://localhost:5173/>
➜ Network: use --host to expose
➜ press h + enter to show help
^C
(base) xxxxxxx@xxxxxxx svelte-dark-mode-app %
このような画面が出力されていれば、ローカル開発環境の構築は成功です。
DockerとDocker Composeのインストール
Dockerは、アプリケーションをコンテナと呼ばれる仮想的な環境に入れて動かすためのツールです。Docker Composeは、複数のコンテナを一度に管理するためのツールです。
Docker Desktopのインストールは、以下の記事を参考にしてください。
Docker Desktopをインストールした後、以下のコマンドで正しくインストールされたか確認します。
docker --version
docker compose --version
DockerとDocker Composeがインストールされ、docker –versionとdocker-compose –versionでバージョン情報が表示されます。
(base) xxxxx@xxxxx ~ % docker --version
Docker version 27.1.1, build 6312585
(base) xxxxx@xxxxx ~ % docker compose version
Docker Compose version v2.29.1-desktop.1
(base) xxxxx@xxxxx ~ % Dockerfileの作成
プロジェクトルートにDockerfileを作成し、以下の内容を記述します。
# ベースイメージとしてnodeを使用
FROM node:20
# 作業ディレクトリを作成
WORKDIR /app
# package.jsonとpackage-lock.jsonをコピー
COPY package*.json ./
# 依存関係をインストール
RUN npm install
# アプリケーションコードをコピー
COPY . .
# 開発サーバーを起動
CMD ["npm", "run", "dev", "--", "--host"]
補足：npm run dev -- --hostと入力してローカルサーバーを起動することで、同一ネットワークに接続している別の端末からもアクセス可能なリンクができます。
Docker Composeファイルの作成
docker-compose.ymlをプロジェクトルートに作成し、以下の内容を記述します。
services:
app:
build: .
ports:
- "3000:5173"
volumes:
- .:/app
- /app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
それでは、開発環境を起動し、アプリケーションが正しく動作するかを確認します。
アプリケーションのビルドと実行
Docker Composeを使ってアプリケーションをビルドし、コンテナを起動します。
プロジェクトディレクトリで、以下のコマンドを実行します。
docker compose up --build
Dockerコンテナをビルドし、Svelteアプリを起動します。
(base) xxxxxx@xxxxxx svelte-dark-mode-app % docker compose up --build
[+] Building 1.0s (10/10) FINISHED docker:desktop-linux
=> [app internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 438B 0.0s
=> [app internal] load metadata for docker.io/library/node:20 0.7s
=> [app internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [app 1/5] FROM docker.io/library/node:20@sha256:a4d1de4c7339eabcf78a9 0.0s
=> [app internal] load build context 0.0s
=> => transferring context: 105.72kB 0.0s
=> CACHED [app 2/5] WORKDIR /app 0.0s
=> CACHED [app 3/5] COPY package*.json ./ 0.0s
=> CACHED [app 4/5] RUN npm install 0.0s
=> [app 5/5] COPY . . 0.1s
=> [app] exporting to image 0.1s
=> => exporting layers 0.1s
=> => writing image sha256:f5f8ac02a6d1d1e20ef19c768e549c1ff2c2882660f3d 0.0s
=> => naming to docker.io/library/svelte-dark-mode-app-app 0.0s
[+] Running 2/2
✔ Network svelte-dark-mode-app_default Created 0.0s
✔ Container svelte-dark-mode-app-app-1 Created 0.1s
Attaching to app-1
app-1 |
app-1 | > svelte-dark-mode-app@0.0.0 dev
app-1 | > vite --host
app-1 |
app-1 | Forced re-optimization of dependencies
app-1 |
app-1 | VITE v5.4.2 ready in 186 ms
app-1 |
app-1 | ➜ Local: <http://localhost:5173/>
app-1 | ➜ Network: <http://172.18.0.2:5173/>
ブラウザで http://localhost:3000 にアクセスして、以下の画面が表示されることを確認します。
開発にあたって便利な仕組み
•ホットリロード: Dockerコンテナで開発を進める間、ソースコードを変更すると自動的にリロードされ、すぐに変更を確認できます。
•継続的に改良: 上記の機能をベースに、より複雑な機能を追加していくことが可能です。
Svelteアプリが起動した状態で、App.svelteを変更してみます。
変更前：+
変更後：+-+
<h1>Vite +-+ Svelte</h1>
App.svelteを保存すると、自動的にサーバー側へ反映され画面の表示が変わります！
app-1 |
app-1 | ➜ Local: <http://localhost:5173/>
app-1 | ➜ Network: <http://172.18.0.2:5173/>
app-1 | 10:31:37 AM [vite] hmr update /src/App.svelte
app-1 | 10:31:44 AM [vite] hmr update /src/App.svelte
これは、開発の際にローカルでもDockerコンテナを使っても、かなり便利な仕組みですね！！
コンテナの停止
開発が終了したら、Docker Composeを使ってコンテナを停止します。docker compose up –buildを実行したものと別のコンソールを開いて、プロジェクトディレクトリで以下のコマンドを実行してください。
docker compose down
コンテナが停止し、リソースが解放されます。
(base) xxxxxx@xxxxxx ~ % cd test-pj/svelte-pj
(base) xxxxxx@xxxxxx svelte-pj % cd svelte-dark-mode-app
(base) xxxxxx@xxxxxx svelte-dark-mode-app % docker compose down
[+] Running 2/1
✔ Container svelte-dark-mode-app-app-1 Removed 0.6s
✔ Network svelte-dark-mode-app_default Removed 0.1s
(base) xxxxxx@xxxxxx svelte-dark-mode-app %
これで、macOSとDockerを使ったSvelteアプリの開発環境が整い、実装から動作確認までの手順が一通り完了しました。
Webアプリの概要と学習のポイント
サンプルアプリ: 「ダークモード対応カウントアップアプリ」
Svelteの基本的な機能を実践的に学ぶのに最適な内容としています。状態管理、イベントハンドリング、動的なCSS切り替えなど、Svelteのコアな特徴を幅広く体験できるように設計されています。
ユーザーがボタンをクリックしてカウントを増やすと同時に、ダークモードとライトモードを切り替える機能を持ちます。さらに、ユーザーの選択したモードが次回訪問時にも反映されるように、設定を保存する機能も備えています。
機能概要
1.ダークモードとライトモードの切り替え
- ダークモードスイッチ: 画面上部に「ダークモードをオン/オフする」スイッチを配置。これをクリックすると、画面のテーマがダークモードとライトモードで切り替わります。
- 状態管理: Svelteの状態管理を使用して、現在のモード（ダークモードまたはライトモード）を管理します。
- CSSの動的切り替え: Svelteの機能を活用して、モードに応じてCSSを動的に切り替えます。これにより、ダークモードでは背景色やテキストの色が暗くなり、ライトモードでは明るくなります。
- ローカルストレージ: ユーザーが選んだモードをローカルストレージに保存し、ページを再読み込みした際にも前回の設定が保持されるようにします。
2.カウントアップ機能
- カウントアップボタン: ページの中央に「カウントアップ」ボタンを配置。このボタンをクリックするたびにカウントが1つ増えます。
- 状態管理: Svelteの状態管理を使用して、カウントの値を管理します。
- イベントハンドリング: ボタンがクリックされたときにカウントを増やすイベントをハンドリングします。カウントの値はページに動的に表示されます。
学習ポイント
- 状態管理の統合:
- ダークモードの状態とカウントの状態をそれぞれ別々に管理し、アプリ全体の状態管理を統合的に理解する。
- イベントハンドリング:
- ボタンのクリックイベントを適切に処理し、カウントアップとダークモード切り替えの動作を学習。
- ユーザー設定の保存:
- ローカルストレージを利用して、ユーザーの好みを保存することで、データの永続化の基本を学ぶ。
- 動的CSSの実装:
- CSSを動的に切り替えることで、ユーザー体験を向上させるテクニックを習得。
ダークモード対応カウントアップアプリ
Svelteアプリのコード実装
以下は、src/App.htmlに実装するコードです。
<script>
// カウントの状態を保持する変数。最初は0からスタート
let count = 0;
// ダークモードがオンかオフかを保持する状態変数。最初はオフ（false）
let isDarkMode = false;
// ダークモードの切り替えを行う関数
function toggleDarkMode() {
// 現在のisDarkModeの値を反転させる（true -> false, false -> true）
isDarkMode = !isDarkMode;
// isDarkModeの値に応じて、bodyタグに'dark'クラスを追加または削除
if (isDarkMode) {
// ダークモードが有効なら'dark'クラスを追加
document.body.classList.add('dark');
} else {
// ダークモードが無効なら'dark'クラスを削除
document.body.classList.remove('dark');
}
// ダークモードの状態をローカルストレージに保存する
localStorage.setItem('darkMode', isDarkMode);
}
// カウントを1つ増やす関数
function increment() {
count += 1; // 現在のカウントを1つ増やす
}
// ページ読み込み時に、以前選んだダークモードの状態を復元する処理
if (localStorage.getItem('darkMode') === 'true') {
// 保存されている状態が'true'ならダークモードをオンにする
isDarkMode = true;
document.body.classList.add('dark');
}
</script>
<style>
/* デフォルトのライトモード用のスタイル */
:global(body) {
background-color: #ffffff; /* 背景色をより明るい白に設定 */
color: black; /* テキストの色を黒に設定 */
}
/* ダークモード用のスタイル。bodyタグに'dark'クラスが付いている場合に適用される */
:global(body.dark) {
background-color: #333; /* 背景色を暗くする */
color: white; /* テキストの色を白くする */
}
/* ボタンのスタイル */
button {
margin-top: 20px; /* ボタンの上に20pxの余白をつける */
padding: 10px 20px; /* ボタンの内側に上下10px、左右20pxの余白をつける */
font-size: 16px; /* ボタンのテキストサイズを16pxに設定 */
}
</style>
<!-- カウントの値を表示する部分 -->
<h1>カウント: {count}</h1>
<!-- カウントアップボタン。クリックされるとincrement関数が呼ばれる -->
<button on:click={increment}>カウントアップ</button>
<!-- ダークモードの切り替えボタン。クリックされるとtoggleDarkMode関数が呼ばれる -->
<button on:click={toggleDarkMode}>
{isDarkMode ? 'ライトモードに切り替え' : 'ダークモードに切り替え'}
<!-- isDarkModeの値に応じてボタンのラベルを変更 -->
</button>
アプリのビルドと動作確認
Dockerコンテナのビルド
ターミナルでプロジェクトフォルダに移動し、Dockerコンテナをビルドします。
docker compose build
Dockerコンテナの起動
次に、以下のコマンドでコンテナを起動します。
docker compose up
コンテナが正しく起動したら、ブラウザで http://localhost:3000 にアクセスしてアプリケーションを確認します。
動作確認
• カウントアップ: 「カウントアップ」ボタンをクリックして、カウントが増えるか確認します。
• ダークモード切り替え: ダークモード/ライトモードの切り替えボタンを押して、画面のテーマが変わることを確認します。
•再読み込み: ページを再読み込みしても、最後に選択したモードが保持されているかを確認します。一度、Webブラウザを閉じて再度アクセスしてモードが復元されていることを確認してみましょう。
コンテナの停止
動作確認が完了したら、以下のコマンドでコンテナを停止します。
docker compose down
学習ポイントの解説
今回のアプリは、Svelteの基礎的な機能を使って、状態管理やイベントハンドリング、ユーザーの好みに合わせたカスタマイズなど、ウェブ開発に必要なスキルを段階的に学ぶことができます。
以下に、主な学習ポイントを解説します。
1. 基本的なコンポーネントの作成方法
コンポーネントとは？
コンポーネントとは、Webアプリの中で再利用できる小さな部品のようなものです。例えば、ボタンやナビゲーションバーなど、アプリのいろいろな場所で使えるパーツをコンポーネントとして定義します。
具体的なコード解説
Svelteでは、各ファイルが一つのコンポーネントとして機能します。今回のアプリのApp.svelteは、アプリ全体のコンポーネントです。
<h1>カウント: {count}</h1>
<button on:click={increment}>カウントアップ</button>
<button on:click={toggleDarkMode}>
{isDarkMode ? 'ライトモードに切り替え' : 'ダークモードに切り替え'}
</button>
このコードでは、カウントを表示する部分や、ダークモードを切り替えるボタンをそれぞれのコンポーネントとして作成しています。
2. 状態管理（State Management）の基本
状態管理とは？
状態管理は、アプリの中で「今どうなっているか」を追跡するための仕組みです。例えば、カウントアップの数字や、現在のモード（ダークモードかライトモードか）は、すべて「状態」です。
具体的なコード解説
以下のように、カウントとモードの状態をSvelteで管理します。
let count = 0;
let isDarkMode = false;状態を変化させると、Svelteが自動的に画面を再描画し、最新の状態を表示してくれます。これにより、状態管理が簡単になります。
3. イベントハンドリングの基礎
イベントハンドリングとは？
イベントハンドリングは、ユーザーの操作（クリックや入力）に対して、アプリがどう反応するかを決めることです。例えば、ボタンをクリックしたときにカウントが増えるなどの動作がこれに該当します。
具体的なコード解説
Svelteでは、on:clickのように、イベントを設定することができます。
<button on:click={increment}>カウントアップ</button>このコードでは、ボタンがクリックされたときにincrementという関数が実行されます。
function increment() {
count += 1;
}この関数は、カウントを1つ増やす役割を持っています。これにより、ユーザーがボタンをクリックするたびにカウントが増えていく動作が実現されます。
4. 状態管理（ダークモードの切り替え）
状態管理とは？
状態管理とは、アプリ内で変わる情報（状態）を追跡し、必要に応じてその情報を更新したり使ったりすることを指します。ダークモードの切り替えでは、ユーザーがダークモードにするかライトモードにするかを選択することが「状態」にあたります。
具体的なコード解説
Svelteでは、letというキーワードを使って状態を管理します。今回のアプリでは、ダークモードがオンかオフかを管理するために、以下のように状態を設定します。
let isDarkMode = false;ここでは、isDarkModeという変数を使ってダークモードが有効かどうかを記録します。最初はfalse（ライトモード）に設定されています。ユーザーがダークモードをオンにすると、この変数がtrueに変わり、画面のデザインが変わります。
5. CSSの動的切り替え
CSSの動的切り替えとは？
CSSは、Webページの見た目をコントロールするためのコードですが、通常はページを表示する前に固定された状態で適用されます。しかし、動的切り替えを使うと、ユーザーの操作に応じてリアルタイムでCSSを変更することができます。
具体的なコード解説
ダークモードとライトモードの切り替えを実現するために、Svelteでは以下のようなコードを使います。
function toggleDarkMode() {
isDarkMode = !isDarkMode;
if (isDarkMode) {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
}この関数では、isDarkModeの値に応じてdarkというクラスをbodyタグに追加したり削除したりしています。darkクラスが追加されると、以下のようにCSSが適用されます。
<style>
:global(body.dark) {
background-color: #333;
color: white;
}
</style>darkクラスがbodyに付与されると、背景色が暗くなり、テキストが白くなるようにCSSが変わります。
6. ユーザーの好みに基づいたインターフェースのカスタマイズ
カスタマイズとは？
カスタマイズとは、ユーザーが自分の好みに合わせて、Webアプリの見た目や動作を変更できるようにすることです。今回のアプリでは、ダークモードやライトモードの選択をユーザーに委ね、その設定を保存しておくことで、次回アクセス時にも反映されるようにしています。
具体的なコード解説
ローカルストレージを使って、ユーザーの選択したモードを保存します。
localStorage.setItem('darkMode', isDarkMode);
このコードは、isDarkModeの状態（trueまたはfalse）をローカルストレージに保存します。そして、ページが再度読み込まれた際に、その設定を復元します。
if (localStorage.getItem('darkMode') === 'true') {
isDarkMode = true;
document.body.classList.add('dark');
}
これにより、ユーザーの好みに基づいたインターフェースが維持されます。
まとめ
Svelteは、WebサイトやWebアプリを作るためのツール（フレームワーク）です。一般的なフレームワークと違って、Svelteは特に「軽量」で「簡単」に使える点が特徴です。
基本的な構造やリアクティブな変数、イベントハンドリング、条件付きレンダリング、ループ処理、双方向データバインディングなど、これらの要素を組み合わせることで、効率的にウェブアプリケーションを開発できます。
Svelteの開発環境を構築するため、以下の手順を紹介しました。
- macOS環境の準備
- Node.jsのインストール: JavaScriptを使ったアプリ開発に必要な環境を整えます。
- Svelteプロジェクトの作成: Svelteを使った新しいプロジェクトを始めるための設定を行います。
- Dockerコンテナの設定
- Dockerのインストール: 仮想的な環境を作るためのツールをインストールします。
- Dockerfileの作成: Dockerの箱の中でどのようにアプリを動かすかを記述したレシピを作ります。
- Docker Composeファイルの作成: 複数のDockerコンテナをまとめて管理・起動するための設定を書きます。
- アプリの実装
- Svelteアプリのコード実装: カウントアップ機能とダークモード切り替え機能を持つアプリのコードを作成します。
- アプリのビルドと動作確認
- Dockerコンテナのビルド: Dockerの仮想環境を作り、アプリをその中で動かす準備をします。
- Dockerコンテナの起動: コンテナを起動し、ブラウザでアプリにアクセスして確認します。
- 動作確認: アプリのカウントアップ機能やダークモード切り替え機能が正しく動作しているかを確認します。
Svelteは、初心者にも優しい直感的な設計がされているため、簡単に始めることができます。
これからもSvelteとmacOS、Dockerコンテナを活用して、より高度なアプリケーション開発に挑戦してみてください！
最後に、この記事がSvelteの学習やアプリ開発に役立つことを願っています。
付録：Svelteの基本文法
Svelteの基本文法を解説します。
1. 基本構造
Svelteのコンポーネントは、通常1つの.svelteファイルにHTML、CSS、JavaScriptが統合された形で記述されます。このファイルが1つのコンポーネントとして機能します。
<script>
// JavaScriptのコードをここに書きます
let name = 'World';
</script>
<style>
/* コンポーネント固有のCSSをここに書きます */
h1 {
color: blue;
}
</style>
<!-- HTMLの構造をここに書きます -->
<h1>Hello {name}!</h1><script>タグ: コンポーネントで使用する変数や関数などのJavaScriptコードを記述します。<style>タグ: コンポーネント固有のスタイルを記述します。スタイルはデフォルトでコンポーネント内にスコープされます（他のコンポーネントには影響しません）。- HTML: 通常のHTMLタグを使って、コンポーネントのUIを記述します。
2. リアクティブな変数
Svelteでは、変数が変更されると自動的にUIが更新されます。これを「リアクティブ性」と言います。
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
カウント: {count}
</button>{}（中括弧）: 変数をHTML内で表示するために使います。この例では、countの値がボタンの中に表示されます。- リアクティブなUI更新:
countが更新されるたびに、表示される値も自動的に更新されます。
3. イベントハンドリング
Svelteでは、イベントハンドリングも非常に簡単に行えます。on:ディレクティブを使ってイベントを指定します。
<script>
function handleClick() {
alert('ボタンがクリックされました!');
}
</script>
<button on:click={handleClick}>
クリックしてね
</button>on:click: クリックイベントが発生したときに、指定した関数（この場合はhandleClick）が呼び出されます。
4. リアクティブ宣言
Svelteでは、特定の変数が変更されたときに自動的に再計算されるリアクティブなブロックを定義することができます。
<script>
let count = 0;
$: doubled = count * 2;
</script>
<p>カウント: {count}</p>
<p>ダブルカウント: {doubled}</p>
<button on:click={() => count += 1}>
カウントアップ
</button>$:: 変数の前に$:を付けることで、その変数は他の変数が変わるたびに再計算されます。この例では、countが変更されるたびにdoubledも自動的に再計算されます。
5. 条件付きレンダリング
Svelteでは、{#if}ディレクティブを使って条件付きで要素を表示できます。
<script>
let isVisible = true;
</script>
<button on:click={() => isVisible = !isVisible}>
表示/非表示
</button>
{#if isVisible}
<p>このメッセージは表示されています。</p>
{/if}
{#if}と{/if}:isVisibleがtrueのときにだけメッセージが表示されます。isVisibleがfalseになると、このメッセージは非表示になります。
6. ループ処理
リストや配列を使って複数の要素を繰り返し表示するには、{#each}ディレクティブを使います。
<script>
let items = ['りんご', 'バナナ', 'オレンジ'];
</script>
<ul>
{#each items as item}
<li>{item}</li>
{/each}
</ul>
{#each}と{/each}:items配列の各要素をリストとして表示します。この場合、りんご、バナナ、オレンジがリストとして表示されます。
7. 双方向データバインディング
Svelteでは、フォーム要素とJavaScriptの変数を双方向にバインディングすることができます。これにより、フォームの値が変わるたびに変数が更新され、逆に変数が変わればフォームの値も更新されます。
<script>
let name = '';
</script>
<input bind:value={name} placeholder="名前を入力してください">
<p>こんにちは、{name}!</p>bind:value: テキストボックスの値とname変数を双方向にバインディングします。ユーザーが入力した名前が即座にnameに反映され、それが下の<p>タグに表示されます。
