【Svelte Framework入門】Svelteアプリ開発でrollup.jsからViteに移行する


2022/07/19
2022/08/19
WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する②〜テーマ開発編
蛸壺の技術ブログ|Svelte開発環境でrollup.jsを辞めて、Viteで構築するお話

2022年も相変わらず
『javascriptフレームワーク多すぎ問題』が中々に世のフロントエンドエンジニアの心を多いに惑わしているようで、これからの数年間もこの傾向は続くような気配がします。

著者としては、2016年頃からずっとベビーなAngular推しですのでその辺はこのブログの全体の記事でなんとなく察していただけると思います。

ここ最近のjavascriptフレームワークの技術トレンドが大きく2つに二極化しつつあり、
「SSRなどを含むサーバーサイド技術方面のへシフト・さらなる高機能化」に進むものと、esbuildなどに代表されるように「開発者にとっての軽量・高速・快適なユーザーエクスペリエンスを目指す」類の方向性のものに分かれつつあります。

Angularなどは元々前者の立ち位置で、この数年ではNext.jsやNuxt.jsなどが大きくシェアを伸ばしています。

後者は、Svelte、Solid.js、Vanilla.jsなど、初学者にもとっつきやすく、学習障壁も低く、javascriptフレームワーク特有の開発を進めれば進めるほどビルドが非常に重くなってしまうイライラ感もなく、よりストレスフリーなプログラミング環境が構築できます。

個人的な意見ですが、高機能かつ堅牢・セキュアなjavascriptフレームワークと、軽量に動作し作業時間を圧縮できるjavascriptフレームワークを1つずつ修得しておくと、面倒な開発案件も柔軟に捌けるフロントエンド職人になれるような気がします。

そんなわけで、軽量系フレームワークだと、著者基準では
「Svelte推し」になるのですが、Svelteを学習するときに割と気になるのが、標準バンドラの「rollup.js」の存在です。

最初に学ぶjavascriptフレームワークがSvelteだったら、あまり気にはならないかも知れませんが、長年
「webpack」を使い込んで来た古参のフロントエンドエンジニアほど、rollupへの移行に抵抗を感じます...「あれほど苦労してwebpack覚えてきて、もうこれから新しいバンドラなんて勉強したくない...」という呪いにも気持ちです(※著者の意見です)。

以前の記事で、Svelteの開発環境をDocker Alpineで構築する方法を解説していました。

合同会社タコスキングダム|蛸壺の技術ブログ
【Svelte Framework入門】Svelteの開発環境をDocker Alpine内で簡単に構築する

Alpine LinuxコンテナからSvelteアプリ開発環境を構築するやり方を紹介します。

この記事内では正攻法で、rollupのセットアップを含む、svelteアプリのビルドまでの手順を説明していました。

内容を見ての通り、svelteプロジェクトをtypescript対応にしたり、Sass対応にしたりするのにも、rollupのプラグインというもの追加し、色々と設定してあげる必要があります。

中々これが苦痛です。

出来ればもっと簡単にこういった環境構築が出来たら良いのに!と思っていたら、最近噂で耳にした
Viteというバンドラ兼フロントエンド開発ツールが、Svelteにも対応しているという話しです。

ということで前置きが長くなりましたが、rollupからViteに移行すると、Svelteアプリ開発がどれだけ楽になるか、この記事で著者なりに検証してみようと思います。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

ViteからSvelte&Typescriptのプロジェクトを一発導入

ViteのGetting Startedのページを参考にViteを使えるようにしてみます。

以降では前回の記事で
node alpineコンテナの構築後でも良いので、適当にnode.jsが利用できる環境を利用します。

注意点として、Viteはnode.jsのバージョンが
>=14.18.0である必要があります。

Viteのnpm(yarn)のcreateコマンドから一発でプロジェクト生成が可能になっていることが非常に強力です。

Svelteアプリとして
svelte-viteという名前のプロジェクトをViteから一発生成(Scaffold)してみましょう。

            
            $ yarn create vite
yarn create v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-vite@3.0.0" with binaries:
      - create-vite
      - cva
✔ Project name: … svelte-vite
✔ Select a framework: › svelte
✔ Select a variant: › svelte-ts

Scaffolding project in /usr/src/app/svelte-vite...

Done. Now run:

  cd svelte-vite
  yarn
  yarn dev

Done in 11.04s.
        

ここでの
create viteコマンドを利用すると、対話的にいくつかの選択肢が現れます。

詳しいオプションは
公式のページを読んで頂くとして、ここではSvelteでtypescripがベースとして利用できるsvelte-tsを選択します。

次に、出力されたコマンドの支持に従い、

            
            $ cd svelte-vite
$ yarn
$ yarn dev
        
とすると、Viteで最初のHelloページが意図も簡単に立ち上がるのですが、Viteデフォルトでは5173を開放しておく必要があるので、Dockerコンテナのポートを開く必要があります。

            
            version: '3'

services:
  #...中略
  app:
    ports:
    #👇追加
      - "5173:5173"
#...以下略
        
また、Dockerコンテナ側からホスト側へIPを晒すために、デフォルトゲートウェイ・0.0.0.0をhostオプションとしてpackage.jsonのスクリプトで指定しましょう。

            
            {
  //...中略
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    //...以下略
        
これでdockerコンテナ外部のブラウザからでも、

            
            $ yarn dev
vite

  VITE v3.0.1  ready in 616 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.0.2:5173/
        
として無事にSvelte+Viteアプリが立ち上がります。

合同会社タコスキングダム|蛸壺の技術ブログ

なお、特定のポート番号を指定したい場合には
--portオプションを使って、

            
            $ vite --host 0.0.0.0 --port [開放先のポート番号]
        
すると良いようです。

viteコマンドの他のオプションはヘルプコマンドから確認できます。

            
            $ vite --help
#もしくは
$ ./node_modules/.bin/vite --help
        


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

ViteをSass対応にする

ViteでScaffoldしたプロジェクトのスタイルファイルは、デフォルトでCSSになっています。

よってSassへ置き換えるには、少しだけ手直しが必要です。

まずはプロジェクトに
Sass本体とベンダープレフィックス対応としてautoprefixerをパッケージインストールします。

            
            $ yarn add sass postcss autoprefixer -D
        
ViteはSassをインストールするだけで、Sass対応になるようで、すこぶる便利です。

元のstyle.cssを以下のようにscss形式に整えて、
style.scssへファイルの名前を変更し、main.ts内のスタイルをstyle.scssに指定し直します。

            
            :root {
    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;

    color-scheme: light dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #242424;
    @media (prefers-color-scheme: light) {
        color: #213547;
        background-color: #ffffff;
    }

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
    a {
        font-weight: 500;
        color: #646cff;
        text-decoration: inherit;
        &:hover {
        color: #535bf2;
        @media (prefers-color-scheme: light) { color: #747bff; }
        }
    }
}

#app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    h1 {
        font-size: 3.2em;
        line-height: 1.1;
    }
    .card { padding: 2em; }
    button {
        border-radius: 8px;
        border: 1px solid transparent;
        padding: 0.6em 1.2em;
        font-size: 1em;
        font-weight: 500;
        font-family: inherit;
        background-color: #1a1a1a;
        @media (prefers-color-scheme: light) { background-color: #f9f9f9; }
        cursor: pointer;
        transition: border-color 0.25s;
        &:hover { border-color: #646cff; }
        &:focus, &:focus-visible { outline: 4px auto -webkit-focus-ring-color; }
    }
}
        
ベンダープレフィックスを有効にするために、まずはpostcss.config.jsを次のように新規作成しましょう。

            
            import autoprefixer from 'autoprefixer'

export default {
    plugins:[autoprefixer]
}
        
viteの設定ファイルに以下のように追記します。

            
            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
//👇追記
import postcss from './postcss.config.js';

export default defineConfig({
    plugins: [svelte()],
    //👇追記
    css: {postcss}
})
        

これで、scssファイルがコンパイル後に自動でベンダープレフィックス対応のcssファイルに出力されるようになります。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

まとめ

Viteを使えばSvelteプロジェクトのTypescript・Sass化も即時整うことが分かりました。

これでRollupもほぼ意識することなく、Svelteアプリ開発に邁進することが可能かと思います。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集