Svelteことはじめ

ここまでの内容で、Webサイトをデプロイする方法はわかったと思います。ここからは、実際にSvelteを使ってWebページをデザインする方法を見ていきましょう。ここからのページの内容は、Svelteの公式サイトの内容を元に書かれています。また、公式チュートリアルでは、より丁寧に解説されているので、こちらもぜひやってみてください。

Svelteとは

(以下、私としてもよくわかっていないところとなります。正確なところが気になるなら自分で調べてみてください。)Svelteとは、一言で言えばコンパイラです(多分)。Svelteの文法(といってもほぼHTML、CSS、JavaScriptそのままに近いですが)で書いたコードを、実際にブラウザで動くコードに変換してくれます。こいつを利用してWebアプリケーションを開発するためのフレームワークがSvelteKitとなり、これまで頑張って導入したものです。個人的に、生のHTML、CSS、JavaScriptを書くのと近い感覚で書けるので、お手軽でいいなと感じます。

とりあえず書いてみよう

なんだかんだ言われてもなにがなんだか分からないと思うので、とりあえずなんか書いていこうと思います。先程作ったプロジェクトの、src/routes/+page.svelteを開いてください。そしたら、次の内容が書かれていると思います。

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

お気付きの通り、皆さんの知っているHTMLのままだと思います。では次に、これにスタイルをあてていきましょう。このコードの続きに、以下の内容を追加してください。

<style>
    h1{
        color: red;
    }
    p{
        color: blue;
    }
</style>

文字の色が変わったと思います。このように、Svelteでは、CSSはstyleタグの中に書いていく形となります。

また、特定のHTMLタグだけにCSSを適用したい場合は、style属性を直接書き込むことができます。HTMLの部分に、以下のコードを追加してみてください。

<h1 style="color: green;">直接style属性を当てています</h1>

緑色の文字が追加されたと思います。

では、次はJavaScriptを書いていきましょう。といっても、今後TypeScriptのほうが何かと役に立つと思うので、このサンプルではTypeScriptで書いていきます。(ここで扱う範囲では大して違いはないはずです。)では、次のコードを追加してみてください。

<script lang="ts">
    console.log("Hello!");
</script>

追加してからこのページを開いて開発者ツールで見てみると、Hello!と出力されていると思います。このように、Svelteでは、スクリプトはscriptタグの中に書いていきます。ちなみに、TypeScriptではなくJavaScriptで書きたければ、lang="ts"の記述を消してください。

関数も、同様にscriptタグの中に記述していきます。次の関数を、scriptタグの中に追加してください。

function hello(){
    console.log("Hello!!");
}

この関数は、普通に呼び出してもいいですが、ここではボタンを使って呼び出してみましょう。HTMLの部分に、以下を追加してください。

<button onclick={hello}>ボタン</button>

ボタンを押したら、開発者ツールのコンソールにHello!!と出力されると思います。

上の例のように、Svelteでは、{}で囲んだ部分はJavaScript(TypeScript)として扱われます。後ほども紹介しますが、これは非常に重要であるため覚えておいてほしいです。

ちなみに、alertなどの一部の関数は、ボタンなどから呼び出す関数内では使用できますが、それ以外の場所では使用できません。console.logをalertに変えてみると、ボタンの方ではうまくいくと思いますが、そうでない方ではうまく行かないと思います。

さいごにもう一つ、{}内はスクリプトとして扱われるため、以下のようなボタンもしっかり動作します。やってみてください。

<button onclick={()=>{alert("Hello!!!")}}>ボタン2</button>

※ちなみに()=>{}というのはアロー関数式と言って、普通の関数とだいたい同じです。(少し違うらしいです。)