SvelteとSapperで高速反応ブログを構築する

Feb 9, 2026

操作方法

（画像クレジット：Svelte）

SapperはSvelteの上にあるフレームワークです。サーバーのレンダリング、リンクのプリロード、およびサービスワーカーを作成する機能を備えたボックスからの速度に焦点を当てます。 SVELTEと組み合わせると、最終的な結果は高度にカスタマイズ可能で、フットプリントが小さい雷速いサイトです。

このチュートリアルでは、Svelteコンポーネントを使用して軽量ブログサイトを構築するためにSapperを使用します（私たちの ブログを起動する方法 ブログ上のいくつかの少ない技術的なヒントのための投稿）。 Svelteは違いを持つフレームワークです。コンパイル時にコードを分析し、Vanilla JavaScriptに一連のモジュールを作成します。これにより、ランタイムの必要性が回避されます。レイアウトのさらなるヘルプが必要な場合は、完璧なものを手に入れる方法についての投稿をチェックしてください。 ウェブサイトのレイアウト 。または他のオプションについては、これらのトップを参照してください ウェブサイトのビルダー そして覚えておいて、あなたはまたあなたを得る必要があります ウェブホスティング ポイント上のサービス。

ここでFileSiloでチュートリアルファイルをダウンロードしてください

01.依存関係のインストール

まず、依存関係をダウンロードしてインストールする必要があります。それはSvelteに働くように依存し、サーバーを構築するための別のフレームワークが必要ですが、残りは構築されているアプリケーションによって異なります。この場合、後でマークダウンファイルを抽出するのに役立つパッケージが必要です。

チュートリアルファイル（上）をダウンロードし、コマンドラインでそれらを見つけて依存関係をインストールします。

> npm install

02.サーバーを構築します

Sapperは、クライアント側のフレームワークとそのフレームワークのサーバー側のレンダリングの2つの部分に構築されています。これは、より遅いネットワーク上のそれらのためにその余分な速度を後押しするのに役立ちます。それはノードを使用して構築されています。

server.jsを開き、Expressでサーバーを作成します。彼らの勧告を使って、我々は含みます圧縮送信するファイルを縮小するには シルフ 静的ファイルを提供する。

 Express（）
  。使用する（
    圧縮（{しきい値：0}）、
    SIRV（ "static"、{dev}）、
    sapper.middleware（）
  ）
  .Listen（ポート）;

03.アプリケーションをマウントします

クライアント側では、Sapperにアプリケーションをマウントするために伝える必要があります。これはReact Dom'sに似ています寝るまたはVUEの $マウント 方法client.jsの内側に、Sapperを起動してrootにマウントします ＆lt; div＆gt; 素子。その要素はテンプレートファイルに含まれています。

「@ Sapper / App」からSapperとしてインポート*をインポートします。
sapper.start（{
  ターゲット：Document.GetElementByID（
   "ルート"）
;）;

04.開発サーバーを起動します

Command line — 開発ビルドプロセス中のエラーは、コマンドラインにフラグが立てられます。（イメージクレジット：マット・クラウチ）

基本的なサーバーとクライアントファイルが設定されていると、開発サーバーを起動できます。これにより、サーバー、クライアントおよびサービスワーカーファイルのビルドを開始し、デフォルトでポート3000で起動します。ファイルが変更されるたびに、変更されたアプリケーションの一部を再構築します。

コマンドラインでサーバーを実行します。サイトを開発しながらこのウィンドウを開いたままにしてください。

＆gt。 NPM RUN DEV

05.サーバールートを作成します

"routes"ディレクトリ内の内部には、アプリケーションのルートが表示されます。のファイル js. 拡張機能は、呼ばれるサーバールートになります。これらのルートにはUIがありませんが、代わりにアプリケーションによってデータを取得するように要求されます。私たちの場合は、ブログ投稿をロードするためにそれらを使用します。

the routes / blog / index.json.js. ファイルを作成します /blog.json. サーバー上のエンドポイント。ブログ投稿をインポートし、それらからいくつかのJSONを作成します。

「./_posts.js」から投稿をインポートします。
const contents = json.stringify（
  Posts.map（ポスト=＆gt;（{
    著者：Post.Author、
    画像：Post.image、
    タイトル：
    スラッグ：Post.Slug
  ））））
）;

06.ブログ投稿を返却します

HTTPメソッドに対応するエクスポート関数をサーバールーティングします。たとえば、GETリクエストに応答するには、呼び出された関数をエクスポートします。 取得する サーバールートファイルから。 Aを作成する 取得する 前の手順で収集したデータでJSON形式のデータで応答する関数。開いた http：// localhost：3000 / blog.json. ブラウザで投稿をチェックしていることを確認してください。

エクスポート関数Get（Req、Res）{
  res.writehead（200、{
    "content-type"： "application / json"
  }）;）

  res.end（内容）;

07.インデックスページを作成します

Sapperのページは通常のSvelteコンポーネントです。各コンポーネントはAの単一のファイルです .svelte. 拡張子、管理するためのすべてのロジックとスタイリングを含みます。このコンポーネントを実行する必要があるJavaScriptは任意のJavaScriptに住みます。 ＆lt;スクリプト＆gt; タグ - 任意のHTMLページと同じように。

内部 ルート/ index.svelte. このページを構築するために使用できる他のSvelteコンポーネントをいくつかインポートします。輸出投稿私たちが後で埋める変数。

＆lt;スクリプト＆gt。
  からコンテナを輸入する
   "../components/container.svelte";
  から出荷後の輸入
   "../components/postsummary.svelte";
  エクスポートして投稿しましょう。
＆script＆gt;

08.ブログ投稿データをフェッチします

ページが設定されているので、ブログ投稿を入手し始めることができます（あなたはそれらの上に取り戻したいかもしれません クラウドストレージ ）。ページがロードされるとすぐにこれを行う必要があります。サーバーがこれに注意してからこのデータを要求するために、ページをレンダリングしたときにこのデータを要求する場合は、別のものに入る必要があります。 ＆lt; script context = "Module"＆Gt。 鬼ごっこ。

サーバー上で、SapperはAを探します prel ファンクション、ページを表示する前に完了するのを待ちます。ここでは、私たちはに携帯しています投稿前のステップからの変数。

 script context = "モジュール"＆gt;
  export async関数preload（）{
    const res = await.
     this.fetch（ "blog.json"）;
    const data = asit.json（）;
    戻る{投稿：データ};
  }
＆script＆gt;

09. POST要約を表示します

SVELTEでは、変数はデフォルトで反応します。つまり、更新されると、当社のコンポーネントも更新されることを意味します。のように投稿変数は今すぐブログ投稿の配列を保持しています。これらをループして表示することができます。

ANを使ってこれを行うことができます＃各ブロック。これらはアレイ内の各項目の角かっこの内側にあるものを繰り返します。コンポーネントの下部にあるタグの外側に、POSTを表示するためにHTMLを追加します。

 <コンテナ＆GT;
  ＆lt; ul＆gt;
    {#eachの投稿としての投稿}
      ＆lt; li＆gt;
        ＆lt; PostSummary {... POST} / gt;
      ＆lt; li＆gt;
    {/各}
  ＆lt; / ul＆gt;
＆lt; /コンテナ＆gt;

10.コンテナをスタイル

コンポーネントを使用して、繰り返しロジックを含めて、必要なところでそれらを使用します - スタイルが含まれています。 the ＆lt;コンテナ＆gt。 コンポーネントは現在何もしませんが、内部のコンテンツに最大の幅を付けるために使用できます。

open コンポーネント/ container.svelte そしてAの中にいくつかのスタイルを追加します ＆lt;スタイル＆gt; 鬼ごっこ。コンポーネント内に適用されるスタイルは、そのコンポーネントにスコープされています。つまり、一般セレクタを使用できます。

＆lt;スタイル＆gt;
  div {
    マージン：0自動車;
    パディング：0 1リム;
    最大幅：50リム;
  }
＆lt; /スタイル＆gt;

11.＆lt;の定義＆gt。

コンポーネントが他のコンポーネントへの親になるように設計されている場合は、それらのコンポーネントを通過させる方法が必要です。 the ＆lt;スロット＆gt; 要素はそれだけであり、コンポーネントのマークアップの中で理にかなっている場所に配置することができます。

withう ＆lt;コンテナ＆gt。 、私たちはスタイルの内容を包んでいます ＆lt; div＆gt; 。使用する ＆lt;スロット＆gt; 内側に ＆lt; div＆gt; 他のすべてを通り抜けるために。

 DIV＆GT。
  ＆lt;スロット/ gt;
＆lt; / div＆gt;

12. Postsummary Propsを公開する

すべてのコンポーネントがデータを取得しようとしているわけではありません。メインページコンポーネントから投稿をロードしているので、属性を介してレンダリングするコンポーネントに渡すことができます。

開いた コンポーネント/ PostSummary.Svelte. ファイルの上部にある属性をいくつか定義します。これらは、ステップ09で追加したスプレッドオペレータによって埋められています。

＆lt;スクリプト＆gt。
  エクスポートされた作者。
  エクスポートします。
  エクスポートさせましょう。
  エクスポートされたタイトル
＆script＆gt;

13.ブログ後の概要を表示します

属性が入力されると、その後、他の変数のようにアクセスされます。 POST要約の各部分に別々の属性を持つことで、マークアップを読みやすくします。

コンポーネントの下部にあるHTMLを追加して要約を作成します。クラスは事前定義されたスタイルに関連しています。

＆lt; gt。
＆lt; divクラス= "画像の画像" style = "
 背景画像：URL（{image}） "/ gt;
 {title}

14.ブログ投稿へのリンク

Sapper blog — Sapperは、ユーザーがそれを介して知覚されるパフォーマンス上の利点のためにホバリングすると、リンクの情報を取得することができます（イメージクレジット：マット・クラウチ）

Next.jsなどの類似のフレームワークとは異なり、Sapperは通常のアンカーリンクで動作します。ビルド時には、内部リンクを検出し、また独自の最適化を行うことができます。

リンク内でラップすることで、前の手順からマークアップを更新します。スラグ化されたURLを作成するためにテンプレート文字列を作成する必要はありません。

 rel = "プリフェッチ" href = "/ blog / {slug}"＆gt;
  ＆lt; gt; ...＆lt;
＆lt; / A＆GT;

15.スラッグによる投稿を取得します

SapperはURLパラメータに基づいてページを作成することができます。私たちの場合は、リンクします /ブログ/スラグ、 これは、それがコンポーネントをレンダリングすることを意味します /routes/blog/[slug].svelte. 。

そのコンポーネントの内側に、インデックスページのようにブログデータを取得します。 the パラメータ オブジェクトにはURLからのパラメータが含まれています。この場合はスラグです。

 script context = "モジュール"＆gt;
  Async関数を輸出します
   preload（{params}）{
    const res = this.fetch（
     `blog / $ {params.slug} .json`）;
    const data = asit.json（）;
  }
＆script＆gt;

16.投稿が見つからない場合はエラーが発生します

インデックスページとは異なり、URLにブログ投稿がない可能性があります。その場合はエラーが表示されます。に加えて フェッチ 、 prel 方法も含まれます エラー 代わりにエラーページへの応答を変更します。

PRELOADメソッドの最後に、POSTが見つからない場合はエラーが表示されます。それ以外の場合は、を設定してください役職ページの変数。

 if（res.status === 200）{
  戻る{post：data};
} そうしないと {
  this.Error（res.status、
    data.message）;

17.ブログ投稿を表示します

Internal links — 内部リンクは非同期的にロードできます。これにはマークダウンで書かれたものが含まれます。（イメージクレジット：マット・クラウチ）

データを取得した状態で、ページ上の投稿を表示できるようになりました。 PostSumaryコンポーネントと同様に、ポストのコンテンツの各部分をカーリーブラケット内に表示します。コンポーネントの下部にあるページに表示するマークアップをいくつか追加します。

  {post.title}

＆lt; divクラス= "BYLINE"＆GT;によって {post.author.name}＆lt; / div＆gt; ＆lt; / div＆gt; ＆lt; img class = "Post-image" src = {post.image} alt = "" / gt; {post.html} ＆lt; /コンテナ＆gt; ＆lt; / gt;

18.代わりにHTMLを表示します

今ページを見て、すべてが実際の投稿コンテンツから正しく表示されます。マークダウン変換はHTMLを生成しますが、ポスト自体にテキストとして印刷されているのがわかります。 Sapperには、この場合は組み込まれているHTMLパーサーがあります。配置する @html. その前にこのパーサを使います。

 {@ html post.html}

19.セットページ＆lt; title＆gt;値

私たちのブログは正しく機能しますが、それを終えるために必要ないくつかの変更があります。その一つは更新することです ＆lt;＆gt; ページ上に表示されているタブを再配置します。

SvelteはAをサポートします ＆lt; Svelte：ヘッド＆gt; その中に何かを注入する要素 ＆lt;頭＆gt; ページのこれを使用してPOSTのタイトルを設定する ＆lt;＆gt; 。

 Svelte：ヘッド＆gt;
  ＆lt; title＆gt; {post.title} |
   Sapperブログ＆lt; / title＆gt;
＆lt; / svelte：ヘッド＆gt;

を更新する。

ページの残りのページのHTMLを刻印するために、すべてのページがテンプレートを通過します。これが、フォントインポートやメタタグなどの設定が入力される場所です。 template.htmlを開き、の内容のフックに追加します。 ＆lt; Svelte：ヘッド＆gt; 前のステップからの要素閉会の直前にこれを追加してください ＆lt; / gt; 鬼ごっこ。

＆lt;ヘッド＆GT。
  [...]％sapper.head％
＆lt; / head＆gt。追加する必要がある最後のことはブログのレイアウトです。コンポーネント内の各ページをラップする代わりに、Sapperはこのジョブを実行するための "_layout.svelte"ファイルを探します。
_layout.svelteの内側に、<＆lt; header＆gt;コンポーネントとすべてのページの上部に表示されます。それはホームページに便利なリンクを提供します。

21.永久ヘッダーを追加します

追加する必要がある最終的なことはブログのレイアウトです。コンポーネント内の各ページを折り返す代わりに、Sapperは _layout.svelte. 私たちのためにこの仕事をするためのファイル。内部 _layout.svelte. ＆lt;ヘッダー＆gtをインポートします。コンポーネントとすべてのページの上部に表示されます。ホームページに便利なリンクを提供します。

＆lt;スクリプト＆gt。
  からヘッダーをインポートします
   "../components/header.svelte";
＆lt;＆script＆gt。
＆lt; main＆gt;
  ＆lt;ヘッダ/ gt;
  ＆lt;スロット/ gt;
＆lt; / main＆gt;

このコンテンツはもともとWeb Designerに登場しました。

Webコンポーネント：究極のガイド
WebデザイナーとDEVSの30 Chrome Extensions
2019年に賢く働くのを助けるための52ウェブデザインツール

SvelteとSapperで高速反応ブログを構築する

01.依存関係のインストール

02.サーバーを構築します

03.アプリケーションをマウントします

04.開発サーバーを起動します

05.サーバールートを作成します

06.ブログ投稿を返却します

07.インデックスページを作成します

08.ブログ投稿データをフェッチします

09. POST要約を表示します

10.コンテナをスタイル

11.＆lt;の定義＆gt。

12. Postsummary Propsを公開する

13.ブログ後の概要を表示します

14.ブログ投稿へのリンク

15.スラッグによる投稿を取得します

16.投稿が見つからない場合はエラーが発生します

17.ブログ投稿を表示します

18.代わりにHTMLを表示します

19.セットページ＆lt; title＆gt;値

を更新する。

21.永久ヘッダーを追加します

操作方法 - 最も人気のある記事

JavaScriptコード分割について知る必要があるすべて

Procreateチュートリアル：古いマスターのようにペイントする方法

数量特定のCSSスタイルとレイアウトを作成する

CSSグリッド付きファッションフレキシブルレイアウト

伝統的なイギリスの村のシーンを描く方法

適切なプロトタイピングツールを選択する方法

タイポグラフィのスタイルと実体を発見する

イオン2でインタラクティブチャートを作成する

カテゴリ