SharePoint Framework とは？

SharePoint Framework – オープン性と接続性を強化した新しいプラットフォーム
https://blogs.technet.microsoft.com/microsoft_office_/2016/05/17/the-sharepoint-framework-an-open-and-connected-platform/

SharePointのページやWebパーツを作成する新しい仕組みです。

SharePoint Framework では、マイクロソフトのパートナー様、お客様、個人開発者の皆様が React や Angular など最新の JavaScript フレームワークをお使いいただけるようになります。

つまり、ピュアな HTML & JavaScript で SharePoint ページや Webパーツを開発できるようになります。

こいつを使うにあたって、Node.js環境が必須になっています。
これまで SharePointのページやWebパーツを開発していた人たちは Node.jsの慣習に馴染みがなかろう、ということで、Node.js視点から勝手に解説させていただきます。

Developer Preview

SharePoint Framework の GitHub レポジトリの Wiki を見ると、現状では Developer Preview というステータスのようです。
https://github.com/SharePoint/sp-dev-docs/wiki

1/9 に RC0 となったようなので、正式リリース間近という感じでしょうか。

環境構築

まずは開発環境を整える必要があります。
以下のページに従って進めていきましょう。

Set up your development environment - Docs - Office Dev Center
https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

Node.jsのインストール

まずは Node.js のインストールからですが、 LTS version をインストールせよ、との記載があります。

Node.js の公式サイト https://nodejs.org/ja/ に行くとわかりますが、常に2バージョンのインストーラがダウンロード可能になっています。
メジャーバージョンが偶数のものが Long Term Support です。
最新バージョンは v7.4.0 (1/17現在) ですが、こちらは LTS ではありませんので注意してください。

Node.js はバージョンアップが激しいので、Node.jsそのもののバージョン管理ツールがあります。
Windowsの方は Nodist、Macの方は Nodebrew がオススメです。

お試しで Node.js をインストールする場合、Windowsの方は Chocolatey, Macの方は Homebrew に上がっているやつを使うといいでしょう。

npmのバージョン指定

つづいての手順で、以下のコマンドを実行しています。

npm install -g npm@3

npm は Node Package Manager の略です。名前の通り、Node.jsのパッケージ管理を行うコマンドです。
Node.js と共にインストールされます。

-g は globalオプション で、指定したパッケージを PATH の通った場所にダウンロードします。
npmのレポジトリ https://www.npmjs.com/ にはCLIツールも多数登録されており、 -g コマンドを指定してインストールすることで、そのパッケージをコマンドラインから使用することができます。

npm@3 はメジャーバージョンを指定して npm をインストールしています。 npm の最新バージョンは v4.1.1 (1/17現在) なので、ダウングレードしたいのでしょう。

ビルド環境の準備

You need to install windows-build-tools. windows-build-tools will install Visual C++ Build Tools 2015, provided free of charge by Microsoft. These tools are required to compile popular native modules. It will also install Python 2.7, configuring your computer and npm appropriately.

windows-build-tools っていうパッケージは Visual C++ Build Tools 2015 を npm経由でインストールしてくれるようです。
Visual Studioがインストール済みだったりすると不要かもしれません。

npm install -g --production windows-build-tools

--production は npm install 時に開発用のパッケージはダウンロードしないように指定するオプションです。

Node.js のパッケージには必ず package.json というファイルが含まれており、このファイルにパッケージの依存関係が定義されています。
依存関係の定義には、パッケージの動作に必ず必要となる dependencies と開発時のみ使用する devDependencies の2つに分かれています。

--production を指定することで、動作に必要なパッケージのみがダウンロードされます。
...が、パッケージ名を指定してインストールする場合は --production を明示せずとも、dependencies のみがダウンロードされるんじゃないかなぁ...?

また、Python2.7をインストールせよ、とのこと。

Node.jsのパッケージの中には、JavaScriptではなく他言語のコードを含めておき、npm install 時にクライアント環境に合わせてビルドを行い、バイナリを生成するものがあります。その際に使用されるのが node-gyp というパッケージで、PythonとC++のコンパイラを使用します。

YeomanとGulpのインストール

つづけて、2つのパッケージ Yeoman と Gulp をグローバルオプション付きでインストールしています。
これらのパッケージもCLIツールとして使用します。

Yeoman はWebアプリケーションなどのプロジェクト構成をコマンド一発で生成してくれるツールです。
プロジェクトの骨組みである generator をもとに、いくつかの質問に答えるだけでプロジェクトのフォルダ構成と必要な設定ファイル等を準備してくれます。
Gulp はタスクランナーです。
gulpfile.js に様々なタスクを定義しておき、それらを一括で実行したり、ファイルに変更があった場合に所定のタスクを実行する、といったことができます。

SharePoint generator のインストール

前項でも説明したとおり、Yeoman は generator をもとにプロジェクトを生成します。
generator はグローバルにインストールした yo には含まれていませんので、別途インストールする必要があります。

npm install -g @microsoft/generator-sharepoint

@microsoft/generator-sharepoint というパッケージ名は先程インストールした yo や gulp とすこし違いますが、
これは Scoped package と呼ばれるもので、@microsoft/ の部分は名前空間です。
npm ではパッケージ名は早い者勝ちなのですが、名前空間を指定することで名前の重複を避けられます。

引き続き、Build your first web part - Docs - Office Dev Center についても解説したいのですが、長くなったので別記事にしたいと思います。

2017-05-26 追記

続きを書きました: SharePoint Framework: Build your first web part を解説 - Qiita