コンテンツにスキップ
アプリの足場Angular CLI vs アプリビルダー

アプリの足場Angular CLI vs アプリビルダー

Angularアプリを構築していますか? Angular CLI またはApp Builderを使用して構築できるようになりました。しかし、違いは何でしょうか? こちらをご覧ください。

9min read

Webアプリでもモバイルアプリでも、最初にIDEを選択し、理想的にはTypeScriptコンパイラを設定し、モジュールローダー(Webpackなど)を構成し、次にローカルWeb開発サーバーを確立する必要があります。次に、依存関係をインストールし、単体テストの構成に進みます...あぁ、やめろ。一歩一歩進むと、新しいAngularアプリケーションの開発が複雑すぎて面倒で、プロセスの途中でも「休憩をとって」という心境に近づいているように聞こえます。

しかし、アプリ開発におけるこの「実店舗」モデルから脱却し、手作業によるコーディング、手動のセットアップ、構成の負荷をかけずに、本当に必要なプロジェクトを構築できるでしょうか?言い換えれば、特にコーディングの経験がほとんどない開発者に関しては、昔ながらの方法よりも良い方法はありますか?はい。

実際、Angular CLIApp Builderの2つのより良い相互運用方法があります。

この 2 つがどのように比較対照され、連携するかをすでによく知っているなら、"次のAngularプロジェクトではどちらを選ぶべきか" を論じている部分に飛んでも構いません。Angular CLIとApp Builderを使い始めたばかりで、それらがどのように機能するかを知る必要がある場合は、読み続けてください。

現在、ローコードおよびノーコードツールは、他の多くのプラットフォームやテクノロジーと相互運用できるように進化しており、さらにシームレスな開発プロセスを可能にしています。この意味で、どちらを選択しても、同じ目的を果たします。Ignite UI とApp Builderによる CLI Angularどちらも、選択とプロジェクトの要件に基づいて、優れた構造と優れたコンポーネントを備えた、高性能な最新のアプリを生成します。もちろん、それぞれに長所と短所がありますが、最終的には、両方のアプリ開発ツールを使用すると、すべてをゼロからコーディングする場合と比較して、時間、労力、コストを節約できます。

Angular CLIとは何ですか?

Ignite UI for Angular CLI のインストール

Angular CLIは、必要なすべての依存関係を手動でインストールして構成することなく、Angularアプリの初期化、スキャフォールディング、テスト、デプロイの方法を簡素化するために使用される汎用コマンドラインツールです。マルチパッケージツールとして、さまざまな動作を処理するいくつかの小さな個別のライブラリが含まれており、それぞれが特定の機能を設定します。

Angular CLIが提供するものは次のとおりです。

Angularの使用を開始し、アプリの構造をスキャフォールディングするプロセスを簡素化するだけでなく、Angular CLIは次の機能も備えています。

  • プロジェクトを格納するワークスペースフォルダを作成します。
  • 最新の Web アプリケーションの一般的な要件である個別のビューのルーティングを作成します。
  • Webpackサーバーを設定し、アプリのスケルトンに必要なすべてのファイルを準備します。
  • その後、新しいコンポーネント、ディレクティブ、サービス、モジュール、パイプなどを 1 つのコマンドで生成できます。
  • スタイル ファイルに CSS プリプロセッサを使用するため、Sass、Less、または Stylus を使用して CSS スタイルを記述できます。
  • ソースコードから i18n 文字列を抽出します。
  • CLIコマンドを使用して、コンポーネント、ディレクティブ、サービスを構築できます。
  • 3rdパーティのライブラリで拡張できます。
  • 更新を処理し、各Angularリリースの移行を処理します。
  • コマンド シェルで、またはコンソールなどの対話型 UI Angular使用できます。

Angular CLIの利点は何ですか?

これにより、複数のプロジェクト間で一貫性が保たれ、定型文、つまり時間の節約が可能になります。言い換えれば、Angular CLIのボイラープレートは効率性を約束し、アプリとコードの構造を標準化します。コードセクションは、最小限の変更またはまったく変更なしで繰り返し使用されるため、プロジェクト開発における他の重要なタスクに集中できます。

Angular環境での作業は、より簡単で迅速です。Angular CLIには、Angularの基本的なビルディングブロックの作成と単体テストに使用できるコマンドが多数含まれています。

一般的なタスクを自動化し、プロジェクトを開発に移行するための構成ファイルのコピー&ペーストを排除します。

スクリプト機能を備えたCLIは、通常、開発者が迅速に結果を得るのに十分な自動化手段を提供します。一般に、手動でファイルを作成し、ブートストラップコードを手動で入力する時間を節約できます。また、単体テスト、静的コード分析、e2eテスト、ビルドなどのためのすべての設定も行います。

Angular CLIの欠点は何ですか?

CLIは静的テンプレートまたは静的コンテンツを生成するため、完全なe2eソリューションは得られません。そのため、主にアプリの足場に使用されます。

相互依存関係が多すぎて、特定のライブラリが最新ではないため、プロセスが期待どおりにスムーズに機能しない場合があります。

これはAngular基本的にAngular CLIのUIであるコンソールを介して間接的に機能します。一部の開発者は、これを大きな欠点とは見なさないでしょう。ただし、コマンドラインインターフェイスは、ユーザーインターフェイスが起動する前にユーザーがCLIにのみアクセスしていた場合と同様に、シェルに入る従来の方法のようなものです。

Angular CLIでは、いくつかのアプリケーションをすぐに使用できるわけではなく、Github統合もありません。

アプリビルダーとは?

App Builderコンポーネントとその動作を示すGif。

一般に、アプリビルダーは、事前に構築されたコンポーネントを使用して画面や Web アプリケーションを作成するのに役立ちます。重いコーディングが最小限に抑えられ、高度なプログラミングスキルを習得する必要はありません。ほとんどのアプリメーカーとインフラジスティックスのアプリビルダープラットフォームの違いは、App Builderがデザインからコードまですべてを簡素化するWYSIWYGドラッグアンドドロップツールであることです。

このノーコードアプリビルダーソフトウェアを使用すると、次のビジネスAngularアプリを開始したり、事前に構築されたアプリテンプレートとレスポンシブなFlexレイアウトのセットから選択して開発プロセスをさらに簡素化したりできます。豊富なUIコントロールを備えたツールボックスを含む、ドラッグアンドドロップのアプリビルダーにより、テーマを好きなように柔軟にカスタマイズできます。

App Builderテーマ

このようにして、ブランドを一致させ、Webアプリケーション全体で視覚的な一貫性を持たせることができます。

SketchデザインをビジネスグレードのAngularアプリに変換するのに役立つクラス最高の機能には、次のようなものがあります。

  • さまざまなアプリケーションシナリオを簡単に確立するためのアプリケーションインタラクション設計機能。
  • 単一ページ/マスター詳細アプリの作成。
  • ルーティングによる豊富なナビゲーション。
  • デザインを操作して、実行中のアプリがどのように見え、どのように動作するかを確認できるインスタントコードプレビュー。
  • 生成されたコード出力の Github 統合。
  • 作業内容をダウンロードして、お気に入りのIDEでその上に追加する機能。
  • AngularおよびBlazorコード生成。

また、以下の最新のApp Builder製品概要とチュートリアルで学ぶことができる、さらに多くの機能とアップデートがあります。

アプリビルダーの利点は何ですか?

このApp Builderは、スケッチ、設計、プロトタイピング、リアルタイムのコードプレビューとコード生成、アプリ構築、コラボレーション、コミュニケーションを合理化する単一の「力掛け」プラットフォームとして機能します。また、反復的なタスクを自動化し、ユーザーインターフェイスと優れたUXを手動で構築する際の複雑さを排除します。

InfragisticsのノーコードWebアプリケーションビルダーは、共有コードベースと組み込みの開発、テスト、デバッグ、およびデプロイ機能に依存しており、開発時間を80%短縮します。

App Builderでアプリ開発を80%高速化

関係者からデザイナー、開発者まで、すべての人が 1 つのプラットフォームに統合され、これまで使用してきたツールを手放すようチームに求める必要はありません。

開発タスクを置き換え、コード、スタイル、レイアウトにリンクできるコンポーネントとインタラクションを構成します。

ビジネスの観点から見ると、App Builderは、アプリ開発プロセスを民主化し、テクノロジーのチャーンを回避し、ビジネスワークフローを自動化することで、アプリ開発コストを削減します。これにより、開発プロセスが効率化され、生成されるコードに加えて、より高品質のコードが作成され、コードの変更コストが削減されます。クラウドベースであるため、アプリビルダーソフトウェアはスケーラビリティとデータ暗号化も促進します。

Konstantin Dinevの「ローコード開発 - 開発者の視点」App Builderの使用方法に関するステップバイステップガイドの記事をご覧ください。

アプリビルダーを使用することの欠点は何ですか?

注意すべきことの 1 つは、他のチームとのコラボレーション方法です。このApp Builderでは、多くの人が一度に共同作業や情報共有を行うことができるため、コミュニケーションやフォローしたいすべてのスレッドに少し迷子になるかもしれません。

App Builderにはすぐに使えるテンプレートがあまりないので、これは少しバンパーと見なされるかもしれません。ただし、バックログの一部は、アプリ ギャラリーの拡張、新しいレイアウト テンプレートとツールボックス コンポーネントの追加に費やされています。

プロジェクトには、CLIとApp Builder Angularどちらを選択しますか?

CLIとApp Builderのどちらが最適かを判断するには、次の質問を検討してください。

  • デザインスケッチの準備から、コラボレーションやユーザーテスト、コードプレビュー、アプリ開発の完了まで、すべてをカバーする、より機能豊富なソリューションが必要ですか?
  • プロジェクトを開始するのに静的テンプレートが必要ですか?
  • それとも、ダイナミックバージョンで遊べるようにしたいですか?
  • テンプレートからすぐに使用できるアプリから始めて、コーディングを後回しにしますか?
  • それとも、クイック追加機能とインタラクションを使用し、アプリの作成プロセスを完全に制御して、すぐに生成できるようにすることが主な目標ですか?

このような最新のローコードおよびノーコード開発ツールは非常に高度化しており、新しいプロジェクトに飛び込む直前に新しいスキルの習得を開始するように求めなくても、それらの多くは他のシステムや製品と簡単に統合して互換性を持たせることができます。

Angular CLI テクノロジーとローコード Web App Builderはどちらも相互運用可能かもしれませんが、それぞれが独自の方法でプロセスにメリットをもたらします。どれがプロジェクトに最も適しているかは、目的、特定のツールで達成したいこと、強み、開発者としてのキャリアを始めたばかりかどうか、UX/UIの経験があるかどうか、CLI/WYSIWYGツールにどれだけ精通しているかによって異なります。

デモを予約