アプリをスカフォルドする: Angular CLI vs Ignite UI App Builder
Angular CLIとApp Builderは、どちらも高性能な最新のAngularアプリを生成できます。でも、あなたのプロジェクトにはどのツールが最適でしょうか？
Zdravko Kolev 1min read Webアプリケーションまたはモバイルアプリケーションを構築しているにしろ、まずはIDEを選択し、理想的にはTypeScriptコンパイラーをセットアップし、モジュールローダー（例えばWebpackなど）を設定し、その次にローカルWeb開発サーバーを確立する必要があります。その後、依存関係をインストールし、ユニットテストの設定に進み… もう止めましょう。ステップバイステップで進めていくと、新しいAngularアプリケーションの開発は非常に複雑で煩雑に聞こえ、プロセスの半分にも達していないうちに「休みが欲しい」という気分になってしまいます。
しかし、アプリ開発の「レンガと漆喰」モデルから脱却して、手作業によるコーディング、手動セットアップ、設定の重い負担なしに、あなたが本当に欲しいプロジェクトを構築することができるでしょうか？言い換えれば、コーディング経験が少ない開発者にとって特に、従来のやり方より良い方法があるでしょうか？はい、あります。
実は、2つの相互運用可能な良い方法があります。Angular CLIまたはApp Builderを使用することです。
Try App Builder Try App Builder Try App Builder
これら2つがどのように比較・対比され、連携するかについて既に熟知している場合は、「あなたの次のAngularプロジェクトにはどちらを選ぶべきか」のセクションにスキップできます。Angular CLIとApp Builderを始めたばかりで、それらがどのように機能するかを知る必要がある場合は、読み続けてください。
現在、ローコードおよびノーコードツールは、多くの他のプラットフォームと技術との相互運用性を持つように進化しており、さらにシームレスな開発プロセスを可能にしています。この意味では、どちらを選択してもそれは同じ目的を果たすでしょう。Ignite UIのAngular CLIとApp Builderは両方とも、あなたの選択とプロジェクト要件に基づいた良い構造と優れたコンポーネントを備えた、高性能で最新のアプリを生成します。もちろん、それぞれに独自の利点と欠点がありますが、最終的には、両方のアプリ開発ツールは、すべてをスクラッチからコーディングすることを決定した場合と比較して、時間、努力、コストを節約します。
Angular CLIとは何か？
Angular CLIは、必要なすべての依存関係を手動でインストールして設定することなく、Angularアプリケーションの初期化、スカフォルディング、テスト、デプロイの方法を簡素化するために使用される汎用コマンドラインツールです。マルチパッケージツールとして、異なる動作を処理するいくつかの小さな個別ライブラリが含まれており、各々が特定の機能をセットアップします。
Angular CLIが提供するもの：
Angularを始める過程を簡素化し、アプリケーションの構造をスカフォルディングすることに加えて、Angular CLIは以下も実行します。
- プロジェクトを含むワークスペースフォルダーを作成します。
- 別々のビューのためのルーティングを作成します。これは最新のWebアプリケーションの一般的な要件です。
- Webpackサーバーを設定し、アプリケーションスケルトンのために必要なすべてのファイルを準備します。
- 単一のコマンドで新しいコンポーネント、ディレクティブ、サービス、モジュール、パイプなどを生成することができます。
- スタイルファイルにCSSプリプロセッサーを使用して、Sass、Less、またはStylusを使用してCSSスタイルを書くことができます。
- ソースコードからi18n文字列を抽出します。
- CLIコマンドを使用してコンポーネント、ディレクティブ、サービスを構築できます。
- サードパーティライブラリでそれを拡張できます。
- 各Angularリリースでアップデートを処理し、マイグレーションに対応します。
- コマンドシェルまたはAngular Consoleのような対話型UIを通じて使用できます。
Angular CLIの利点は何か？
複数のプロジェクト全体で一貫性を提供し、ボイラープレート（時間の節約）を提供します。 つまり、Angular CLIボイラープレートは効率を約束し、アプリケーションとコードの構造を標準化します。コード部分は最小限または変更せずに繰り返し使用され、プロジェクト開発の他の重要なタスクに焦点を当てることができます。
Angular環境での作業は簡単で高速です。Angular CLIはAngularの基本的なビルディングブロックを作成およびユニットテストするために使用できるたくさんのコマンドを含めています。
一般的なタスクを自動化し、プロジェクトを開発に移すために設定ファイルのコピー貼り付けを排除します。
スクリプト機能を持つCLIは自動化機能を提供します。これは通常、開発者に対して迅速な結果を達成するのに十分です。 一般的には、ファイルを手動で作成し、ブートストラップコードを手で入力する時間を節約します。また、ユニットテスト、静的コード分析、e2eテスト、ビルドなどのすべてをセットアップします。
Angular CLIの欠点は何か？
CLIは静的なテンプレートまたは静的なコンテンツを生成するため、完全なe2eソリューションは得られません。そのため、主にアプリケーションのスカフォルディングに使用されます。
多くの相互依存関係があり、与えられたライブラリが最新ではないため、プロセスが期待通りにスムーズに動作しないことがあります。
これはAngular Consoleを通じて間接的に機能します。Angular ConsoleはAngular CLIの基本的なUIです。一部の開発者はこれを大きな欠点と見なさないでしょう。ただし、コマンドラインインターフェースは、ユーザーがユーザーインターフェースが登場する前にCLIのみにアクセスできた時代のシェル入力の従来の方法のようなものです。
Angular CLIでは、複数のアプリケーションをすぐに取得することはできず、またGithubの統合も欠けています。
App Builderとは何か？
アプリビルダーは一般的に、事前構築されたコンポーネントを使用して画面またはWebアプリケーションを作成するのに役立ちます。重いコーディングは最小化され、高度なプログラミングスキルを習得する必要はありません。ほとんどのアプリメーカーとInfragistics社のアプリビルダープラットフォームの違いは、App BuilderはWYSIWYGドラッグアンドドロップツールで、デザインからコードまでのすべてを簡素化します。
このノーコードアプリビルダーソフトウェアで、事前構築されたアプリテンプレートと応答性の高いFlexレイアウトのセットから選択することで、次のビジネスAngularアプリをキックスタートさせるか、開発プロセスをさらに簡素化できます。豊富なUIコントロールを含むツールボックスを備えて、ドラッグアンドドロップアプリビルダーは、テーマをカスタマイズする柔軟性を提供します。
このように、ブランドと一致させて、Webアプリケーション全体を通じて視覚的な一貫性の感覚を実現できます。
SketchデザインをビジネスグレードのAngularアプリに変換するのに役立つ最高クラスのいくつかの機能は以下の通りです。
- 異なるアプリケーションシナリオを簡単に確立するためのアプリケーション相互作用デザイン機能。
- シングルページ/マスター詳細アプリの作成。
- ルーティングを備えた豊かなナビゲーション。
- 実行中のアプリがどのように見え、どのように感じ、どのように機能するかを確認するために、デザインと相互作用できるインスタントコードプレビュー。
- 生成されたコード出力のGithub統合。
- 自分の仕事をダウンロードして、お気に入りのIDEで上に追加する機能。
- AngularおよびBlazerコード生成。
および多くのその他の機能とアップデートで、以下の最新のApp Builder製品概要とチュートリアルで詳細を確認できます。
App Builderの利点は何か？
App Builderは、単一の「力を増幅する」プラットフォームとして機能し、スケッチ、デザイン、プロトタイピング、リアルタイムコードプレビューとコード生成、アプリビルディング、協力、コミュニケーションを合理化します。 また、繰り返しのタスクを自動化し、ユーザーインターフェースと優れたUXを手動で構築することの背後にある複雑さを排除します。
共有されたコードベースと組み込みの開発、テスト、デバッグ、デプロイメント機能に依存して、Infragistics社のノーコードWebアプリビルダーは開発時間を80%削減します。
ステークホルダーからデザイナーから開発者に至るまで、すべてが単一のプラットフォーム内で統合されており、チームが使用してきたツールを実際に放棄するよう要求することなく。
開発タスクを置き換え、コード、スタイリング、レイアウトにリンクできるコンポーネントと相互作用を設定します。
ビジネスの観点から、App Builderはアプリ開発プロセスを民主化し、技術的な変動を回避し、ビジネスワークフローを自動化することで、アプリ開発コストを削減します。 これはあなたの開発プロセスに効率をもたらし、生成されたコードの上にさらに多くの品質コードが得られ、コード変更のコストが削減されます。クラウドベースであるため、アプリビルダーソフトウェアはスケーラビリティとデータ暗号化も促進します。
Konstantin Dineveの「ローコード開発（Low code development） — 開発者の見方」記事で、App Builderの使用方法についてのステップバイステップガイドを確認してください。
App Builderを使用した場合の欠点は何か？
注意する必要があることの1つは、他のチームとの協力方法です。App Builderは多くの人々が一度に協力して情報を共有することができるため、コミュニケーションやフォローしたいすべてのスレッドが少し失われたように感じるかもしれません。
App Builderにはアウトボックス内のテンプレートがそれほど多くないため、これは少し問題と見なされるかもしれません。ただし、App Galleryを拡大し、新しいレイアウトテンプレートとツールボックスコンポーネントを追加することで、私たちのバックログの一部が占められています。
あなたのプロジェクトで選択するのはどちらか — Angular CLIまたはApp Builder？
CLIまたはApp Builderのどちらが最適かを判断するには、次の質問を検討してください。
- デザインスケッチの準備から、協力とユーザーテストを経由して、コードプレビューと完全なアプリ開発に至るまで、すべてを対象とするより機能が豊富なソリューションが必要ですか？
- プロジェクトを単純に開始するために静的テンプレートが必要ですか？
- それとも動的バージョンを取得して遊ぶことができるようにしたいですか？
- テンプレートからすぐに使用可能なアプリで開始し、コーディングを後で行うつもりですか？
- または、主な目標は、アプリケーション作成プロセスを完全に制御し、すぐに生成できるように、クイック追加機能と相互作用を使用することですか？
このような現代的なローコードおよびノーコード開発ツールは非常に高度になっており、多くのツールは他のシステムおよび製品と簡単に統合でき、相互に交換可能に機能させることができ、新しいプロジェクトに飛び込む直前に新しいスキルの学習を開始するようには求めていません。
Angular CLIテクノロジーとローコードWebアプリビルダーの両方は相互運用可能かもしれませんが、それぞれのツールはあなたのプロセスを独自の方法で効果的にします。どのツールがプロジェクトに最も適しているかは、あなたの目的、特定のツールで達成したいこと、あなたの強み、開発者としてのキャリアを始めているかどうか、UX/UI経験があるかどうか、そしてCLI/WYSIWYGツールについてどれほど詳しいかに依存します。
