デザイナー、Web制作者もできるSvelte入門
■第１話：Svelteのすすめ
（最終更新日：2024.03.24）
（絵が小さい場合はスマホを横に）
「Svelteならできそう！」
現在フロントエンドのフレームワークで最もメジャーなものはReactである。
しかしながら、Reactは関数型言語の理解などが必要で学習コストが高く、使えるのはある程度プログラミングができる人に限られる。
そこで、Web制作ができる人であれば充分理解が可能なフロントエンドフレームワーク、Svelteが登場した。
今回は、比較的簡単に習得できるフレームワーク、Svelteについて解説する。
１.Svelteの特徴、SPAの比較
まずはSvelteの基本コードを見てみよう。 通常、JavaScriptは最上部、HTMLは中部、そしてCSSは最下部に記述する。 順序に厳密なルールはないが、基本的にはこの順序で書く。 HTML、CSS、JavaScriptはそれぞれ別々に記述され、普段使っているHTMLと大差ないため、特別な困難さを感じることはないだろう。 ここで書かれているような各ファイルは、それぞれ部品（コンポーネント）となり、これらを組み合わせてWebページを構築する。 記述自体は通常のHTMLと殆ど変わらないため、Reactを難しいと感じた人でも挫折せず、容易にスタートできるはずだ。
Svelteの書き方
次にSvelteの特徴について抑えよう。
特徴を分かりやすく捉えるために、ReactとVanilla JS（生のJavaScript）でそれぞれ行った。
vs React
①楽に書ける。比較的簡単：
ReactはHTMLを関数の中に入れて表現するため、初学者が理解するのに時間がかかる。
Svelteは、マークアップやJavaScriptを通常のHTMLと同じように書くことができる。SPAで重要な状態管理に関しても、非常に簡単に記述できる。
②CSSの記法を変えない：ReactはCSSの記法をスネークケースからキャメルケースに変える、
末尾がカンマ区切りになるなど違いがあるが、Svelteはそのままの書き方で書ける。
③状態管理ツールが標準：ReactだとRedux、Recoilなど、状態管理ツールを自分で選ぶ必要があるが、
Svelteは標準のstoreで管理するだけでよい。選択の手間やサポート終了のリスクが少ない。
④コンパイル、実行速度ともに速い：Viteを使っているため、コンパイルが非常に速い。
快適に開発できる。また、仮想DOMではなく、生DOMを使っているため、実行速度も速い。
vs Vanilla JS
①Sass、TypeScriptに対応する：CSSは効率的に、TypeScriptは型安全に書ける。
Sass、TypeScript共にコンパイルを同時に行ってくれるので、個別にコンパイルする手間がない。
②コンポーネント化しやすい：コンポーネント毎にファイルで管理するので部品化しやすい。
再利用性が高まる。適切な大きさに分ければ、コードの見通しも良くなる。
③再レンダリング、状態管理ができる：Svelteは基本再レンダリングする。状態管理ツールもある。
Vanilla JSで再レンダリングと状態管理を実現しようとすると、自分で実装する必要があり大変である。
④アニメーションやエフェクトが付いている：Svelteはanimate関数やtransitionを使うことで、簡単に動きのあるサイトをつくれる。
⑤スマホアプリにもできる：Svelte Nativeというものがある。同様のコードでスマホアプリ化できる。
上記のように、Svelteには採用するだけの多くのメリットがある。 一方で、Svelteには弱点もあるので、それも記述する。
弱点
①データフローが追いにくい：双方向バインディングを採用しているため、データフローが直感的で開発速度が早い一方、
大規模アプリケーションではデータフローを追うのが難しくなる。
②日本での実例、ユーザーが少ない：SvelteKitのバージョンが未だ1で、ユーザーが少ない。日本での実例が少ないのが現状である。
しかしながら、チュートリアルのある日本語公式サイトや先行して使う企業（ATeam, M&Aクラウド）が出てきており、今後が期待できる。
③エコシステムが弱い
②にも関係するが、エコシステムがまだ弱く、サードパーティ製ライブラリが少ない。
2022年11月時点では、ルーティングのできる公式フレームワークSvelteKitがベータ版という懸念点があったが、
2022年12月14日に正式版1.0がリリースされ、解消された。現在はSvelteKit2.0がリリースされ、更に安定感が増している。
Svelteの特徴を簡潔にまとめると、「気軽にシングルページアプリケーション（SPA）を試せるフレームワーク」だと言える。 Firebaseなどのサーバーレスなバックエンドと組み合わせて小規模開発を行ったり、企業向けのWeb制作を行うのに適している。 エンジニアのスキルレベルが高くないチームでは、Reactを使って素早く開発を進めるのは難しいかもしれない。 しかし、Svelteの場合、マークアップが書ければ、ある程度慣れで何とかなるため、そのようなチームでも活用できるツールになるだろう。 WebデザイナーやWeb制作者が初見でコードを見ても、理解しやすいはずだ。
２.SvelteKitのインストール
まず、最初にSvelteKitのインストール方法を説明する。公式サイトにあるように、まずは
「npm create svelte@latest アプリ名」「cd アプリ名」「npm install」「npm run dev」を順に実行しよう。
これで、ルーティング機能等を搭載したSvelteのフレームワーク、SvelteKitがインストールできる。
インストール時に幾つか選択肢が出る。最初の選択で「Library skeleton project」を選び、次に
「using TypeScript」を選べば良い。その他のESLintやTestの導入などは必要に応じて選択してほしい。
インストール時の選択
SvelteKitはコンパイルにViteを用いているため、nodeのバージョンが16以上しか動かないので注意しよう。 「npm run dev」後にこのような表示がされれば成功である。
インストール成功時のスタート画面
次にCSSフレームワークを導入する。CSSフレームワークはUIコンポーネント含め、様々なものが利用できる。
使えるものはここで確認しよう。
今回は導入が簡単なBulmaを用いる。「npm install bulma」とコマンドを打ち、
+layout.svelteでimportするだけである。importの箇所は後に説明する。
そして、npmでSassもインストールしておこう。
dart Sass（新バージョン）とnode Sass（旧バージョン）のどちらを選ぶかは、各自の判断にお任せする。
次に、以下のディレクトリ構造に従って赤で示されたディレクトリやファイルを新たに作成してほしい。
'lib'ディレクトリ内には'Header'と'Footer'のコンポーネントを配置し、'+layout.svelte'でこれらを読み込む。
さらに、'routes'ディレクトリ内に新しいディレクトリを作成し、その中に'+page.svelte'ファイルを作成すると、
自動的に（以下の例では'localhost:5371/home/'に）ルーティングされる。
'+ 'という表記には初めて触れる人もいるかもしれない。
この部分はルールなので、Svelteではこう書くものだと覚えておいてほしい。
ディレクトリ構成(左)とHeder(右上)、Footer(右下)コンポーネント
layout.svelteにHeaderとFooterの読み込み、bulmaの読み込みを記述（左）
+page.svelteにページ内容の記述（右）
最後にSEO対策として、layout.jsにtrailing slush（URLに必ずスラッシュを付ける）を設定しよう。 スラッシュ有と無が混在すると、2重にページが存在することになり、SEOの評価が下がるからだ。 trailingSlashをalwaysにすれば、どのページも必ず末尾スラッシュが付く。
layout.jsにルーティングの設定を書く
以上を反映すると、以下のような基本フレームで構成された画面ができる。 次回以降、ページ内容の具体的な書き方を説明する。
出来上がった/home/のWebページ
３.まとめ
今回、Svelteの特徴、インストール方法を簡単に説明した。 フレームワーク自体の学習コストが低く、導入しやすいというのが、非常に大きな魅力だろう。 小さめのサービスやWebサイトを制作をするのにも向いている。Svelte Nativeを使えばスマホアプリ化も可能である。 時間やエンジニアリソースをかけずに、気軽にSPAを始めてみたい人にとっては打ってつけのツールだと言える。
▼参考図書、サイト
Svelte公式日本語サイト Svelte.jp
【Svelte.js入門】ReactやVueに挫折した人でも大丈夫！Svelteとfirebaseでシンプルアプリ開発 Udemy（現在コース廃止）
Svelteで使えるUIコンポーネントライブラリをまとめてみた Qiita