SharePoint Framework の開発ツールとライブラリ
SharePoint Framework には、ソリューションの構築に使用できるクライアント側の JavaScript ライブラリがいくつか含まれています。 この資料では、クライアント側の Web パーツの開発に使用できるツールとライブラリの概要をご説明します。
TypeScript
TypeScript は、プレーンな JavaScript にコンパイルされる JavaScript の型付けスーパーセットです。 SharePoint クライアント側の開発ツールは、TypeScript のクラス、モジュール、およびインターフェイスを使用して構築されます。 これらを使用して、信頼性の高いクライアント側の Web パーツを構築します。
TypeScript を開始するには、次のリソースを参照してください。
JavaScript フレームワーク
クライアント側の Web パーツを開発する多数の JavaScript フレームワークのいずれかを選択できます。 以下は、最も一般向けのものです。
クライアント側の Web パーツは、SharePoint ページにドロップされたコンポーネントであるため、類似のコンポーネント モデルをサポートする JavaScript フレームワークを選択することをお勧めします。 React や Handlebars、Angular 2 などの軽量フレームワークはすべて、コンポーネント モデルをサポートし、クライアント側の Web パーツの構築に非常に適しています。
SharePoint PnP JavaScript Core library もご覧ください。これは SharePoint REST API での簡単なアクセスの提供を目的として努めるコミュニティです。
ノード パッケージ マネージャー (npm)
SharePoint のクライアント側の開発ツールは npm のパッケージ マネージャー使用しており、NuGet と同様に、依存関係や他の必要な JavaScript ヘルパーを管理します。 npm は、Node.js のセットアップの一部として通常含まれます。
npm の詳細については、npm のドキュメントを参照してください。
Node.js
Node.js はオープン ソースのクロス プラットフォームのランタイム環境で、JavaScript コードをホストし、提供します。 Node.js を使用して、JavaScript で記述されたサーバー側の Web アプリケーションを開発することができます。 Node.js のエコシステムは、npm と gulp などのタスク ランナーと密接に関連して、JavaScript ベースのアプリケーションを構築する効率的な環境を提供します。 Node.js は IIS Expres または IIS と似ていますが、クライアント側の開発を簡素化するためのツールが含まれています。
Node.js の詳細については、以下を参照してください。
Gulp タスク ランナー
SharePoint のクライアント側の開発ツールは、gulp をビルド プロセスのタスク ランナーとして使用し次のことを行います。
- JavaScript と CSS ファイルをバンドルし、縮小します。
- ツールを実行して、各ビルドの前にバンドル化タスクと縮小タスクを呼び出します。
- LESS または Sass ファイルを CSS にコンパイルします。
- TypeScript ファイルを JavaScript にコンパイルします。
gulp の詳細については、以下を参照してください。
Webpack
Webpack は、Web パーツ ファイルと依存関係を処理して 1 つまたは複数の JavaScript のバンドルを生成する、モジュール バンドラーです。そのため、さまざまなシナリオに対し異なるバンドルを読み込むことができます。
開発ツール チェーンは Webpack を使用してバンドルします。 これにより、モジュール、およびそれらを使用する場所を定義することができます。 また、ツール チェーンを使用してユニバーサル モジュール ローダーである SystemJS を使用し、モジュールをロードします。 これにより、各 Web パーツが独自の名前空間で実行されることを確実にすることによって、Web パーツのスコープをすることができます。
Webpack の詳細については、以下を参照してください。
Yeoman のジェネレーター
Yeoman は新規プロジェクトの開始に役立ち、ベスト プラクティスとツールが提供されているので、生産性を維持するのに役立ちます。 Yeoman の SharePoint ジェネレーターは、新しいクライアント側の Web パーツ プロジェクトをすぐ開始するためのフレームワークの一部として利用することができます。
Yeoman の詳細については、以下を参照してください。
- Yeoman の Web アプリケーションのスキャフォールディング
- Yeoman の使用可能なジェネレーター リスト
- SharePoint Framework 用の Yeoman ジェネレーターを実行します。
以下は、フレームワークの選択に応じて試すことができるいくつかの一般的な Yeoman のジェネレーターです。
ソース コード エディター
SharePoint Framework は、クライアント側の主導のため、次に示すような HTML/JavaScript のコード エディターを選択できます。
SharePoint Framework のドキュメントでは、ドキュメントと例にある Visual Studio Code を使用します。 Visual Studio Code は、デスクトップ上で実行される Microsoft の軽量ながら強力なソース コード エディターで、Windows、Mac、Linux で使用できます。 JavaScript、TypeScript、Node.js をサポートしており、他の言語 (C++、C#、Python、PHP など) とランタイムの拡張機能の豊富なエコシステムを持ちます。
SharePoint REST API
SharePoint Framework には、SharePoint の経験を持つ主要な統合があり、Web 開発を対象とします。 SharePoint REST API を使用すると、Web パーツの機能を形成する SharePoint やその他のワークロードと対話できます。
次の一連の REST API についてよく理解していただくことをお勧めします。
パターンとプラクティス
Office 開発のパターンとプラクティスと SharePoint のパターンとプラクティス (PnP) のイニシアチブには、コード サンプル、パターン、既存のソリューションを SharePoint Framework へ変換できるその他のリソースが用意されています。 PnP の成果を通じて利用できるコード サンプルやガイダンスをよく理解してください。