Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)本記事では、ExcelライクなスプレッドシートをWebページに表示できるグレープシティのJavaScriptライブラリー「SpreadJS」を、JavaScriptライブラリーReactと組み合わせて利用する例を紹介します。APIから取得したデータをSpreadJSで表示させます。2過去1カ月の気温をスプレッドシートに表示するWebページを作るサーバー側の実装クライアント側の実装スプレッドシートのヘッダー行に集計行を追加まとめ参考資料はじめにSpreadJSは、ExcelライクなスプレッドシートをWebページに表示できる、グレープシティのJavaScriptライブラリです。記事執筆時点の最新版は2022年7月に公開された「V15.1J」です。APIからデータを取得してスプレッドシートに表示する実装例を紹介します。スプレッドシートならではの機能として、計算式を設定して最大値などのデータ集計を行う方法も説明します。本記事のサンプルコードは、以下の環境で動作を確認しています。2022で開くことで、ソースコードの確認や実行が行えます。Core」プロジェクトテンプレートから生成したプロジェクト(図2)を元に、SpreadJSを実装します。APIを提供するサーバー側の実装が両方含まれています。プロジェクト構成の詳細は過去記事の説明も参考にしてください。ここでは概要のみを述べます。プロジェクトの<プロジェクト名>/ClientAppフォルダーにクライアント側(React)の実装が含まれます。コンポーネントの実装が含まれるのは、その中のsrc/componentsフォルダーです(図3)。ReactプロジェクトのP001ReactPlain/ClientApp/src/componentsフォルダー(P001ReactPlain)componentフォルダー内には、表1のファイルが含まれます。Layout.jsがページ全体に対応し、その中にNavMenu.jsによる画面上部メニューが表示されます。data」リンクをクリック時に表示されるページ内容に対応します。画面上部メニューのコンポーネントファイル本記事では、Home.js、Counter.js、FetchData.jsと横並びにコンポーネントのファイルを1つ追加して、その中でSpreadJSを表示するように実装していきます。