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

Angularコード生成をより速く、より簡単に処理する方法を知りたいですか?この詳細なガイドでは、設計からコードまでこれまでにない 80% の速さで進める方法を示します。

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

• Figma UI キットを使用して、Figmaデザインから新しいAngularアプリを作成します。
• 1 回のクリックで本番環境対応のAngularコードを生成し、手動コーディングを排除します。
• アプリとコードをプレビューし、サンプルアプリを見て、デザインシステム + Angular + App Builderがどのように連携するかを確認します。
• AngularからReact、Web Components、またはBlazorに切り替えます。

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

コード生成とは

コード生成は、ソース コードの中間モデルが、Windows、Mac OS、Linux などのオペレーティング システムを実行するマイクロプロセッサによってネイティブに実行できる形式にコンパイルされるプロセスとして説明されます。ソースコードを「コンパイル」するプロセスは、基本的に、ある形式 (C# や TypeScript など) から別の形式 (DLL や EXE などの中間言語、JavaScript など) にすることです。

プロセッサは特定の入力を必要とし、実行されているハードウェアの種類に基づいて特定の方法で動作するため、コンパイラ作成者は、ネイティブ実行部分がターゲットシステム上で正しく実行されることを保証するという課題に常に直面しています。

古いバージョンの .NET Framework を使用している場合:

• ソース コードは、中間言語 (IL または MSIL — Microsoft Intermediate Language) にコンパイルされます。
• この IL コードは、共通言語ランタイム (CLR) によってコンパイルされる "ジャストインタイム" (JIT) です。
• CLR は、JIT コンパイルされたコードを Windows オペレーティング システム上で機械語でリアルタイムで実行します。

新しいバージョンの .NET (.NET Core や .NET 5 など) の場合:

• Microsoft は、複数のオペレーティング システムで動作する中間言語コンパイラとランタイムを提供しています。
• これらには、Windows に加えて、Linux と macOS が含まれます。

あなたが書くソースコードは同じです。コード生成プロセスが正しい中間言語を生成し、ターゲット・マシン上のランタイムがそれを実行できることを確認するのは、コンパイラの責任です。

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

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

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

Angularコード生成とは

Angularコード生成は、メタデータ (または中間言語) を作成する特定のツールを使用して、1 つ以上のAngularコンポーネントやAngularアプリケーション全体のソースコードなど、使用可能なコード出力を取得するプロセスです。この出力はクリーンで使用可能な形式であり、開発者はさらに変更するために使用でき、最終的には JavaScript や HTML などのブラウザーで実行される生成された形式に「コンパイル」されます。

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

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

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

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

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

ステップバイステップ: Figma設計からのAngularコード生成

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

FigmaからReactコードを生成するには? 

マテリアル用Figma Indigo.Design UI キットは、Ignite UI for React UI ツールセットにマッピングされ、Reactコード生成プロセスを効率化します。これにより、すべての静的デザイン ファイルを、実際の UI コンポーネント、ブランディング、スタイルを備えたインタラクティブでレスポンシブなアプリに簡単に変換できます。しかし、どうやって始めればいいのでしょうか?

このキットは、プランに関係なく、すべてのFigmaユーザーが使用できることに注意してください。ただし、無料ユーザーには Pro ユーザーと比較して制限があり、無料アカウント ユーザーは、アセット パネルからライブラリのコンポーネントを直接使用することはできません。したがって、必要なすべてのコンポーネントを UI キット ファイルからコピーし、プロジェクト ファイルに貼り付ける必要があります。

ステップ1: Figmaプラグインのダウンロードとインストール – アセットのダウンロードページから、またはFigma UI Kit、 Plugin for Figmaの直接リンクから行うことができます。そして サンプルアプリ 

ステップ2: Figmaコミュニティから UI キットの複製を作成します。

​Figmaコミュニティに移動し、Indigo.Design UI Kit for Materialを検索します。ファイルを複製すると ( [Figmaで開く] を選択して)、下書きフォルダーに表示されます。

ステップ3:ファイルをチームスペースに移動する

次に、ファイル名のすぐ横にあるシェブロン矢印を使用して、ファイルを「下書き」からチームスペースに移動します。

ファイル名のすぐ下に、ファイルを移動したチームのプロジェクト名が表示されます (例: "テスト中)。 

ステップ4:ライブラリの公開とそのアセットの使用

ファイルが移動されたら、[アセット] パネルに移動します。ライブラリ アイコンをクリックすると、このファイルをライブラリとして公開できるようになり、すべてのスタイル、タイポグラフィ、コンポーネントがチームの他のメンバーに配布されます。アクティベーションは、アセット > ライブラリ アイコン> 公開 ボタンから行われます。

次に、UI Kit ライブラリのコンポーネントを使用するFigmaデザインファイルを開きます。「アセット」パネルに移動し、「ライブラリ」アイコンをクリックし、「チーム」に移動し、目的のライブラリを選択して「ファイルに追加」をクリックして、コンポーネントの使用を開始します。

ステップ5: App Builderでのアプリの作成

ステップ6:テーマと色の選択 – 10 色のバリエーションを備えた 5 つのパレットが利用可能
ステップ7:アセットの取り扱いとApp Builderへの送信(画像またはイラスト)

手順の詳細な概要については、専用のFigmaプラグインヘルプページをご覧ください。このページでは、設計からコードまでのプロセス全体をご案内しています。

また、ビデオガイドのコード化Figma App Builderを見て、そのすべてが実際に動作しているのを見ることができます。

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

アプリケーションの配信は、ソース コードをコンパイルし、ターゲット ネイティブ プロセッサで実行される出力を生成するプロセスだけではありません。顧客が解決しようとしている問題に対処する美しい体験を提供するプロセスがあります。このプロセスの重要な部分はデザインです。デザインプロセスでは、デザインチームは利害関係者や顧客と協力してニーズを理解し、利害関係者が試して使用できるように、選択したツール(Figmaなど)でアプリのプロトタイプを作成します。

このプロセスは反復的です。これには、利害関係者からフィードバックを取得し、フィードバックと批評に基づいて設計を更新し、利害関係者と再度テストすることが含まれます。この反復的なプロセスは、ソフトウェア プロジェクトを成功させるための基礎であることが証明されています。この反復的な設計プロセスは、コードが記述される前に行われます。最終的には、設計チームから顧客が承認した設計の開発チームへの「引き継ぎ」が行われます。この時点で、開発チームは独自のツールを使用して、渡されたデザインを解読し、コードの作成を開始します。

この引き継ぎでは、設計意図と構築されるものから切り離されるリスクがあります。

製品チーム (設計チームと開発チームを含む) がコード生成プラットフォームで標準化すると、引き継ぎのリスクとエラーが大幅に軽減または排除されます。コード生成プラットフォームには、「コード」部分以上のものを含める必要があります。次のようなソフトウェアの提供に関するすべての側面を含める必要があります。

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

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

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

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

今日、あらゆるレベルの成功を望むコード生成プラットフォーム (またはローコード ツール) は、次のことを行う必要があります。

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

つまり、コード生成出力は、それを検査する開発者が自分で構築するものである必要があります。もしかしたらもっと良いかもしれませんし、確かにはるかに速いかもしれません。これが、チームがコード生成を含むローコードプラットフォームを採用する理由の核心に迫っています。

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

今日の最新のツールでは、最新のコード生成の恩恵のためにも、少なくともローコードプラットフォームを検討して実験することは、チームにとって当然の選択です。

まとめ

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

コードへのFigmaに関しては、このプロセスは、Figmaで作成された設計またはプロトタイプを、実際の使用可能なコードを含む実用的なアプリケーションに変換することを指します。当社のローコードソリューションを使用すると、これは手動でコードを記述することなく、非常に簡単で直感的な方法で行われます。Figmaを可能な限り迅速な方法でHTMLコードに変換するのに役立つすべての手順を説明する専用のブログ投稿があります。

このように、開発者はローコードツールを使用してFigmaからコードに移行できます。チームは、クラウドベースのWYSIWYGドラッグアンドドロップ環境で実際のアプリを設計および構築し、Webレイアウト、CSS、データを備えた本番環境に対応したコードを生成できます。

楽しいコーディングを！