SharePoint Framework（SPFx）を、開発環境の構築から独自Webパーツの作成・配置まで、0から順を追ってやさしく解説する学習講座です。まずは「0から動かす」ところまでを一緒に。
SPFxは「バージョンの一致」が命。対象バージョンの調べ方から、Node.js・Heft・Yeomanジェネレーターの導入、開発証明書の信頼まで、0から手を動かして環境を整える章です。
Yeomanジェネレーターでプロジェクトの雛形を生成します。対話式の質問の意味を1つずつ押さえ、証明書を信頼して、まずは「Hello World」がワークベンチに出るところまで。
生成されたフォルダは何者か。src・config・package.jsonの役割を地図として押さえ、Webパーツ本体・manifest・プロパティペインの関係を理解します。作り始める前の"地図読み"です。
この講座の山場。SharePointの「お知らせ」リストの中身を読み取り、一覧として画面に描くWebパーツを、React＋TypeScriptで実際に作ります。1つの完成品を、手を動かして組み上げます。
作ったリストビューアを、実際のSharePointのデータで動かして確かめます。ホストされたワークベンチの使い方から、うまく動かないときの切り分けまでを身につけます。
本番用にビルドして .sppkg を生成し、アプリカタログへアップロード。サイトにアプリを追加し、ページ上にリストビューアを配置——「自分で作った部品が本番で動く」まで、最後の一区間です。
本編とは別の"練習編"。Amazon Lightsail の Ubuntu に「使い捨てユーザー」を作り、環境構築を何度でもゼロからやり直します。実際に打つコマンドを、1行ずつコメント付きで追える実践ページです。
SharePoint Framework（SPFx）は、SharePoint OnlineやMicrosoft Teams・Vivaのページに、自作の部品（Webパーツ）や機能拡張を追加するための、Microsoft公式の開発モデルです。
サーバーに手を入れるのではなく、TypeScript＋Reactで書いたコードがブラウザ上で動きます。だからNode.jsやnpmといった、モダンなWeb開発の道具立てをそのまま使います。
この講座は上から順番に読み進める設計です。まずSTAGE 01で「0から動く環境」を作り、そこから一歩ずつ、実際に配置できるWebパーツへと積み上げていきます。
SPFxで最初にして最大の関門は、実は「環境構築」です。SPFxのバージョン・Node.js・TypeScript・Reactがすべて噛み合っていないと、原因の分かりにくいエラーで止まる——ここを越えられずに諦めてしまう人が本当に多い領域です。
この講座では、最新の安定版（SPFx 1.23 / Heftツールチェーン）を対象に、「なぜそのバージョンなのか」を調べて確かめながら、0から環境を組み上げる手順をまとめていきます。別のPCで環境を作り直すときや、数年後に読み返すときにも、そのまま使える手順書を目指します。
まずは学習ロードマップから。STAGE 01「開発環境の構築」を、上から順にどうぞ。
