20250920ビリビリ

React + Power Platform CLIで作る！はじめてのコードアプリ開発

自己紹介 dai 365 • 平成７年就職 • 以降、非ＩＴ業務に長年従事 • 現在は、とある団体でデジタル推進に従事 • X：@dai_keiba_73 • https://biribiri.connpass.com/ • 趣味：登山、競馬、お酒、プロレス、パソコン（ネット）、最近は推しが生成AI • 性格：手書きや手入力が極端に嫌い⇒昭和の業務は大嫌い！！ • 2024年11月 Microsoft MVPに • 長らく無資格でしたが、生成AIパスポートを取得 • お盆に尿管結石で入院・手術、石を破砕し、今は健康

• https://biribiri.connpass.com/

今日お話しすること 今日のテーマ 「Code Apps でアプリを作る」 「CodexCLI でコードを直す」 ゴール 新しい「アプリ開発の新しい流れ」をつかむ ＊個人の見解が多く含まれますので、ご自身での検証をお願いします。

Microsoft Build 2025 ローコードから“エージェントプラットフォーム”へ MicrosoftはBuild 2025で「AIエージェント時代」を宣言 Copilot Studioでノーコード/ローコードでエージェント構築 マルチエージェント・オーケストレーションで複雑業務を自動化 Azure AI Foundryと統合し、1,900以上のモデルを活用可能 アプリ開発は「UI操作」から「自然言語＋エージェント指示」へ

なぜCode Appsが必要か？ ローコードの限界 複雑なUIや高度なロジックはPower Appsだけでは難しい。 開発者のスキル活用 ReactやTypeScriptなど、既存のWeb開発スキルをそのまま使いたい。 エンタープライズ対応 Power Platformの認証・ガバナンスを活かしつつ、自由度の高い開発を実現。 一言で言うと「ローコードの簡単さ × コードの自由度を両立するため」

Power Apps Code Appsの概要と機能 機能カテゴリ 説明 VS CodeなどIDEでのWebアプリ開発 普段使っている開発環境（VS Code等）で利用可能。 Power Appsの機能を統合し、アプリを実行できる。 Microsoft Entra認証・認可の標準サポート エンタープライズレベルのセキュリティを標準搭載。 管理やアクセス制御をシンプルに実現。 1,500以上のPower Platformコネクタ連携 Teams、SharePoint、Azure、などと接続可能。 JavaScriptから直接API呼び出しができる。 Power Platform上での発行・ホスティング 組織の管理ポリシーに準拠したデプロイが可能。DLP （データ損失防止）ポリシーや条件付きアクセスもサ ポート。

Power Apps Code Apps の利用前提条件・必要環境 区分 内容 利用前提条件・ライセンス要件 - Power Apps Premium ライセンスが必須 - 組織の管理者による有効化・権限付与が必要な場合あり - プレビュー特有の制限があり、本番利用は非推奨 - 利用前にテナント管理者へ確認 必要なツール・環境 - Visual Studio Code：推奨IDE・開発環境 - Node.js：LTS最新版を推奨 - Git：バージョン管理システム - Power Apps CLI（pac）：コマンドラインツール 補足 - VS Code拡張機能「Power Platform Tools」を導入すると、 CLIも簡単に利用可能 Code Apps はプレビュー。エンドユーザー実行には Premium が必要（2025/09/20時点）

管理センターから 設定⇨製品⇨機能

手順 手順 ステップ 1. プロジェクト作成 コマンド例 説明 npm create vite@latest myapp -- --template react-ts ViteでReact/TypeScriptプロジェクト cd myapp を作成 npm install 2. ポート設定変更 vite.config.ts を編集 Power SDKはポート3000を使用 現行手順では“既定構成で 3000 が必 須”（Vite 設定）。 3. 型定義の追加 npm i --save-dev @types/node 4. Power Platform認証 初心者向けTips - フォルダ名は英数字推奨（例： CodeAppDemo） - --template react-tsでTypeScript対 応に。 つまずきポイント - Node.jsのLTS版が必要（古いと失 敗） - server.port = 3000 に変更 - ポート競合で起動しない場合あり - vite.config.tsの構文ミスに注意 Node.jsの型定義を追加 - TypeScriptでの補完が効くようにな る - --save-dev を忘れると本番環境に混 入する可能性 pac auth create pac env select --environment <URL> CLIでPower Platformと接続 - VS Code拡張「Power Platform Tools」でも認証可能 - 認証にMicrosoftアカウントが必要 5. Code Apps初期化 pac code init --displayName "My Code App" Power Platform連携の初期化 - displayNameはアプリ名として表示 される - すでに初期化済みだとエラーになる 6. SDK導入 npm install --save-dev "@microsoft/powerapps" Power Platform SDKを導入 - --save-devで開発環境に限定 - package.jsonの dev スクリプトを vite && pac code run に変更 - スクリプト変更を忘れると連携できな い 7. PowerProvider追加 src/PowerProvider.tsx を作成 Power SDKとアプリを接続 - GitHubからテンプレートコードを取 得可能 - main.tsx に <PowerProvider> を挿 入し忘れると動作しない 8. 開発サーバー起動 npm run dev ローカルでアプリを起動 - http://localhost:3000 にアクセス - Power Platform連携も同時確認 - ブラウザはPower Platformと同じプ ロファイルで開く必要あり 9. デプロイ pac code push Power Platformに発行 - distフォルダがビルドされる - DLPポリシーに準拠して発行 - 権限不足で発行できない場合あり - プレビュー機能のため本番利用は注意

• https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/create-an-app-from-scratch

ここまでやるとこれが出来上がります 環境にデプロイすることが出来ます、さて、ここからどうする？

CodexCLIとは？ OpenAI が提供する AIコーディングアシスタント ターミナルで日本語の指示を入力 → コード修正や生成を自動で提案 アプリ開発中の「直したい」「分からない」をすぐ解決できる Code Appsで作ったアプリを効率的に改善するサポーター

CodexCLI セットアップと使い方まとめ ステップ 内容 コマンド例 1. ChatGPT契約 有料プラン（Plus / Pro / Team）が必須。 OpenAI公式サイトで契約。 — 2. インストール CodexCLIを導入（npm または Homebrew）。 npm install -g @openai/codex brew install codex 3. 認証 ChatGPTアカウントでCLIを認証。ブラウザが 開いてログイン。 codex login 4. 実行（例） 日本語でコード修正・追加を依頼。 codex exec "src/App.tsx のボタ ンにローディング表示を追加"

CodexCLIコマンド一覧 コマンド 何ができるか（目的） 典型的な使いどころ /model 使用するモデルと推論レベルを切り替える 重めのリファクタ／長時間タスクは高推論、軽 作業は標準で /approvals Codex に与える自動実行の権限範囲を切替 Full Accessは慎重に 実験前は Read Only、作業ディレクトリ内の 自動編集は Auto、広範操作は Full Access /new 会話中に新しいチャットを開始 方針を切り替えたい／別テーマを並行したいと き /init AGENTS.md を作成し、プロジェクト固有のルールや役割を定義 「このリポジトリではこう振る舞って」など行 動方針を固定 /compact 会話を要約してコンテキスト消費を削減 長時間セッションで「履歴が重くなった」時に /diff 現在のgit 差分を一覧表示（未追跡含む） 提案変更の確認、レビュー前のチェック /mention 特定のファイルを会話に引用して文脈共有 「このファイルを前提に修正して」等の指示 /status 現在のセッション設定・トークン使用量等を表示 モデル／承認モード／作業ディレクトリの確認

さて何をやった？ Codex CLIからこんな雑なお願いだけ、全然普通に動きます(笑)

さらに、IDE拡張も使いやすいぞ こんなの画像なしで自然言語のみで作れると思えません

まとめ 今日の学び やってみることでしか見えない景色がある 技術よりもマインドセットが大事（挑戦する勇気と続ける力） Code AppsとAIは“挑戦する人”の味方 こんな時代が来るとは数年前に想像もしていなかった。 次のアクション Code Appsで簡単なアプリを作ってみる。