Noob Front End Engineer Blog

CONTACT

Svelte・Sapper で Hello World を行う

2020/07/24

SVELTEとは

公式サイトはこちら。
ざっくり説明すると記述方法が簡単で早いJS フレームワークです。
記述方法だけ見てると、簡単すぎてVueReact っていうよりはもはや
Pugとかの方が近くない!?ってなるくらい簡単。

SAPPERとは

SAPPERSVELTEのフレームワークで
VueでいうNuxt,React でいうNext的なポジションの奴です。

SVELTE導入

まずはSVELTEの導入を行っていきましょう!
公式サイトを見るとzipnpmでの導入方法が紹介されていますが、
今回はnpmで行っていきます。

まずはSVELTEのインストール。

bash
# 公式リポジトリからコピーを落としてくる
npx degit sveltejs/template プロジェクト名

# プロジェクトに移動
cd プロジェクト名

# 関連モジュールのインストール
npm install

# 開発サーバの立ち上げ
npm run dev

これで立ちあがった localhost を開くSVELTEの初期画面が表示されるかと思います。
前準備はたったこれだけでOK👌

ちなみに、公式リポジトリからコピーを落としてくる際に使用しているdegitというのは
git cloneより高速にソースを落としてきてくれる優れものだそうです。(npm

基本的な構文や使い方を学びたい場合は、ここまでできればあとは
/src/App.svelteを色々いじって試すことができます。

ただ、ルーティング等を考え出すと現状vue-routerreact-router的な存在がいないので
その他のpage.js等のモジュールをインストールしてそれぞれ設定する必要があります。
それはメンドクサイし、情報自体も現段階ではあまりないので
SAPPERを入れちゃいたいと思います。

SAPPER 導入

rollup 版と webpack 版があるのですが、今回は webpack 版の導入を行っていきます。
公式に沿って導入を進めます。

bash
npx degit 'sveltejs/sapper-template#webpack' プロジェクト名

モジュール類をインストールして開発サーバを立ち上げてみましょう。

bash
# プロジェクトに移動
cd プロジェクト名

# 関連モジュールのインストール
npm install

# 開発サーバの立ち上げ
npm run dev

これで立ちあがった localhost を開くとSAPPERの初期画面
『╭( ・ㅂ・)و̑ グッ』の赤ちゃんが表示されるかと思います。

SAVELTE同様、導入はとても簡単。
あと、nuxtnextと比べると開発サーバが立ちあがるまでがめちゃくちゃ早い。

SAPPER のディレクトリ構造

作成したSAPPERプロジェクトの中身を少し詳しく見てみましょう!

src

まずは/src/ディレクトリを開いてみましょう。
こちらには.svelteファイルのコンポーネントを置いておく為の
componentsディレクトリや、自動でルーティングを行ってくれるroutesディレクトリがあります。

routesディレクトリを確認してもらうと、index.svelteabout.svalteがあります。
例えばここにtest.svalteというファイルを作成すると、
http://localhost:3000/test に表示されます。

NuxtNextでもおなじみの機能ですが、
僕はもうこれだけの為にSAPPERNuxtといったフレームワークを
入れてもいいんじゃないかと思ってるくらい便利…

components/blog/ディレクトリを見てもらうとjsとテンプレートから
ページを作成できるような記述例も見れるのでチェックしてみてください。

sapper

下記コマンドを実行する事で、.svelteファイルで作成したものを
静的なhtmlファイルに変換して/__sapper__/export/に吐き出してくれます。

bash
npm run export

Nuxtで言うところのnpm run generateにあたるコマンドかな?
先ほど紹介したjsとテンプレートでページ作成を行っている箇所も
しっかりhtmlファイルとしてそれぞれ書き出しが行われます。

その他

webpackscssを入れたい時は下記の素敵な記事を参考にしてください。
https://qiita.com/azukisiromochi/items/7313c958b46048c7bcdc

所感

環境構築はめちゃくちゃ簡単で、ローカルホストが立ちあがるのもめちゃくちゃ早い。
ディレクトリ構造もシンプルなので、ちょっと触ってみようかな~と思ったら
すぐに始められるのがうれしかったです。

あと、VueReactより公式のExamplesがめちゃくちゃ豊富。
しかもアニメーションもめっちゃ豊富。

CSSやマークアップに強みを持っている人達が
The フロントエンド の技術に触れる前に、svelteを触ってみると
とっかかりやすそうだと思いました。

vueとかreactを触っている人たちなら、全くと言っていいほど参入障壁は無さそうです。


Written by daichi iwamoto