SolidJSを使用してApexChartsを追加する方法
著者は、書籍寄稿プログラムの一環としてMozilla Foundationに寄付することを選びました。
はじめに
データの視覚化は、Webアプリケーションのシステム内で何が起こっているかをユーザーに直感的に知らせる方法を提供します。「ApexCharts」は、「SolidJS」と一緒に使用できるチャートを作成するための1つのパッケージです。
SolidJSは、ユーザーインターフェースを構築するためのJavaScriptライブラリです。SolidJSはReactやSvelteなどのJavaScriptライブラリと同じ設計に基づいているため、これらのライブラリの経験を持つ開発者は、素早くSolidJSに適応することができます。SolidJSは直ちにテンプレートをDOMにコンパイルし、仮想DOMではなくリアクティブプログラミングを使用してDOMを内部的に更新します。SolidJSのコンポーネントは通常のJavaScript関数であり、一度だけレンダリングされます。SolidJSは、並列レンダリング、JSX、フラグメント、コンテキスト、ポータル、サスペンス、ストリーミングSSR、プログレッシブハイドレーションなど、現代のフレームワーク機能を提供しています。Viteは主要なビルディングツールであり、アプリケーションをJavaScriptでコンパクトにパッケージ化します。
ApexChartsは、ウェブアプリケーション向けのインタラクティブな可視化を作成するためのオープンソースでカスタマイズ可能なJavaScriptチャートライブラリです。ApexChartsは、SolidJSを含む多くの人気のあるJavaScriptフレームワークと統合することができます。ApexChartsには、複数の画面上でレンダリングすることができる幅広い柔軟でレスポンシブなチャートがあります。
このチュートリアルでは、データの可視化のためにApexChartsをSolidJSアプリケーションに統合します。OpenWeatherMap APIから天気データを取得し、棒グラフで表示するアプリケーションを開発します。
前提条件
このチュートリアルを実行するためには、以下が必要です：
このチュートリアルを進めるには、以下のものが必要です：
このチュートリアルを行うには、以下のものが必要です：
このチュートリアルをたどるためには、以下のものが必要です：
- Node.js installed on your machine, which you can set up by following the tutorial on How To Install Node.js.
- A web browser like Firefox or Chrome.
- (Optional) Basic knowledge of the SolidJS Library. You can review the SolidJS documentation.
- (Optional) A text editor that supports JavaScript syntax highlighting, such as Visual Studio Code or Atom. This tutorial uses the command-line editor nano.
ステップ1 — SolidJSプロジェクトの作成
このステップでは、SolidJSプロジェクトを作成し、チャートを作成するために必要なすべての依存関係をインストールします。必要なボイラープレートコードが含まれたViteテンプレートを使用して、SolidJSアプリを作成します。
新しいターミナルセッションで、このチュートリアルで使用するための新しいディレクトリを作成して移動してください。
- mkdir charts
- cd charts
このチュートリアルでは、ディレクトリはchartsという名前になりますが、好きなように呼ぶことができます。
その後、プロジェクトフォルダにsolid/js/templates/jsリポジトリからテンプレートをクローンするために、npx degitコマンドを実行してください。
- npx degit solidjs/templates/js solid-chart
あなたのアプリケーションの名前には、solid-chartを置き換えることができます。
Note
npx degit solidjs/templates/ts solid-chart
/tsテンプレートと/jsテンプレートでは同じ出力を受け取ります。
以下の出力を受け取ります。
> cloned solidjs/templates#HEAD to solid-chart
この出力は、テンプレートがマシンに保存されたことを確認しています。テンプレートをプロジェクトフォルダにクローンした後、テンプレートフォルダに移動し、プロジェクトに必要な依存関係をインストールできます。
- cd solid-chart
- npm install
NPMはプロジェクトに必要な依存関係をインストールします。
SolidJSでチャートを統合するためには、さらに2つの依存関係が必要です：ApexChartsとSolid-ApexCharts。
ApexChartsは、ウェブアプリ向けのインタラクティブな視覚化を作成するためのJavaScriptチャートライブラリです。ApexChartsは、バー、折れ線、面、円、柱、箱、ローソク足、ヒートマップなどを含む14種類のチャートをサポートしています。
SolidJSのラッパーであるSolid-ApexChartsは、ApexCharts要素をSolidJSコンポーネントとして使用することができるようにします。
これらの依存関係をインストールするために、このコマンドを実行してください。
- npm install apexcharts solid-apexcharts
それでは、次のコマンドで開発サーバーを起動してください。
- npm run dev
以下のような出力が送られてきます。
… vite v2.9.15 dev server running at: > Local: http://localhost:3000/ > Network: use `–host` to expose ready in 605ms.
あなたのアプリは今、ポート3000で実行されます。ブラウザを開いて、URL http://localhost:3000/ を入力してSolidJSの起動ページにアクセスしてください。
Note
開発サーバーがまだ稼働している間に、ローカルコンピュータで別のターミナルを開き、以下のコマンドを入力してください：
ssh -L 3000:localhost:3000 your_non_root_user@your_server_ip
サーバーに接続できたら、ローカルマシンのウェブブラウザでhttp://localhost:3000に移動してください。このチュートリアルの残りの部分では、2番目のターミナルを開いたままにしておいてください。
すべての依存関係をインストールしたら、APIからデータを取得できます。
ステップ2 — APIからデータを取得する
このステップでは、Fetch APIを使用してOpenWeatherMapからデータを取得します。特定の場所の緯度を使用し、チャートでその変動を表示します。
好きなエディタで、srcフォルダ内のApp.jsxファイルを開いてください。このチュートリアルでは、コマンドラインエディタのnanoを使用します。
- nano src/App.jsx
Note
ここでは、APIからデータを取得し、別のコンポーネントに渡して、チャートを表示できるようにします。
最初に、テンプレートファイルに自動生成されたすべての情報を削除してください。
次に、この行を追加してsolid-jsからcreateEffectをインポートしてください。
src/App.jsx
import { createEffect } from "solid-js";
今、関数がAPIを呼び出す効果を作成してください。以下の行をファイルに追加してください。
src/App.jsx
...
createEffect(() => {
const fetchData = async () => {
const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
const data = await res.json();
};
fetchData()
});
Appコンポーネントがマウントされるとすぐに呼び出されるcreateEffect内でfetchDataという非同期関数が実行されます。fetchDataはFetch APIを使用してOpenWeatherMap APIへのクエリを行います。OpenWeatherMap APIからは通常、天気オブジェクトの配列が返されます。ここでは、5つの制限が使用されています。データからは、名前と緯度のみが使用されます（APIのクエリでは、都市名はロンドンで、APIキーはappid=で識別される文字列です）。
fetchDataは非同期関数ですので、レスポンスを待つ必要があります。レスポンスは利用可能になったときにres変数に格納されます。サーバーがデータを受信すると、そのレスポンスは.json()関数を使用してJSONに変換され、data変数に格納されます。
データを取得した後、次のタスクはそれをシグナルに格納し、エクスポートすることです。
APIからデータを取得した後、チャートデータのシグナルを作成し、空のオブジェクトで初期化することができます。そして、APIからのデータで値を更新します。
まだ src/App.jsx 内で、createSignal を solid-js から import しています。それを行うために、初期の import をハイライトされたテキストを追加して更新してください。
src/App.jsxアプリケーションファイルであるsrc/App.jsxに関して、日本語で言い換えてください。
import { createSignal, createEffect } from "solid-js";
...
その後、インポートステートメントの直後に、ハイライトされたテキストを追加して、チャートデータのためのシグナル変数を作成してください。
import { createSignal, createEffect } from 'solid-js';
const [chartData, setChartData] = createSignal({});
...
Solidでは、リアクティビティの基盤としてシグナルがあります。シグナルには動的な値が含まれており、シグナルの値を変更すると、それに依存するすべてのものが自動的に更新されます。
最初の値は、Signalを作成するために与えられたパラメータであり、2つの関数（ゲッターとセッター）を返す配列です。最初に返される値は値そのものではなく、現在の値を返す関数であるゲッターです。適切に更新するためには、ライブラリがそのシグナルがどこで読み取られているかを追跡する必要があります。このチュートリアルでは、”chartData”はゲッターであり、”setChartData”はセッターです。Signalは空のオブジェクトで初期化されます。
ApexChartsではオプションを指定する必要があります。このチュートリアルでは、データ配列とカテゴリ配列を追加するxaxisオプションとデータオプションを指定します。
これを行うために、map() メソッドを使用して API から返される値の配列を作成します。map() メソッドは、各配列要素に対して関数を呼び出し、結果を新しい配列に返します。fetchData の async 関数内にハイライトされた行を追加してください。
...
createEffect(() => {
const fetchData = async () => {
const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859");
const data = await res.json();
setChartData({
series: [
{
name: 'Latitudes in London',
data: data.map((d) => (d.lat))
}
],
xaxis: {
categories: data.map((d) => (d.name))
}
});
};
fetchData()
});
Apexchartsのsetter関数setChartDataの内部では、シリーズとx軸の値を特定しています。
シリーズの配列では、名前とデータの値を指定します。map（）を使用してサーバーから返されたデータを繰り返し処理し、latで表される緯度の値を渡します。これらは各チャートの値となります。
x軸のオブジェクトは、カテゴリのプロパティを期待しています。このプロパティは、map()メソッドを使用してデータを繰り返し処理し、nameの値を渡すことで設定されます。この値は、各チャート上の都市の名前を表します。
APIからのチャートパラメータとデータを使用して、chartDataを更新したら、スタイリングを提供し、エクスポートする必要があります。ファイルにハイライトされた行を追加してください。
import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';
const [chartData, setChartData] = createSignal({});
createEffect(() => {
const fetchData = async () => {
const res = await fetch("http://api.openweathermap.org/geo/1.0/direct?q=London&limit=5&appid=2c36818bb5ca9e829313dd736fd15859")
const data = await res.json();
setChartData({
series: [
{
name: 'Latitudes in London',
data: data.map((d) => (d.lat))
}
],
xaxis: {
categories: data.map((d) => (d.name))
}
});
}
fetchData()
});
function App() {
return (
<^>
<div class={styles.App}>
<h2>Using ApexCharts.js to create charts in SolidJS</h2>
<h3>Bar Chart</h3>
</div>
<^>
);
}
export { chartData }
export default App;
最初に、returnセクションで使用するためのスタイルをインポートします。
それから、アプリケーションを実行するときにチャートの見出しを作成するApp()関数の戻り値を定義します。この関数は、スタイルを使用して2つの見出しを作成します。
SolidJSのシグナルは他のどのコンポーネントからもエクスポートして使用することができます。そのため、ファイルの終わり近くでchartDataもエクスポートします。
ファイルを保存して閉じてください。
信号がエクスポートされるので、それを消費して表示するためのチャートコンポーネントを作成できるようになりました。
ステップ3 – APIからのデータを使用してチャートを作成する
この段階では、チャートコンポーネントを作成し、APIからデータを取得してチャートを表示します。
srcフォルダにcomponentsフォルダを作成してください。
- mkdir src/components
新しいCharts.jsxファイルを追加してください。
- nano src/components/Charts.jsx
新しいCharts.jsxファイルで、SolidApexChartsとchartDataをインポートしてください。
import { SolidApexCharts } from 'solid-apexcharts';
import { chartData } from '../App';
以下の行を追加して、Charts 関数を作成してください。
function Charts() {
return (
<SolidApexCharts width="1200" type="bar" options={chartData()} />
);
};
export default Charts;
チャート機能は、以前に設定したchartData変数から情報を使用して、幅が1200ピクセルの棒グラフを作成します。オプションの値としてchartDataを渡し、SolidApexChartsコンポーネントでチャートの幅とタイプを設定します。
ファイルを保存して閉じてください。
src/App.jsxファイルを開いてください。
- nano src/App.jsx
Now, import the Charts component into the App.jsx file:
App.jsxファイルに、Chartsコンポーネントをインポートしてください。
import { createSignal, createEffect } from "solid-js";
import styles from './App.module.css';
import Charts from './components/Charts';
const [chartData, setChartData] = createSignal({});
function App() {
return (
<div class={styles.App}>
<h2>Using ApexCharts.js to create charts in SolidJS</h2>
<h3>Bar Chart</h3>
<Charts />
</div>
);
};
export { chartData }
export default App;
最初に、Charts をインポートします。次に、アプリケーションが実行されると、h3 要素のすぐ下に コンポーネントを追加してレンダリングします。この行は動的なデータを持つ棒グラフを表示します。
ファイルを保存して閉じてください。
ブラウザでアプリケーションをリフレッシュすると、棒グラフが表示されます。
このチュートリアルで作成されたファイルは、Silicon Cloud Community リポジトリでもレビューすることもできます。
結論する
この記事では、APIからデータを取得し、チャートを作成するためにSolidJSアプリケーションを構築しました。データの可視化にはApexchartsとSolid-ApexChartsを使用しました。これにより、ダイナミックなデータで他の種類のチャートを作成することができます。ApexChartsでサポートされている他の種類のチャートに、バーチャートから変更してみてください。
SolidJSとその機能について詳しく知りたい場合は、SolidJSのドキュメンテーションを参照してください。ApexChartsやその他の利用可能な設定について学びたい場合は、ApexChartsのドキュメンテーションをチェックしてください。