Svelte入門 環境構築・フォルダ構成について

Svelte入門 環境構築・フォルダ構成に関する忘備録

Vue.jsの50倍早いとかでフロントエンド界隈で注目を浴びている？svelte.jsを少し触ってみたので忘備録としてまとめました。

環境構築手順

Vue.jsのようにCDNを張り付けるだけで試せるような手軽さはありません。 まず、Node.jsがインストールされている事が前提条件としてあり、npxコマンドでプロジェクトを作成する必要があります。

プロジェクトの生成

npxコマンドを実行して新規プロジェクトを作成します。

npx degit sveltejs/template my-project

npxコマンドはnode.jsをインストールしたら一緒についてくるらしいのですが、自分の環境では認識されませんでした。その場合は別途npxをインストールします。

$ npm install -g npx

プロジェクトフォルダに移動してnpm installを実行します。

cd my-project/
npm install

package.jsonを開くとnpm installコマンドでインストールされたパッケージが確認できます。

{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^12.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

サーバーの起動

インストールが完了したら、npm run devコマンドを実行します。 Your application is ready~!と表示されたらサーバーが起動しているので、http://localhost:5000にアクセスします。 すると、svelteの初期画面 HELLO WORLD! が表示されます。

  Your application is ready~! 

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

Svelteの初期起動時の画面

Svelteの環境構築は以上です。 HELLO WORLDを表示させるまでは約10分程度で完了します。

フォルダ構成の確認

次にフォルダ構成を確認してみます。 プロジェクト作成後のフォルダ構成は以下のようになっています。 srcフォルダ以下に、App.svelteとmain.jsが格納されており、この２つのファイルが初期起動時のHELLO WORLDの画面を作っているようです。

project
 ├─node_modules
 │
 ├─public
 │  └─build
 ├─scripts
 └─src　←ここにあるファイルを編集する

各ファイルを開いてソースコードを確認してみました。 App.svelteの{name}部分にmain.jsで書かれているpropsの値がバインドされているようです。

<script>
    export let name;
</script>

<main>
    <h1>Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

まとめ

今回は導入から、フォルダ構成の確認まで行いました。 VueのようにCDN読み込みで使えないので、バリバリフロント開発しているところでないと導入のハードルはやや高いように思いました。

とはいえ実行速度はVueの50倍らしいし、サンプルを見る限り構文はとてもシンプルみたいなので日本語ドキュメントがもっと充実してきたら普及するのかも知れません。

次はSvelteの公式にある実装例を参考になにか作ろうかと思います。 https://svelte.dev/examples#hello-world