WindowsにSvelte開発環境を作ってみる
はじめに
みなさんはじめまして。
2023年5月から株式会社ネクストビートに中途入社し、Webエンジニアとして働いている阿部と申します。
弊社では現在、一部のサービスにてSvelteを用いた開発しています。
しかし自分は入社したばかりで更にはWeb開発未経験…。
一刻も早く戦力になれるように、Svelteを用いたWeb開発の自己学習を始めてみました。
プライベートで利用しているWindows PCで開発環境の構築をしてみたところ大苦戦してしまいました…。
そこで本稿では、Windows PCでSvelteを用いたWebアプリケーション開発環境を構築する手順を紹介させていただこうと思います。
対象読者
- Svelteをこれから学ぼうとしている方
- 主にWindows OSを使っている方
Svelteとは？
Svelteとは、JavaScriptを拡張したWebフロントエンド開発のフレームワークです。
特徴としては、ReactやVue.jsのように仮想DOMを利用しないことが挙げられます。仮想DOMは比較的高いパフォーマンスを実現してくれますが、仮想DOMの仕組み自体がオーバーヘッドになってしまう欠点があります。Svelteはviteを利用したコンパイルを行い、最適にDOMを操作するJavaScriptコードを生成するため実行時のオーバーヘッドを減らすことができます。
また、1コンポーネント1ファイルとして作成し、コンポーネント毎にロジック・テンプレート・スタイルを記述するので非常に高い密閉度でカプセル化されたコンポーネントを作成できます。テンプレートの記法も純粋なHTMLに近く、学習コストが比較的少ない点も強みとして挙げられます。
前提条件
- 使用するOS: Windows10（64bit）
- 使用するエディタ: Visual Stadio Code
環境選定
Web開発をする際、npm系のコマンドを使用したり環境変数を操作したりなど、頻繁にCLI上での操作が発生するかと思います。
また場合によっては、nodeやnpm等のバージョン管理をしなければならないこともあります。
これらのコマンド操作性やバージョン管理の容易さなども加味し、下記の環境について考察していきます。
- Windowsデフォルト（PowerShell）
- WSL2
- Dev Container
Windowsデフォルト（PowerShell）
正直一番おすすめできないです。
Linux系OS/MacOSと比べると、nodeおよびnpmのパッケージマネージャの選択肢がどうしても狭まってしまいます。
何よりもPowerShellの仕様上、npm等でインストールしたライブラリのコマンドをそのまま使えないという問題があります。Windowsの場合、npmでインストールしたライブラリのコマンドはPowerShellスクリプトを経由して実行されます。しかし、PowerShellの仕様として、インターネット上から取得したスクリプトファイルをそのまま実行できないというものがあります。PowerShellのセキュリティレベルを下げる、スクリプトファイルに署名を付与するなどの回避方法はありますが、どれも手間やリスクが発生します。
以上の理由から、本稿ではWindowsデフォルト（PowerShell）用いる方法は見送ります。
WSL2
比較的おすすめな方法として、WSL2を用いた環境構築方法を説明しようと思います。
WSL2とは
WSL2（Windows Subsystem for Linux 2）とは、Windows OS上でLinuxを動作させるための実行環境です。Windows OS内の専用仮想マシン上にLinuxを構築するような仕組みになっており、WindowsからシームレスにLinuxを操作できます。つまり、実質Windowsでシェル（bash/zs）やLinux用ソフトウェアを利用できるようになります。これにより、様々なnpm系ライブラリのコマンドや、nodeバージョン管理ツールを簡単に使えるようになります。
WSL2環境の構築
では実際にWSL2を使って開発環境を構築していこうと思います。
手順は以下の通りです。
- WSL2の有効化
- Linux（Ubuntu）のインストール
- node + npmのインストール
- Svelteプロジェクトの作成
順番に説明していきます。
1. WSL2の有効化
まずはWindows上でWSL2の機能を利用するために必要な設定を有効化します。
有効化する設定は下記の2つです。
- Linux用Windowsサブシステム
- 仮想マシンプラットフォーム
これらを有効化するために、下記の順番で操作してください。
- スタートボタンからスタートメニューを表示
- 「Windowsシステムツール」をクリックし、システムツールを展開
- 「コントロールパネル」を選択
- 「プログラム」選択
- 「Windowsの機能の有効化または無効化」を選択
- 「Linux用Windowsサブシステム」と「仮想マシンプラットフォーム」のを有効化
これでWSL2の機能が有効化されました。しかし、初期設定ではWSL1が既定のバージョンとして設定されています。WSL2を既定のバージョンとするため、下記の操作を実施してください。
- 「Windows」キー+「R」キーを同時に押し、「ファイル名を指定して実行」を表示
- 「cmd」と入力後、「OK」をクリックしコマンドプロンプトを表示
- コマンドプロンプトにて、下記のコマンドを実行
> wsl - set-default-version 22. Linux（Ubuntu）のインストール
次にLinuxをインストールしていきます。Linuxをインストールするためには、コマンドプロンプトにて下記のコマンドを実行します。
> wsl --installこの場合、既定のLinuxディストリビューションであるUbuntuがインストールされます。本稿ではUbuntuを利用して環境構築を進めますが、もし他のディストリビューションを利用したい場合は次のコマンドを実行し、インストール可能なディストリビューション一覧を取得します。
> wsl --list --online次に、一覧中のインストールしたいディストリビューション名を下記のコマンドの<ディストリビューション名> に埋め込み実行してください。
> wsl --install <ディストリビューション名>3. node + npmのインストール
続いては、インストールしたUbuntuにnodeとnpmをインストールしていきます。まずはUbuntuを起動してみましょう。Ubuntuの起動は、コマンドラインにて下記のコマンドを実行するだけです。
> wslこれでUbuntuが起動し、UbuntuのCLIが表示されます。続けてnodeをインストールしてみましょう。nodeのインストールには、お馴染みのapt-getを用います。
$ sudo apt-get update
$ sudo apt-get install nodejsこれでnodeのインストールが完了しました。更にnpmをインストールしていきます。
$ sudo apt-get install npm今回は簡単にnpmを利用した方法を紹介していますが、お好みに合わせてyarnやpnpmなどのパッケージマネージャをインストールしてください。
4. Svelteプロジェクトの作成
最後にSvelteのプロジェクトを作成します。プロジェクトの作成には、任意のディレクトリにて下記のコマンドを実行するだけです。（<my-app> の部分は任意のプロジェクト名に差し替えてください。）
$ npm create svelte@latest <my-app>コマンド実行後、プロジェクトの種類やJavaScript/TypeScriptを利用するか、Linterなどをどうするかを聞かれます。こちらもお好みの設定を選択してください。
これにてWSL2を用いた環境構築が完了となります。
Dev Container
最もおすすめの方法として、Dev Containerを用いた方法を説明させていただきます。
Dev Containerとは？
Dev Containerとは、Visutal Stadio Code（以下VSCode）の拡張機能です。Dockerコンテナ上に必要なライブラリやパッケージ、ランタイム、VSCodeの拡張機能設定などを閉じ込めた開発環境を構築できます。
これらの環境情報はDev Containerの構成ファイルとして保存されます。すなわち、構成ファイルとDockerfile、docker-compose.ymlを共有すれば、簡単に環境を共有できます。正直、個人開発する上ではそこまで重要ではないと思います。しかし、いざ他のPCでも同じ環境を構築しようとした時、忘れやすい環境情報を手軽に使いまわせるのは非常に便利です。
Dev Container環境の構築
ここからはDev Containerを利用したSvelte開発環境の構築について説明していきます。下記の手順にて構築を進めていきます。
- Dockerのインストール
- VSCodeにDev Containerの拡張機能を追加
- Dev Containerにてnode開発用のコンテナを生成
- Svelteプロジェクトの作成
1. Dockerのインストール
Dev Containerを利用する上で、Dockerが必要となります。本稿ではDockerのインストール自体は詳しく説明いたしませんので、Docker公式ドキュメント等を参考にインストールを実施してください。
2. VSCodeにDev Containerの拡張機能を追加
次に、Dev ContainerをVSCodeにインストールします。VSCodeの拡張機能一覧にて、次の文字列で拡張機能の検索をしてください。
@id:ms-vscode-remote.remote-containers
検索結果に表示された拡張機能をインストールしてください。
3. Dev Containerにてnode開発用のコンテナを生成
開発用のコンテナを構築する準備ができたので、実際にコンテナを作っていきます。
まずはVSCodeを開き、画面左下のアイコンをクリックします。
※Dockerを起動した状態で操作してください。
画面上部でDev Containerメニューが開くので、「新しいコンテナー…」を選択します。
コンテナイメージの一覧が表示されます。node開発環境が必要なので、検索バーに「node」と入力し、表示された検索結果の中から任意のコンテナイメージを選択します。今回はDev Containerが用意している「Node.js & JavaScript」環境を選択します。
コンテナ構成オプションを変更するか聞かれます。コンテナイメージによってはコンテナのディストリビューションを変更できたりします。今回は既定の構成で進めていきますので、そのまま「Dev Containerの作成」を選択します。
開発用コンテナの作成が始まります。しばらく時間がかかるので、終わるまで待機します。
コンテナの作成が終わると、左下のアイコンに開発コンテナ名が表示されます。更に、カレントディレクトリに ./.devcontainer/devcontainer.jsonが生成されます。
以上がnode開発コンテナの作成方法となります。このコンテナイメージはnpmおよびyarnが含まれているイメージなので、追加でパッケージマネージャをインストールする必要はありません。
最後に生成された ./.devcontainer/devcontainer.jsonはDev Containerの構成ファイルです。開発環境を共有したい場合は、このフォルダとファイルを共有してください。フォルダが配置されている場所で、Dev Containerメニューから「コンテナーで再度開く」を選択すると同じ環境で開発を進めることができます。
4. Svelteプロジェクトの作成
プロジェクトの作成方法はWSL2の場合と同じです。開発コンテナにアタッチした状態で、VSCodeのターミナルを開くと、シェルが起動します。
シェル上で下記のコマンドを実行してください。
$ npm create svelte@latest <my-app>コマンド実行後、プロジェクトの種類やJavaScript/TypeScriptを利用するか、Linterなどをどうするかを聞かれます。こちらもお好みの設定を選択してください。
以上でDev Containerを用いた環境構築が完了となります。
Dev Containerを使う場合の注意点
Dev Containerを用いたSvelte開発環境の注意点として、ホットリロードが動作しないというものがあります。これはvite.config.js設定ファイルに下記のように設定を追加すればホットリロードが動作するようになります。
export default defineConfig({
plugins: [sveltekit()],
+ server: {
+ watch: {
+ usePolling: true
+ }
+ }
});まとめ
長くなりましたが、以上でWindowsでのSvelte開発環境構築についての説明とさせていただきます。プログラミングや開発の学習をするうえで、環境構築は1つの大きなハードルだと思うので参考になれば幸いです。
We are hiring!
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？
・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい
など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！
🔽申し込みはこちら
https://hrmos.co/pages/nextbeat/jobs/1000008
また、ネクストビートについてはこちらもご覧ください。
