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
が格納されており、この2つのファイルが初期起動時の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