【ITニュース解説】How to Use st-core.fscss with Svelte (Compiled)

このニュース記事は、st-core.fscssという新しい技術を、SvelteというJavaScriptフレームワークと組み合わせてウェブアプリケーションでチャートを描画する方法について解説している。システムエンジニアを目指す初心者でも理解できるよう、その仕組みと具体的な手順を説明する。

まず、st-core.fscssとは何かという点から始める。ウェブ上でグラフやチャートを表示する際、通常はJavaScript製のライブラリ（Chart.jsなど）を使ったり、SVG（Scalable Vector Graphics）という画像形式を利用したり、あるいはHTMLのcanvas要素にJavaScriptで直接描画したりする方法が一般的である。しかし、st-core.fscssは、これらの一般的な方法を一切使わず、純粋なCSS（Cascading Style Sheets）のみでチャートを描画するという、非常にユニークなアプローチを取る。具体的には、CSSのclip-pathというプロパティを使って多角形の形状を定義し、CSSカスタムプロパティ（--st-p1、--st-p2など、CSS変数とも呼ばれる）を用いて、その多角形の頂点の位置や全体的な形状を動的に制御する。これにより、JavaScriptによる複雑な描画ロジックを排除し、ブラウザが持つCSS描画の能力を最大限に活用できる点が大きな特徴である。

Svelteは、ウェブアプリケーション開発に使われるJavaScriptフレームワークの一つで、アプリケーションをビルドする際に効率的なJavaScriptコードに「コンパイル」されることで知られている。このコンパイルによって、実行時の性能が向上し、高速なアプリケーションが実現される。この記事では、st-core.fscssをSvelteアプリケーションで利用する際、「コンパイルモード」という方法を推奨している。これは、FSCSSが提供する実行時（ランタイム）に動作するスクリプトをブラウザに読み込ませるのではなく、Svelteのビルドプロセスの一部としてFSCSSのコードを静的なCSSファイルにあらかじめ変換してしまう方法を指す。この方法が推奨される理由は、Svelteがすでにビルドパイプラインを持っているため、その中でFSCSSの変換も同時に行うことで、ブラウザがページを読み込むたびに余分な処理をすることなく、アプリケーションのパフォーマンスと効率性を高めることができるからである。手軽なデモや静的なHTMLページではランタイムCDN（Web上から直接スクリプトを読み込む方法）も利用できるが、本格的なSvelteアプリケーション開発ではビルド時のコンパイルが推奨される。

この技術スタックにおける各要素の役割分担は非常に明確である。 一つ目の役割は「FSCSS CLI」というコマンドラインツールが担う。これは、@st-chart-fillや@st-chart-lineといったFSCSS特有の記述（これを「mixin」と呼ぶ）を、ブラウザが直接解釈できる標準的なCSSコードに展開（生成）する。 二つ目の役割は「Svelte」が担う。Svelteはアプリケーションのデータを管理し、そのデータが変更されるたびに、チャートの形状を決定するCSSカスタムプロパティ（--st-p1、--st-p2など）の値をリアクティブに（データ変更に反応して自動的に）更新する。 そして三つ目の役割は「ブラウザのCSSエンジン」が担う。Svelteによって設定されたCSSカスタムプロパティの値に基づいて、チャートの形状を実際に画面上に描画し、さらにclip-pathプロパティに設定されたトランジション（変化）効果により、データが更新された際にチャートの形状変化を滑らかにアニメーションさせる。

具体的な実装手順は以下の通りである。 1. FSCSSのエントリーファイルを作成する： src/styles/st-core.fscssのような名前でファイルを作成し、st-coreライブラリをインポートする。ここで重要なのが@arr chartDataという記述で、これはチャートのデータポイント数を定義する。初期値はすべてゼロで構わないが、この配列の「長さ」はコンパイル時に固定されるため、例えば7日間のデータを表示するなら、要素数を7に設定する必要がある。この長さは実行時には変更できないため、後から変更したい場合はFSCSSファイルを再コンパイルする必要がある。また、@st-chart-fillや@st-chart-lineでチャートの塗りつぶし領域や折れ線を定義し、.chartクラスでチャート全体の基本的なスタイル（幅、高さ、背景など）を設定する。.chart-fillや.chart-lineにはtransition: clip-pathを設定しておくことで、データが変化した際のチャートの形状変化が滑らかにアニメーションするようになる。

2. FSCSSファイルをビルドプロセスの一部としてコンパイルする： FSCSSツールをnpm install -D fscss@latestでインストールした後、npx fscss src/styles/st-core.fscss src/styles/st-core.cssというコマンドを実行して、.fscssファイルをブラウザが読み込める.cssファイルに変換する。このコマンドをpackage.jsonのscriptsセクションに"prebuild": "npm run build:st-core"のように記述しておくことで、Svelteアプリケーションをビルドする前にFSCSSのコンパイルが自動的に実行されるようになる。生成されたst-core.cssファイルは、Svelteのルートコンポーネントやアプリケーション全体でCSSを読み込む場所で一度だけインポートする。

3. アプリケーションのデータをCSSカスタムプロパティにマッピングする： Svelteコンポーネント（例:Chart.svelte）を作成し、外部からチャートデータ（dataプロパティ）を受け取るようにする。st-core.fscssのチャートは、CSSの座標系と同様に上から下へ描画されるため、値が高いデータほどチャートの上部（0%に近い位置）に表示される。そのため、受け取ったデータ値を100 - humanValueのように反転させてから、CSSカスタムプロパティ（--st-p1、--st-p2など）に設定する必要がある。例えば、スコアが90の場合は上から10%の位置に描画されることになる。Svelteのリアクティビティ機能を使って、dataプロパティが変更されるたびにこれらのCSS変数が自動的に再計算されるように記述する。これにより、データの変更が即座にチャートの描画に反映される。Svelte 4とSvelte 5で記述方法は異なるが、基本的な動作は同じである。

4. 作成したChartコンポーネントを他のSvelteコンポーネントと同様に利用する： アプリケーションのメインコンポーネントなどでChart.svelteをインポートし、dataやcolor、heightなどのプロパティを渡して使用する。例えば、weeklyという配列に週ごとのデータを持たせ、それを<Chart data={weekly} />のように渡す。randomize関数などでweekly配列のデータを更新すると、Svelteのリアクティビティ機能が働き、CSSカスタムプロパティが再計算される。これにより、ブラウザはclip-pathトランジションを使って、チャートの形状変化を滑らかにアニメーション表示する。一般的なJavaScriptチャートライブラリで必要となる、チャートの再レンダリングやSVGパスの再計算、DOMの差分比較といった複雑な処理は、開発者が意識することなく、すべてCSSとブラウザによって処理される。

データ配列の長さに制約がある点も重要である。チャートのジオメトリ（図形の構造）はFSCSSによってコンパイル時に生成されるため、実行時にデータ配列の長さを動的に変更することはできない。もし常に決まった数のデータポイント（例えば常に7日間）がある場合は、FSCSSのエントリーファイルでその数に合わせて@arr chartDataの長さを設定し、Svelte側からも常に同じ長さのデータを渡す必要がある。データの長さが変動する可能性がある場合でも、最大で表示したいデータポイントの数に合わせてFSCSSをコンパイルし、Svelte側で実際のデータ配列をその長さに合わせてスライスしたり、足りない場合はゼロなどで埋め合わせたりすることで対応できる。コンパイル時に5点のチャートを想定しているのに、実行時に8点のデータを渡しても、余分なデータのための描画スペースは存在しないため、それらのデータは表示されない。

最後に、プロダクション環境（実際にユーザーに提供されるアプリケーション）での注意点として、ランタイムCDNの利用は避けるべきだと述べられている。ランタイムCDNは簡単なデモ目的には適しているが、Svelteのようにビルドプロセスを持つアプリケーションでは、FSCSSをビルド時にコンパイルして静的なCSSファイルとして利用する方が、パフォーマンスや安定性の面で優れている。

この技術の中心にある考え方は、「チャートの構造をビルド時に定義し、Svelteがデータ変更時にCSS変数を更新する。そして、ブラウザのCSSが描画とアニメーションを行う」という明確な役割分担にある。transition: clip-pathプロパティを使うことで、追加のJavaScriptアニメーションライブラリを導入することなく、滑らかな視覚的変化が自動的に実現される。このパターンはSvelteだけでなく、VueやReact、あるいは素のJavaScriptといった他のフレームワークでも、データのリアクティビティ層をそれぞれのフレームワークに合わせて変更するだけで、同様に適用できる可能性を秘めている。

このように、st-core.fscssとSvelteの組み合わせは、JavaScriptによる複雑な描画ロジックを減らし、CSSの力を最大限に引き出すことで、高性能で保守しやすいウェブアプリケーション開発を実現するための一つの強力なアプローチを提供している。