0Pricing
Sveltejs Academy · レッスン

letによるリアクティブ変数

通常のlet宣言を使用して、Svelteでリアクティブな状態を宣言します。

「letによるリアクティブ変数」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

特別なAPIは不要

Svelteでは、scriptブロック内の通常のlet宣言がリアクティブになります。useStateに相当するものはありません。

宣言して使用する

変数を宣言し、マークアップ内で展開します。変数を更新すると、その変数に依存する部分が再描画されます。

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

<p>The count is {count}</p>

代入による更新

代入がトリガーになります。count = count + 1によって、Svelteに値が変わったことを知らせます。

function inc() { count = count + 1; }

インクリメントの短縮記法

標準的なJSの短縮記法も使用できます。count++、count += 5などです。

function inc() { count++; }

配列と変更

pushで配列を変更しても、リアクティビティは発生しません。再代入する必要があります。

items = [...items, newItem];   // ok
items.push(newItem);            // does not update

オブジェクトと変更

オブジェクトにも同じルールが適用されます。参照を置き換えるか、特定のプロパティと親オブジェクトを再代入してください。

user.name = "Bea";
user = user;   // tell Svelte it changed

代入が重要な理由

Svelteコンパイラーは代入演算子を処理します。pushのようなメソッド呼び出しは、コンパイラーからは見えません。

ローカルと共有

通常のletは、1つのコンポーネントインスタンスにローカルな状態を作成します。コンポーネント間で共有するには、propsまたはstoresを使用します。

初期値

let宣言の右辺は、コンポーネントインスタンスの初期化時に1回実行されます。

型付け

lang="ts"を指定した場合は、変数に明示的な型を付けます。

<script lang="ts">
  let count: number = 0;
</script>

複数の変数

リアクティブな変数は、1行でも複数行でも、必要な数だけ宣言できます。

let x = 0, y = 0;
let items = [];

クイックチェック

リアクティビティを発生させるものは何ですか。

おさらい

通常のletはリアクティブです。更新を発生させるには、変更ではなく再代入を行います。配列とオブジェクトでは参照を変更する必要があります。

よくある質問

「letによるリアクティブ変数」レッスンは無料ですか？

はい。「letによるリアクティブ変数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「letによるリアクティブ変数」で何を学びますか？

通常のlet宣言を使用して、Svelteでリアクティブな状態を宣言します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「letによるリアクティブ変数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. script、template、styleの構造
  2. letによるリアクティブ変数
  3. 補間：{expression}
  4. 計算値：$:リアクティブ宣言
← Sveltejs Academyに戻る