はじめに
1.はじめに
モダンなSharePoint Onlineサイトに独自の機能を組み込みたい、使いやすいUIを提供したい。
そんなニーズに応えるのがSharePoint Framework（以降、SPFx）のWebパーツです。
SPFxを活用すれば、企業のポータルサイトや業務アプリを柔軟に拡張し、より使いやすいSharePoint Onlineサイトを構築できます。
本記事では、Webパーツ開発の第一歩として、新しいプロジェクトの作成からローカル環境でのテストまでハンズオン形式で解説します。
SPFxの開発環境の構築や、デプロイの方法は別記事で紹介しておりますので、下記の目次よりご参照ください。
2.連載の目次
・SPFxハンズオン開発シリーズ 第1回：開発環境の構築
・SPFxハンズオン開発シリーズ 第2回：Webパーツの開発（※本記事）
・SPFxハンズオン開発シリーズ 第3回：Webパーツのデプロイ
目次
1.開発の流れ2.プロジェクト作成
3.Webパーツの開発
4.Webパーツのテスト
5.まとめ
6.最後に
1.開発の流れ
SPFxを用いたアプリ開発は、大きく5つのステップに分かれます。
SPFxハンズオン開発シリーズでは
第1回にてSTEP 01
第2回にてSTEP 02.03
第3回にてSTEP 04.05
の説明を行います。
2.プロジェクト作成
SPFxのWebパーツ開発を始めるには、まずプロジェクトの雛形を作成します。
このプロジェクトには、Webパーツのソースコード、設定ファイル、依存関係など開発に必要な一式が含まれます。
具体的には、Yeomanジェネレーターを利用し、対話形式でプロジェクトの名前やテンプレート、フレームワークを選択してセットアップを行います。
この手順を終えると、すぐに開発に着手できるフォルダー構造と初期ファイルが生成されます。
〇プロジェクト作成手順
STEP 01 フォルダーの作成
STEP 01-1
プロジェクトの保存先となる任意のフォルダーを作成します。
今回は例として「C:\SPFx_test\myApp」に作成しました。
STEP 02 VSCodeの起動
STEP 02-1
Visual Studio Code（以降、VSCode）を起動します。
まだインストールしていない場合は、以下のリンクからインストールしてください。
URL: https://code.visualstudio.com/
STEP 03 プロジェクトの作成
STEP 03-1
VSCodeのメニューから「ファイル」＞「フォルダーを開く」をクリックします。
STEP 01で作成したフォルダーを選択し、「フォルダーの選択」をクリックします。
STEP 03-2
「ターミナル」＞「新しいターミナル」をクリックしてターミナルを開きます。
※既にターミナルが開いている場合は、古いターミナルを閉じてください。
STEP 03-3
プロジェクトを作成します。
VSCodeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。
yo @microsoft/sharepoint
STEP 03-4
ソリューション名を入力します。
今回は「HelloWorld」と入力しますが、任意の名前を指定できます。
STEP 03-5
開発するコンポーネントの種類を選択します。
今回はWebパーツを開発するため、「WebPart」を選択します。
STEP 03-6
Webパーツの名前を指定します。
ここでは「HelloWorld」と入力します。
STEP 03-7
Webパーツの開発に使用するテンプレートを選択します。
今回は「No Framework」を選びます。
※テンプレートの違い
Minimal：最小限のファイルだけを生成
No Framework：プレーンなTypeScript/JavaScriptで開発
React：Reactを利用しコンポーネント単位で開発
STEP 03-8
以下のメッセージが表示されれば、プロジェクトの作成完了です。
3.Webパーツの開発
プロジェクトを作成できたので、次にSPFxを用いてWebパーツを実際に開発します。
SPFxでは、生成されたTypeScriptファイルを編集することで、Webパーツの見た目や動作を柔軟に変更できます。
本章では、Microsoft Learnのチュートリアルを参考に、サンプルのWebパーツを作成します。
Microsoft Learn URL：Webパーツの開発 | Microsoft Learn
〇Webパーツ開発手順
STEP 01 開発者用自己証明書の発行
STEP 01-1
開発者用自己証明書の発行を行います。
VSCodeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。
※ローカル開発環境でHTTPS通信を安全に利用するための手順です。
gulp trust-dev-cert
STEP 02 serve.jsonファイル
STEP 02-1
テスト時に開くURLを指定するためのファイルのコーディングを行います。
以下ファイルにアクセスします。
config\serve.json
STEP 02-2
5行目を以下コードに修正します。
“initialPage” ": "https://{tenantDomain} /_layouts/workbench.aspx "
※tenantDomainは、ご利用のSharePoint Onlineサイトのドメインに置き換えてください。
STEP 03 package-solution.jsonファイル
STEP 03-1
作成したWebパーツの名前/バージョン/作成者情報を指定するためのファイルのコーディングを行います。
以下ファイルにアクセスします。
config\package-solution.json
STEP 03-2
基本的には初期状態のままでも問題なく動作します。
下記表に代表的な項目を記載いたしました。
必要に応じて内容を変更してください。
| 項目 | 説明 |
|---|---|
| solution.name | ソリューション名 |
| solution.id | ソリューションを一意に識別するGUID ※通常は変更不要 |
| solution.version | ソリューションのバージョン |
| skipFeatureDeployment | 全サイトに自動的に展開するかどうか ※trueの場合はすべてのサイトで利用可能 |
| developer.name | 開発者名 |
| metadata.shortDescription | Webパーツの簡単な説明文 |
| metadata.longDescription | Webパーツの詳細な説明文 |
| features.title | Webパーツの機能のタイトル |
| features.description | Webパーツの機能の説明 |
STEP 04 [Webパーツ名]WebPart.ts
STEP 04-1
Webパーツの表示内容や動作など、中心となるロジックをコーディングするためのファイルにアクセスします。
src\webparts\[Webパーツ名]\ [Webパーツ名]WebPart.ts
STEP 04-2
今回はコーディングを行いませんが、実際に機能を追加する際には、このファイルを編集して表示内容やプロパティをカスタマイズします。
4.Webパーツのテスト
ここまででWebパーツの基本的なプロジェクト構成と設定が完了しました。
続いて、実際にWebパーツが正しく動作するか確認するため、ローカル環境でテストを行います。
テストでは、ローカルのブラウザ上でWebパーツを追加・表示しながら動作を確認できます。
〇Webパーツのテスト手順
STEP 01 gulp serveコマンドの実行
STEP 01-1
テストのためローカルWebサーバーを起動します。
VSCodeのターミナルに以下のコマンドを入力し、Enterを押しコマンドを実行します。
※コマンドを実行すると、ブラウザが自動的に起動し、ローカルのWorkbench画面が表示されます。
gulp serve
STEP 02 Webパーツの追加
STEP 02-1
ページにWebパーツを追加します。
＋＞ローカル＞Hello Worldをクリックします。
STEP 03 動作確認
STEP 03-1
Webパーツ上の表示内容を変更します。
鉛筆アイコンをクリックし、Description Fieldを変更します。
5.まとめ
今回ご紹介した一連の手順を通じて、プロジェクトの作成やテスト環境の準備など、Webパーツ開発の基盤を整えることができました。
次回は、作成したWebパーツをSharePoint Onlineに展開し、実際のサイト上で利用可能な状態にするデプロイの手順を解説します。
次回までお読みいただくことで、開発・テスト・デプロイまでを一通り体験し、SPFxの基本的な作業フローを一巡することができます。
ぜひ引き続きご覧いただき、開発から公開までの流れを確認してみてください。
6.最後に
テンダでは、「こんなプロジェクトに挑戦したい」「こんなチームで働きたい」「理想のチームを創りたい」と願う仲間を求めています。 カジュアル面談も随時受付中です。ぜひ一度お話ししましょう！