Reactコード生成: ステップ バイ ステップ ガイド

​最新のApp Builderリリースでは、ローコード アプリ開発に多くのエキサイティングな改善が導入されましたが、その中で最も期待されている新機能はReactコード生成です。最終的に、必要なすべてのデータとインタラクションを使用して、App Builderプロジェクトから直接ワンクリックで高品質のReactコードを生成でき、オーバーヘッドはありません。

この強力な機能により、​Figmaのアイデアや完成したデザインから、基本的なReactから HTML へのコンバーターや同様のプラットフォームが通常生成する保守が困難なスパゲッティ コードとは関係のないコードにシームレスに移行できます。

新しいReact to HTML 機能は、開発サイクルと市場投入までの時間を大幅に効率化しますか?そうですよ。これにより、Reactのコンポーネントベースのアーキテクチャの可能性を最大限に活用し、アプリケーションの効率性、保守性、および容易な拡張を確保できます。

したがって、 あなたとあなたのチームが十分なリソース(時間、スキル、プログラマー)を持っていない場合でも、この新機能は生産性を最大化し、手動のコーディングエラーを最小限に抑え、プロジェクト間の一貫性を促進しながら、厳密な時間枠内で高品質のReactアプリを提供することを可能にします。 

App BuilderでReactコードを生成する方法の詳細については、ここをクリックして専用セクションに進んでください。

ここでは、Reactコード例とReactをHTMLに変換する手順を見る前に、他に何を読むかを示します。

エラーが発生しやすいコードの終焉? Reactコード生成の理解

Reactコード生成は、コード行を手動で記述することなく、Reactプロジェクトの定型コードを自動的に作成するプロセスです。反復的なコードの作成を自動化することで、独自の機能とビジネス ロジックの実装に集中でき、アプリの開発サイクルを大幅に短縮できます。

App BuilderのReact to-code 機能により、生成されたコードは編集可能で再利用でき、量産対応です。これにより、簡単に変更できるため、特定のプロジェクト要件をより迅速に満たすことができます。JavaScript または HTML にコンパイルされたコードは、すべての Web ブラウザーでシームレスに実行されます。

Reactコード生成プラットフォームの利点は何ですか?

App Builderを包括的なReactからHTMLへのコンバーターとして使用すると、さまざまな利点があります。最も重要なものの中には、生産性の向上があります。技術負債の削減、市場投入までの時間を短縮し、リアルタイムのフィードバックを提供します。それは驚くことではありません「世界のローコードアプリケーション開発プラットフォームの市場規模は、2023年に248億3000万米ドルと推定され、2024年から2030年にかけて年平均成長率(CAGR)22.5%で成長すると予測されています。」Grand View Researchが示しているように、ローコード・アプリケーション開発プラットフォームの市場規模、シェア、トレンド分析レポート.

しかし、他にも大きなメリットがあります。

• 設計者と開発者の引き継ぎや時間のかかるPOCなしで、設計からコードまでのストーリー全体を簡素化することで、設計と機能の迅速な反復と改良が可能になります。
• ビジュアルインターフェイスと事前構築済みのコンポーネントを提供し、画面デザイン、UXフロー、テーマとブランディング、データバインディング、デプロイ、GitHub統合などの分野で、手動のエラーが発生しやすいコーディングの必要性を減らします。このようにして、さまざまな専門知識レベルの開発者がアプリケーションを簡単に構築できます。
• アプリと並行して即時Reactコード生成とコード プレビューを並行して提供することで、ビルドされた内容をピクセル単位で完全に表現し、変更を即座にプレビューし、機能をテストし、関係者からリアルタイムでフィードバックを収集できます。
• あなたとあなたのチームがゼロからコードを書く必要がないため、時間とリソースを節約できます。さらに、あるフレームワーク用に生成されたコードは、フレームワークに依存しないため、クリックするだけで別のフレームワークに再利用できます。詳細については、Design-To-Code Solution Explainedをご覧ください。
• 生成されたコードはベストプラクティスに従って標準化を促進するため、プロジェクト全体で一貫性を維持します。
• 時間の経過に伴うアプリケーションの成長に対応できるスケーラブルなアーキテクチャと、コードの品質やアプリのロジックを損なうことなく新しい機能を追加したり、既存の機能を拡張したりする能力。このようにして、アプリは新しい要件や変更とともに進化できます。
• コードで生成されたアプリに対して、プラットフォーム内のアプリ要件に一致するように変更とカスタマイズを適用する機能。
• 開発者から経営幹部まで、関係者全員にとって実績のある単一のソリューションです。

ステップバイステップガイド: App BuilderでHTMLにReact

​App Builderプラットフォームを通じて新しいReactアプリを作成するには、3つの方法があります。

1.サンプルアプリ–はじめにアプリは、App Builderを使用して作成されたアプリケーションを探索し、それらを自分のユーザースペースで変更できるようにするのに役立ちます。これらは、アプリを最初から作成しなくても、大規模なアプリケーションの生成されたReactコードをプレビューするための優れたソースです。

App Builderを初めて使用する場合は、開始点としてサンプル アプリ オプションを使用することをお勧めします。これは、ツールの優れた機能にオンボードし、プロジェクトの構築を開始するための最も簡単な方法です。

2. アプリのレイアウト–新しいアプリをゼロから開始し、事前定義されたレイアウトを利用できます。ここから、空白のテンプレートに基づいてアプリを作成するオプションもあります。

3. デザインのインポート– このオプションを使用すると、マテリアル用のFigma Indigo.Design UI キットを使用でき、これは以下の手順で示すものです。

FigmaからReactコードを生成する方法

Figma Indigo.Design UI Kit for Material は、Ignite UI for React UI ツールセットにマッピングされ、Reactコード生成プロセスを合理化します。このようにして、すべての静的デザイン ファイルを、実際の UI コンポーネント、ブランド、スタイルを備えたインタラクティブでレスポンシブなアプリに簡単に変換できます。

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

ステップ1: Figmaプラグインのダウンロードとインストール – これは、[アセットのダウンロード] ページから、またはFigma UI Kit、  Plugin for Figma、および Sample Appsの直接リンクから行うことができます。

ステップ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プラグインヘルプページをご覧ください。このページでは、設計からコードまでのプロセス全体をご案内しています。 

ReactコンポーネントをHTMLに変換する方法

App Builderでは、ライブ実行の Web アプリケーションがデザイン サーフェイスと、Reactコードが配置されているプレビュー ウィンドウの両方に常に表示されます。基になるReactコードとアプリケーション モデルは、デザイン サーフェイスでアプリケーションに変更を加えると、リアルタイムで更新されます。

生成されたアプリケーションコードはプレビューウィンドウでいつでも表示でき、生成されたアプリケーションを完全なアプリケーションコードリポジトリとしていつでもダウンロードし、選択したコードエディタで開いたり、GitHubに直接公開したりできます。App Builderを使用して設計したアプリケーションをコンピューター上でローカルにビルドして実行し、生成されたReactコードに追加の変更を加えることができます。

例Reactアプリ

App Builderルックアンドフィールで構築されたアプリの例をいくつか見てみましょう。それらのすべては100%にエクスポート可能であることに注意してくださいReact。

在庫管理

このアプリは、在庫レベルの管理と在庫のある製品のレビューに使用されます。これを構築するために、ルーティングとカテゴリチャートのカスタムサイドナビゲーションを有効にして、パフォーマンスを報告しました。その他のコンポーネントには、アバター、ボタン、カード、チェックボックス、データグリッド、ドロップダウン、アイコン、入力グループ、リスト、選択などがあります。

ゲスト アクセスを使用して、コードをプレビューしたり、アプリのすべての機能を体験したりできます。

顧客関係管理(CRM)

今回は、アコーディオン、アバター、ボタン、アイコンボタン、チェックボックス、ダイアログウィンドウ、ドロップダウン、拡張パネル、データグリッド、アイコン、入力グループ、リスト、ナビゲーションバー、ナビゲーションドロワー、セレクト、タブレイアウトなどのコンポーネントとともに、複数のタブを備えた概要ダッシュボードと顧客の詳細を使用しました。

ゲスト アクセスを使用して、コードをプレビューしたり、アプリのすべての機能を体験したりできます。

HRダッシュボード

Reactアプリの別の例は、このHRダッシュボードです。Ignite UI ツールセットと、アバター、カテゴリ チャート、アイコン ボタン、アイコン、リスト、カード、データ グリッドなどのコンポーネントを使用して、高性能で視覚的に魅力的なものにしました。

ゲスト アクセスを使用して、コードをプレビューしたり、アプリのすべての機能を体験したりできます。

まとめ…

新しいReactアプリを作成し、App Builderを使用してインスタントReactコード生成の恩恵を受けるには、サンプルアプリから始めることができます。事前構築済みのアプリケーションを探索および変更するには、事前定義されたアプリレイアウトまたは空のテンプレートを使用するか、Figma UIキットを使用して既存のデザインファイルをインポートしてシームレスな統合を実現します。App Builderを使用すると、Reactコードとアプリケーション モデルをリアルタイムで更新できるため、必要に応じて生成されたコードを表示、ダウンロード、変更し、GitHub に直接公開できます。このプラットフォームは、スムーズなオンボーディング プロセスと効率的なアプリ開発を保証し、すべてのサンプル アプリを完全にReactにエクスポートできます。