スベルテキット 私が次世代アプリケーション フレームワークと呼んでいるものの最新のものです。 もちろん、Next がこれまでずっと行ってきたファイルベースのルーティング、デプロイ、およびサーバー側のレンダリングを使用して、アプリケーションを足場にします。 ただし、SvelteKit は、ネストされたレイアウト、ページ上のデータを同期するサーバー ミューテーション、およびその他の機能もサポートしています。
この投稿は、SvelteKit を使用したことがない人に興奮をもたらすことを願って、高レベルの紹介を目的としています。 ゆったりとしたツアーになります。 あなたが見るものが好きなら、 完全なドキュメントはこちら.
ある意味、これは書くのが難しい投稿です。 SvelteKit は アプリケーションフレームワーク. アプリケーションの構築を支援するために存在します。 そのため、デモが難しくなります。 ブログ投稿でアプリケーション全体を構築することは現実的ではありません。 代わりに、少し想像力を働かせます。 アプリケーションのスケルトンを構築し、いくつかの空の UI プレースホルダーとハードコーディングされた静的データを用意します。 目標は実際のアプリケーションを構築することではなく、独自のアプリケーションを構築できるように、SvelteKit の可動部分がどのように機能するかを示すことです。
そのために、実証済みの真の To-Do アプリケーションを例として作成します。 しかし、心配しないでください。これは、さらに別の To-Do アプリを作成することよりも、SvelteKit がどのように機能するかを確認することです。
この投稿のすべてのコードは GitHubで入手可能. このプロジェクトも ヴェルセルに配備
プロジェクトを作成する
新しい SvelteKit プロジェクトを作成するのは簡単です。 走る npm create your-app-name
端末で質問プロンプトに答えます。 必ず「スケルトン プロジェクト」を選択してください。それ以外の場合は、TypeScript、ESLint などに必要な選択を行ってください。
プロジェクトが作成されたら、実行します npm i
および npm run dev
開発サーバーが実行を開始するはずです。 起動する localhost:5173
ブラウザーで、スケルトン アプリのプレースホルダー ページが表示されます。
基本ルーティング
TDS1.35%、収率20.8%を維持するために浸漬法は2.1グラム多くのコーヒーが必要になります routes
下のフォルダ src
. これには、すべてのルートのコードが含まれています。 すでにある +page.svelte
ルートのコンテンツを含むファイル /
ルート。 ファイル階層のどこにいても、そのパスの実際のページには常に名前があります +page.svelte
. それを念頭に置いて、のページを作成しましょう /list
, /details
, /admin/user-settings
および admin/paid-status
、各ページにいくつかのテキスト プレースホルダーも追加します。
ファイル レイアウトは次のようになります。
ブラウザのアドレス バーの URL パスを変更することで、ナビゲートできるはずです。
レイアウト
アプリにナビゲーション リンクが必要ですが、作成する各ページにそれらのマークアップをコピーしたくないことは確かです。 それでは、作成しましょう +layout.svelte
私たちのルートにあるファイル routes
このフォルダは、SvelteKit がすべてのページのグローバル テンプレートとして扱います。 それにいくつかのコンテンツを追加しましょう。
<nav> <ul> <li> <a href="/ja/">Home</a> </li> <li> <a href="/ja/list">To-Do list</a> </li> <li> <a href="/ja/admin/paid-status">Account status</a> </li> <li> <a href="/ja/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
いくつかの基本的なスタイルを使用した基本的なナビゲーション。 特に重要なのは、 <slot />
鬼ごっこ。 これは Web コンポーネントと Shadow DOM で使用するスロットではなく、コンテンツを配置する場所を示す Svelte 機能です。 ページがレンダリングされると、ページのコンテンツがスロットの場所にスライドします。
そして今、私たちはいくつかのナビゲーションを持っています! デザインコンペで優勝することはありませんが、勝とうとしているわけではありません。
ネストされたレイアウト
すべての管理ページに、作成したばかりの通常のレイアウトを継承させながら、すべての管理ページ (管理ページのみ) に共通するものを共有させたい場合はどうすればよいでしょうか? 問題ありません。別のものを追加します +layout.svelte
ルートにあるファイル admin
このディレクトリは、その下にあるすべてのものに継承されます。 それを行い、このコンテンツを追加しましょう:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
これが管理ページであることを示す赤いバナーを追加し、以前と同様に、 <slot />
ページのコンテンツを移動したい場所を示します。
レンダリング前のルート レイアウト。 ルートレイアウトの内部は <slot />
鬼ごっこ。 ネストされたレイアウトのコンテンツは、ルート レイアウトの <slot />
. 最後に、ネストされたレイアウトは独自のレイアウトを定義します <slot />
に、ページ コンテンツがレンダリングされます。
管理ページに移動すると、新しい赤いバナーが表示されます。
データの定義
では、実際のデータをレンダリングしてみましょう — または、少なくとも、実際のデータをレンダリングする方法を見てみましょう。 データベースを作成して接続する方法は XNUMX 通りあります。 ただし、この投稿は SvelteKit に関するものであり、DynamoDB を管理するものではないため、代わりにいくつかの静的データを「ロード」します。 ただし、実際のデータに使用するものと同じ機械を使用して、読み取りと更新を行います。 実際の Web アプリの場合は、静的データを返す関数を、たまたま使用しているデータベースに接続してクエリを実行する関数に置き換えます。
ダートシンプルなモジュールを作成しましょう lib/data/todoData.ts
実際のクエリをシミュレートするために、人為的な遅延とともにいくつかの静的データを返します。 あなたはこれを見るでしょう lib
経由で別の場所にインポートされたフォルダ $lib
. これはその特定のフォルダーの SvelteKit 機能であり、 独自のエイリアスを追加する.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
To Do 項目のフラットな配列を返す関数、タグのルックアップ、単一の To Do を取得する関数 (詳細ページで最後のものを使用します)。
データの読み込み
そのデータを Svelte ページに取り込むにはどうすればよいでしょうか? 方法はいくつかありますが、とりあえず作成してみましょう。 +page.server.js
私たちのファイル list
フォルダーに移動し、このコンテンツをその中に入れます。
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
を定義しました load()
ページに必要なデータを取得する関数。 私たちがいることに注意してください await
-私たちに電話をかけます getTodos
および getTags
非同期関数。 これを行うと、タグをロードする前に To Do アイテムが到着するのを待つため、データ ロード ウォーターフォールが作成されます。 代わりに、生の promise を返します load
、そして SvelteKit は必要な作業を行います await
それら。
では、ページ コンポーネントからこのデータにアクセスするにはどうすればよいでしょうか。 SvelteKit は、 data
データを含むコンポーネントの小道具。 を使用して、to-do アイテムとタグにアクセスします。 リアクティブ割り当て.
リスト ページ コンポーネントは次のようになります。
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
これで、To Do アイテムがレンダリングされます。
レイアウト グループ
詳細ページに移動してデータを変更する前に、非常に優れた SvelteKit 機能を見てみましょう。 レイアウト グループ. すべての管理ページでネストされたレイアウトを既に見てきましたが、ファイル システムの同じレベルにある任意のページ間でレイアウトを共有したい場合はどうすればよいでしょうか? 特に、リスト ページと詳細ページの間だけでレイアウトを共有したい場合はどうすればよいでしょうか。 そのレベルのグローバル レイアウトは既にあります。 代わりに、新しいディレクトリを作成できますが、次のように名前を括弧で囲みます。
これで、リスト ページと詳細ページをカバーするレイアウト グループができました。 名前を付けました (todo-management)
好きな名前を付けることができます。 明確にするために、この名前は レイアウト グループ内のページの URL に影響します。 URL は同じままです。 レイアウト グループを使用すると、すべての共有レイアウトがディレクトリ全体を構成することなく、共有レイアウトをページに追加できます。 routes
.
We 可能性 を追加 +layout.svelte
ファイルといくつかの愚かな <div>
「To-Do を管理しています」というバナー。 しかし、もっと面白いことをしましょう。 レイアウトは定義できます load()
それらの下にあるすべてのルートのデータを提供するための関数。 この機能を使用してタグをロードしましょう。 details
ページ — に加えて list
私たちがすでに持っているページ。
実際には、単一のデータを提供するためだけにレイアウト グループを強制することは、ほぼ間違いなく価値がありません。 そのデータを load()
各ページの機能。 しかし、この投稿では、新しい SvelteKit 機能を確認する必要がある言い訳を提供します!
まず、私たちに行きましょう list
ページの +page.server.js
ファイルからタグを削除します。
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
ないため、リストページでエラーが発生するはずです。 tags
物体。 追加してこれを修正しましょう +layout.server.js
ファイルをレイアウト グループに追加してから、 load()
タグをロードする関数。
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
そして、そのように、リスト ページが再びレンダリングされます。
複数の場所からデータを読み込んでいます
ここで何が起こっているかを細かく説明しましょう。
- 私たちは
load()
入れたレイアウトグループの関数+layout.server.js
. - これにより、 を レイアウトが提供するページの数 — この場合、リストと詳細ページを意味します。
- 私たちのリストページも定義します
load()
その中に入る機能+page.server.js
ファイルにソフトウェアを指定する必要があります。 - SvelteKit は、これらのデータ ソースの結果を取得し、それらをマージして、両方を利用できるようにするという面倒な作業を行います。
data
.
詳細ページ
詳細ページを使用して、To Do アイテムを編集します。 まず、クエリ文字列に To Do アイテムの ID を含む詳細ページにリンクするリスト ページのテーブルに列を追加しましょう。
<td><a href="/ja/details?id={t.id}">Edit</a></td>
それでは、詳細ページを作成しましょう。 まず、編集中の To Do アイテムを取得するローダーを追加します。 作成する +page.server.js
in /details
、このコンテンツで:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
当社のローダーには url
クエリ文字列値を取得できるプロパティ。 これにより、編集中の To Do アイテムを簡単に検索できます。 それを編集する機能とともに、その To-Do をレンダリングしましょう。
フォームを使用する限り、SvelteKit には素晴らしい組み込みのミューテーション機能があります。 フォームを覚えていますか? こちらが詳細ページです。 簡潔にするためにスタイルを省略しました。
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
前と同じように、レイアウト グループのローダーからタグを取得し、ページのローダーから To-Do アイテムを取得します。 私たちは実際のものをつかんでいます tag
to-do のタグ ID のリストからオブジェクトを取得し、すべてをレンダリングします。 ID の隠し入力とタイトルの実際の入力を含むフォームを作成します。 タグを表示し、フォームを送信するためのボタンを提供します。
あなたが気づいたなら use:enhance
、これは単に SvelteKit にプログレッシブ エンハンスメントと Ajax を使用してフォームを送信するように指示するだけです。 あなたはおそらくそれを常に使用するでしょう。
編集内容を保存するにはどうすればよいですか?
TDS1.35%、収率20.8%を維持するために浸漬法は2.1グラム多くのコーヒーが必要になります action="?/editTodo"
フォーム自体の属性? これにより、編集したデータを送信する場所がわかります。 私たちの場合、私たちはに提出したいです editTodo
"アクション。"
に以下を追加して作成しましょう。 +page.server.js
Details 用に既にあるファイル (現在、 load()
関数、to-do を取得する):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
フォームアクションは私たちに request
オブジェクトへのアクセスを提供します formData
これは get
さまざまなフォーム フィールドのメソッド。 ID 値の非表示の入力を追加して、編集中の To Do アイテムを検索するためにここで取得できるようにしました。 遅延をシミュレートし、新しい updateTodo()
メソッド、次にユーザーをリダイレクトします /list
これらは各ジョブの中で提示されます ページ。 ザ· updateTodo()
メソッドは静的データを更新するだけです。 実際には、使用しているデータストアで何らかの更新を実行します。
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
試してみましょう。 最初にリスト ページに移動します。
To Do アイテムの XNUMX つの [編集] ボタンをクリックして、編集ページを表示します。 /details
.
新しいタイトルを追加します。
次に、[保存] をクリックします。 それは私たちを私たちに戻すはずです /list
新しい To Do タイトルが適用されたページ。
新しいタイトルはどのようにそのように現れましたか? 自動でした。 にリダイレクトしたら、 /list
ページで、SvelteKit はすべてのローダーを自動的に再実行しました。 これは、SvelteKit などの次世代アプリケーション フレームワークの重要な進歩です。 リミックスします, 次13 提供。 ページをレンダリングするための便利な方法を提供し、データを更新するために必要なエンドポイントを取得して幸運を祈るのではなく、データの変更とデータの読み込みを統合し、XNUMX つが連携して動作できるようにします。
あなたが疑問に思うかもしれないいくつかのこと…
この突然変異の更新は、あまり印象的ではないようです。 ナビゲートするたびにローダーが再実行されます。 フォーム アクションにリダイレクトを追加せずに、現在のページに留まった場合はどうなるでしょうか。 SvelteKit は以前のようにフォーム アクションで更新を実行しますが、 まだ ページ レイアウト内のローダーを含む、現在のページのすべてのローダーを再実行します。
私たちのデータを無効にする、より的を絞った手段はありますか? たとえば、タグは編集されていないため、実際にはタグを再クエリしたくありません。 はい、お見せしたのは SvelteKit のデフォルトのフォーム動作です。 デフォルトの動作をオフにすることができます にコールバックを提供する use:enhance
. 次に、SvelteKit はマニュアルを提供します 無効化関数.
すべてのナビゲーションでデータをロードすることは、コストがかかる可能性があり、不必要です。 次のようなツールで行うように、このデータをキャッシュできますか react-query
? はい、違うだけです。 SvelteKit を使用すると、Web が既に提供しているキャッシュ制御ヘッダーを設定 (および尊重) できます。 また、キャッシュ無効化メカニズムについては、後続の投稿で取り上げる予定です。
この記事全体で行ったことはすべて、静的データを使用し、メモリ内の値を変更します。 すべてを元に戻して最初からやり直す必要がある場合は、 npm run dev
ノードプロセス。
包み込む
SvelteKit の表面をかろうじてかじっただけですが、興奮するのに十分なほど見たことがあることを願っています。 Web 開発がこれほど楽しいものだったのはいつ以来だったか思い出せません。 バンドル、ルーティング、SSR、デプロイなどはすべてすぐに使用できるため、構成よりもコーディングに多くの時間を費やすことができます。
SvelteKit を学習する次のステップとして使用できるその他のリソースを次に示します。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- できる
- 私たちについて
- それについて
- アクセス
- Action
- 行動
- アダム
- 追加されました
- 添加
- 住所
- 管理人
- 高度な
- 影響を及ぼす
- すべて
- 許可
- 並んで
- 既に
- 常に
- 量
- および
- 別の
- 回答
- 誰も
- アプリ
- 申し込み
- 適用された
- 周りに
- 配列
- 記事
- 人工の
- 割り当てられた
- オートマチック
- 自動的に
- 利用できます
- 待つ
- バック
- 背景
- バナー
- バー
- 基本
- BEST
- より良いです
- の間に
- ビット
- ブラック
- ブログ
- ブログの投稿
- 青
- ボックス
- 持って来る
- ブラウザ
- バグ
- ビルド
- 内蔵
- 内蔵
- (Comma Separated Values) ボタンをクリックして、各々のジョブ実行の詳細(開始/停止時間、変数値など)のCSVファイルをダウンロードします。
- キャッシュ
- コール
- コール
- 機能
- 場合
- 確かに
- 挑戦
- 変化
- クリア
- コード
- コーディング
- カラー
- コラム
- 来ます
- コマンドと
- コンクール
- コンポーネント
- コンポーネント
- 会議
- お問合せ
- 接続する
- 領事
- コンテンツ
- 便利
- 可能性
- コース
- カバーする
- カバー
- 作ります
- 作成した
- 作成
- 電流プローブ
- 現在
- データ
- データベース
- デフォルト
- 定義する
- 遅らせる
- 遅延
- 展開
- 設計
- 細部
- デベロッパー
- 開発
- DID
- ディスプレイ
- そうではありません
- すること
- ドント
- 各
- 他の場所で
- 十分な
- 全体
- 全体
- エラー
- 等
- さらに
- あらゆる
- すべてのもの
- 例
- 興奮した
- 興奮
- 存在
- 高価な
- export
- 実行可能な
- 特徴
- 少数の
- フィールズ
- File
- 最後に
- 終わり
- 火災
- 名
- 修正する
- フラットな
- フォロー中
- に前進
- フォーム
- 形式でアーカイブしたプロジェクトを保存します.
- フォーム
- 発見
- フレームワーク
- から
- フル
- 楽しいです
- function
- 機能性
- 機能
- 取得する
- 受け
- 与える
- 与え
- グローバル
- Go
- 目標
- ゴエス
- 行く
- グラブ
- グループ
- グループの
- 起こる
- ハード
- ヘッダーの
- 助けます
- こちら
- 隠されました
- 階層
- ハイレベル
- 保持している
- うまくいけば
- 水平な
- 認定条件
- HTML
- HTTPS
- 私は
- 想像力
- import
- 重要性
- 印象的
- in
- 含めて
- 初期
- を取得する必要がある者
- 統合する
- 興味深い
- 概要
- IT
- リーディングシート
- 自体
- JavaScriptを
- キー
- 姓
- 最新の
- レイアウト
- 学習
- ことができます
- レベル
- Li
- 生活
- 光
- 可能性が高い
- リンク
- リスト
- ライブ
- 負荷
- ローダ
- ローディング
- 負荷
- 長い
- 見て
- LOOKS
- 検索
- 運
- 機械
- make
- 作る
- 作成
- 管理する
- マニュアル
- マージン
- 問題
- 手段
- メモリ
- 単に
- マージ
- 方法
- かもしれない
- マインド
- モジュール
- 他には?
- 移動する
- の試合に
- 名
- 名前付き
- NAV
- ナビゲート
- ナビゲーション
- 必要
- 必要
- 新作
- 次の
- 通常の
- 数
- オブジェクト
- オブジェクト
- ONE
- 注文
- その他
- さもないと
- 自分の
- 特定の
- path
- 実行する
- 選ぶ
- ピース
- ピース
- プレースホルダー
- プラトン
- プラトンデータインテリジェンス
- プラトデータ
- ポイント
- ポスト
- 投稿
- :
- 準備
- 問題
- プロセス
- 作り出す
- プログレッシブ
- プロジェクト
- 約束
- 財産
- 保護された
- 提供します
- は、大阪で
- 引っ張る
- 置きます
- 質問
- Raw
- 読む
- リアル
- 実生活
- 現実
- レッド
- リダイレクト
- 関係なく
- 残る
- 覚えています
- 削除します
- レンダリング
- レンダリング
- 要求
- リソース
- 結果
- return
- 返す
- 収益
- 元に戻す
- 富裕層
- ルート
- ルート
- ルート
- ラン
- ランニング
- 同じ
- Save
- 見ること
- 仕える
- セッションに
- Shadow
- シェアする
- shared
- すべき
- 表示する
- 簡単な拡張で
- 単に
- から
- スライド
- So
- 一部
- 何か
- ソース
- 過ごす
- start
- 開始
- 滞在した
- ステップ
- Force Stop
- 提出する
- サポート
- 表面
- テーブル
- TAG
- 取る
- 取得
- Talk
- タンデム
- 対象となります
- 伝える
- template
- ターミナル
- 物事
- 全体
- 時間
- 役職
- 〜へ
- 一緒に
- あまりに
- 豊富なツール群
- ツアー
- 治療する
- true
- 順番
- タイプスクリプト
- ui
- 下
- アップデイト
- 更新版
- URL
- us
- つかいます
- ユーザー
- 値
- 価値観
- さまざまな
- 、
- 詳しく見る
- wait
- wanted
- 方法
- ウェブ
- Webコンポーネント
- ウェブ開発
- この試験は
- which
- 白
- 意志
- win
- 無し
- 素晴らしい
- 仕事
- 作品
- 価値
- でしょう
- 書きます
- You
- あなたの
- ゼファーネット