この記事は[Svelte Advent Calendar 2020](https://qiita.com/advent-calendar/2020/svelte) 1日目の記事です。早速ですが本ブログはSapperとContentfulによるSSG(Static Site Generator)にて配信されています。
今回はこのブログの作り方を簡単に解説していきたいと思います。
近いうちにソースコードもGitHubのリポジトリをpublicにして公開しようかなと思います。 ## Sapperとは Svelte Advent Calender1日目にいきなりSvelteではなくSapperで、はて？と思われる方もいるかも知れません。SapperはSvelteでSSR、SPA、SSGを行うためにパッケージされたフレームワーク・ツールです。ReactやVue.jsに馴染みがある方にはNext.js,Nuxt.jsと説明するとわかりやすいかと思います。
Svelteがベースになっているのでコンポーネントの書き方はSvelteそのものとなっています。 ## SapperのインストールとTypeScript化このブログではTypeScriptで記述しています。SapperのデフォルトではJavaScriptになっているのでTypeScript化する必要がありますが、SapperTemplateにTypeScript化を行う[スクリプト](https://github.com/sveltejs/sapper-template/blob/master/scripts/setupTypeScript.js)が同梱されているので簡単に導入することができます。 ```zsh npx degit "sveltejs/sapper-template#rollup" sapper-blog cd sapper-blog node scripts/setupTypeScript.js ``` ## Static Site Generator Sapperでは`npm run export`を行うことでSSGが可能です。
しかし、そのままではSSGではなくSPAとして機能することに注意が必要です。 ### Sapperでデータを取得する Sapperには`fetch`関数が用意されていて以下のようにコンポーネントでデータを取得できます。
Next.jsの`getInitialProps`やNuxt.jsの`asyncData`に相当する機能です。 ```html ``` `context="module"`はコンポーネントが評価される際に実行されるわけではなく、モジュールが評価される際に一回だけ実行されます。`export`の場合はこのモジュールはコンパイルされた結果を保持します。しかしこのままでは外部のAPIを取得する際には問題があります。
こちらのQiitaの記事に紹介されていました。
[[Sapper] export で完全静的サイトを作る [Svelte]](https://qiita.com/the_fukui/items/642c155f44349474c2eb) ## Contentfulのデータを取得する Contentfulのデータは[公式のライブラリ](https://www.npmjs.com/package/contentful)を使います。例えば個別記事の取得であれば`[slug].svelte`と対になるようにデータ取得用のローカルエンドポイントとして`[slug].json.ts`を作ります。 ```ts import { client } from '~/modules/contentful' export async function get(req: any, res: any, _: any) { const { slug } = req.params const json = await client.getEntries({ content_type: 'article', 'sys.id': slug }) if (json.items.length === 0) { res.writeHead(404, { 'Content-Type': 'application/json' }) res.end(JSON.stringify({ message: 'not found article' })) return } res.writeHead(200, { 'Content-Type': 'application/json' }) res.end(JSON.stringify(json.items[0])) } ``` ※SapperのRequest,Responseの型定義がnpmで配信されてないので一旦anyにしている ```ts import { createClient } from 'contentful' export const client = createClient({ space: process.env.SAPPER_APP_CONTENTFUL_SPACE, accessToken: process.env.SAPPER_APP_CONTENTFUL_ACCESS_TOKEN, }) ``` `[slug].svelte`側では`content="module"`で以下のように取得できます。 ```ts ``` ### .envの読み込み SapperにはどうやらNuxt.jsで言う`NUXT_ENV_`でenvを自動で読み込む機能が無いようです。 ```js require('dotenv').config() client: { input: config.client.input(), output: config.client.output(), plugins: [ replace({ 'process.browser': true, 'process.env.NODE_ENV': JSON.stringify(mode), 'process.env.HOGE': process.env.HOGE }), ``` このように一つ一つrollup.config.jsで定義することで読み込むことは出来ますが、毎回追加するのも手間なので[sapper-environment](https://www.npmjs.com/package/sapper-environment)を使いました。
これによって`NUXT_ENV_`の用に`SAPPAER_APP_`というプレフィックスの環境変数が自動で読み込まれます。 ## さいごに要点だけかいつまんで説明しましたが同じ構成を作ろうとしてる方の参考になればと思います。
Sapper.jsというよりSvelte.jsはとても良く作られていて、コンポーネントを書くのが気持ちが良いフレームワークです（語彙が貧弱）
すでにVue.jsやReactに満足している方にも一度触ってもらいたいフレームワークです。

SapperとContentfulでSSGを行う

ブログリニューアル