0Pricing
Sveltejs Academy · レッスン

script、template、styleの構造

Svelteコンポーネントファイルを構成する3つの部分を理解します。

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

3つのセクション

Svelteのコンポーネントファイルには、トップレベルに3つの任意ブロックがあります。<script>、マークアップ、<style>です。

scriptブロック

scriptブロックには、通常のJavaScriptまたはTypeScriptでコンポーネントのロジックを記述します。

<script>
  let name = "Ada";
</script>

マークアップ

scriptタグとstyleタグの外側にあるすべての部分が、コンポーネントのマークアップです。Svelteのテンプレート構文で拡張されたHTMLです。

<h1>Hello {name}!</h1>

styleブロック

スタイルは、このコンポーネントだけに適用されます。他のコンポーネントはそれぞれ独自の見た目を維持します。

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

完全なコンポーネント

3つすべてを1つの.svelteファイルにまとめます。

<script>
  let name = "Ada";
</script>

<h1>Hello {name}!</h1>

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

記述順の慣例

慣例ではscriptを最初、マークアップを2番目、styleを最後に置きます。ただし、Svelteが順序を強制することはありません。

TypeScript版

scriptタグにlang="ts"を追加すると、その中でTypeScriptを使用できます。

<script lang="ts">
  let name: string = "Ada";
</script>

モジュールスクリプトのコンテキスト

インスタンスごとではなく、モジュールごとに1回実行するコードには、<script context="module">を使用します。

<script context="module">
  export const VERSION = "1.0";
</script>

複数ブロックの禁止

1つのファイルにつき、インスタンススクリプトとモジュールスクリプトはそれぞれ最大1つまでです。

styleタグは任意

コンポーネントにスタイルがない場合は、styleブロック全体を省略できます。

scriptタグは任意

静的なマークアップのコンポーネントでは、scriptブロックも省略できます。マークアップだけの.svelteファイルも有効です。

クイックチェック

スコープ付きCSSはどこに記述しますか。

おさらい

Svelteファイルは最大3つのブロックで構成されます。scriptはロジック、マークアップは表示内容、styleはスコープ付きCSSを担当します。

よくある質問

「script、template、styleの構造」レッスンは無料ですか？

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

「script、template、styleの構造」で何を学びますか？

Svelteコンポーネントファイルを構成する3つの部分を理解します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「script、template、styleの構造」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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