環境は整いました。いよいよ最初のプロジェクトを作ります。でも、いきなり yo を実行する前に、1つだけやっておくべき「置き場所の準備」があります。何でしょう？
プロジェクト専用の空フォルダを作り、その中に入ってから実行することです。ジェネレーターは「今いるフォルダ」に雛形を展開するので、置き場所を先に決めておくのが安全。ここから、この講座を通して作る「リストビューア」の土台が生まれます。
まず、空フォルダを作って入る
PowerShellで、プロジェクト用のフォルダを作り、その中へ移動します。名前はここでは spfx-list-viewer とします。
md spfx-list-viewer
cd spfx-list-viewerジェネレーターを起動する
フォルダの中で、SharePointジェネレーターを起動します。
yo @microsoft/sharepointすると、いくつかの質問が対話形式で始まります。矢印キーで選び、Enterで決定します。慌てず1つずつ答えていきましょう。
質問の意味と、今回の答え
質問は使うバージョンで多少変わりますが、要点は次の通りです。今回のリストビューアでは、右端の「今回の答え」を選びます。
| 質問 | 意味 | 今回の答え |
|---|---|---|
| Solution Name | プロジェクト（ソリューション）の名前 | spfx-list-viewer（Enterで既定のまま） |
| Which type of client-side component to create? | 何を作るか（部品の種類） | WebPart |
| Web part name | Webパーツの名前 | ListViewer |
| Which template would you like to use? | UIの土台（フレームワーク） | React |
いちばん大事なのは2つ。「WebPart」を選ぶこと（ページに配置する部品を作るから）と、「React」を選ぶこと（この講座はReactで画面を組むから）です。
「Extension」や「Library」も選べるけど、今回はページに置く"見える部品"を作りたいのでWebPart。UIの土台は、迷わずReactでOK。ここさえ間違えなければ、あとは勝手に土台が組み上がっていくよ。
生成が始まる — 数分待つ
答え終えると、ジェネレーターが雛形ファイルを展開し、続けて npm install（必要な部品のダウンロード）を自動で始めます。ここは数分かかります。ネットワークの状態によってはお茶を1杯どうぞ。
最後に Congratulations! のような完了メッセージが出れば成功です。赤い ERR! で止まらず終わっていれば、土台の完成です。
生成が終わったら、作られたファイルをエディタで開いてみましょう。VS Codeが入っていれば、フォルダの中でこう打つと、そのまま開けます。
``
code .
``
たくさんのフォルダとファイルが並んでいるはずです。「うわ、多い……」と怯む必要はありません。次のSTAGE 03で、この中の「どこを見ればいいか」を地図にして解説します。今は"土台が生成された"という事実だけ受け止めればOKです。
生成されたバージョンを確認する
作られたプロジェクトが、どのSPFxバージョンで生成されたかは .yo-rc.json に記録されています。また package.json の @microsoft/sp-* でも確認できます（STAGE 01で学んだ通り）。最新環境なら 1.23 系になっているはずです。
これで「入れ物」ができました。次は、この土台が本当に動くのか——まだ何も作っていないHello Worldの状態を、画面に出して確かめます。
- ソリューション（Solution）
- SPFxプロジェクト全体のこと。1つのソリューションに複数のWebパーツを入れられる
- Yeomanジェネレーター
- yo @microsoft/sharepoint。対話に答えると雛形一式を生成する
- WebPart / Extension
- 作れる部品の種類。ページに置く部品がWebPart、環境に効く拡張がExtension
- .yo-rc.json
- 生成時の設定・SPFxバージョンが記録されるファイル