はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった SolidJS に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
SolidJS に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
前提
本シリーズでは Turborepo によるモノレポ管理を行っています。
単体で SolidJS を導入する場合は適宜プロジェクト作成先パスを変更して下さい。
SolidJS の導入
apps配下にSolidJSのプロジェクトを作成します。
プロジェクトのセットアップ
今回はテンプレートから Typescript と TailwindCSS があらかじめ導入されているものを選びます。
npx degit solidjs/templates/ts-tailwindcss apps/solid-client
solidjs/templates/<テンプレートの種類> でテンプレートの指定が可能です。
(参考: templates)
package 名の変更
今回は Turborepo で管理しやすいように package の名前をsolid-clientに変更します。(任意)
{
+ "name": "solid-client",
"version": "0.0.0",
"description": "",
"type": "module",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"license": "MIT",
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.7.2",
"vite": "^6.0.0",
"vite-plugin-solid": "^2.11.0"
},
"dependencies": {
"solid-js": "^1.9.3"
}
}
パッケージのインストール
今回は Turborepo で管理するので pnpm でインストールします。
※ お好みで選んでください。
# Turborepoの場合 (ルートで実行)
pnpm --filter solid-client install
# 単体の場合
cd apps/solid-client
npm install
Solid プロジェクトの立ち上げ
dev コマンドでローカル環境の立ち上げます。
# モノレポの場合 (ルートで実行)
pnpm --filter solid-client dev
# 単体の場合
npm run dev
↑ のコマンドで立ち上がらない場合は package.json の nameフィールド が solid-client に設定されているか確認して下さい。
ブラウザで確認
ブラウザで http://localhost:3003 を開くと、"Hello tailwind!" と表示されます。
おわりに
導入から立ち上げまで体感 約 10 秒程度で完了してしまう程速かったので、本当に軽量なんだなと実感しました。
またテンプレートの中から用途に合ったものを指定できるので、とりあえず動かしたい時にサクッと立ち上げ出来るのは便利だなと思いました。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 14 記事目です。
次の記事はこちら SolidJS の世界: UI 構築とトランジション #3