【2025年】App Builderを体系的に学ぶための学習ロードマップのご紹介 - インフラジスティックス・ジャパン株式会社Blog

こんにちは、Infragistics ソリューションコンサルタントの田上です。

本記事では、App Builder をこれから導入しようとしているエンジニアの方を対象に、「どこから学び始め、どの順番で理解を深めていけばよいのか」を体系的に整理した学習ロードマップをご紹介します。

App Builder は、UI デザインからロジック構築、API 連携、コード自動生成までを一気通貫でカバーできるローコード開発ツールです。その反面、機能が非常に幅広いため、

どのドキュメントを最初に読むべきか分からない
デザインとロジック、コード生成の関係がつかみにくい
点の知識はあるが、全体像として理解できていない

と感じる方も少なくありません。

そこで本記事では、App Builder 学習に必要な公式ドキュメント・動画・ブログを整理し、「全体像 → 個別トピック」へと段階的に学べる構成でまとめました。

これから App Builder を本格導入したい方、PoC から本番利用へ進みたい方は、ぜひご活用ください。

本記事のゴールと読み方
Step 1：公式ヘルプドキュメントで全体像を掴む
- 公式ヘルプドキュメント（日本語）
Step 2：UI設計の要となる Flex レイアウトを理解する
- Flex レイアウトを理解する
- 3つのレイアウトとページング
Step 3：ロジック構築を体系的に理解する
- ロジックの構築方法を理解する
Step 4：コード自動生成の仕組みを理解する
- コード自動生成を理解する
- 4つのフレームワークの特性を理解する
Step 5：生成コードをローカルでビルドする
Step 6：GitHub と連携してイテレーション開発を実現する
Step 7：App Builder AI を理解して活用する
- AIと対話しながら、チャットボットアプリのUIデザインを自動生成する
- AI 機能
Step 8：その他の情報収集方法について
- App Builder 公式 YouTube 動画コンテンツ（日本語化）
- ナレッジ検索を使いこなす
Step 9：読み物
- 経営者・マネージャー向け
- 開発者向け
まとめ
- 無料トライアルのご案内
- 無料相談会のご案内

本記事のゴールと読み方

本記事のゴールは次の3点です。

App Builder の機能全体像を把握する
導入初期に重要となる学習ポイントの優先順位を理解する
詳細学習に進むための公式ドキュメント・ブログ情報に迷わず辿り着けるようになる

まずは全体をざっと読み、「今の自分のフェーズではここを重点的に学べばよい」という位置づけを掴んでから、リンク先で詳細を学ぶのがおすすめです。

Step 1：公式ヘルプドキュメントで全体像を掴む

公式ヘルプドキュメント（日本語）

体系的に学習する場合、最初に読むべき情報源は日本語の公式ヘルプドキュメントです。ここでは、App Builder の基本概念、画面構成、主要機能が網羅的に解説されています。「App Builder とは何ができるツールなのか」「どこまでローコードで、どこからコードを書くのか」といった全体像の理解を、この段階で固めましょう。

Step 2：UI設計の要となる Flex レイアウトを理解する

App Builder 学習において、最初の壁になりやすいのがレイアウト設計です。特に Figma 等のデザイナーツールに慣れている方ほど、

UI 部品を配置しても思った通りに並べることができない
画面サイズを変えるとレイアウトが崩れてしまう

といった悩みに直面しがちです。その近道となるのが、Flex レイアウトの理解です。App Builder のレイアウトは CSS Flexbox をベースに設計されています。ここを理解すると、UI 設計の再現性とスピードが一気に向上します。

Flex レイアウトを理解する

3つのレイアウトとページング

また、下記3つのレイアウトに対して、ページング機能がアップデートされました。

Column Layout (列レイアウト：UI部品を縦に並べることができる)
Row Layout (行レイアウト：UI部品を横に並べることができる)
Absolute Layout (絶対レイアウト：UI部品を好きなピクセル位置に自由に並べることができる)

ついに登場！App Builderの新機能「ページング」で大規模データも快適に表示！

Column Layout 上に Card, Rating, Check, Button などを配置したサンプル

Step 3：ロジック構築を体系的に理解する

UI を配置できるようになったら、次はロジック構築です。App Builder では、次の要素を組み合わせてアプリの振る舞いを定義します。このパートを理解することで、「デザイン画面」が「動くアプリケーション」へとレベルアップします。

ロジックの構築方法を理解する

Step 4：コード自動生成の仕組みを理解する

App Builder の大きな特長が、BtoBレベルの実運用可能なプロダクションコードを自動生成できる点です。React / Angular / Blazor / Web Components それぞれの構成に沿ったコードを自動生成することができます。フォルダ一式が整理された状態でコード自動生成されるため、ジュニアデベロッパーでもスムーズにコードを理解することができます。

コード自動生成を理解する

また、ご希望のフレームワークの特性を理解しましょう。既存システムとの親和性や、チームのスキル状況など様々な観点からベストなフレームワークを選択していくことがポイントです。

4つのフレームワークの特性を理解する

React コードの自動生成（ブログ情報）

Angular コードの自動生成（ブログ情報）

Blazor コードの自動生成（ブログ情報）

Web Components コードの自動生成（ブログ情報）

Step 5：生成コードをローカルでビルドする

App Builder からコード自動生成した ZIPファイルは、ローカル環境でそのままビルド実行することができます。また、Step 7でも解説しますが、App Builder は GitHub と連携した運用を推奨しております。

デザイン To コードの流れを理解する

ビルド実行時のトークン設定を確認する

ビルド手順書のダウンロード（トークン設定）

Infragistics のプライベートフィードへアクセスする場合は、「トークン設定」を行う必要があります。各フレームワーク同様の手順で実行可能なため、ビルド手順書をダウンロードしてお確かめください。

App Builder で自動採番される「クラス名の変更テクニック」を理解する

App Builderでコード生成したクラス名を自由に変更！CSS設計をもっと快適に

App Builder でコード生成した際は「クラス名が自動採番」されたコードが出力されます。プロジェクト現場において、クラス名を自動採番ではなく、任意名称に定めたいというご要望は多くあり、App Builder の「アウトライン機能」を使ってクラス名を自由に変更し、CSS設計や可読性を大きく改善する実践的な方法を解説しています。

Step 6：GitHub と連携してイテレーション開発を実現する

App Builder の特性として、コード自動生成後にカスタマイズを加えたコードを、再び App Builder へ再インポートすることはできない仕様になっていますが、GitHub のブランチ運用（main / dev / feature）を活用すれば、デザイン変更や二次開発でも継続的なイテレーション開発が可能になります。