Webパーツプロジェクトの作成方法についてご紹介します。
事前準備
次の記事を参考に、開発ツールをインストールしておいてください。
プロジェクトフォルダを開く
Visual Studio Codeを開き、画面上部のメニューから [ファイル] > [フォルダーを開く] の順にクリックします。
Webパーツプロジェクトを作成したいフォルダーを選択し、[フォルダーの選択] をクリックします。
選択したフォルダーが、エクスプローラービューに表示されていればOKです。
ターミナルからYeomanを起動
開いたフォルダーに、Webパーツプロジェクトを作成していきます。
画面上部のメニューから [ターミナル] > [新しいターミナル] の順にクリックします。
画面右下にターミナル画面が表示されます。
ターミナル画面に、以下のコマンド文を記述し、[Enter] を押します。
yo @microsoft/sharepoint
Yeomanのアイコンが表示されます。ここから質問形式でWebパーツプロジェクトを作成していきます。
質問に回答し、Webパーツプロジェクトを作成
以下のような質問がされるので、回答していきます。
| 質問（英語） | 質問（日本語訳） | 回答 |
|---|---|---|
| What is your solution name? | ソリューション名は？ | 自由入力 |
| Which baseline packages do you want to target for your component(s)? | どの製品をターゲットにしますか？ | 以下から選択します。 ・SharePoint Online only (latest) ・SharePoint 2016 onwards, including 2019 and SharePoint Online ・SharePoint 2019 onwards, including SharePoint Online |
| Where do you want to place the files? | ファイルをどこに作成しますか？ | 以下から選択します。 ・Use the current folder ・Create a subfolder with solution name |
| Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? | すべてのサイトにすぐにソリューションを展開できるように許可しますか？ | 以下から選択します。 ・y ・N |
| Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? | 共有されていないWeb APIにアクセスするためのアクセス許可が必要ですか？ | 以下から選択します。 ・y ・N |
| Which type of client-side component to create? | どちらのコンポーネントを作成しますか？ | 以下から選択します。 ・WebPart ・Extension |
| What is your Web part name? | WebPartの名前は？ | 自由入力 |
| What is your Web part description? | WebPartの詳細は？ | 自由入力 |
| Which framework would you like to use? | どのフレームワークを使いますか？ | 以下から選択します。 ・No JavaScript framework ・React ・Knockout |
以下は、回答例になります。青字部分が回答です。
回答を終えると、ファイルが作成（スキャフォールディング）されていきます。
ファイルの作成が終えると、作成完了メッセージが表示されます。
プロジェクトフォルダに、以下のようなファイル・フォルダーができていれば正常に作成されています。
以上、Webパーツプロジェクトの作成方法でした。
