要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)グレープシティのJavaScriptライブラリ「ActiveReportsJS」は、サーバーの処理に依存せず、WebブラウザのJavaScript処理だけで帳票を出力できるライブラリです。本連載では、ActiveReportsJSを利用したさまざまな帳票出力機能の活用法を、複数回に分けて紹介します。初回となる今回は、ActiveReportsJSで帳票を表示するまでの基本的な手順と、データをリストや表に表示する機能を説明します。3帳票にデータを提供するデータソースとデータセットデータソースの登録データソースからデータセットを作成データセットのデータを帳票に出力してみよう定義した表示形式で複数データを並べて表示するList複数データを表形式で表示できるTableまとめ参考資料はじめに帳票出力は、特に業務系のWebページで重要になる機能です。帳票出力はサーバーの処理で行うのが一般的ですが、グレープシティのJavaScriptライブラリ「ActiveReportsJS」を利用すると、サーバーの処理ではなく、WebブラウザのJavaScript処理で帳票を出力できます。ActiveReportsJSの公式ページ(https://www.grapecity.co.jp/developer/activereportsjs)ActiveReportsJSでは、帳票をGUIでデザインできるWindows/Mac用の帳票デザイナアプリと、帳票デザイナで作成した帳票デザインをWebページで表示するビューワのJavaScriptライブラリが提供されます。ActiveReportsJSの概要は過去記事でも紹介しているので参考にしてください。本連載では、ActiveReportsJSを初めて利用する人を対象として、帳票を出力するWebページをActiveReportsJSで作成する方法を、複数回にわたって説明していきます。初回となる今回はまず、ActiveReportsJSで実際に帳票を出力するまでの手順を、順を追って説明します。次に、帳票にデータを反映するデータソースとデータセットについて説明後、そのデータを帳票にリスト表示できるList、表に表示できるTableの各レポートコントロールについて、サンプルを挙げながら利用法を説明します。本記事のサンプルコードは、以下の環境で動作を確認しています。Node.jsは、ActiveReportsJSの動作に必ずしも必要ではありませんが、ローカルでWebサーバーを動作させるために利用しています。64bit版サンプルコードを動作させるには、ActiveReportsJSのトライアル版が必要になります。公式ページからダウンロードしてください。トライアル版のZipファイルから、distフォルダーの内容をサンプルコードのactivereportsjsフォルダーにコピーします。start」コマンドを実行すると、Webブラウザが開いてWebページが表示されます。ActiveReportsJSはAngularやReact、Vue.jsなどのJavaScriptライブラリ/フレームワークと組み合わせての利用や、TypeScriptでの開発に対応していますが、本記事のサンプルコードはActiveReportsJSを単体で利用して、JavaScriptで開発しています。ActiveReportsJSの新バージョンV2Jで新たに必要となったファイルについて追記いたしました。