스크립트
00:00:00TanStackがまたやってくれました。今度は「TanStack Charts」でJavaScriptのチャート問題を解決します.
00:00:04ReChartsなどのライブラリよりも小さなバンドルサイズを謳っており、SVGや
00:00:08Canvasの出力、アニメーション、ツールチップ、インタラクションに対応しています。ほとんどのTanStackライブラリと同様に
00:00:13フレームワーク非依存のコア、型安全性、そして優れた開発者体験を備えています。非常に新しいにもかかわらず
00:00:18すでに非常に多くの種類のチャートを構築でき、基本的な折れ線グラフ
00:00:22や棒グラフから、サンキーダイアグラム、ツリーマップ、ヒートマップ、レーダーチャート、
00:00:27ドーナツチャート、ゲージ、さらには非常にクールな世界地図まで作成可能です。必要なものは
00:00:32おそらくすでに何でも作ることができます。さて、最初に確認したいのは、TanStack Chartsが実際にどのようにチャートにアプローチしているかという点です.
00:00:41Rのggplot2のようなライブラリと似た方法をとっており、「グラフィックスの文法（grammar of graphics）」を採用しているからです。この
00:00:47アプローチでは、チャートを固定されたタイプとして扱うのではなく、マーク、
00:00:51スケール、マッピングの組み合わせとして捉えます。したがって、棒グラフを要求する代わりに、「ここに棒を配置し、
00:00:56この変数をxに、あの変数をyにマッピングし、これらのスケールを適用する」といった指定を行います。その記述から
00:01:01チャートが浮かび上がります。非常に微妙な違いですが、このライブラリを極めて柔軟にしている理由の1つです。
00:01:05例えば、このようなチャートを作ることができるか尋ねたツイートに対し、答えは「YES」でした.
00:01:11これは組み込みのチャートタイプではなく、ライブラリが十分に柔軟だからこそ作れるのです.
00:01:14これがどのように機能するかについて、英語のアルファベットの頻度をマッピングする
00:01:18こちらの棒グラフのデモを見てみると、最も重要なコードはわずか20行です。define chart関数を使用したチャートの定義から始まり,
00:01:23その内側でマークから始めます。マークとは、実際に描画される要素、つまり
00:01:28線、ドット、棒などを指します。私は実際に、TanStack Chartsで使用可能なすべてのマークを使ってみようとするデモサイトを構築しました。
00:01:32おそらく55個ほどのマークがあると思うので、これはTanStack Chartsで構築できるチャートの良い例になるでしょう。
00:01:37本当にたくさんの種類があります。少しお付き合いいただくことになりますが,
00:01:40ご覧のとおり、水平または垂直を選べる通常の棒グラフがあり、
00:01:43線やエリアなども同様です。さらに、ドットチャートもあり、
00:01:47チャートを横切る点線であるルールもあり、垂直に配置することもできます。
00:01:51ティックチャート（xまたはy）の作成、長方形、セル、バンド、
00:01:54矢印、ベクトル（風向場を作成可能）、リンク、六角形、
00:01:59テキスト（チャート内の好きな場所に描画可能）などを利用できます。フレーム、
00:02:04ライン、差異、線形回帰チャート、ボックス、バイオリンチャート、
00:02:08ワッフルチャートもあります。この時点で等高線マップも作成できます。ちなみに
00:02:13このライブラリは公開されてから1週間しか経っていないのに、これほど多くの機能を備えており、リストはまだ続きます。
00:02:17一体何に使うのか分からないような、こんなチャートも作成できます.
00:02:22ツリーマップチャート、サンバーストチャート、サンキーダイアグラム、十字線のフォーカスガイドがあり,
00:02:25円グラフ、ドーナツ、レーダーなどの放射状チャート、そして
00:02:29最後に下部には、世界地図チャート用のジオシェイプもあります。前述のとおり、これらを組み合わせて
00:02:33必要なほぼすべてのチャートを作成できるほど多くの機能が揃っています。先ほどの棒グラフのデモに戻りましょう。
00:02:38必要なマークはbar yのみで、その内部にデータであるオブジェクトの配列を渡します。
00:02:42その後、xキーとyキーに何を割り当てるかを定義します。
00:02:47これが優れているのは、データを特定の構造に強制的に合わせる必要がなく、ここでシンプルに定義できる点です。
00:02:51また、型安全であるため、これらのキーのスペルを間違えた場合でも
00:02:56すぐに通知してくれます。これがTanStackでおなじみの型安全性です。
00:03:00必要なマークを定義したら、次はx軸とy軸を設定します。x軸については
00:03:04非常にシンプルです。カテゴリ用のspace bandを指定してアルファベットが均等に配置されるようにし、
00:03:08間隔（パディング）も持たせています。y軸には数値用のscale linearを使用し、
00:03:12nice設定をtrueにしています。これは、存在する最高値でぴったり切るのではなく、軸をわかりやすいキリの良い数値に丸めてくれる機能です。
00:03:17これをfalseにすると、ご覧のとおり軸の上端が一番高い棒の先端で終わるようになります。
00:03:21ここではさらに、軸にラベルとフォーマットを指定し、小数点表示ではなくパーセンテージとして数値をフォーマットできるようにしています。
00:03:26ここまでの定義部分はフレームワーク非依存の部分ですが、Reactでこれを実際に描画するには,
00:03:30チャートコンポーネントをインポートし、定義を渡し、高さとラベルを指定するだけです。
00:03:34これでチャートを作るのに必要な作業はすべて完了です。しかし、ここで非常に明確にしておきたいのは,
00:03:39「棒グラフ」というコンポーネントを直接使ったわけではないという点です。コード内でマークをどこに描画したいかを定義した結果として
00:03:43最終的に棒グラフになっているにすぎません。非常に微妙な違いですが,
00:03:47それがグラフィックスの文法の使い方なのです。柔軟性の例として,
00:03:51棒グラフに平均線を表示したい場合、marks配列に新しいマークとしてrule Yを追加するだけで実現できます。
00:03:55もう一つの簡単な例として、ドット付きの折れ線グラフと下部にエリアのあるグラフを作りたい場合も、それらをすべてマークとして定義するだけで完了です。
00:04:00ご覧のとおり、チャンネル登録者数のグラフが完成しました。
00:04:04まさにチャンネル登録をおすすめし、このようなAIや開発者の最新情報をキャッチアップする絶好のタイミングです。
00:04:09先ほど紹介した様々なチャートを構築するためのマークの使用例をもっと見たい場合は、公式ドキュメントをご覧ください。
00:04:14膨大な例が掲載されており、非常に詳細です。
00:04:18実際、TanStack Chartsに何ができるのかを正確にお見せするため、ドキュメントからいくつか例をピックアップしました。
00:04:22すべての機能を詳細に解説していると文字通り20時間ほどかかってしまうためですが,
00:04:26最もクールな機能の一つがこのグローブ（地球儀）チャートです。本当に素晴らしく、公開されて1週間のライブラリでこれができるのは最高にクールだと思います。
00:04:30さらに、インタラクション機能も非常に優れています。
00:04:34このようなブラシ機能があり、プロット上でドラッグして両側から範囲を変更することができます。
00:04:38チャートのズームインも可能で、折れ線グラフをきれいに拡大できます。
00:04:42キーボード選択と組み合わせたキーボード操作もあり、いずれかにホバーしてスペースキーを押すとすべてがスムーズに動作し,
00:04:46下部に選択した値が読み取られるのがわかります。
00:04:51また、クロスヘア（十字線）もあり、カーソルを移動させると、下部の軸上にホバーしている正確な日付が表示されます。
00:04:56豊富な設定を備えたツールチップもあります。
00:05:00現時点ではこれがnearest Xに設定されているため、どのポイントを選択するかを決める際には水平方向の距離のみが考慮されます。
00:05:04group Xのような戦略を選択することもでき、エリア内のどこにホバーしても該当するすべての値が表示されます。
00:05:09ツールチップをピン留めすることも可能です。ここの棒グラフにホバーすると
00:05:14ツールチップが変化しますが、クリックするとピン留めされ、追加の詳細情報が表示されます。
00:05:18こちら側ではツールチップが表示されず、値が直下に直接読み取られています。このように情報を引き出すこともできます。
00:05:22ここではカスタムツールチップを描画しており,
00:05:26クリックしてピン留めするとカスタムの閉じるボタンが表示されます。これらすべてがReactで実現されています。
00:05:31このライブラリはアニメーションにも対応しているため、ここの棒グラフの値を変更すると
00:05:35変更された値の間でスムーズにアニメーションします。
00:05:39リプレイをクリックすると、棒グラフがずらしながら登場するエフェクトを確認できます。
00:05:43また、下部の棒をいくつか削除してみると、棒の追加や削除の間できれいにアニメーションするのがわかります。
00:05:48ストリーミングアニメーションを実行することも可能で、新しいデータが来ると
00:05:51チャートを再描画するのではなく、ラインチャートをスムーズにシフトさせることができます。
00:05:55チャートのスタイリング方法に移る前に、最後にお見せしたかったのがエクスポート機能です。ご覧のとおり
00:06:00SVGおよびPNGとしてダウンロードするボタンがあり、クリックするとこのような最終結果が得られます。
00:06:03それでは、これらのチャートのテーマ設定とスタイリングについて説明します。このチャートからスタイルを削除すると
00:06:07これがデフォルトの基本の見た目になります。デフォルトではスタイルが含まれておらず、フォアグラウンドにはカレントカラーが使われ、背景は透明だからです。
00:06:12TanStack Chartsのスタイリングには3つのレベルがあります。
00:06:161つ目はCSS変数です。これらは6つのカスタムプロパティによるカテゴリカルカラーであり
00:06:21任意のコンテナでオーバーライドできます。したがって、これらの値を変更すると
00:06:25チャートのすべての色がどのように更新されるかがわかります。2つ目のレベルは
00:06:30実際のチャート定義内にあるテーマブロックです。これはデータではなく
00:06:35「チャートの家具（装飾要素）」と呼ばれる部分（テキスト、グリッド線、背景など）を対象としています。
00:06:39そして3つ目のレベルはマーク自体に対するもので、塗りつぶし、
00:06:43ストローク、不透明度、ラインキャップ、破線、角丸、フォントなどを設定できます。これらは固定値にすることも
00:06:47データ駆動にすることもできるため、特定の目標値を超えているかどうかによってバーの色を変えることも可能です。データを使って
00:06:51グラデーションを構築することもできます。前述のとおり、このライブラリは非常に柔軟であり、さらに超軽量です。
00:06:57クロスヘア、ブラッシング、ズーム、選択などを含めたフル機能のベンチマークにおいて
00:07:01バンドルサイズは36〜43キロバイトです。Chart.jsやRechartsと比較すると,
00:07:06Chart.jsは45〜58キロバイト、Rechartsは153〜168キロバイトです。そのためTanStack Chartsは
00:07:10大幅に軽量です。もう一つの素晴らしい点はその哲学です。彼らがこれを構築した目的は2つあります。
00:07:161つ目は、短い宣言から洗練されたチャートが得られるべきであること,
00:07:242つ目は、AIがアプリケーション固有のシリーズモデルを学習することなく、チャートを構成、検査、変更できるべきであることです。
00:07:28そのため、エージェントがドキュメントを読まなくてもチャートを書けるようにAPIが設計されています。
00:07:32正直なところ、先ほど作成したデモの大半をClaudeを使って配線しましたが、このご時世には珍しく私が二重チェックを行っても
00:07:38ほぼ期待通りに一致していました。修正はほとんど必要なく、ブランド新のライブラリとしてはかなり驚きです。
00:07:42これがTanStack Chartsです。私の新しいお気に入りのチャートライブラリであり、急速に進化しています。
00:07:47ぜひ下のコメント欄で感想を教えてください。ついでにチャンネル登録もよろしくお願いします。
00:07:52それではいつものように、次の動画でお会いしましょう。
00:07:57新しいお気に入りのチャートライブラリであり、急速に進化しています。ぜひ下のコメント欄で感想を教えてください.
00:08:01ついでにチャンネル登録もよろしくお願いします。それではいつものように、次の動画でお会いしましょう.