AngularJS + TypeScript + SharePoint Add-ins

提供: SharePoint Developer
移動: 案内検索

JavaScript の MV フレームワーク (MVC とか MVVM といったフレームワークの総称) の中でも、マイクロソフトが推している AngularJS について、SharePoint Add-ins (旧 apps for SharePoint) での使い方をまとめます。

AngularJS とは

まずは AngularJS について簡単に説明します。
AngularJS は JavaScript の MV フレームワークの一つで、データバインディングと依存性注入という仕組みを使って JavaScript のコードを簡潔に分かり易く記述することができるようになります。
特にデータバインディングは強力で、jQuery 等で DOM をゴリゴリと作成したり編集したりといったことをせずとも、動的なページを簡単に作ることができます。

「AngularJS」で検索をすると色々ヒットするので、AngularJS の詳細については Web で調べてみてください。

いくつか私が良く見るサイトを紹介します。

  • 公式サイト
    AngularJS 本体をダウンロードしできたり、API リファレンスやチュートリアルがあります。
  • AngularJS 初心者ガイド
    AngularJS 初心者向けに日本語で分かり易く解説をしています。
    サンプルや API リファレンスもあり、基本的なことは大体このサイトで学ぶことができます。

AngularJS + SharePoint Add-ins

SharePoint 内のデータを入出力するような SharePoint Add-ins を開発する際に、MVC の V (ビュー)となる部分を開発するためのフレームワークとして AngularJS を使用することができます。
SharePoint 内のデータ入出力は SharePoint が持つ REST API を使用し、REST で取得したデータ(アイテム)を AngularJS のデータバインディングを使ってビューに表示したり、入力を受付けたりします。
もちろん、AngularJS は SharePoint の REST API 以外のサービスを呼び出すこともできるので、Azure 上に構築した独自の Web API や、巷のサービスと連携させることもできます。
なお、下図の赤背景の部分が AngularJS の仕組みを使って実装する部分になります。

AngularJS-1.png

このようなアーキテクチャであれば、SharePoint Add-ins は SharePoint ホスト形式にすることができるため、Office 365 にも展開することができ、SharePoint でできることの幅を格段に広げることができます。

さらに便利に。TypeScript

AngularJS は、JavaScript のためのフレームワークですので開発当然 JavaScript で行うことになります。
JavaScript での開発経験がある方は大規模開発で JavaScript をわかりやすく使うことに非常に気を使うかと思います。
AngualrJS を使うことで、DOM の操作をすることがなくなるので、コードはだいぶ読みやすくなりますが、それでもやはり JavaScript の部分は読みづらいわけです。
この読みづらさを解消するとともに、C# では当たり前のビルド時の型チェックなどを行ってくれ、開発生産性を格段に向上させる技術が TypeScript です。
TypeScript はマイクロソフトが開発しただけに、C# 開発者には非常に馴染み深い作りになっているため、JavaScript なんて使いたくないと思っている C# 開発者もきっと違和感なく TypeScrpit を使えるかと思います。
TypeScript で書いたコードはビルド時に JavaScript に変換されるため、AngularJS と組み合わせて、SharePoint Add-ins の開発に使用することができます。

TypeScript については、は日々情報が増えていっているので色々なサイトでよい情報を得ることができるかと思います。ぜひ検索して探してみてください。

関連ページ