SharePoint Framework で使用している Node.js について勝手に解説


## 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 に上がっているやつを使うといいでしょう。

<br>

### 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現在) なので、ダウングレードしたいのでしょう。

<br>

### ビルド環境の準備

> 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がインストール済みだったりすると不要かもしれません。

<br>

```
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++のコンパイラを使用します。

<br>

### YeomanとGulpのインストール

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

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

<br>

### SharePoint generator のインストール

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

```
npm install -g @microsoft/generator-sharepoint
```

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

<br>

---

引き続き、[Build your first web part - Docs - Office Dev Center](https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part) についても解説したいのですが、長くなったので別記事にしたいと思います。

<br>

### 2017-05-26 追記

続きを書きました: [SharePoint Framework: Build your first web part を解説 - Qiita](http://qiita.com/Kazunori-Kimura/items/a4da1ed7c275ab2276ad)