奇想天外ビリビリ☆Copilot同好会PowerAppsアプリ開発の全貌

405 Views

January 08, 26

スライド概要

本スライドでは、Power Apps の全体像を示し、ノーコード（App Builder Agent）では自然言語だけで SharePoint ベースのアプリを自動生成し、ローコード（Power Apps Studio）ではドラッグ&ドロップと Power Fx で UI を自由にデザインします。Vibeコード（Gen Pages/Vibe）では自然言語から React コンポーネントを生成し、Dataverse と連携させてコードを直接編集可能です。プロコード（Code Apps）は VS Code 上で React・TypeScript・Fluent UI を用いたフルコーディングを行い、エンタープライズ向けの高度なカスタマイズが可能です。また、4 つの AI エージェントが要件定義・データ設計・コード生成・ソリューション設計を支援し、開発者のスキルや目的に合わせた最適なアプローチ選択を提案しています。

profile-image
スライド一覧

酒と業務効率化をこよなく愛するオヤジ、武器はMicrosoft365一択だったけどノーコードもステキ！PowerPlatformで業務効率化が究極に進んだ世の中が理想。半ランク上(笑)のPowerAppsオジサンを目指します。好きなものは競馬、プロレス。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

slide-thumbnail

20241221AI-Builder使ってあれこれやってみた
user-img dai365 7.5K
slide-thumbnail

20250419気ままに勉強会LT
user-img dai365 3.7K
slide-thumbnail

2024年1月に_ 日本のどこかで稼働したアプリよもやま話_
user-img dai365 2.2K
slide-thumbnail

AI Builderで帳票自動読取をやってみた
user-img dai365 1.2K
slide-thumbnail

日本のどこかの紙だらけの職場にAIを
user-img dai365 1.1K
slide-thumbnail

20240827AI-Builder使ってあれこれやってみた
user-img dai365 1.1K
各ページのテキスト
1.

Power Apps アプリ開発の全貌 ノーコードからプロコードまで、4つの開発アプローチを解説 2026・1・7 奇想天外ビリビリ☆Copilot同好会

2.

dai365 https://powerdaaps.hatenablog.com/ 略歴 平成7年就職→非IT従事／現在はデジタル推進 得意 Power Apps / 生成AI https://biribiri.connpass.com/ 好き 登山・競馬・お酒・プロレス・PC SNS X: @dai_keiba_73 Power Apps Code Apps Agri DX

3.

本日、お話する内容ですが 個人的見解を多く含むことをご了承ください

4.

4つの開発アプローチ 01 02 03 04 ノーコード ローコード Vibeコード プロコード App Builder Agent Power Apps Studio Gen Pages / Vibe Code Apps (VS Code) 自然言語でアプリを生成 ドラッグ&ドロップ開発 AI × コード生成 フルコーディング 開発者スキル →

5.

ノーコード M365 Copilot App Builder Agent 自然言語の指示だけでSharePointベースのアプリを自動生成 自然言語入力 自動生成 テキストで要件を伝えるだけ SharePointリストとアプリを即座に作成 反復的改善 モバイル対応 会話でアプリを改善・拡張 レスポンシブUIを自動生成

6.

ローコード Power Apps Studio ドラッグ&ドロップとPower Fxによる本格的なアプリ開発 キャンバスアプリ モデル駆動型アプリ ピクセル単位でUIを自由にデザイン。モバイルファ ーストの開発に最適。 Dataverseのデータモデルから自動生成。業務アプ リに最適。

7.

ローコード キャンバスアプリ ビジネスアプリケーションだけじゃなくゲームも作れる！

8.

Vibeコード Gen Pages (モデル駆動型アプリ) 自然言語からReactページを生成し、モデル駆動型アプリに統合 Reactコンポーネント生成 AIがモダンなUIコンポーネントを自動生成 Dataverse統合 既存のデータモデルと自動連携 カスタマイズ可能 生成されたコードを直接編集可能

9.

Vibeコード vibe.powerapps.com 4つのAIエージェントによるアプリ開発 要件 Agent データ Agent コード Agent ソリューション Agent アプリ全体の設計・構成 データベース設計 UIコンポーネント生成 ビジネスロジック実装

10.

実演

11.

プロコード Power Apps Code Apps VS Codeでフルコントロールのアプリ開発 React TypeScript Fluent UI 特徴: フル機能のReact開発環境 / Power Platform統合 / エンタープライズ対応 VS Code

12.

プロコード プロじゃなくても作れてしまう面白さ VS Codeでフルコントロールのアプリ開発 React Video Hub TypeScript 綱取物語シュミレータ ローカルの動画ファイルをYoutube風に再生 往年の名機綱取物語を再現 Fluent UI VS Code プロレス史シュミレーション プロレス史のIFを実現

13.

参考: geekfujiwara/CodeAppsDevelopmentStandard（MIT License） ※本スライドは上記を参考に要約・再構成。原典同様、保証なし／自己責任。

14.

プロコード どうやって作ってる？ VS Code でフルコントロールのアプリ開発 Claude Code Codex 対話・相談型（思考のパートナー） タスク駆動・実行型（実行のエキスパート） 設計・理解・レビュー 実装・改修・自動化 •既存コードの理解・説明 •まとまった単位での実装・改修 •設計相談（責務分離・状態管理） •機械的な一括変更（リネーム/置換） •リファクタリング手順設計 •修正→ビルド→テストの一貫実行 •コードレビュー・改善点洗い出し •仕様から差分作成まで自動化 「迷っている・理解したい・設計を固めたい」時 「やることが決まっている・差分を作りたい」時

15.

最適なアプローチの選択：4つの開発手法の比較 項目 ノーコード (App Builder) ローコード (Studio) Vibeコード (Gen Pages/Vibe) プロコード (Code Apps) 対象ユーザー インフォメーション ワーカー メーカー メーカー & 開発者 プロの開発者 主要ツール M365 Copilot Power Apps Studio vibe.powerapps.com Visual Studio Code 操作方法 自然言語 ドラッグ&ドロップ Power Fx 自然言語 + コード編集 フルコーディング (React) 主なデータソース SharePoint 全コネクタ (Dataverse推奨) Dataverse 全コネクタ 代表的な用途 個人・チームの 生産性向上 部門・業務特化 アプリ モダンUIの追加 フルスタックアプリ 高度にカスタム されたアプリ 柔軟性・制御 低 (エージェント経由) 高 非常に高い (コードアクセス可) 最大 (完全な制御)

16.