👋

Svelteの手っ取り早い始め方

2020/10/03に公開

はじめに

最近私はSvelteについていろいろ作っていて（業務でも使っていて）、そろそろそれらの知見を共有したいと思っている。今後いろいろな記事を書いていきたいと思うが、今回はSvelteについて手っ取り早く学習し始めたい人のために、Svelteの始めた方について述べていく。

さて、Svelteの始め方というのはたぶん人によって様々だと思う。まずは技術記事を見たりとか公式をのぞいたり。もちろんそれらは間違いではない。しかしながら、私が一番手っ取り早いのではと思うう方法を紹介しておく

この流れでやっていけばだいたいのことはやっていけるんではないかと思います。

このページにアクセスして、1~19章までチュートリアルがあります。それを、できれば全部こなすと良いと思いますが、全部こなさなくても、1 ~ 8章程度でもある程度は分かるのではないかと思います。

ほんとによくできています。チュートリアルをこなすときはできるだけ自分でコードを書いていくことをおススメします。（だるかったらShow Meボタンでホイホイ進んでも良いと思いますが）

チュートリアルが終わったら、プロジェクトを作成しましょう。この時、Project.jsonやらrollup.config.jsやらいろんな設定があって大変なので、Svelteの公式テンプレートからプロジェクトを作成するとおすすめです。

簡単なコマンドを紹介しておきます。

$ npx degit sveltejs/template svelte-app
$ cd svelte-app

degitを使って、https://github.com/sveltejs/template のテンプレートをダウンロードして、あとはsvete-appに行き、src以下でsvelteのコードを書いていきましょう。

$ npm run dev

とやらで、Svelteのコードがコンパイルされて、アプリが動きます。このコマンドはsrcが保存されると、再度Svelteのコンパイルが走って、アプリが更新されますので、このコマンドを走らせながら開発していくと良いでしょう。

あと、Typescriptを使いたいとかであれば

$ node scripts/setupTypeScript.js

とか叩いてあげましょう。あとは好みに設定して初めてみてください。