Angularコード生成 -App Builderを使用したステップバイステップ ガイド

これは、デザインからコードまでを迅速かつ簡単な方法で実行する方法を示す詳細なガイドです。

したがって、次のことを行いたい場合:

• 自動化デジタル製品設計および開発ツールを使用して、Sketchデザインから新しいAngularアプリを作成します。
• 1 回のクリックで本番環境対応のAngularコードを生成し、手動コーディングを排除します。
• アプリとコードをプレビューし、サンプル アプリを参照して、デザイン システム + Angular + App Builder ™ がどのように連携するかを確認します。
• AngularからBlazorまたはWeb Componentsに切り替えます。

そうすると、このガイドとそこに含まれるすべての手順が、次のプロジェクトを開始するときに非常に役立つことがわかります。

始めましょう。

コード生成とは

通常、コード生成は、ソース コードの中間モデルを、Windows、Mac OS、Linux などのオペレーティング システムを実行するマイクロプロセッサでネイティブに実行できる形式にコンパイルするプロセスとして説明されます。ソース コードを「コンパイル」するプロセスは、基本的に、ある形式 (C# または TypeScript など) から別の形式 (DLL または EXE としての中間言語、または JavaScript など) に変換することです。プロセッサは、実行されているハードウェアの種類に基づいて特定の入力を必要とし、特定の方法で動作するため、コンパイラ メーカーにとって、ネイティブ実行部分が期待されるものはすべて、ターゲット システムで正しく実行されるようにすることが常に課題となります。

Microsoft の .NET Framework の古いバージョンを使用している場合は、ソース コードを中間言語 (IL または Microsoft Intermediate Language の MSIL) にコンパイルします。その後、ランタイム インタープリター (共通言語ランタイム (CLR)) によって「ジャストインタイム」(JIT) コンパイルされ、Windows オペレーティング システムでマシン語のコードがリアルタイムで実行されます。.NET Core や .NET 5 などの .NET Framework の新しいバージョンでは、Microsoft は Linux や MacOS などの他のオペレーティング システムで動作する中間言語コンパイラとランタイムを出荷しています。

記述するソース コードは同じですが、コード生成プロセスによって正しい中間言語が生成され、ターゲット マシン上のランタイムがそれを実行できることを保証するのはコンパイラの責任です。

この図はプロセスを視覚的に示しています。

JIT コンパイルと事前コンパイル

Angularや Xamarin などのフレームワークでは、AoT (Ahead-of-Time コンパイル) の概念が重要です。つまり、コンパイル プロセスから生成されたアプリケーション コードは、実行されるターゲット マシンまたはデバイスでのネイティブ実行用にビルドされます。たとえば、Xamarin.iOS アプリケーションを AoT コンパイルすると、生成されたコンパイル済みコードは iOS ネイティブになります。ネイティブ iOS OS 以外のランタイムがデバイス上でアプリケーションを実行する必要はありません。Xamarin の初期バージョンでは、アプリは AoT コンパイルされませんでした。つまり、実行時にコードを実行するには、デバイスに mono ランタイムを展開する必要がありました。AoT コンパイルされたアプリは起動時のパフォーマンスが向上し、デバイスの仕様によっては実行時実行が高速になる可能性があります。

Angularコード生成とは

この記事の目的上、Angularコード生成は簡単である。Angularコード生成とは、メタデータ（または中間言語）を作成する特定のツールを使用して、1つ以上のAngularコンポーネントおよび/またはAngularアプリケーション全体のソースコードのような、使用可能なコード出力を得るプロセスである。この出力は、開発者がさらに修正するために使用することができ、最終的にJavaScriptやHTMLのようにブラウザで実行される生成フォーマットに「コンパイル」される、クリーンで使用可能なフォーマットである。

これを実現するにはいくつかの方法があります。

1. ​Angular CLI (コマンド ラインインターフェース)と、アプリケーションの全体または一部を生成するAngular Schematics を使用したテンプレートを使用します。Google チームのAngular CLI は、Angularアプリケーションの構造と依存関係を生成する最も速い方法です。Schematics は、コード生成プロセスからコードを追加または変更するための指示とロジックを含む、テンプレート ベースのコード ジェネレーターです。
2. ​Infragistics の CLIを使用すると、Angular CLI よりも一歩先を行くことができます。CLI は、Angular Schematics を使用したテンプレートをベースにしていますが、チャート、Angular Data Gridsなどのユーザー インターフェイス コンポーネントや、アプリケーション シナリオ全体を新規または既存のAngularアプリケーションに追加できます。チームやビジネスのニーズに基づいて独自のカスタム テンプレートを作成し、アプリ開発を加速して数秒でコードを生成することもできます。
3. ​Sketch to Angularプラグインを使用すると、開発者はApp Builderクラウドに保存されているSketchデザイン ファイルを取得し、開発プラグインでAngularアプリをコード生成できます。最も優れている点は、開発者がSketchファイルから生成されるソース コードを完全に制御できることです。アプリのロジック、変更、コードの変更に制限はありません。このようなツールは、Angularアプリの実行に必要なすべての CSS、HTML、TypeScript をコードで生成するため、特に便利です。
4. ​App Builderを使用すると、開発者は Web ベースの WYSIWYG ツールを使用して、Angularアプリケーション全体を設計し、コードを生成できます。App App Builder、チームがクラウドベースの WYSIWYG ドラッグ アンド ドロップで実際のアプリをすばやく設計および構築できるという概念を導入しています。これには、コード、レイアウト、CSS、さらにはデータも含まれます。

この図は、これらのコード生成オプションから期待できる対話とコード出力のレベルを示しています。

より汎用的なAngular CLI から、App Builderを使用した Web 上の強力なドラッグ アンド ドロップ エクスペリエンスまで、Angularコード生成には複数のオプションがあることがわかります。これらのオプションのいずれかを使用して、Angularでのアプリの開発と配信を加速できます。

方法を学んでいただくために、最近、包括的なApp Builder製品概要とチュートリアルを公開しました。以下をクリックしてご覧ください。

コード生成プラットフォームとは

アプリケーションの提供は、ソース コードをコンパイルし、対象のネイティブ プロセッサで実行される何らかの出力を生成するプロセスだけではありません。顧客が解決しようとしている問題に適した、優れたエクスペリエンスを顧客に提供するプロセスがあります。このプロセスの重要な部分は設計です。設計プロセスでは、設計チームが利害関係者または顧客と協力してニーズを理解し、利害関係者が試用できるように、選択したツール (FigmaやSketchなど) でアプリのプロトタイプを作成します。このプロセスは反復的で、利害関係者からフィードバックを取得し、フィードバックと批評に基づいて設計を更新し、利害関係者と再度テストすることが含まれます。この反復プロセスは、成功するソフトウェア プロジェクトの基礎であることが証明されています。この反復的な設計プロセスは、コードが記述される前に行われます。最終的には、顧客が承認した設計が設計チームから開発チームに「引き継がれます」。この時点で、開発チームは独自のツールを使用して、渡された設計を解読し、コードの作成を開始します。

この引き継ぎでは、設計の意図と実際に構築されるものとの間に乖離が生じるリスクがあります。

製品チーム (設計チームと開発チームを含む) がコード生成プラットフォーム (または Gartner の造語であるDigital Product Design Platform)で標準化されている場合、引き継ぎにおけるリスクとエラーは大幅に削減されるか、または排除されます。コード生成プラットフォームには、「コード」部分だけでなく、次のようなソフトウェア配信のすべての側面が含まれている必要があります。

• スクリーンデザイン
• ユーザーフロー
• プロトタイピング
• 共同編集
• UI コンポーネント
• コード生成

つまり、設計チームと開発チームは、コード生成の前にプラットフォームで何ができるかに重点を置きながら、コード生成プラットフォームを評価する必要があります。App App Builder、従来のコード生成プラットフォームの目標を超えた、完全な設計からコードまでのソリューションを備えた世界で唯一のクラウドベースのローコード プラットフォームです。

プロジェクトにコード生成プラットフォームを使用する利点

コード生成とコード生成プラットフォームの長所と短所は、長い間議論されてきました。コード生成の利点に関する議論は、常に生産性と配信のスピードでした。ツールがこの作業をより速く完了するのに役立つなら、なぜ使用しないのでしょうか? コード生成の短所は、「ブラックボックス」の議論です。開発者は実際にどのコードが「生成される」のかまったくわからず、コードを確認したり、変更したり、修正したりすることはできません。そのため、コード生成製品で何か問題が発生した場合、開発者に負担がかかります。この制御の喪失に対する恐怖が、開発チームをコード生成から遠ざける原因です。しかし、今日のより洗練されたツールでは、その議論の多くは消え去ります。

今日、何らかのレベルの成功を望むコード生成プラットフォームまたはツールには、次の要件があります。

• コード生成方法に関して透明性とオープン性を保つ
• 製品の正確性、一貫性、クリーンなコード
• 開発者から何も隠さない

つまり、コード生成の出力は、それを検査する開発者が自分で構築できるものである必要があります。おそらく、さらに良くなり、間違いなくはるかに高速になります。これが、チームがコード生成を含むデジタル製品設計プラットフォームを採用する理由の核心です。

• 意図的に設計された高品質のアプリ出力製品
• チームのコミュニケーション、効率、成果を向上させる
• 採用率の向上により市場投入までの時間を大幅に短縮

今日の最新ツールでは、たとえ最新のコード生成の利点のためであっても、チームが少なくともデジタル製品設計プラットフォームを検討し、実験することは当然の選択です。

ステップバイステップ: SketchデザインからのAngularコード生成

今日のペースの速いアジャイル開発環境では、承認された UX デザインから使用可能で実行可能なコードへの移行が、これまで以上に迅速に行われる必要があります。開発者は、UX デザインを数日、場合によっては数時間で実行可能なアプリにするという、ほぼ不可能なタスクを課せられています。デザイナーは、アジャイル UX プロセスのニーズに合わない従来のツールを使用した反復的な設計プロセス中に、ユーザーからのフィードバックを得るよう求められています。ここで、App Builderなどのプラットフォームが役立ちます。

App Builderを使用してピクセルパーフェクトで編集可能なコードを取得するための 2 つのオプションについて説明します。

1. Sketchプラグイン
2. App Builder Sketchインポーター

オプション1 –Sketchプラグイン

ステップ1: UIキットをインストールする

すべてはスケッチから始まります。UIキットのUIコントロールとコンポジットUIパターンを使って、Sketch。Sketch UIキットはこちらからダウンロードできます。

ステップ2: App BuilderクラウドでSketchデザインをアップロードまたは同期する

デザイナーがSketchデザインを完成したら、統合された Sync Sketchプラグインを使用してアップロードできます。クラウドに移行すると、デザイン チームはユーザー テスト、ユーザーとのコラボレーション、インタラクティブなプロトタイプの作成など、ローコード ツールの機能を活用できます。

ステップ3: SketchプラグインでAngularコードを生成する

開発者はここからSketchプラグインをダウンロードできます。このプラグインは、Sketchで作成したデザインやアプリをApp Builderに公開するのに役立ちます。次の手順に従ってダウンロードすることもできます。

1. App Builderを開く
2. 「新規アプリケーションを作成」をクリックします
3. 「アセットを取得」をクリックします。

これでプラグインの使用を開始できます。

希望どおりに設定が完了したら、コードを生成します。「アプリを作成」ボタンをクリックすると、プロセスが開始されます。

この 3 つの簡単なステップで、デザインからコードへ、SketchからAngularへ進むことができます。デザインやSketchがない場合は、次の HR ダッシュボード アプリのサンプルをお試しください。

https://www.infragistics.com/resources/sample-applications/hr-dashboard

オプション 2 –App Builder Sketchインポーター

オプション 1 が簡単だと思ったなら、オプション 2 もきっと気に入っていただけるでしょう。ドラッグ アンド ドロップでApp Builderを使用してデザインからコードまでを行う 4 つの簡単な手順をご紹介します。

ステップ1: 新しいアプリをクリック

ステップ2: Sketchファイルを「既存のデザインから作成」ドロップエリアにドラッグします。

ステップ3: クラウドIDEでデザインを確認する

ステップ4: Angularコードを確認またはダウンロードする

IDE の右上にあるボタンを使用して、アプリを生成するか、アプリをプレビューしてコードを確認するかを選択できます。

Figmaを使用していてコード生成ソリューションを探しているなら、App Builderも役立ちます。FigmaプラグインFigmaデザインファイルから、Angular、Blazor、Webコンポーネントですぐに使えるコードを簡単に生成できます。基本的に、Figmaからコードへのプロセスとは、Figmaで作成されたデザインやプロトタイプを、実際の使用可能なコードを備えた実用的なアプリケーションに簡単に変換することです。当社のローコードソリューションを使用すると、これは非常に簡単で直感的な方法で行われ、手動でコードを記述する必要はありません。役立つすべての手順を説明する専用のブログ投稿があります。FigmaをHTMLコードに変換する可能な限り迅速に。

デザイナーや開発者は、Web ベースの WYSIWYG ツールを使用して、Sketchからコードを作成できます。チームは、クラウドベースの WYSIWYG ドラッグ アンド ドロップで、Web レイアウト、CSS、さらにはデータまで含めたコードを取得して、実際のアプリをすばやく設計および構築できます。

まとめ

コード生成は、ソース コードをネイティブ マシン言語にコンパイルするだけではありません。コード生成にはさまざまな側面があり、その作業を行うためのツールも多数あります。この記事では、コード生成とは何か、なぜ必要なのか、Angularアプリにどのように適用できるのかについての背景を説明し、より優れたソフトウェアをより速く構築するのに役立つツールをいくつか紹介しました。

楽しいコーディングを！