---
title: 奇想天外ビリビリ☆Copilot同好会PowerAppsアプリ開発の全貌
tags: 
author: [dai365](https://convert.docswell.com/user/dai_keiba_73)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V7PPG3D378.jpg?width=480
description: 本スライドでは、Power Apps の全体像を示し、ノーコード（App Builder Agent）では自然言語だけで SharePoint ベースのアプリを自動生成し、ローコード（Power Apps Studio）ではドラッグ&amp;ドロップと Power Fx で UI を自由にデザインします。Vibeコード（Gen Pages/Vibe）では自然言語から React コンポーネントを生成し、Dataverse と連携させてコードを直接編集可能です。プロコード（Code Apps）は VS Code 上で React・TypeScript・Fluent UI を用いたフルコーディングを行い、エンタープライズ向けの高度なカスタマイズが可能です。また、4 つの AI エージェントが要件定義・データ設計・コード生成・ソリューション設計を支援し、開発者のスキルや目的に合わせた最適なアプローチ選択を提案しています。
published: January 08, 26
canonical: https://convert.docswell.com/s/dai_keiba_73/5WM29X-2026-01-08-210108
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V7PPG3D378.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/2JV2641NJQ.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/5EGRN125JL.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JQVQDPL7P.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/K74MNZY5J1.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LJ185R62EG.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GJWZ51W2J2.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EZ1NP5473.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/Y76L8M9GJV.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/G7519ZNXE4.jpg)

実演


# Page. 11

![Page Image](https://bcdn.docswell.com/page/9J212R5Q7R.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/DEYZYDKY7M.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/VJN3P6RRJ8.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/YE993LMZE3.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GE89MX1Y7D.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/LELW38Q9JR.jpg)



