はじめに
今後Svelteを使用する機会があるので、公式チュートリアルを通して学んだことをアウトプットしていきます！
公式チュートリアル
目次
1.Svelteってなに？
- 特徴
- 他のフレームワークとの違い
2.メリットとデメリット
3.Svelteの基本構文
1. Svelteってなに？
Svelteは、JavaScriptのフレームワークです。
＜特徴＞
Svelteは開発時にコードをコンパイルして、JavaScript,HTML,CSSを生成します。
そのため、ブラウザ上で余計なランタイム処理が不要になりページの読み込み速度やパフォーマンスが向上します。
＜他のフレームワークとの違い＞
React、Vueはランタイムフレームワークとして動作します。つまり、ブラウザ上でフレームワークのコードが実行されます。また、仮想DOMを使用し、実際のDOMを更新します。
一方で、Svelteは「コンパイラ」ベースのフレームワークであり仮想DOMを使用しません。コードを実行するのではなく、開発時（ビルド）にコンパイルし必要なDOM操作のコードを生成します。
パフォーマンスにおいても、Svelteはランタイムがないため他のフレームワークよりもメモリ使用量が少ないです。
2. メリットとデメリット
メリット
1. 軽量で高速
ランタイムが不要なので、初期読み込みが速く低速のネットワーク環境でも優れたパフォーマンスを発揮します。
2. コンパイラによる最適化
Svelteのコンパイラは、コードを解析して「無駄な部分」や「今は使わない部分」を取り除くため軽くて速いコードができる。
3. シンプルで学びやすい構文
SvelteではHTML、CSS、JavaScriptを一つのファイルにまとめて記述でき、特殊な構文や概念を覚える負担が少ない。
デメリット
エコシステムの規模が小さい
Svelteは比較的新しい技術のため、ReactやVueと比べてエコシステム（プラグイン、ツール）がまだ少ないです。そのため必要なツールやライブラリが揃っていない可能性があるため、問題に直面した際に情報やサポートを見つけづらいなどのデメリットがあります。
Svelteのデメリットはそこまでなく、メリットの方が大きなと個人的には感じました。
3. Svelteの基本構文
今回キャッチアップを通して学んだ構文をアウトプットできればと思います。
1. 変数とリアクティビティ
Svelteでは変数の値が変更されると自動的に画面が再描画されます。
<script>
let name = "Svelte"; // 変数を宣言
</script>
<h1>Hello, {name}!</h1>
{}で変数を埋め込むと、画面にその値が表示されます
2. リアクティブ文法
リアクティブ文法を使用すると、変数の変更に応じて処理を自動的に実行できます。
<script>
let count = 0;
$: doubled = count * 2; // countが変わるたびに再計算
</script>
<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button on:click={() => count++}>Increment</button>
＄を使用するとcountの値が変更されると自動でdoubleの値を再計算してくれます。
3. 条件付き表示
{#if} ブロックを使って条件によって表示を切り替えます
<script>
let isLoggedIn = false;
</script>
{#if isLoggedIn}
<p>Welcome back!</p>
{:else}
<p>Please log in.</p>
{/if}
4. 繰り返し表示
{#each} を使って配列をループ表示します。
<script>
let fruits = ["Apple", "Banana", "Cherry"];
</script>
<ul>
{#each fruits as fruit}
<li>{fruit}</li>
{/each}
</ul>
5. イベント処理
ユーザーの操作に応じて関数を実行できます。
<script>
function handleClick() {
alert("Button clicked!");
}
</script>
<button on:click={handleClick}>Click</button>
6. 双方向バインディング
フォーム要素と変数をバインドして、リアルタイムに値を同期できます。
<script>
let inputText = "";
</script>
<input bind:value={inputText} />
<p>あなたが入力した内容: {inputText}</p>
bind:valueを使用するとimputTextに入力したないようが変数とフォームの内容が連動しそのまま表示されます。
7. コンポーネントの分割とプロパティ (Props)
コンポーネントを作成し、親から子にデータを渡すことができます。
<script>
import Child from './Child.svelte';
</script>
<Child message="Hello from parent!" />
<script>
export let message;
</script>
<p>{message}</p>
export letを使用親からのデータを受け取ります。
まとめ
今回はSvelteの基礎中の基礎についてアウトプットしましたが、すでにSvelteの魅力を感じています。チュートリアルのアドバンスも解きつつさらに理解を深めていこうと思います。