SharePointアプリの作り方（SPFxとAIで始めるMicrosoft 365アプリ開発）

はじめに / SharePointアプリの作り方 SharePointアプリの作り方 SPFxとAIで始める Microsoft 365アプリ開発 ことりちゅん ことりちゅん | Microsoft365勉強会 | 2026.09.19 Created by Codex 01

はじめに / SharePointアプリの作り方 自己紹介＆登壇経緯 普段の仕事 好きなもの SPFxとの出会い 企業の情シス Excel Excel-Funのボイチャ ・問い合せ対応 Power Apps AIとの相性を実感し ・自社のIT化 Notion 社内アプリ開発へ ・効率化ツール開発 Codex ← New AIコーディングを使い始めて約半年。試行錯誤の体験を共有します。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 02

目次 / SharePointアプリの作り方 目次と時間配分 章 タイトル 冒頭 開始の挨拶 章 タイトル 5 作ったアプリをSharePointに入れるには 1 SharePointアプリの紹介 6 AIとアプリを作ってみよう 2 SPFxとは？ 7 SPFxでアプリを開発して感じたこと 3 Power AppsとSPFxの主な違い 8 まず何から始めたらいいか 4 どのデータが扱えるか まとめ 終了の挨拶 ことりちゅん | Microsoft365勉強会 | 2026.09.19 03

第1部 / SharePointアプリの紹介 Markdownファイルで執筆できる、SharePoint Wiki ことりちゅん | Microsoft365勉強会 | 2026.09.19 05

第1部 / SharePointアプリの紹介 SharePointのMarkdown作成・編集・プレビュー 新規作成にmdが増えている！ ことりちゅん | Microsoft365勉強会 | 2026.09.19 06

第1部 / SharePointアプリの紹介 ページ内のMarkdown Webパーツ パーツにも増えているが、ドキュメントライブラリの .md とは繋がらない（今は） ことりちゅん | Microsoft365勉強会 | 2026.09.19 07

第1部 / SharePointアプリの紹介 Wikiの原稿は、ドキュメントライブラリへ SpoWikiドキュメントライブラリに .md を保存し、カスタム列で分類タグを付ける。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 08

第1部 / SharePointアプリの紹介 ファイルツリー・タグ・リンクを、一つの画面に ドキュメントライブラリのmdを読み込んでwikiとして表示 ことりちゅん | Microsoft365勉強会 | 2026.09.19 09

第1部 / SharePointアプリの紹介 AIへ、画面づくりから調査・修正まで依頼する 設計・画面 データ準備 調査・修正 日本語で作りたいものを伝 える 既存データソースを調査 エラーの原因を調べる リスト・テストデータを準 備 実行結果から改善する 画面や処理を形にする 認証・アクセス権にはMicrosoft 365の仕組みを活用する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 10

第2部 / SPFxとは SPFx = SharePoint Framework 何を作る？ 何で作る？ どう使う？ SharePointの中で動く HTML・CSS・TypeScript 独自のアプリやWebパーツ 一般的なWeb技術 ビルドして .sppkg にまと め アプリカタログへ登録 公開サンプルの活用も可能。ビルドにはNode.jsなどの開発環境が必要。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 11

第2部 / SPFxとは フルページ・Webパーツ・Teamsの3つの使い方 使いたい表示方法に合わせ、開発段階で対応を組み込む。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 12

第2部 / SPFxとは フルページアプリも、SharePointのページとして管理 新しい .aspx ページを作る場合と、既存ページにWebパーツを置く場合。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 13

第2部 / SPFxとは 同じWebパーツを、設定を変えて使い回す 対象ライブラリ・タイトル・件数・絞り込み条件などを配置ごとに指定。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 14

第2部 / SPFxとは Microsoft 365のサインインとサイト情報を活用する 01 既存のサインインを使う 利用者がログイン済みのSharePointの中でアプリを動かす 02 現在のサイト・利用者の情報を受け取る SPFxが提供するコンテキストを利用する 03 登録したアプリをページに配置する 配置先やデータへの権限に従って利用する ことりちゅん | Microsoft365勉強会 | 2026.09.19 15

第3部 / Power Appsとの違い 運用・展開に関する比較 1/2 比較項目 Power Apps（キャンバスアプリ） SPFx（SharePoint Framework） テナント管理者またはサイトカタログ管理者 開発者がアプリを保存・公開し、ユーザーや 利用者への公開方法 が .sppkgをアプリカタログに登録、 グループに共有 SharePointに配置する テナント管理者または委任された担当者によ るアプリの承認・配布が必要。SharePoint 外のデータアクセスはAPI権限の承認が必要 になることもある 管理者の関与 不要 利用者に必要な条件 アプリの共有、必要なサイト・データへのア 配置先のサイト・ページとデータへのアクセ クセス権 ス権 原稿の前提：M365テナントの標準設定・標準ライセンスの範囲。実際の運用・契約は組織ごとに確認。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 16

第3部 / Power Appsとの違い 運用・展開に関する比較 2/2 比較項目 Power Apps（キャンバスアプリ） SPFx（SharePoint Framework） 追加費用 不要（Premiumで機能追加あり） 不要 更新 アプリを修正して再公開（F5リロード） コードを修正してビルド・アップロード（ F5リロード） 原稿の前提：M365テナントの標準設定・標準ライセンスの範囲。実際の運用・契約は組織ごとに確認。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 17

第3部 / Power Appsとの違い アプリの実行環境の比較 アプリを動かす場所 Power Apps SPFx Teamsアプリ〈タブに追加〉 ○ ○ Webアプリ〈ブラウザでフルページで利用〉 ○ ○ SharePointページ内のパーツ〈ほかのコンテンツと並 べて配置〉 ○ ○ インストールアプリ〈Storeから導入〉 ○ 無し 実行環境の比較は原稿に基づく。対応する配置方法は開発時に設定する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 18

第3部 / Power Appsとの違い 開発手順の比較 1/3 比較項目 Power Apps（キャンバスアプリ） SPFx（SharePoint Framework） プラットフォーム Power Platform M365 SharePoint / Teams 主な技術 Power Fxという数式言語、標準コントロー ル、コネクタ。 HTML、CSS、TypeScriptなど。 開発環境 ブラウザ上のPower Apps Studioで開発する Claude、Codex、VS Codeなどで開発する。 。 UI実装方法 GUI中心。画面に部品を配置し、プロパティ コーディング中心。画面・動作・データ処理 や数式で動作を設定する。 をコードで実装する。 原稿の比較表を収録。Power Appsはキャンバスアプリを対象とする。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 19

第3部 / Power Appsとの違い 開発手順の比較 2/3 比較項目 Power Apps（キャンバスアプリ） SPFx（SharePoint Framework） 画面・操作の自由度 標準部品や数式で利用できる仕組みの範囲で 独自の画面・操作をコードで細かく実装でき 実装する。 る。 SharePointのデータ SharePointコネクタを使って読み書きする 。 連携 SharePoint REST APIなどを使って読み書き する。 他のM365データ連 携 テナント管理者が承認したGraphAPIで読み 書きする。 コネクタで読み書きする。 外部サービスとの連 用意されたコネクタを使って接続する。 携 APIを呼び出すコードを実装する。 原稿の比較表を収録。Power Appsはキャンバスアプリを対象とする。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 20

第3部 / Power Appsとの違い 開発手順の比較 3/3 比較項目 Power Apps（キャンバスアプリ） SPFx（SharePoint Framework） 起動速度・応答性 起動時の数式、データ取得量、画面間の依存 件数が少ない時は高速だが、データ量によっ 関係などが影響する。重くなりすぎないよう て処理の設計が重要となる。 な仕組みがある。 サーバー側に検索・処理を任せる「委任」が APIへの検索条件やページ単位の取得をコー 大量データへの対応 重要となる。委任できないクエリには原則 ドで設計する。接続先APIの制約は受ける。 500件、設定で最大2,000件の制約がある。 AIを使った開発 Copilotに自然言語で相談したり式の作成を 依頼できる コーディングエージェントに自然言語で指示 するとコーディングできる 原稿の比較表を収録。Power Appsはキャンバスアプリを対象とする。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 21

第3部 / Power Appsとの違い Power Apps：画面を見ながら、部品と数式を設定 GUIでコントロールを配置し、プロパティを編集する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 22

第3部 / Power Appsとの違い Power Apps：コネクタからデータソースへ接続 画面操作で接続を追加。周辺の調査・データ準備にはAIも活用できる。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 23

第3部 / Power Appsとの違い 何を重視するかで、開発方法を選ぶ Power Appsが有力 SPFxが有力 管理者によるSPFx登録が難しい AIとコードで開発を進めたい 多くのデータ接続を利用したい 自由な画面・操作を作りたい GUIで画面を作りたい 既存のWebライブラリを使いたい SPFxでは、アプリの公開と利用するAPIの承認を開発前に相談する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 24

第3部 / Power Appsとの違い Code Appsも、別の選択肢として検討 コードで開発 管理者の設定 利用者の費用 コーディングエージェント を Power Platform環境で 実行する利用者の 有効化が必要 追加ライセンスも確認 活用できる選択肢 原稿では調査範囲の情報として紹介。利用者数を含めて条件を確認する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 25

第4部 / データと接続 データへの接続は、3つの範囲で考える SharePoint REST Microsoft Graph 外部API リスト・ライブラリ ユーザー・組織・Teams ファイル・フォルダー Outlook・メール 社内システム・外部サービ ス サイト情報 カレンダー 認証やネットワークも 個別に検討 最初はSharePoint内で完結させ、必要に応じて広げる。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 26

第4部 / データと接続 アプリの許可と、利用者の権限が重なる範囲 アプリ側の権限 利用者自身の権限 利用するGraph機能に応じて SharePointにサインインした 必要な権限を宣言し 利用者が持つアクセス権で 管理者へ承認を依頼 データへアクセス 通常のユーザー委任では、片方の権限だけで何でも取得できるわけではない。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 27

第4部 / データと接続 APIは「このデータをください」と頼む窓口 01 まず、現在のサイトのファイル一覧を読む SharePoint RESTで接続し、結果を確認する 02 AIには、APIの調査と接続コードを依頼する 取得対象・要求する権限・見せてよい情報は人が確認する 03 接続先が変われば、管理者への依頼も変わる Graphや外部APIへ広げる前に、必要な条件を整理する ことりちゅん | Microsoft365勉強会 | 2026.09.19 28

第5部 / アプリの導入 アプリカタログへ登録して、SharePointで使う 本番用にまとめる カタログへ登録 ページで使う ビルド・パッケージ化で テナント全体、または 展開設定に応じて .sppkg を作成 サイトコレクションの サイトへ追加し アプリカタログ Webパーツを配置 普通のドキュメントライブラリへ置くこととは役割が異なる。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 29

第5部 / アプリの導入 ① SharePoint管理センターからアプリを開く 「その他の機能」から、アプリの「開く」へ。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 30

第5部 / アプリの導入 ② アプリカタログで .sppkg をアップロード Uploadから登録。操作する担当者に必要な権限があるかを確認する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 31

第5部 / アプリの導入 ③ 内容と展開設定を確認して、有効にする ソリューション名・バージョン・配布範囲などを確認する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 32

第5部 / アプリの導入 ④ Graph権限の要求がある場合 必要な権限と、その利用目的を事前に管理者へ伝える。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 33

第5部 / アプリの導入 ⑤ APIアクセスのページで、要求を確認する 原稿では、要求を1件ずつ承認する操作を紹介している。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 34

第5部 / アプリの導入 公開経路を、開発前に管理者へ相談する 01 登録できるアプリカタログはありますか 検証用サイトの運用や、サイト単位のカタログを確認する 02 確認・登録は、どなたへ依頼しますか 申請方法、テスト、担当部署、更新の流れを確認する 03 この目的で、このAPI権限を使いたいです 利用するデータと必要な権限を具体的に伝える 公開ルールと相談先は、会社によって異なる。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 35

第5部 / アプリの導入 設計 → 実装 → レビューを、AIと進める 01 高性能モデルで設計を相談 課題と目的を伝え、実装設計書・HTML・ER図・シーケンス図を確認 02 実装用のチャットへ設計を渡す 設計に沿った実装、ビルド、デバッグ、修正を依頼する 03 高性能モデルで厳しくレビュー 指摘を確認して修正し、実際の動作で確かめる ことりちゅん | Microsoft365勉強会 | 2026.09.19 36

第6部 / AIとの開発実演 今回は、Web版AIからSPFx作成を試す 01 Web版AIでも、どこまでできるか試す CopilotとChatGPTの事前試行を画面で紹介する 02 完成しない場合は、コーディングエージェントへ Codex、Claude、VS CodeのGitHub Copilotなどへ引き継ぐ 03 全工程の実演ではなく、要所を見る 原稿では初回作成に約40分かかった試行を紹介する 以降は登壇者の試行記録。モデル名・表示・結果は取得当時のもの。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 37

第6部 / AIとの開発実演 依頼文：Markdownを読むSPFx Wikiを作る 1/3 SPFx開発のデモンストレーション用に、シェアポイントでマークダウンファイルを読み込んで プレビュー表示する、簡易的なSPFxアプリを作りたいです。 パラメータにはドキュメントライブラリのパスを指定します。 画面の左2割には、ライブラリ以下のフォルダ・ファイル一覧をツリー表示してください。 画面の右8割には、ユーザーがファイル一覧から選択したマークダウンファイルの内容をレンダ リング表示してください。 内容としては、上から順にファイル名、タグ、目次、本文、関連ページという順番のブロック単 位で表示してください。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 38

第6部 / AIとの開発実演 依頼文：Markdownを読むSPFx Wikiを作る 2/3 目次は、見出しから自動で生成して見出しへジャンプできるようにしてください。 タグは、そのドキュメントに付与された複数選択形式の「タグ」列のタグを横方向にカラフルな バッジで表示してください。 関連ページは、開いている同じタグが付いたライブラリ内のファイル一覧を表示するようにして ください。 右上に編集ボタンと保存ボタンを置いてください。 編集ボタンを押したらコードの編集画面が表示されてコードを編集でき、保存ボタンを押したら 変更内容を保存できるようにしてください。今回は競合検知は不要です。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 39

第6部 / AIとの開発実演 依頼文：Markdownを読むSPFx Wikiを作る 3/3 相対パスの画像は、ライブラリ内の画像をプレビュー表示してください。 相対パスのリンクは、ライブラリ内の他のマークダウンファイルへハイパーリンクで飛べるよう にしてください。 このようなプログラムをビルドして、src.zipとspfx-wiki-demo.sppkgの完成品をダウンロード できる状態でください。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 40

第6部 / AIとの開発実演 Copilot：自動モードでは作成を断られた例 最初に、完成品の .sppkg を依頼。 モードによって応答が 変わった試行を紹介。 事前試行の画面。原稿ではThink Deeperへ切り替えて再試行。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 41

第6部 / AIとの開発実演 同じ依頼を、ChatGPTとCopilotで試す ChatGPTの試行画面 ことりちゅん | Microsoft365勉強会 | 2026.09.19 Copilotの試行画面 42

第6部 / AIとの開発実演 先にHTMLで、UIの完成イメージを確認する まずは完成イメージを確認するために、HTMLファイルでデザインを一つ作ってください。 動作確認用のマークダウンファイルを3ファイル作成してください。 名前はindex.mdとhelp.md とsample.mdとします。indexにはヘルプとサンプルへのリンクだけおいてください。 ヘルプに は本ツールの概要を書いてください。 サンプルには本システムでサポートするマークダウンの 全記法を網羅したサンプルコードを書いてください。 また、イメージ確認用の画像ファイルimage.pngも作成してください。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 43

第6部 / AIとの開発実演 完成イメージとサンプルを渡して、実装を依頼 添付したhtmlがUIの完成イメージです。 そしてmdとpngがサンプルとして組み込んで欲しいデータです。 このようなプログラムをビルドして、src.zipとspfx-wiki-demo.sppkgの完成品をダウンロード できる状態でください。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 44

第6部 / AIとの開発実演 Copilot：コード実行まで進んだ工程 実行環境の確認や コード作成が進行。 エラーと処理結果を 確認しながら進める。 原稿の事前試行を収録。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 45

第6部 / AIとの開発実演 Copilot：エラーと、未完成の結果 タイムアウトが発生した画面 ことりちゅん | Microsoft365勉強会 | 2026.09.19 完成した .sppkg を提供できなかった画面 46

第6部 / AIとの開発実演 ChatGPT：作成が進んだ工程 設計とコード作成、 確認の工程が進行。 生成結果と実環境での 動作は分けて確認する。 事前試行の進行画面を収録。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 47

第6部 / AIとの開発実演 ChatGPT：成果物が返された画面 原稿では約42分で成果物を生成。npm接続不可により独自パッケージ化との説明。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 48

第6部 / AIとの開発実演 ダウンロードした成果物を確認する パッケージがあることと、SharePointで正しく動くことを確認する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 49

第6部 / AIとの開発実演 別の進め方：既存のSPFxプロジェクトへ変換 このHTML画面を、既に用意してあるSPFxプロジェクトのWebパーツへ変換してください。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 50

第6部 / AIとの開発実演 SharePointで、実データを使って確かめる 01 準備済みのWebパーツを開く 現在のサイトのライブラリからファイル一覧を表示する 02 ファイル名をクリックする 対象のファイルが正しく開くか確認する 03 小さな変更を追加依頼する 余白・更新日時・PDFへの絞り込みなどを試す 実演：ここでSharePointの画面へ切り替える。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 51

第6部 / AIとの開発実演 生成されたコードより、まず動作とデータを確認 01 何を読み、何を書き換えるか 利用者が変わった場合、権限や見える情報はどうなるか 02 データ同士の関係と、誤操作の影響 依存関係や、取り返しのつかない変更がないかを確認する 03 テストから本番公開まで確認する ビルド → .sppkg → カタログ登録 → 実ページで検証 AIが実装しても、目的・データ・公開範囲は人が判断する。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 52

第7部 / 制作事例とAI開発 制作事例：月間カレンダーとCopilot Chat 月間カレンダー Copilot Chatアプリ SharePointの予定を月表示 SharePoint上のチャット画面 色・配置・操作・絞り込みを 対話しながら文章を編集 目的に合わせて実装 原稿ではAPIベータ版を活用 実演：月間カレンダーとCopilot Chatアプリの画面へ切り替える。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 53

第7部 / 制作事例とAI開発 画面・調査・データ・修正を、同じ会話で進める 画面を作る 周辺作業を進める 確認して直す 「月間カレンダーにして」 APIと実装方法を調査 実行結果を確かめる 「検索欄を追加して」 リストとテストデータを準 備 エラーを調査・修正 Power Appsでも、データ準備や調査などの周辺作業に活用できる。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 54

第7部 / 制作事例とAI開発 実演 sppkgをアップロード Codexでビルド Codexで修正 自社（個人）のテナントに sppkgをアップロードしてみる Codexにソースコードを取り 込んでビルドする プログラムを修正してアップ ロードする Power Appsでも、データ準備や調査などの周辺作業に活用できる。 ことりちゅん | Microsoft365勉強会 | 2026.09.19 54

第7部 / 制作事例とAI開発 開発速度が10倍以上になったと感じる 10倍以上 登壇者の体感 人の役割 何を作るか どのデータ・権限を使うか 誰に公開するか ことりちゅん | Microsoft365勉強会 | 2026.09.19 55

第8部 / 最初の一歩 会社導入におけるチェックポイント 01 公開・更新できるか、情報システム部門へ相談 登録の頻度、カタログ管理の委任、検証用サイトを確認する 02 まず .sppkg の公開を試す Microsoft公式のアプリでもよいので、追加と動作の流れを体験する 03 AIと小さなWebパーツを作る リストやファイル一覧から、開発・接続・公開まで経験する ことりちゅん | Microsoft365勉強会 | 2026.09.19 56

第8部 / 最初の一歩 早めに知りたかったこと 01 SharePointリスト・ドキュメントライブラリの一覧を収集 AIが開発するために必要なコンテキストを揃える。フィールドの定義表 02 Entraアプリの登録に関する知識 Power Appsでは必要なかったGraphAPIを呼び出す知識が必要 03 ライブラリの種類とバージョン Node.jsのバージョンが揃っていなくてビルドに失敗することが多かった ことりちゅん | Microsoft365勉強会 | 2026.09.19 56

第8部 / 最初の一歩 今日、覚えて帰っていただきたいこと 01 Microsoft 365には、SPFxという開発の選択肢がある コーディングエージェントと組み合わせて、開発を効率化できる 02 管理者の許可と、公開経路を最初に確認する 作る前に、利用するデータと管理者対応を相談する 03 Power AppsとSPFxには、それぞれ向く用途がある 作りたいもの・接続先・許諾の可否に合わせて選ぶ ことりちゅん | Microsoft365勉強会 | 2026.09.19 58

第8部 / 最初の一歩 ご清聴ありがとうございました ご質問をどうぞ SpWikiのソースコードおよびダウンロード先 Releases · KotorinChunChun/SpWiki ことりちゅん | Microsoft365勉強会 | 2026.09.19 59

• https://github.com/KotorinChunChun/SpWiki/releases