Project IDXをフル活用！社内ハンズオンを効率化した実践例

2024.12.17に開催された NTTグループのGoogle Cloudコミュニティ「GINGER #12 」にて登壇

Transcript

1. Project IDXをフル活 用 ！ 社内ハンズオンを効率化した実践例 UpdatedAt 2024.12.17 NTTドコモ 経営企画部 事業開発室 docomo STARTUP 鶴岡 秀樹
2. 2 ツルオカ •NTTドコモ新卒 入 社の8年 目 、事業開発室所属 •Flutter/Dartを活 用 し、商 用 C向けサービスの内製開発を経験 •技術部隊「hands」にて開発・ 支 援・育成に従事 •Zenn執筆、OSS、イベント登壇・運営 など •Perfume が好き @h_tsuruo
3. 3 docomo STARTUP ドコモグループ社員のアイデアを事業化する新規事業創出プログラム これまでに 500以上のアイデアが提出
4. 4 hands 新規事業のプロジェクト成功・グロースをテクノロジーを通じて実現する hands 事業進化を捉えた 事業の創造 事業検証の 高 速化 発信による 求 心力 強化 内製開発の技術専 門 部隊 技術検証 開発 支 援 情報発信
5. 5 Personal Activities Zennでの技術記事の発信 pub.devパッケージの公開 テックイベント登壇・運営 Firebase Extensionsの公開
6. 6 Today ’ s Talk NTTドコモの社員14名を対象とした初学者向けアプリ研修を開催し、 Flutterアプリ開発のテーマと共にProject IDX（以下、IDX）を活 用 しました。 「環境構築が不要」などIDXのケイパビリティを活かしたユースケースとして 非 常に効果的だったため、 参加者の反響や私が感じたメリット・デメリットをご紹介します。
7. 7 参考 約1年前にZenn記事でも紹介しました
8. 8 Contents 01. Project IDXの紹介 02. 社内ハンズオンの実例紹介 03. まとめ
9. 01. Project IDXの紹介
10. 10 “Project IDX is an AI-assisted workspace for full-stack, multiplatform app development in the cloud.”
11. What is Project IDX ? • Googleが何年もかけてマルチプラットフォームアプリ開発のワークフローをより”速く”・”快適”へと追い求め続けた 一 つの形 - Angular（Ionic Framework）、Flutter、Google Cloud、Firebase etc… • ローカル実 行 環境のセットアップは不要で、ブラウザベースでの開発体験を提供（2024年12 月 現在はベータ版） 2023年8 月 にExperimentで公開されたGoogle製のクラウド統合環境 11 IDXでFlutterテンプレートからプロジェクトを起動した画 面 例
12. 他クラウド統合環境との 比 較 • 他にもAWS Cloud9など様々なサービスがあるが、今回は主要サービスにフォーカスするため割愛 Webブラウザで開発できる 高 速なIDEは多数あるが、特にIDXはFlutter優遇 12 Project IDX GitHub Codespaces StackBlitz 提供 Google GitHub StackBlitz 特徴 FlutterやFirebaseなどGoogle製品との連携が特 徴。 GitHubリポジトリと直接連携し、設定済みの環 境を素早く構築可能。 WebContainersのブラウザ技術を活 用 し Node.jsベースの軽量環境が特徴。 環境 自 動でセットアップされたクラウド開発環境が提 供され、FirebaseやGoogle Cloudとの深い統合 が可能 devcontainer.jsonを使 用 して、環境をカスタマ イズ可能 完全にブラウザ内で実 行 される環境（クラウド依 存ではなくローカル同等のスピードを提供） 対応 言 語 Flutter, Angular, React, Next.js, Vue.jsなど、 幅広い 言 語とフレームワークに対応 任意の 言 語/フレームワークをサポート可能 （Docker fi leやdevcontainerを使 用 ） JavaScript, TypeScript, Angular, React, Svelte, Vue.jsなどフロントエンドに特化 プラット フォーム モバイルアプリ・Webアプリ （Flutterに最適化されている印象） 任意の環境 （Docker fi leなどで 自 由に定義可能） Webアプリ （ブラウザ内で動作するアプリに特化） 価格 現時点ではベータ版のため無料（今後未定） 無料枠あり（GitHubプランによる課 金 ：無料、 Pro、Team、Enterpriseで異なる） 無料で基本機能が利 用 可能。有料プランでプロ フェッショナル向けの機能追加 AI Gemini GitHub Copilot Bolt.new
13. アーキテクチャ • IDX ワークスペースは Google Cloud 上（正確にはCloud Workstations）で動作 • Debian-based VM が付属しているためターミナルへのフルアクセスができ、お気に 入 りツールのインストールも可能 裏側はGoogle Cloud等が活 用 、ビッグテックならではの総合格闘技 13 IDX公式ブログのHigh-level architecture図より引 用
14. 14 Key Features IDXの特徴をカンタンにご紹介 ① ブラウザでどこからでも数10秒で開発を開始 ② フレームワークなど多数のテンプレートが 用 意 ③ クロスプラットフォームでのプレビュー確認 ④ GeminiによるAIアシスタント ⑤ Code OSSによる使い慣れたエディタ ほかにも多数…
15. Get to Work Quickly, from Anywhere • ブラウザベースのため、外出先のタブレット端末からもコーディングやデプロイ作業が可能 • ワークスペースの作成から環境構築まで 自 動でセットアップ ① ブラウザでどこからでも数10秒で開発を開始 15 新規ワークスペースの 立 ち上げ は 比 較的早いが、ある程度時間 が経過した既存ワークスペース では数分かかることも。 ※この点はローカルエディタと 比 べるとややストレス 1.プロジェクト名の 入力 のみ 2. ワークスペース起動の様 子
16. Project creation with built-in templates • AngularやFlutterなどのGoogle製はもちろん、Next.jsやRust、Python（Django, Flask）など多数が 用 意 ② フレームワークなど多数のテンプレートが 用 意 16
17. Preview your app across platforms • Android Emulatorが標準搭載のため、エミュレータインストール不要でスマホアプリ開発がお 手 軽にできるのが魅 力 的 • 当初はiOS Simulatorの提供もあったが、動作不安定などの理由により現在は利 用 停 止 中（ ③ クロスプラットフォームでのプレビュー確認 17 Lighthouseも標準搭載 Android Emulator Web Preview
18. Gemini in IDX • Chat assistance, Code completion, Inline assistance など他エディタと同等のAIコード 支 援が即時利 用 可 • `.aiexclude`でコードベースの特定ファイルをGemini in IDXの対象から隠すことも可 ④ GeminiによるAIアシスタント 18 Slash commandsも多数 用 意 コード変換の提案 GeminiとのチャットをAPIキー 用 意や追加費 用 なしで即時利 用 可
19. A familiar environment • VS CodeやCursorと同様にCode OSSをForkしているので、すでにこれらに使い慣れている 方 は学習コストがほぼゼロ • Open VSX Registry に公開されている機能拡張に対応しているため、VS Code Extensionとほぼ互換がありインストール可能 ⑤ Code OSSによる使い慣れたエディタ 19 左: Project IDX、右: VS Code
20. 02. 社内ハンズオンの実例紹介
21. 投影のみ 投影のみ 社内ハンズオンの概要 • 2023年に第 一 回を開催し 大 好評だったため今年も継続して実施 • 対象となった事業部は映像サービスの「Lemino」や「dポイントクラブ」などd系サービスを扱う開発部 門 ドコモの事業部社員14名を対象に、2週間のFlutterアプリ開発研修を開催 21 handsが講師・メンターを担当し育成担当を企画、14名の社員が参加 最終 日 には各 人 10分でのアプリ開発の成果発表
22. 月 火 水 木 金 1週 目 オリエン チュートリアル Flutter/Dart 例題の開発 Flutter/Dart 例題の開発 Flutter/Dart 例題の開発 Flutter/Dart 例題の開発 2週 目 メンター伴 走 での プロダクト開発 メンター伴 走 での プロダクト開発 メンター伴 走 での プロダクト開発 メンター伴 走 での プロダクト開発 成果発表会 クロージング 社内ハンズオンの詳細 • 1週 目 （ベーシック）: 経済産業省が提供する地域経済分析システム「RESAS」APIを活 用 したアプリを共通題材週 目 は実施 • 2週 目 （チャレンジ）: 1週 目 で学んだ内容を踏まえて各 人 が作りたいアプリ（テーマフリー）をメンター伴 走 にて開発 前半は題材アプリを 足 並み揃えて開発、後半はメンター伴 走 の 自 主開発 22 チャレンジ ベーシック ベーシック チャレンジ チャレンジ チャレンジ ベーシック オフライン オフライン開催 ベーシック
23. 受講者の開発経験 • 日 頃からゴリゴリプログラミングをやっている 人 ではなく、学 生 時代や趣味程度で触ったことがある程度の 人 が多め • アプリ開発以外にも、Gitの概念や操作へ慣れていない受講者も 比 較的多め プログラミング未経験〜2年程度のビギナーが85%を占める受講者傾向 23 Q. Flutter/Dartの経験や知識について教えてください。 ※参加者事前アンケートより 全く知らない 3 人 名前は聞いたことがある 9 人 知っているが利 用 1 人 利 用 1 人 “Python/1年弱（学 生 時代）" “JavaScript/1年” “JS/1年 　 C 言 語/1年” “C 言 語/1年、Python/3~5年、 JavaScript/3~5年、VBA/1年” “特になし” Q. プログラミング経験を教えてください。
24. 昨年開催の反省 • メモリ8GBでマシンスペックが 足 りずにエミュレータ起動に苦戦したケース（環境構築が2回必要になった受講者も…） • 会社貸与PCでは権限やセキュリティ設定により意図しない制限がついており操作ができないことも 前回は環境構築やマシンスペック問題が原因で躓く受講者が多数 24 ↑研修中のSlack質問の抜粋 ↑研修後アンケートのフィードバック
25. IDX導 入 による解決 • EditorやSDK，Android エミュレータなどアプリ開発に必要な環境がすべて整っている点が研修に最適 • 特にリモート開催の場合は受講者マシン起因の問題を解消するのは困難なため、環境を揃えられる点も優れていた 初学者が躓きやすい環境構築をスキップし受講者間の環境差異も解消 25 VS Code, Android Studio, Xcode, Git, Emulator etc… IDX
26. IDX活 用 により得られたメリット • 本来モバイルアプリ開発には以下の表のソフトウェアインストールが必要になるがほぼ全てスキップできる 前回開催と 比 べ、受講者側の準備がほぼゼロになりトラブル回避 26 項 目 前回（2023年度） 今回（2024年度） マシン要件 • Macの場合: macOS 10.14 (Mojave) 以上 / 2.8GB • Windowsの場合: Windows 10以上 (64bit), x86-64ベース / 1.64GB Chromeブラウザが動かせること （容量やスペックは問わない） スマートフォン準備 AndroidまたはiOSのスマートフォン（最新OS推奨） 不要 Flutter/Dart SDK 必要 不要 Android Studio （Emulator） 必要 不要 Xcode （Simulator） 必要 不要 VS Code 必要 不要 Git 必要 不要 研修参加にあたり受講者側で対応が要求されるリスト
27. GitHub連携が容易 • パーソナルアクセストークンやレポジトリ作成などの作業は 一 切せずに、GUIで認証コードを 入力 するだけでGitHub連携完了 Git操作・GitHub連携もすべてGUIで完結 27 PAT発 行 や設定は 一 切不要: 認証コードが発 行 されるので ブラウザでAuthorizeするだけ でGitHub連携が完了 Git Graph拡張も使えばGUIで全て完結
28. Geminiで疑問点解消 • プログラミング初学者や、研修など短期間での慣れない 言 語での開発においてGenAIによるサポートは 大 きい • 活 用 しなかったと回答した 人 の中には「研修なのでAIに頼らずに 自力 で開発・理解したかったから」との理由も 約7割の参加者がGeminiを有効活 用 、初学者でも使いやすいインタフェース 28 Q. 生 成AI（Gemini）の活 用 について教えてください。 ※研修後アンケートより 活 用 1 人 あまり活 用 3 人 まあまあ活 用 3 人 かなり活 用 7 人 主な回答理由
29. 03. まとめ
30. まとめ 30 ブラウザベースでの環境構築により稼働減・効率化を実現 ‣ 複数 人 の受講者で環境を揃えたい場合など、研修 用 途としてIDXは最適なユースケース ‣ エミュレータ搭載でストレージ容量を 心 配することなくある程度のPCスペックで開発可能 ‣ 躓きやすい環境構築の 手 間をなくし、VS Code拡張なども使うことで気軽にアプリ開発を体験 Gemini標準搭載により無料でお 手 軽にAIネイティブ開発を体験 ‣ Chat assistance, Code completion, Inline assistance など他エディタと同等のAIコード 支 援が即時利 用 ‣ GitHub CopiotやCusorでは有料または無料でも制限が設けられているがIDXは気にかける必要がない ‣ 非 エンジニアでもこのご時世「 生 成AIでの開発」は経験しておくべきなので、同僚や上司に布教するのにも使える
31. 今後の改善に期待したい点 • Android エミュレータが重くてもっさりしている - スクロール体験とかかなりラグがあるので、Webプレビューでごまかし開発した場 面 も多い • VS CodeやCursorでショートカットカスタマイズしている 人 は 面 倒（ブラウザショートカット問題） - IDX に限らずクラウド開発環境の宿命だが、ブラウザショートカットと衝突して使いづらい部分はあり - ショートカット衝突問題はWebCatalogである程度解消できる部分もある • 拡張がプロジェクトごとに管理されるので、毎回プロジェクト作成時にインストールする必要があり 面 倒 - プロジェクト単位では`.idx/dev.nix`で拡張や依存関係の指定ができるものの • 作成できるプロジェクトは上限5つまで • Geminiの品質がちょっと微妙 - 普段VS CodeやCursorで開発しているエンジニアから 見 ると物 足 りなさ感じるはず - 無料で使えるので仕 方 ないと思いつつ、他のモデルと 比 べるとどうしても - Gemini 2.0に変わっているかは不明（チャットで聞いてもLatest versionです、の返答のみ） ユースケースに合わせて推奨したいが、開発常 用 化には物 足 りない点も 31
32. 32 みなさんもIDX使ってみませんか。
33. Appendix
34. IDX Community Forum 34 • コミュニティサイトがあるので、ドキュメント以外のことも気軽に聞けたり調べられる https://community.idx.dev/