SharePoint Framework Web パーツ開発 その1:プロジェクトの作成

投稿者: | 2020年2月3日

はじめに

SharePoint Framework による Web パーツの開発手順を説明します。
説明の題材として、SharePoint リストから URL 列の値を取得して一覧で表示する、クラシック UI でいうところのリンクリストのような Web パーツを開発していきたいと思います。

事前に Docker による SharePoint Framework 開発環境が準備できているところからの話になりますので、環境がない方は、まずは以下の記事を見て環境構築をしてください。

開発環境を構築するためにホストとなる PC で行う手順
Docker イメージを準備する手順

プロジェクト作成手順

プロジェクトフォルダの作成

Windows エクスプローラーで任意のフォルダにプロジェクトファイルを格納するためのプロジェクトフォルダを作成します。

ここでは、以下の場所にプロジェクトフォルダを作成します。
リンクリストの Web パーツを作るということで「LinkListWebPart」にしました。

Visual Studio Code 起動

Visual Studio Code を起動してメニューから ファイル > フォルダーを開く をクリックし、プロジェクトフォルダを開きます。

続いて、メニューから 表示 > ターミナル をクリックし、PowerShell のターミナルを開きます。

Docker 起動

ターミナルに、 Docker を起動するためのコマンドを入力し実行します。

無事、Docker が起動すると、以下のような表示になります。

以後、上記のプロンプトにコマンドを入力していきます。

プロジェクトの作成

yo コマンドで Web パーツのプロジェクトを作成します。
–package-manager yarn を指定しない場合、パッケージマネージャとしてはデフォルトの npm が使用されるのですが、これまで使っていて npm だとうまくいかないことが多かったので、私はいつも yarn を指定しています。

上記コマンドを実行すると、プロジェクト作成に必要な情報を入力するための質問が順に表示されます。
順に説明していきます。

① 統計情報収集への許可

まずは統計情報の収集に対して許可を求められるので、ここは「y」を入力して品質向上に貢献しましょう。
このあと、いわゆる「yo おじさん」が登場します。

② ソリューションの名前の指定

ソリューション名を入力してください。
ここで指定した名前があらゆるところで使われるようになります。
今回は「LinkListWebPart」と入力しました。

③ デプロイ先 SharePoint のバージョンの指定

デプロイ先の SharePoint を選びます。
今回は Online 用に作るので、一番上の「SharePoint Online only (latest)」を選択しました。
ちなみに、オンプレバージョンを選ぶと、オンプレのバージョンに合わせた SharePoint Framework のバージョンが自動的に選択されるので、最新の SharePoint Framework の機能を利用することはできなくなります。

④ 作業フォルダの指定

VSCode で開いているフォルダ(カレントフォルダ)を指定するか、サブフォルダを作るかを指定します。
この記事の流れで進めると、この段階で Web パーツ用のフォルダがカレントフォルダの状態なので、「Use the current folder」を選択します。

⑤ 全サイトへの自動展開の指定

これから開発する Web パーツをテナントにデプロイした際に、自動的にすべてのサイトで展開されるようにするか否かを指定します。
任意のサイトで必要に応じて展開したいので、ここでは「n」を指定します。

⑥ 分離ドメインでの実行の指定

Web パーツを iFrame として作成し、Web パーツを配置するコンテキストとは別のコンテキストでどうさせるようにするか否かを指定します。
今回は配置したページにあるリンクリストを参照したいので、「n」を指定します。

⑦ 開発するコンポーネントの種類の指定

開発するコンポーネントの種類を指定します。
今回は Web パーツを作るので、「WebPart」を選択します。

⑧ Web パーツ名の指定

Web パーツの名前を指定します。
後から変更できるので何でも OK です。

今回は「LinkListWebPart」にしました。

⑨ Web パーツの説明文の指定

Web パーツの説明文を指定します。
後から変更できるので何でも OK です。

今回は「LinkList」にしました。

⑩ JavaScript Framework の指定

Web パーツのレンダリングに使う JavaScript Framework を指定します。
今回は「React」を指定します。
React は SharePoint Framework で標準的に使われているフレームワークで、ネットで検索すると情報も多く出てくるので始めやすいのではないかと思います。

 

ここまで入力を進めて、Enter キーを押すと、指定した内容に基づいて様々なパッケージがダウンロード&インストールされて、プロジェクトに必要なファイルが一式用意されます。
ネット環境にもよりますが数分は掛かります。

なお、出来上がったプロジェクトの全ファイル容量を確認すると、最初は空だった作業フォルダに 700MB 程度のファイルが格納されています。
これらのファイルのほぼすべてをネットからダウンロードしてくるので、プロジェクト作成時はネットワーク環境がとても大事です。

完了すると、Congratulations!って表示されます。
これでひとまずプロジェクトの作成は完了です。

 

これでプロジェクトは作成されましたが、実際にコーディングやデバッグに入る前に、いくつかのファイルを変更しないといけない部分があります。

コーディングに入る前の事前準備

事前準備については別記事「Docker を使った SharePoint Framework 開発環境の構築 その3」にまとめてあります。

上記記事の以下の 2 セクションを参考に事前準備作業を行ってください。

  • 各種 json の変更と SPWebBuildRig.js の修正
  • 開発証明書の作成、インストール

まとめ

ここまでの作業で、無事 SharePoint Framework の Web パーツ開発のプロジェクトが作成できて、実行できる直前のところまできました。

次の記事ではデバッグ実行の方法について記載します。