window.pipedriveLeadboosterConfig={です。 ベース:'leadbooster-chat.pipedrive.com'、 companyId:11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2、 } ;(function () { var w = window もし (w.LeadBooster) {なら console.warn('LeadBooster already exists') } else { w.LeadBooster = { {. q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: 関数 (n) { { this.q.push({ t: 'o', n: n, h: h }) this.q.push({ t: 't', n: n }) }, } } })() チャンピオンの比較Angular vs Vue - The Codest
The Codest
  • 会社概要
  • サービス
    • ソフトウェア開発
      • フロントエンド開発
      • バックエンド開発
    • Staff Augmentation
      • フロントエンド開発者
      • バックエンド開発者
      • データエンジニア
      • クラウドエンジニア
      • QAエンジニア
      • その他
    • アドバイザリー
      • 監査&コンサルティング
  • 産業
    • フィンテック&バンキング
    • E-commerce
    • アドテック
    • ヘルステック
    • 製造業
    • 物流
    • 自動車
    • アイオーティー
  • 価値
    • CEO
    • CTO
    • デリバリー・マネージャー
  • チーム
  • Case Studies
  • ノウハウ
    • ブログ
    • ミートアップ
    • ウェビナー
    • リソース
採用情報 連絡先
  • 会社概要
  • サービス
    • ソフトウェア開発
      • フロントエンド開発
      • バックエンド開発
    • Staff Augmentation
      • フロントエンド開発者
      • バックエンド開発者
      • データエンジニア
      • クラウドエンジニア
      • QAエンジニア
      • その他
    • アドバイザリー
      • 監査&コンサルティング
  • 価値
    • CEO
    • CTO
    • デリバリー・マネージャー
  • チーム
  • Case Studies
  • ノウハウ
    • ブログ
    • ミートアップ
    • ウェビナー
    • リソース
採用情報 連絡先
戻る矢印 戻る
2021-12-22
ソフトウェア開発

チャンピオンの比較Angular vs Vue

オリウィア・オレメク

現在、いくつかのフロントエンド・フレームワークが一般的に使用され、そのクリエイターたちによって常に開発されている。しかし、それらには共通点があるかもしれない。ここでは、GoogleのAngularとオープンソースのVue.jsを開発プロセスに基づいて比較します:

プロジェクトの設定

をキックオフする最速の方法である。 プロジェクト を使用することである。 フレームワークの作者が提供するCLI.両者ともかなり良いサービスを提供しているが、いくつかの違いがある、 Vue より多くのオプションが用意されているため、最初からお客様のニーズに合わせてプロジェクトを調整することができます。あなたは Vueバージョンルーティングを使用する必要があるかどうか。Typescript、CSSプリプロセッサ、またはリンターのセットアップが必要かどうか。また、テスト(ユニットまたはE2E)を設定するかどうかも決定できます。

Vue CLI

Angular コンポーネント、サービス、インターフェイス、ディレクティブをコンソールから直接作成できるジェネレーターが付属しています。 コード 特にMVCパターンなどを使用する場合は。Typescriptには Angular そして、それを使うようにあなたにプレッシャーをかける。まだやったことがない人は、なぜ試すべきなのか、便利な紹介があるのでチェックしてみてほしい。 これ.

スタート地点で AngularのCLI は、ルーティングまたは優先するCSSプリプロセッサについてのみ尋ねます。 VueCLIは、あなたのアプリケーションの構造やスタイルを決める余地をあまり与えてくれません。しかし、CLIが要求する規約に従うのであれば、CLIはあなたを導いてくれるだろう。

Angular CLI

プロジェクト体制

Vue SFC(Single File Components)を使用しているため、新しい開発者がフレームワークを使い始め、コードに足を踏み入れるのは非常に簡単だ。

指令

Vue また、`v-if, v-for`といったディレクティブも用意されており、`v-if, v-for`のほぼコピーであるため、非常に直感的に使うことができる。 Angular のものだ。 Vue は双方向のデータバインディングのために同じ規約を使い(プレフィックスに`v-model`のv-をつけるだけ)、何かに反応していることを示す@/v-onをつける。 Angular イベント・バインディングの場合は括弧を、プロパティ・バインディングの場合は角括弧を使う。

で Vue構造そのものはシンプルで、スタイルシートやロジック用に別々のファイルを作る必要がないため、すべてが整理され、親しみやすいものとなっている。もちろん、 Vue スタイルガイドには、プロジェクト作成時に従うべき推奨ルールが記載されている。 

イベント

この場合だ、 Vue つまり、子コンポーネントからその親コンポーネントへイベントを発信するために必要なのは、(次のように使って) Vue 3 コンポジション API )は、セットアップでコンテキスト・オブジェクトからメソッドを受け取り、単にその時点で必要なものを何でも出す:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); }.}

また、他のイベントへの応答として、テンプレート内で直接行うこともできる。

で Angularこの場合、まずEventEmitterを以下のように定義する必要がある:

CustomNameForYourEmitter = new EventEmitter();

次に、EventEmitterのemitメソッドを呼び出す必要があります:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

スロット/コンテンツ・プロジェクション

どちらのフレームワークでも、若干の違いはありますが、子タグの中にhtmlを追加するだけで、親コンポーネントから子コンポーネントへ簡単にコンテンツ(単数でも複数でも)を移動させることができます:

Vue:

`。 

Angular:

デフォルト:
    。

名前付きスロット:
    とする。
<p yourname>
   これはネームド・スロットである。
  </p>
  <p>これはデフォルトのスロットである。</p>

しかし、アプリケーションの一部を条件付きでレンダリングしたい場合は、次のようにする、 Vue よりも直感的である。 Angular を追加することで、より高速に実行できるようになります。 ブイエフ ディレクティブを <テンプレート タグを使えば、現在必要な部分だけをレンダリングすることができる。

。
</template

   </template
</template

一方 ngコンテンツ は常にレンダリングされるので、この場合は ngテンプレートそして後で、独自のカスタムディレクティブを作成する:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>
ディレクティブ({)
  selector: '[customDirectiveName]'
})
エクスポートクラス CustomDirective {
  コンストラクタ(public templateRef: TemplateRef) {}.
}

そして、あなたが自分の名前に ngテンプレート 属性を指定すると、Angularは何がレンダリングされるべきかを知ることができる:

を指定します。
  
</ng-template

また、コンポーネント内で、テンプレートを コンテンツチャイルド をクリックして、適切なテンプレートを入手してください:

ContentChild(CustomDirective) content!CustomDirective;

サービス対店舗

Angular その核心では、モデルにサービスを使うことができるMVCデザイン・パターンを使うことを奨励している。そのため、アプリケーションでデータを自由に操作するには、依存性注入パターンを学ぶ必要がある。APIコールの副作用を分離し、その時点で必要な部分をインジェクションすることで、プロジェクト全体で同じロジックを使用することができます。

Angular また、RxJsのobservablesを使ってよりリアクティブなアプローチを使いたい場合には、Reduxパターンに基づいたNgrx/storeフレームワークも付属しています。コンポーネントやサービスからユニークなイベントをディスパッチするAction、実行したい副作用や非同期アクションを処理するEffects、そして状態を変異させるReducersが付属しています。

で VueVuexライブラリは、Ngrx/storeと同様に、アクション、ミューテーション、ゲッターなどのツールを備えています。ユーザーストアやカートストアなど、ビューに異なるストアを設定することでモジュール化することができます。 名前空間: true プロパティを指定します。

以下は、サービスベースのアプローチとVuexのアプローチの比較である。 製品 お店のデータ

@Injectable() // 後でDIで使いたいことを示すデコレーター
エクスポートクラス ProductsService {
  private products:Product[] = [];

  コンストラクタ(private backend: BackendService) { }.

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => { //商品を好きなように扱う。
      // 商品に好きなことをする
    });
    return this.products;
  }
}

次に、コンポーネント内で、使用するサービスをインジェクトする:
コンストラクタ(private service: HeroService) { }.

で Vueバックエンドを呼び出すアクションをディスパッチするだけだ:

store.dispatch(getAllProducts)

そして actions.ts ファイルにアクションを定義する:

アクションを実行する:{
getAllProducts ({ commit }){ // 全ての商品を取得する。
    commit('setProducts', await getProducts();); // データを取得し、結果をストアに置く
}}

データの取得

と VueAxios/Fetchでも何でも好きなライブラリーを使えばいいし、プロミスを使った非同期呼び出しでも何でもいい。

を試す。
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('必要なことを何でもする'))
} catch (e) {
    //エラー処理
}

Angular observablesを使用するHttpClientライブラリが付属しており、これを適切に使用したり、データを操作したりするには、RxJsを学ぶ必要があります。繰り返しになるが、この抽象的な構造を流暢に使いこなすには、最初のうちは圧倒されるかもしれない。

Axiosを使うこともできるが、AxiosのGitHubページには次のように書かれている。 Angular'

private getAllItems(): void { {.
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('結果')、
tap(console.log('do whatever side effect you want to use here')
catchError((error) => { //エラーを処理する。
        //エラーを処理する
})
)
.subscribe((result: ResultType[])
    // 与えられた出力に対する最終操作
)
}

まとめ

| Vue | Angular |
| ———– | ———– |
| 非常に厳格なルールに従うことを強制しない|Typescript、クラスベースのコンポーネント/サービスを使用する必要がある|Typescript、クラスベースのコンポーネント/サービスを使用する必要がある|Typescript、クラスベースのコンポーネント/サービスを使用する必要がある。
| 学習曲線が平坦で、始めやすい|学習曲線が高い(Typescript、RxJs、依存性注入)|学習曲線が高い(Typescript、RxJs、依存性注入)|学習曲線が平坦で、始めやすい
| プロジェクトのセットアップ中に設定することがたくさんある。
| AngularとReactの両方をベースにしたコミュニティ主導のフレームワーク。
| ステート・マネジメント、HttpClientがフレームワークに含まれる。

続きを読む

JavaScriptは完全に死んだインターネット上のある男

Netlifyファンクションを使ってGraphQL/MongoDB APIをデプロイする

間違ったコーディングでプロジェクトを台無しにする方法

関連記事

ソフトウェア開発

将来を見据えたウェブ・アプリケーションの構築:The Codestのエキスパート・チームによる洞察

The Codestが、最先端技術を駆使してスケーラブルでインタラクティブなウェブアプリケーションを作成し、あらゆるプラットフォームでシームレスなユーザー体験を提供することにどのように秀でているかをご覧ください。The Codestの専門知識がどのようにデジタルトランスフォーメーションとビジネス...

ザ・コデスト
ソフトウェア開発

ラトビアを拠点とするソフトウェア開発企業トップ10社

ラトビアのトップソフトウェア開発企業とその革新的なソリューションについて、最新記事でご紹介します。ラトビアの技術リーダーたちがあなたのビジネスをどのように向上させるかをご覧ください。

thecodest
エンタープライズ&スケールアップ・ソリューション

Javaソフトウェア開発の要点:アウトソーシングを成功させるためのガイド

outsourcingのJavaソフトウェア開発を成功させるために不可欠なこのガイドを読んで、The Codestで効率性を高め、専門知識にアクセスし、プロジェクトを成功に導きましょう。

thecodest
ソフトウェア開発

ポーランドにおけるアウトソーシングの究極ガイド

ポーランドのoutsourcingの急増は、経済、教育、技術の進歩がITの成長とビジネス・フレンドリーな環境を促進していることによる。

ザ・コデスト
エンタープライズ&スケールアップ・ソリューション

IT監査ツール&テクニック完全ガイド

IT監査は、安全かつ効率的で、コンプライアンスに準拠したシステムを保証します。その重要性については、記事全文をお読みください。

The Codest
ヤクブ・ヤクボヴィッチ CTO & 共同創設者

ナレッジベースを購読して、IT部門の専門知識を常に最新の状態に保ちましょう。

    会社概要

    The Codest - ポーランドに技術拠点を持つ国際的なソフトウェア開発会社。

    イギリス - 本社

    • オフィス 303B, 182-184 High Street North E6 2JA
      イギリス、ロンドン

    ポーランド - ローカル・テック・ハブ

    • ファブリチュナ・オフィスパーク、アレハ
      ポコジュ18、31-564クラクフ
    • ブレイン・エンバシー, コンストルクトースカ
      11, 02-673 Warsaw, Poland

      The Codest

    • ホーム
    • 会社概要
    • サービス
    • Case Studies
    • ノウハウ
    • 採用情報
    • 辞書

      サービス

    • アドバイザリー
    • ソフトウェア開発
    • バックエンド開発
    • フロントエンド開発
    • Staff Augmentation
    • バックエンド開発者
    • クラウドエンジニア
    • データエンジニア
    • その他
    • QAエンジニア

      リソース

    • 外部ソフトウェア開発パートナーとの協力に関する事実と神話
    • 米国から欧州へ:アメリカの新興企業がヨーロッパへの移転を決断する理由
    • テックオフショア開発ハブの比較:テックオフショア ヨーロッパ(ポーランド)、ASEAN(フィリピン)、ユーラシア(トルコ)
    • CTOとCIOの課題は?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • ウェブサイト利用規約

    著作権 © 2025 by The Codest。無断複写・転載を禁じます。

    jaJapanese
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek jaJapanese