SVELTEとは

公式サイトはこちら。
ざっくり説明すると記述方法が簡単で早いJS フレームワークです。
記述方法だけ見てると、簡単すぎて

や っていうよりはもはや
とかの方が近くない！？ってなるくらい簡単。

SAPPERとは

はのフレームワークで
でいう, でいう的なポジションの奴です。

SVELTE導入

まずは

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

まずは

のインストール。

これで立ちあがった localhost を開く

の初期画面が表示されるかと思います。
前準備はたったこれだけでOK

ちなみに、公式リポジトリからコピーを落としてくる際に使用している

というのは
より高速にソースを落としてきてくれる優れものだそうです。（npm）

基本的な構文や使い方を学びたい場合は、ここまでできればあとは

を色々いじって試すことができます。

ただ、ルーティング等を考え出すと現状

や的な存在がいないので
その他の等のモジュールをインストールしてそれぞれ設定する必要があります。
それはメンドクサイし、情報自体も現段階ではあまりないので
を入れちゃいたいと思います。

SAPPER 導入

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

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

これで立ちあがった localhost を開くと

の初期画面
『╭( ･ㅂ･)و̑ ｸﾞｯ』の赤ちゃんが表示されるかと思います。

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

SAPPER のディレクトリ構造

作成した

プロジェクトの中身を少し詳しく見てみましょう！

src

まずは

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

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

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

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

sapper

下記コマンドを実行する事で、

ファイルで作成したものを
静的なファイルに変換してに吐き出してくれます。

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

その他

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

所感

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

あと、

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

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

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