Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

イマドキの業務WebアプリをめぐるASP.NETの現状と、表・帳票機能の開発に便利な「SpreadJS」の紹介

ASP.NET MVCとSpreadJSで業務Webアプリケーションモダン化計画 第1回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/08/26 14:00

 Webの業務アプリケーションにおいて、データを表で出力したいケースは非常に多いです。本連載では、エクセルのように高機能な表・帳票機能を実装できるライブラリ「SpreadJS 9J」を紹介します。データをサーバーサイドで処理し、フロントサイドの「SpreadJS」にて描画をする場合は、ASP.NET MVCのようなWebフレームワークが有効です。第1回は、ASP.NET MVCとTypeScript、Visual Studio 2015を使って、トライアル版のSpreadJSを導入するまでの流れを説明します。

目次

はじめに

 .NET Framework向けのWebフレームワークにはいくつかの選択肢がありますが、これからの開発であれば、まずASP.NET MVCの利用を考えるべきでしょう。ASP.NET MVCとは、ビューとデータロジックが明確に分離された.NET Framework製のWebフレームワークです。昨今は、Webフロントサイドの技術が次々と登場し、フロント界隈が目まぐるしく変わっています。それでもなお、ASP.NET MVCは業務Webアプリケーションのフレームワークとして柔軟に対応し、第一線で選択されています。その理由は、先に述べたように、ビューとデータロジックの分離により、さまざまなフロントサイドの技術と柔軟に組み合わせられる点にあるでしょう。また、ASP.NET MVCのIDEであるVisual Studioがフロントサイドの開発を強力にサポートしていることも、強みの一つです。

 しかし、標準の機能だけでは十分にWebアプリケーションの要件を満たせない場合があります。本稿の主題でもある表はその最もたるものではないでしょうか。限られたHTMLのみで、並べ替え、フィルター、大量の行やセル、複雑な帳票の画面の実装に困憊している人も少なくないのではないでしょうか。

 本連載で紹介する「SpreadJS」は、HTML5のCanvas上にExcelのような表を高速に描画し、エクセルのようにデータや表の操作が可能な高機能なJavaScriptライブラリです。SpreadJSは、クライアントサイドのライブラリなので、サーバーサイドのWebフレームワークの選択に制限はありませんが、本稿では、著者おすすめのASP.NET MVC上での導入方法を説明します。

 はじめにASP.NETの現状とそれぞれの技術について説明します。その後、SpreadJS + Visual Studio 2015 + TypeScript + ASP.NET MVCでつくるWeb業務アプリケーション開発に足を踏み入れましょう。

対象読者

  • Web業務アプリケーション開発者
  • ASP.NET Web Forms、ASP.NET MVC開発者
  • SPREAD for ASP.NET利用者

必要な環境

  • Visual Studio Community 2015 Update3

3つのASP.NET

 現在、Microsoftが提供する.NET Framework向けのWebフレームワークには、主に次の3つがあります。()内は、Web APIフレームワークについての補足です。

  • ASP.NET Web Forms
  • ASP.NET MVC(と、ASP.NET Web API)
  • ASP.NET Core(Web APIとしての機能を含む)

 業務Webアプリケーションとして、無難に選択するならばASP.NET MVC、条件が合えばASP.NET Coreを推奨します。

ASP.NET Web Forms

 ASP.NET Web Formsは、サーバーサイドとフロントサイドを包括して開発するWebフレームワークです。まるでデスクトップアプリケーションのように開発できることが売りで、今では一枚岩のようと言われています。このASP.NET Web Formsを生かせるのは、「既存資産の活用」のメリットが勝つ場合に限ります。それでも、今後の対応を考えると大きな負債になりえますので、採択には十分な検証が必要です。また、SpreadJSのような昨今登場するフロントサイドのライブラリと組み合わせるには厳しいでしょう。

ASP.NET MVCと ASP.NET Web API

 ASP.NET MVCは冒頭でも述べた通り、ビューとデータロジックが明確に分離されたWebフレームワークです。分離により、昨今のgulpやTypeScript、AngularJS等といったフロントサイド技術との組み合わせが得意です。また、ASP.NET Web APIを併用してデータをJSON形式でやりとりすることで、フロントサイドとの連携が可能です。SpreadJSでの開発においても、スプレッドシートにデータを表示する際や、編集したデータを更新する際にASP.NET Web APIを使います。

ASP.NET Core

 ASP.NET Coreは、2016年6月に1.0がリリースされた全く新しいASP.NETです。先の2つのフレームワークがWindowsのIIS上で動作する一方、こちらはクロスプラットフォームに対応しています。ASP.NET MVCと同じView・Controllerに分けるアーキテクチャですが、クロスプラットフォーム化のために一から作り直しているため、ASP.NET MVCより洗練されたWebフレームワークです。その点ではASP.NET MVC開発者にとっては馴染みやすいといえます。

 注意したい点は、HTTP関連のライブラリが刷新されているため、今までの慣れが通じない箇所がある点です。成熟度の違いから、ASP.NET MVCにはあるが、ASP.NET Coreにはない機能もあります。また、リリースされてから日が浅いので日本語のドキュメントが少ないです。

 これらの状況を踏まえ、今業務Webアプリケーションに推奨するのはASP.NET MVC、先鋭的に選択できるならばASP.NET Coreです。

TypeScriptとVisual Studio

 JavaScript開発の効率を劇的に向上させてくれるのがTypeScriptです。TypeScriptとは、コンパイルするとJavaScriptのコードを出力するAltJSの一つです。動的型付けのJavaScriptと違って静的型付けであるため、バグの発生率を抑えることができます。既存のJavaScriptライブラリを参照する際は、静的型付け言語のメリットを活かしてTypeScriptの型定義ファイルを参照します。多くの場合は、コンパイルを行うビルドツールやタスクランナーを導入します。

 SpreadJSにおいては、TypeScript型定義ファイルが含まれているため、TypeScriptでの開発が可能です。また、ビルドはVisual Studioのサポートにより、プロジェクトのビルド時に行うことができます。

 Visual Studioは、TypeScriptをはじめnpm、gulp、AngularJS、Sass等、さまざまなOSSライブラリのサポートが進んでいます。フロントサイド開発の際は、まずは、Visual Studio Galleryで拡張機能を検索することを推奨します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 矢後 比呂加(ヤゴ ヒロカ)

     Microsoft MVP for Visual Studio and Development Technologies(https://mvp.microsoft.com/ja-jp/PublicProfile/5000246)  シグマコンサルティング株式会社にて、Microsoft Azu...

バックナンバー

連載:ASP.NET MVCとSpreadJSで業務Webアプリケーションモダン化計画
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5