フロントエンド
エンジニア
T.K
皆様こんにちは、フロントエンドエンジニアのT.Kです。
ゲーム音楽も好きです。
特に好きなのはロマンシング サ・ガと悪魔城ドラキュラの曲です。
というかメロディアスな音楽であれば大体好きです。
私T.K、たまに触れたことのない音楽ジャンルについて調べることがあるのですが
その際、ゴシックロックとゴシックメタルの音楽性が全然違ってびっくりした経験があります。
ゴシックロックはテンポが速く冷たい曲が多い。
ゴシックメタルは重く物悲しい曲が多い。
同様にデスロック(ゴシックロックの別名)とデスメタルも音楽性は全然違います。
そう、名前が似ていても全く別のものである、ということはよくあるのです。
逆に、似ているがよく見ていくと異なる部分がある、というものもあったりします。
例を挙げるならば、AngularとVue.jsでしょうか。
同じJavaScriptのフレームワークでも、仕様や記述方法などには違いがあるものでございます( ◠‿◠ )
そんなわけで（？）当記事は前回の私の記事「初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜」の続き。
前回はAngularを使う上での困りごとについてでしたが、
今回は「AngularとVue.jsの具体的な違い」について、掲載したいと思います
違いが分かってしまえば、異なるフレームワークに触れるのもそう難しくありません。
本記事は、Angular未経験だった頃の私が「Angular案件を始める前に見たかった」という内容を目指しました。
また、「Angularの次にVue.jsに触れようとしている」という方のお役にも立てるかと思います。
ぜひご覧くださいませ
目次
仕様の違い
コンポーネントを呼び出した時、ブラウザでの表示はこうなる
例えばコンポーネント<app-hoge>があります。内容は以下のとおりです。
<div>Framework is awesome!</div>
これを以下のように呼び出します。
<app-hoge></app-hoge>このとき両フレームワークでは、ブラウザで以下のように表示されます。
<!--Angular-->
<app-hoge><div>Framework is awesome!</div></app-hoge>
<!--Vue.js-->
<div>Framework is awesome!</div>Angularは<app-hoge></app-hoge>の中にコンポーネントの内容が入るのに対し、
Vue.jsは<app-hoge></app-hoge>がそのままコンポーネントの内容に置き換わるイメージです。
<app-hoge>というタグは存在しないため、エラーが出るような気がしますが、きちんとタグとして機能します。
ただし<app-hoge>はインライン要素となるため、必要に応じてCSSでdisplayを設定してください。
親コンポーネントのCSSの影響範囲
Angularは、親コンポーネントのCSSは子コンポーネントの内部に影響しません。
また、何も書かなくてもCSSの影響範囲が自コンポーネント内に制限されます。
Vue.jsは、親コンポーネントのCSSが子コンポーネントにも影響します。
.vueファイル中の<style>を<style scoped>とすることで、影響範囲の制限が有効になります。
記述の違い
算出プロパティの書き方
算出プロパティとは、他の変数の値などから自動的に算出される値のこと。
Angularは、以下のようにgetを冒頭につけて記述します。
get piyo(){
return //something...
}Vue.jsは、computed中に記述します。
computed: {
piyo: function () {
return //something...
}
}データバインディング
Angularでは、定数値と変数を同時に記述できます。
<div class="hoge {{ piyo }}"></div>Vue.jsでは、定数値と変数は別々に書かねばなりません。
<div class="hoge" :class="piyo"></div>いずれも変数piyoの値がfugaの時、以下のようにレンダリングされます。
<div class="hoge fuga"></div>イベントハンドリング
Angularでは、イベント名をカッコでくくります。
<button (click)="hoge()"></button>Vue.jsでは、イベント名にv-onもしくは@をつけます。また、引数のない関数の()は省略可能です。
<button @click="hoge()"></button>コンポーネント内の子要素を触る
子要素の
- 高さ
- それが何番目の要素か
- アニメーション状態
などを取得する場合、要素自体に識別子をつけてあげる必要があります。
Angularでは、識別子を以下のようにつけます。
<div #hoge></div>次に、コンポーネントのtsファイル内にて、3種類のもの（要名前確認）を読み込みます。
import { ViewChild, AfterViewChecked, ElementRef } from '@angular/core';そして、export class piyo{}内に以下を記述します。（piyo:コンポーネント名）
これでtsファイル内で要素を触れるようになります。
@ViewChild('hoge') hoge: ElementRef;要素の情報を取得する時は、例えば以下のように書いてください。
// #hogeをつけた要素の高さをコンソールに出力
console.log(this.hoge.nativeElement.clientHeight)Vue.jsでは、識別子としてrefをつけます。こうするだけで要素を触れます。
<div ref="hoge"></div>要素の情報を取得する時は、例えば以下のように書いてください。
// #hogeをつけた要素の高さをコンソールに出力
console.log(this.hoge.clientHeight)ちなみにAngularでもVue.jsでも、DOMレンダリング後でないと動きません。
ライフサイクルの記述の比較
以下に示します。
初期化の前
Angular：
export class piyo{
constructor() { //do something }
}Vue.js：
export default{
beforeCreate () { //do something }
}DOMレンダリング後
Angular：
import { OnInit } from '@angular/core';
export class piyo{
ngOnInit(): void { //do something }
}Vue.js：
export default{
mounted() { //do something }
}終わりに・補足
以上、私が実感したAngularとVue.jsの様々な違いを紹介してきました。
本記事が、あなたのフロント開発の一助となれば幸いです。
それでは、よきフロント開発ライフを！
ところでですね
弊社ロジカルスタジオでは、よきフロント開発ライフを送りたいエンジニアを募集中です！
他にはない”違い”がいっぱいな弊社で、開発をしてみませんか？
興味を持ってくださったそこのあなた！
まずは一度、気軽に面談にお越しください！
Angular
エンジニア
グッチ
社員一同、
ご応募、
お待ちしております！！
