Excelライクな「SpreadJS」で、Web APIから取得したデータを集計するページをAngular＋ASP.NET Core環境で作ろう！
ダウンロード サンプルファイル (473.1 KB)
本記事では、ExcelライクなスプレッドシートをWebページに表示できるグレープシティのJavaScriptライブラリ「SpreadJS」を、JavaScriptフレームワークAngularと組み合わせて利用する例を紹介します。サーバーサイドはマイクロソフトのASP.NET CoreでWeb APIを作成して、Web APIから取得したデータをSpreadJSで表示させます。
はじめに
SpreadJSは、ExcelライクなスプレッドシートをWebページに表示できる、グレープシティのJavaScriptライブラリです。現状の最新版は2022年7月に公開された「V15.1J」です。
SpreadJSの活用法は過去記事でも紹介してきましたが、今回はクライアント（Webページ）にSpreadJSとAngularの組み合わせ、サーバー側はASP.NET Coreを利用して、スプレッドシートを表示する方法を紹介します。計算式を設定して最大値などの集計を行う方法も説明します。
対象読者
- ExcelライクなスプレッドシートをWebページで実現したい方
- ASP.NET CoreのWeb API実装を体験したい方
- Web APIのデータをクライアント側で集計する事例を知りたい方
必要な環境
本記事のサンプルコードは、以下の環境で動作を確認しています。
- Windows 10 64bit版
- SpreadJS 15.1.4
- Microsoft Visual Studio Community 2022 17.3.1
- Node.js 16.17.0 64bit版
- Microsoft Edge 104.0.1293.54
サンプルコードに含まれるソリューションファイル（*.sln）をVisual Studio 2022で開くことで、ソースコードの確認や実行が行えます。
Visual Studio 2022でAngularプロジェクトを作成
本記事では、Visual Studio 2022の「Angular の ASP.NET Core」プロジェクトテンプレートをもとにSpreadJSを設定します。このテンプレートでプロジェクトを作って実行すると、複数のページをリンクで切り替え表示できる図2のWebページが表示されます。
このプロジェクトの構造を簡単に説明します。ソリューションファイルと同じ階層のP001AngularPlainフォルダー（図3）内で、ClientAppフォルダーがAngularを利用したクライアント側のコード、それ以外がASP.NET Coreを利用したサーバー側のコードです。
ClientAppフォルダー内には、プロジェクトの定義ファイルpackage.jsonなどが存在します。Webページ実装の実体は、srcサブフォルダー内（図4）に存在します。
最初に実行されるのがmain.jsで、それが内部的にWebページ全体のコンポーネント（AppComponent）を起動して画面を表示します。AppComponentのファイルは、src/appフォルダー内に存在します（図5）。
componentsフォルダーには、AppComponentを構成するapp.component.***ファイルのほか、フォルダーに分けられて表1のコンポーネントが存在します。すべてのコンポーネントはapp.module.tsにより1つのモジュールに含まれるようになっています。
| No. | フォルダー名 | 役割 |
|---|---|---|
| 1 | counter | Counterページに対応するコンポーネント |
| 2 | fetch-data | Fetch dataページに対応するコンポーネント |
| 3 | home | Homeページに対応するコンポーネント |
| 4 | nav-menu | 画面上部メニューのコンポーネント |
app.module.tsファイルには各コンポーネントに対応するパス（ルート）が定義されています（リスト1）。例えばFetchDataComponentには（3）でルート「fetch-data」が設定されるため、「http://<ホスト名とポート>/fetch-data」にアクセスして表示できます。
RouterModule.forRoot([
{ path: '', component: HomeComponent, pathMatch: 'full' }, // Home ...（1）
{ path: 'counter', component: CounterComponent }, // Counter ...（2）
{ path: 'fetch-data', component: FetchDataComponent }, // Fetch data ...（3）
])
以上を踏まえて、本記事ではhome、counter、fetch-dataと並列にコンポーネントを1つ追加して、そこにSpreadJSでスプレッドシートを表示するように実装していきます。
- 関連リンク
この記事は参考になりましたか？
- 高機能JavaScriptスプレッドシート部品「SpreadJS」の活用連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社
この記事は参考になりましたか？
この記事をシェア
