# JavaScriptライブラリ Svelteとは
Svelte とは、React や Vue.js・Angular のような宣言的 UI ライブラリの一種です。
その最大の特徴は、React や Vue.js・Angular と異なり Svelte は**コンパイラ**であることを謳っているところです。Svelte によってコンパイルされたコードは、すべて Vanilla JS - ネイティブの JavaScript- にて生成されます。
そのため、コンパイル後のファイルサイズも小さくパフォーマンス上での利点が期待されています。 実際に React の**35倍**、Vue.js の**50倍**のベンチマークが計測されているようです。
また 2020/07/17 には公式で TypeScript に対応しています。
# プロジェクトを作成する
＊ Node.js がインストールされていることが前提です。
下記コマンドで TypeScript での Svelte プロジェクトを作成します。
```sh
npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js
Converted to TypeScript.
```
プロジェクトの作成したら、依存モジュールをインストールして起動してみましょう！
```sh
npm install
npm run dev
```
[localhost:5000](localhost:5000)にアクセスすると、次の画面が表示されているはずです。
もし vscode を利用しているのならば、公式の拡張を導入することをおすすめします。
[Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
# ファイルの中身を確認する
作成した Svelte プロジェクトがどのような構造になっているのか見ていきましょう。
ディレクトリ構成は次のとおりです。
```sh
├── package-lock.json
├── package.json
├── public
│ ├── build
│ │ ├── bundle.css
│ │ ├── bundle.js
│ │ └── bundle.js.map
│ ├── favicon.png
│ ├── global.css
│ └── index.html
├── rollup.config.js
├── src
│ ├── App.svelte
│ └── main.ts
└── tsconfig.json
```
Svelte もまたコンポーネント指向のライブラリです。最初コンポーネントは `src/App.svelte` です。Svelte のコンポーネントは `.svelte` という拡張子を使います。
```html:App.svelte
Hello {name}!
Visit the Svelte tutorial to learn how to build Svelte apps.
```
1 つのファイルに HTML・JavaScript・CSS がまとまっており、Vue.js の単一ファイルコンポーネントによく似ています。
`