Svelteの手っ取り早い始め方

1 min読了の目安(約1200字TECH技術記事

はじめに

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

Svelteを手早く学習する方法

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

  1. 公式ページのチュートリアルで書き方を覚える
  2. Svelteのtemplateからプロジェクトを作って開発を始める

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

公式ページのチュートリアルで書き方を覚える

https://svelte.dev/tutorial/basics

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

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

SvelteのTemplateからプロジェクトを作成して開発を始める

チュートリアルが終わったら、プロジェクトを作成しましょう。この時、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

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