Svelte

Svelte-Helloworld

今時のフロントエンドは Svelte と言われたので、Hello world を動かしてみました。

前準備

npx コマンドがインストールされていることを確認する。

1
2
$ npx --version
6.13.4

npx コマンドがインストールされていない場合は、別途 npm コマンドをインストールする。

1
$ npm install -g npx

プロジェクトを作成する

新規プロジェクトを作成する。

1
2
3
$ npx degit sveltejs/template helloworld
npx: installed 1 in 1.739s
> cloned sveltejs/template#master to helloworld

作成したプロジェクトのディレクトリーに移動する。

1
$ cd helloworld

必要なパッケージをインストールする。

1
2
3
4
5
6
7
8
9
10
11
12
13
$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\rollup\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

added 91 packages from 124 contributors and audited 92 packages in 2.314s

3 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

以下の package.json が作成される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
   " start": "sirv public"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^14.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": "^7.0.0",
    "svelte": "^3.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

サーバーを起動する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ npm run dev

> svelte-app@1.0.0 dev C:\Users\user\Documents\svelte\helloworld
> rollup -c -w

rollup v2.26.5
bundles src/main.js → public\build\bundle.js...
LiveReload enabled
created public\build\bundle.js in 230ms

[2020-08-24 11:50:41] waiting for changes...

> svelte-app@1.0.0 start C:\Users\user\Documents\svelte\helloworld
> sirv public "--dev"

  Your application is ready~! 🚀

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

────────────────── LOGS ──────────────────

ブラウザーから http://localhost:5000 にアクセスすると、アクセスログが表示される。

1
2
3
4
5
6
7
────────────────── LOGS ──────────────────

 [11:51:25] 200 ─ 2.77ms ─ /
 [11:51:25] 200 ─ 0.60ms ─ /global.css
 [11:51:25] 200 ─ 0.92ms ─ /build/bundle.css
 [11:51:25] 200 ─ 1.55ms ─ /build/bundle.js
 [11:51:25] 200 ─ 0.46ms ─ /favicon.png

ディレクトリー構成

新規プロジェクトの作成直後のディレクトリー構成は以下のようになっている。

1
2
3
4
5
6
7
8
9
10
11
project/
+- .gitignore
+- node_modules/
+- package-lock.json
+- package.json
+- public/
| +- build/
+- README.md
+- rollup.config.js
+- scripts/
+- src/

src/App.svelte

アプリ家ショーン表示部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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>

src/main.js

アプリケーションの本体。

1
2
3
4
5
6
7
8
import App from './App.svelte';

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