こんにちは、Infragistics ソリューションコンサルタントの田上です。
本記事では、Webアプリ開発に不慣れな方や、ローコード開発ツールを初めて触る方に向けて、Infragisticsの「App Builder」の基本操作を体験できるハンズオン講座・入門編をご紹介します。
「ローコードで業務画面を作成し、外部APIとつないで、Reactなどの本格的なコードを出力」する。そんな一連の流れを、ご紹介します。
次のような課題を感じている方には特におすすめです。
- まずはUI設計からコード自動生成までの全体プロセスを体験したい
- デザインの知識がなくても、業務レベルのWebアプリUIを構築したい
- React/Blazor/Angular/WebComponentsでの画面開発を、できるだけ短時間で仕上げたい
- グリッド等のUI部品とAPIと接続してデータ連携するプロトタイプをすばやく作りたい
このような課題をお持ちではないでしょうか？
App Builder は、クラウド上で動作するローコード開発ツールで、直感的なUIと強力なコード生成機能を両立。 React / Angular / Blazor / WebComponents に対応した高品質なコードを生成できるため、プロトタイピングだけでなく、本番開発にも活用できます。
本記事では、API連携付きのデータGrid画面を題材に、App Builderの基本操作を10ステップで体験できる構成となっています。 ぜひ最後までご覧ください！
ハンズオン講座 入門編の目的
- App Builder の基本操作に慣れる
- 簡単なWebアプリのプロトタイプを作る
- 外部APIと連携したデータ表示を実現する
- コードを出力してローカルでビルド・動作確認する
初心者の方でも一通りの操作ができるよう、ステップ・バイ・ステップで進めていきます。
App Builder とは？
App Builder は、Infragistics が提供するクラウドベースのローコード開発ツールです。直感的な UI デザイン機能に加え、Angular / React / Blazor / Web Components のコードを自動生成できる強力なエンジンを備えています。ローコードで画面を作り、ボタンひとつで本格的なソースコードが得られるのが最大の魅力です。
ハンズオン実施内容（全10ステップ）
1. App Builderで新規アプリケーションを作成
まずはApp Builderの管理画面にログインし、「新しいアプリ」から新しいプロジェクトを開始します。
2. ページテンプレートを選ぶ（ヘッダー＋ナビゲーション）
App Builder では、よくある業務アプリ向けに便利なレイアウトテンプレートが用意されています。今回は「Header + Navigation + Content」を選択し、ナビゲーション付きの画面をベースに構築を始めます。
3. ページ本体にGridコンポーネントをドラッグ＆ドロップ
レイアウトエリアの中央に「Grid」コンポーネントをドラッグ＆ドロップで配置します。表形式でデータを表示するUIを、ローコードで実現できるのがポイントです。
4. Gridに外部APIを連携（GET）
App Builder にはサンプルAPIが用意されており、ここではNorthwindのエンドポイントを利用します。Grid にデータをバインドし、表示項目（列）を自動生成。エンジニアリングなしでデータ連携が完了します。
5. Gridの機能を強化（タグ追加）
Gridの機能強化も非常に簡単です。プロパティパネルからチェックを入れるだけで、以下の機能を有効化できます。（コーディング不要）
- ソート（Sort）
- フィルタ（Filter）
- エクスポート（CSV/Excel 出力）
- ページネーション（Pager）
これだけで、業務アプリに必要な高機能Gridが完成します。
6. ホットプレビューで動作確認
App Builder には「ホットプレビュー」機能があり、現在のデザイン状態をブラウザで即時プレビューできます。API 連携結果も即時に反映されるため、「ちゃんと動く！」という実感が得られます。
7. フレームワークを選択（React / Angular / Blazor / Web Components）
アプリの完成後、出力したいフレームワークを選択します。今回は React を例にしますが、Angular や Blazor（Server / WASM）、Web Componentsも同様に対応しています。選択するだけで、各フレームワークの構成に沿ったコードが生成されます。
「Zip のダウンロード」ボタンをクリックするだけで、プロジェクト一式を含むZIPファイルをダウンロード可能です。GitHubへのプッシュや、Azure DevOpsへの公開も可能です。 ファイル構成は非常に整理されており、エンジニアが見ても読みやすいコードです。
8. ソースコードをローカルでビルド
ZIPを解凍し、VSCodeやお好きなIDEで開きましょう。Reactを選んだ場合は、以下のコマンドでビルドできます。
npm install npm start
これで、App Builderで作成したアプリがローカルで起動します！
ブラウザで「http://localhost:3000/」 にアクセスすると、実際にAPIと連携したWebアプリが動作している様子を確認できます。
ソート、フィルタ、ページングなどの機能も、すべて想定通りに動きました。これだけのアプリがローコードで作れたことに、参加者の多くが驚きと感動を覚えていました。
App BuilderはエンジニアにやさしいWeb開発ツール
今回のハンズオンを通じて、App Builderの以下の点が評価されました。
- UIの直感的な操作性
- API連携の簡便さ
- 本格的なコード生成（React/Blazor対応）
- 出力コードの可読性と保守性
特に、エンジニアの複雑なデザイン＋コーディング業務を短時間で構築できる点は、社内DX推進に大きな可能性を感じさせます。
まとめ
業務アプリのUI設計から外部APIとの連携、React/Blazor/Angular/Web Components などの本格的なコード出力まで、App Builder を使えば、これまで数日かかっていた作業が数十分で完了します。
しかもコーディング不要で直感的にUIデザインを操作できるため、開発初心者でもすぐにプロトタイプを完成させることが可能です。
- 「誰でも簡単に複雑なUIをデザインしたい」
- 「UI部品のデザインだけでなく、APIとも連動したアプリケーションを作りたい」
- 「React/Blazor/Angular/Web Components などのコードを自動生成で作りたい」
そんな悩みをお持ちの方にとって、App Builder は頼れる開発パートナーになるはずです。 まだ試したことのない方は、ぜひ今日から触ってみてください。 Webアプリ開発の生産性が驚くほど変わります。
App Builder の操作感を体験したい方は、App Builder 無料トライアルにアクセスして、最新バージョンをぜひお試しください。
- 「自社での活用イメージがわかない…」
- 「もっと具体的な導入ステップを知りたい」
といったお悩みには、ソリューションコンサルタントが直接お答えします。ぜひ japansalesgroup@infragistics.com まで、お気軽にお問合せください。ご意見ご要望を心よりお待ちしています。
無料トライアルのご案内
こちらからトライアルへご参加できます。
無料相談会のご案内
専門コンサルタントが直接ご質問にお答えし、貴社に最適な移行戦略をご提案します。
