はじめに
SolidJS と呼ばれる JavaScript フレームワークが個人的に話題です。
一体どんなものなのか、実際にコードを動かしてみました。
また、SolidJS を学ぶ過程で遭遇した TailwindCSS, pnpm, Vite, Astro というような最新ライブラリについても触れていきます。
2022.stateofjs.com によると、今回取り上げるツールらは全て TIER S と堂々たる満足度を獲得しています。（SolidJS と Astro はまだユーザー数が少なく表からは除外されているようですが、スコアは 90%を超えており間違いなく S 級です。CSS は対象外。）
各ツールについて
SolidJS
SolidJS は、React や Vue のような宣言的 JavaScript フレームワークの一種です。
2018 年に公開され、2021 年には React, Vue を抜いて満足度 No.1を獲得しています。
特徴
高速
SolidJS は Vanilla JS と遜色ない速度で処理することができます。
仮想 DOM を利用しないことで実現しているそうです。
（元々、高速化のために利用されてきた仮想 DOM を手放したんですねぇ）
React 風
SolidJS は、特に React と Knockout という巨人の肩の上に立っています。
そのため React が馴染みのある方は SolidJS も抵抗なく学習することができるでしょう。
（筆者は React を触ったことがないので、その辺りの感覚は分かりません。）
Tailwind CSS
Tailwind CSS はユーティリティクラスを利用した CSS フレームワークです。
（ユーティリティクラスとは、クラス名がそのまま css のプロパティとその値を表現するクラスです。）
これにより、class を管理したり、命名したりする手間を省くことができます。
Bootstrap を味気ないな、と感じている方にも気に入ってもらえること間違いなし。
<p class="text-lg font-medium">
“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”
</p>
以下のサイトで、コードを実際に動かしてみることができます。
pnpm
pnpm は高速、かつディスク容量効率が良いパッケージマネージャーです。
pnpm では、複数プロジェクト間で共通するファイルを一元管理しています。
そのため、インストールが高速で、かつ容量消費を抑えることができます。
Benchmarks of JavaScript Package Managers によるベンチマークは以下のようになっており、pnpm が高速であることがわかります。
また、pnpm はパッケージ管理が厳格で、package.json に記載のあるものにしかアクセスできません。
「ささいな間違いを犯さないようにすること (helps to avoid silly bugs) 」だそうです。
個人的には、とても嬉しい機能ですね。
Vite
Vite は、2020 年に公開された、より速く無駄のない開発体験を提供することを目的としたビルドツールです。
フランス語で「素早い」という意味の単語でヴィートのように発音します。
ビルドツールの有名なものとして 、webpack・Rollup・Parcel などがあります
Vite は Vue.js・Svelte・React・SolidJS など、さまざまなフレームワークで利用可能です。
Vite はモジュール分割の仕組みである「ES Modules」を利用して、修正や変更が加えられたソースだけをコンパイルしてブラウザにレンダリングします。
これにより、大規模プロジェクトでも起動や更新が高速で行えるようになっています。
Astro
Astro は開発時に利用する JavaScript をできるだけ除外した HTML ファイルを作成してくれる静的サイトジェネレーターです。
静的サイトジェネレーターの有名なものとして Next.js ・ Gatsby ・ Hugo ・ NuxtJS ・ Jekyll などがあります。
JS を取り除くことで、高速なレンダリング・ロードデータサイズの削減が可能となっています。
公式サイトによると Next.js を利用したブログサイトを Astro を使ってビルドすれば、ページロードサイズが 1/10 以上削減できるようです。
また、カルーセルやショッピングカードなどクライアント側で必要な JavaScript がある場合はコンポーネント単位で JavaScript を利用するかどうかを設定することが可能です。
Astro も Vite と同様に、Vue.js・Svelte・React・SolidJS など、さまざまなフレームワークで利用可能です。
Astro は Vite を利用してビルドしており、Astro チームは現在、エコシステムでの活発なプレイヤーであり、Vite の改良に貢献しているそうです。（参考）
実際にコードを動かしてみる
SolidJS With Vite
まずは、SolidJS + TailwindCSS + pnpm + Vite な環境を構築してみます。
実験に利用したコードはこちらに置いています。
各種設定については Readme と個々の設定ファイルを見ていただけると幸いです。
要点は以下になります。
import { createSignal, onCleanup } from "solid-js";
import { render } from "solid-js/web";
import { Header } from "./header";
import { FibonacciComponent } from "./fibonacci";
import { RepeatingComponent } from "./repeat";
import "./index.css"; // TailwindCSSを扱えるようにしている
// 1秒ごとにカウントするコンポーネント
const CountingComponent = () => {
const [count, setCount] = createSignal(0);
const interval = setInterval(() => setCount((count) => count + 1), 1000);
onCleanup(() => clearInterval(interval));
return <div class="text-red-500">Count value is {count()}</div>;
};
const App = () => {
return (
<>
<Header />
<CountingComponent />
<FibonacciComponent />
<RepeatingComponent />
</>
);
};
render(() => <App />, document.getElementById("root"));
import { createSignal, onCleanup } from "solid-js"の部分が SolidJS です。まんまですね笑。
class="text-red-500" の部分が Tailwind CSS のユーティリティクラスですね。後ろについている500は色の濃さを表しています。
サンプルコードは、pnpm viteで起動することができます。pnpm で必要なパッケージをインストールし、Vite で Typescript などをコンパイルしています。
Vite はソースコードの変更部分だけをコンパイルして高速化を図っていると紹介しました。実際に Vite の部分更新機能を感じたい場合は、例えば、fibonacci.tsxというフィボナッチ数列の値を返すコンポーネントをもつファイルを更新します。すると、<FibonacciComponent />の部分だけが html 上で更新され、1 秒毎にカウントを描画している<CountingComponent />の結果は、0 から始まること無く継続して描画されることがわかるでしょう。
SolidJS With Astro
次に、SolidJS + TailwindCSS + pnpm + Astro な環境を構築してみます。
実験に利用したコードはこちらに置いています。
（実験当初は SolidJS + TailwindCSS + pnpm + Vite + Astro という構成になるのかな？と試行錯誤しておりました。 Astro に Vite を追加する項目があるので無くもないんでしょうが。）
まず、 Astro は開発環境が爆速で構築できてすごいです。
以下のコマンドだけで、Typescript も SolidJS も Tailwind CSS も準備完了です。
サンプルコードは、pnpm astro devで起動することができます。
# create project
pnpm create astro@latest
pnpm astro add solid tailwind
要点は以下になります。
---
import Layout from '../layouts/Layout.astro';
import { CountingComponent } from "../components/counter";
import { FibonacciComponent } from "../components/fibonacci";
import { RepeatingComponent } from "../components/repeat";
import "../layouts/index.css";
---
<Layout title="Welcome to Astro.">
<main>
<h1 class="text-blue-400">Welcome to <span class="text-gradient">Astro</span></h1>
<CountingComponent client:only="solid-js" />
<FibonacciComponent client:only="solid-js" />
<RepeatingComponent />
</main>
</Layout>
Astro には .astro拡張子を用いたastro 記法が存在します。
---で囲まれた部分をコンポーネントスクリプトと呼び、JS を記述する部分になります。
その下の部分をコンポーネントテンプレートと呼び、HTML の定義部分になります。
JSX と同じように、HTML と JavaScript の式を混ぜることも可能です。
Astro で JS を除去したくない場合は、client:only="solid-js"を設定する必要があります。（JS をガリガリ使う開発だと地味に面倒くさいかもしれませんね）
このような、一部のコンポーネントだけ JS を許可する仕組みは Partial Hydration と呼ばれています。
では、Astro が JS を剥いでいる様子を実際に確認してみましょう。
<RepeatingComponent />の中身は以下のコードのようになっていて、SolidJS の For を使って li コンポーネントを複数生成しています。
import { For, createSignal } from "solid-js";
export const RepeatingComponent = () => {
const [cats, setCats] = createSignal([
{ id: "J---aiyznGQ", name: "Keyboard Cat" },
{ id: "z_AbfPXTKms", name: "Maru" },
{ id: "OUtn3pvWmpg", name: "Henri The Existential Cat" },
]);
return (
<ul>
<For each={cats()}>
{(cat, i) => (
<li>
<a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
{i() + 1}: {cat.name}
</a>
</li>
)}
</For>
</ul>
);
};
こちらを実際に build してみると、一般的にはクライアント側で JS として処理し html に描画することになりますが、Astro の場合は index.html に展開されていることが確認できました。
<main class="astro-7T72KUKR">
<h1 class="text-blue-400 astro-7T72KUKR">Welcome to <span class="text-gradient astro-7T72KUKR">Astro</span></h1>
<astro-island uid="Z1aC2eD" component-url="/counter.8bb4d4c5.js" component-export="CountingComponent" renderer-url="/client.085eaeb9.js" props="{"class":[0,"astro-7T72KUKR"]}" ssr="" client="only" opts="{"name":"CountingComponent","value":"solid-js"}"></astro-island>
<astro-island uid="Z25u9K5" component-url="/fibonacci.db277ddc.js" component-export="FibonacciComponent" renderer-url="/client.085eaeb9.js" props="{"class":[0,"astro-7T72KUKR"]}" ssr="" client="only" opts="{"name":"FibonacciComponent","value":"solid-js"}"></astro-island>
ココ -> <ul data-hk="0-0"><li data-hk="0-1-0"><a target="_blank" href="https://www.youtube.com/watch?v=J---aiyznGQ"><!--#-->1<!--/-->: <!--#-->Keyboard Cat<!--/--></a></li><li data-hk="0-1-1"><a target="_blank" href="https://www.youtube.com/watch?v=z_AbfPXTKms"><!--#-->2<!--/-->: <!--#-->Maru<!--/--></a></li><li data-hk="0-1-2"><a target="_blank" href="https://www.youtube.com/watch?v=OUtn3pvWmpg"><!--#-->3<!--/-->: <!--#-->Henri The Existential Cat<!--/--></a></li></ul>
</main>
おわりに
筆者は、普段はバックエンド多めの活動をしているので、フロントエンドで触ったことがあるのは Vue, Nuxt, Typescript, Bootstrap, Onsen UI くらいです。そんなに強くはないです。
とりあえず、Typescript の環境構築が一瞬で感動です。。。
Astro と Vite は似たようなツールですが、どういった場面でどちらを使っていけばいいのか、悩ましそうですね。