React コード生成：ステップバイステップガイド
低コードの App Builder は、React コード生成機能をもたらし、アプリケーション開発を改善しています。このステップバイステップガイドでその方法をご覧ください。
Zdravko Kolev 2min read 最新の App Builder リリースは、低コードアプリケーション開発のための多くの素晴らしい改善をもたらしましたが、その中でも最も期待されていた新機能は React コード生成 です。App Builder プロジェクトからワンクリックで高品質な React コードを生成し、必要なすべてのデータやインタラクションを含めながら、余分なオーバーヘッドなしで実現することができるようになりました。
この強力な機能により、Figma からコードへの [Figma に含まれた設計から、完成した設計へと、アイデアからシームレスに移行することができます。これは、基本的な React から HTML への変換ツールや同様のプラットフォームが通常生成するような、保守が困難なスパゲッティコードとは全く異なります。
新しい React から HTML への機能は、開発サイクルと市場投入の時間を大幅に合理化しますか。確かにそうです。これにより、React のコンポーネントベースのアーキテクチャの完全なポテンシャルを活用でき、アプリケーションが効率的、保守可能、スケーラブルであることを保証します。
したがって、 たとえあなたとあなたのチームに十分なリソース（時間、スキル、プログラマー）がなくても、 **この新機能は生産性を最大化し、**手作業でのコーディング エラーを最小化し、プロジェクト全体の一貫性を促進しながら、厳密な期間内に高品質な React アプリケーションを配信することができます。
App Builder で React コードを生成するための詳細な手順については、ここをクリックして専用セクションをスキップしてください。
React コード例とシームレスな変換手順を確認する前に、ここで読むべき内容は次のとおりです。
エラープローンコードの終わり？React コード生成を理解する
React コード生成は、手動でコード行を記述することなく、React プロジェクト用のボイラープレート コードを自動的に作成するプロセスです。反復的なコードの作成を自動化することで、ユニークな機能とビジネスロジックの実装に集中でき、アプリケーション開発サイクルを大幅に加速することができます。
App Builder の React からコード機能を使用すると、生成されたコードは編集可能で再利用可能、本番環境用です。これにより、簡単な変更ができるため、特定のプロジェクト要件により早く対応できます。JavaScript または HTML にコンパイルされると、コードはすべてのウェブブラウザ全体でシームレスに実行されます。
React コード生成プラットフォームのメリットは何ですか？
App Builder を包括的な React から HTML へのコンバーターとして使用すると、異なる利点が得られます。最も重要な利点の中には、生産性の向上、技術負債の削減、市場投入時間の短縮、リアルタイム フィードバックがあります。Grand View Research が彼らの 低コードアプリケーション開発プラットフォーム市場規模、シェア、トレンド分析レポート で示しているように、“グローバルな低コードアプリケーション開発プラットフォーム市場規模は 2023 年に USD 24.83 億と推定され、2024 年から 2030 年にかけて複合年間成長率（CAGR）22.5% で成長するものと予想されています” のは驚くことではありません。
しかし、他の重大な利点があります：
- デザインからコードへの全体的なストーリーを簡素化し、デザイナー開発者のハンドオフと時間がかかる POC をなくし、設計と機能の迅速な反復と改善を実現します。
- ビジュアルインターフェースと事前に構築されたコンポーネントを提供し、スクリーンデザイン、UX フロー、テーマとブランディング、データバインディング、展開、GitHub 統合 などの領域での手作業でのエラープローンなコーディングの必要性を減らします。このように、異なる専門知識レベルの開発者は簡単にアプリケーションを構築できます。
- インスタント React コード生成とコード プレビューをアプリと並行して提供し、ピクセルパーフェクトな表現を取得し、変更をリアルタイムでプレビューし、機能をテストし、利害関係者からリアルタイムでフィードバックを収集できます。
- あなたとあなたのチームがゼロからコードを記述する必要がないため、時間とリソースを節約します。また、1 つのフレームワークで生成されたコードは、フレームワーク不知論的であるため、クリックで別のフレームワークに転用できます。詳細は デザイン・トゥ・コード ソリューション説明 で読むことができます。
- 生成されたコードがベストプラクティスに従い、標準化を促進するため、プロジェクト全体の一貫性を維持します。
- スケーラブルなアーキテクチャは、時間の経過とともにアプリケーションの成長に対応できる能力を備え、コード品質またはアプリロジックを損なうことなく新しい機能を追加し、既存の機能を拡張できます。このように、アプリは新しい要件と変更に合わせて進化できます。
- プラットフォーム上でのコード生成されたアプリケーションに変更とカスタマイズを適用できる機能は、アプリケーション要件に一致します。
- 開発者から C レベルの経営層まで、関わるすべての人にとって実証済みの単一ソリューション。
ステップバイステップガイド：App Builder での React から HTML へ
App Builder プラットフォームを通じて新しい React アプリを作成する方法は 3 つあります。
1. サンプルアプリ – 初心者用アプリは、App Builder を使用して作成されたアプリケーションを探索するのに役立ち、あなた自身のユーザースペースで変更することができます。これらはアプリケーション全体の生成された React コードをプレビューする良いソースであり、ゼロからアプリを作成する必要はありません。
初めて App Builder を使用する場合、出発点としてサンプルアプリオプションを使用することをお勧めします。これはツールの素晴らしい機能を自分のものにする最も迅速な方法であり、プロジェクトの構築を始めることができます。
2. アプリレイアウト – 新しいアプリをゼロから開始し、事前に定義されたレイアウトの利点を得てください。ここから空白テンプレートに基づいてアプリケーションを作成するオプションも見つけることができます。
3. デザインをインポート – このオプションでは、Figma Indigo.Design UI Kit for Material を使用でき、以下のステップで実装する内容です。
Figma から React コードを生成する方法
Figma Indigo.Design UI Kit for Material は、Ignite UI for React UI ツールセットにマッピングされ、React コード生成プロセスを合理化します。このように、すべての静的デザイン ファイルを対話的でレスポンシブ、実際の UI コンポーネント、ブランディング、スタイリング設定を含むアプリに簡単に変えることができます。
キットはすべての Figma ユーザーが使用できることに注意してください。ただし、無料プランを持つ Pro ユーザーと比較して無料ユーザーには制限があります。無料アカウント ユーザーは、アセットパネルからライブラリのコンポーネントを直接使用することはできません。したがって、UI Kit ファイルから必要なすべてのコンポーネントをコピーし、プロジェクト ファイルに貼り付ける必要があります。
ステップ 1: Figma プラグインのダウンロードとインストール – これは アセット ダウンロードページ または Figma UI Kit、Figma プラグイン、および サンプルアプリ への直接リンクからできます。
ステップ 2: Figma コミュニティから UI Kit の複製を作成する。
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 は常に、デザイン サーフェイスとプレビュー ウィンドウの両方でライブで実行中のウェブアプリケーションを表示し、React コードが配置されています。基になる React コードとアプリケーション モデルは、デザイン サーフェイスでアプリケーションに加えた変更とともにリアルタイムで更新されます。
生成されたアプリケーション コードはいつでもプレビュー ウィンドウで表示でき、完全なアプリケーション コード リポジトリとして生成されたアプリケーションをいつでもダウンロードでき、その後、選択したコード エディタで開くか、GitHub に直接公開できます。App Builder を使用して設計したアプリケーションをローカルマシンで構築し、実行し、生成された React コードに追加の変更を加えることができます。
React アプリの例
App Builder で構築されたサンプルアプリをいくつか見てみましょう。すべてが 100% React にエクスポート可能であることに注意してください。
インベントリ管理
このアプリケーションは、在庫レベルを管理し、在庫の製品を確認するために使用されます。構築するために、カスタムサイド ナビゲーションをパフォーマンスを報告するルーティングおよびカテゴリ チャートのために有効にしました。その他のコンポーネントには、アバター、ボタン、カード、チェックボックス、データグリッド、ドロップダウン、アイコン、入力グループ、リスト、選択があります。
コードをプレビューするか、ゲスト アクセスを使用してアプリの完全な機能を体験できます。
顧客関係管理 (CRM)
このアプリケーションでは、概要ダッシュボードと複数のタブを持つ顧客詳細を使用し、アコーディオン、アバター、ボタン、アイコン ボタン、チェックボックス、ダイアログ ウィンドウ、ドロップダウン、展開パネル、データグリッド、アイコン、入力グループ、リスト、ナビゲーション バー、ナビゲーション ドロワー、選択、タブ レイアウトなどのコンポーネントを使用しています。
コードをプレビューするか、ゲスト アクセスを使用してアプリの完全な機能を体験できます。
HR ダッシュボード
React アプリケーションのもう 1 つの例は、この HR ダッシュボードです。高性能で視覚的に魅力的にするため、アバター、カテゴリ チャート、アイコン ボタン、アイコン、リスト、カード、データグリッドなどのコンポーネントを持つ Ignite UI ツールセットを使用しました。
コードをプレビューするか、ゲスト アクセスを使用して完全な機能を体験できます。
まとめ
App Builder を使用してインスタント React コード生成の利点を得るための新しい React アプリケーションを作成するには、サンプルアプリケーションで開始します。事前構築されたアプリケーションを探索して変更するには、事前に定義されたアプリケーション レイアウトまたは空白テンプレートを使用するか、シームレスな統合のために Figma UI Kit を使用して既存のデザイン ファイルをインポートします。App Builder は React コードとアプリケーション モデルへのリアルタイム更新を有効にし、生成されたコードを表示、ダウンロード、変更し、GitHub に直接公開できるようにします。このプラットフォームは、スムーズなオンボーディング プロセスと効率的なアプリケーション開発を保証し、すべてのサンプルアプリケーションが完全に React にエクスポート可能です。
