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

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

この強力な機能により、Sketchまたは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.デザインのインポート–Indigo.Design UI kit for Sketchを使用して作成された既存のデザインファイルがある場合は、これをアプリの出発点として使用できます。さらに良い方法は、デザイン、UIキット、サンプルデザインファイルを公開するためのプラグインを含むIndigo.Design システムを入手し、準備ができたら、Figma / Sketchプラグインを使用してデザインをApp Builderに公開することです。ただし、これについては以下のセクションで詳しく説明しています。

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

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

ステップ1: Figmaプラグインのダウンロードとインストール—Download Assetsページから、またはFigma UIキット、Figma用プラグイン、およびサンプルアプリの直接リンクから

ステップ2: App Builderでのアプリケーションの作成

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

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

SketchからReactコードへの移行

Sketchを本番環境に対応したコードに変換する手順は次のとおりです。

ステップ1: App Builderメインメニューから[新しいアプリ]をクリックします

ステップ2: Sketchファイルを「既存のデザインから作成」にドラッグし、デザインのインポートを選択します。

ステップ3: SketchからApp Builderのクラウド IDE アプリで設計を確認する
ステップ4: Reactコードを確認またはダウンロードする

ただし、これは手順の簡単な要約にすぎません。詳細なガイドについては、最初のSketchからコードへのヘルプページを参照してください。

また、次のビデオで実際の手順を確認することもできます。

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コードを瞬時に生成するには、サンプル アプリから始めることができます。事前に構築されたアプリケーションを探索して変更するには、事前定義されたアプリレイアウトまたは空白のテンプレートを使用するか、Indigo.Design Figma / Sketchプラグインを使用してSketch用のUIキットから既存のデザインファイルをインポートしてシームレスに統合します。App Builderでは、Reactコードとアプリケーション モデルをリアルタイムで更新できるため、生成されたコードを必要に応じて表示、ダウンロード、変更し、GitHub に直接公開できます。このプラットフォームは、スムーズなオンボーディングプロセスと効率的なアプリ開発を保証し、すべてのサンプルアプリをReactに完全にエクスポートできます。