はじめに
最近フロントエンド界隈で「svelte」、「sapper」というワードをよく聞くようになりました。
どんな代物なんだろ？と少し気になり、触ってみましたので、覚書を兼ねて記事を書かせていただきます。
svelteとは
- 「すらりとした」という意味を持つ名の通り軽量で高速
ベンチマーク上でReactの35倍、Vue.jsの50倍の速度らしい。 - 標準ではTypescript/SCSSといったメタ言語には未対応。
- コンパイルすると svelteファイルをhtml/Javascript/cssに変換してくれる。
sapperとは
- svelte を使ってwebアプリを作るためのフレームワーク。
- vue.jsでいうところの Nuxt.jsみたいなもの？
- SSR（サーバーサイドレンダリング）を提供してくれる。
チュートリアル/リポジトリ
チュートリアルやリポジトリに関しては下記にあります。
svelte
チュートリアルポチポチやっていくだけでも大分面白いです！
sapper
インストール
サンプルプロジェクトの作成
sapperのreadmeに記載があるように、 npx を用いてインストールを行います。
(npxの設定方法はここでは触れません。)
ここでは sapper_sample という名前で作成しています。
% npx degit "sveltejs/sapper-template#rollup" sapper_sample
npx: 32個のパッケージを4.152秒でインストールしました。
> cloned sveltejs/sapper-template#rollup to sapper_sample
上記コマンドを実行すると、サンプルプロジェクトとして下記ディレクトリ群が作成されます。
% tree .
.
├── README.md
├── cypress
│ ├── fixtures
│ │ └── example.json
│ ├── integration
│ │ └── spec.js
│ ├── plugins
│ │ └── index.js
│ └── support
│ ├── commands.js
│ └── index.js
├── cypress.json
├── package.json
├── rollup.config.js
├── src
│ ├── client.js
│ ├── components
│ │ └── Nav.svelte
│ ├── routes
│ │ ├── _error.svelte
│ │ ├── _layout.svelte
│ │ ├── about.svelte
│ │ ├── blog
│ │ │ ├── [slug].json.js
│ │ │ ├── [slug].svelte
│ │ │ ├── _posts.js
│ │ │ ├── index.json.js
│ │ │ └── index.svelte
│ │ └── index.svelte
│ ├── server.js
│ ├── service-worker.js
│ └── template.html
└── static
├── favicon.png
├── global.css
├── great-success.png
├── logo-192.png
├── logo-512.png
└── manifest.json
10 directories, 29 files
依存関係のダウンロード
公式の readme にあるように、下記コマンドで依存関係のダウンロードを行います。
cd sapper_sample
npm install
開発サーバーの起動
% npm run dev
> sapper dev
✔ server (995ms)
✔ client (1.0s)
✔ service worker (21ms)
> Listening on http://localhost:3000
ページの表示
http://localhost:3000 にアクセスすると、ダンディなおじさまが
爽やかな笑顔でお出迎えしてくれます。
最後に
第一弾として、svelte/sapperのインストール/環境設定までを行いました。
(ほぼほぼreadmeを見ればわかることばかりになってしまいましたが・・・。)
次回からは実際にサンプルプロジェクトをいじって、挙動/構文等々の確認を行なっていきたいと思います。
サンプルプロジェクトまでの起動は本当に簡単なので、ご興味ある方はぜひお試しください！
共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。
お待ちしております！