Zenn
🤖

React vs Vue.js vs Angular

2020/10/11に公開
Angular
React
Vue.js
tech

2年以上前の情報ですので悪しからず

以前調べた内容のメモ書き。しばらく情報更新してないから今はちょっと違うかも。ASP.NET MVC で作られたプラットフォーム上のある画面を改善する際に調べた内容です。

調べた順

React

  • facebook 製

  • facebook を訴えたら React が使えなくなるライセンス

  • jsx または tsx という形式のコードを使う

    class Counter extends React.Component {
    constructor() {
        this.state = {
            count: 0
        };
    }

    onClick() {
        this.setState({
            count: this.state.count + 1
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.onClick.bind(this)}>Count Up!</button>
            </div>
        )
    }
}

React.render(
    <Counter />,
    document.getElementById('app-container')
);

  • ステート管理に Redux とか使わないといけないらしい。詳しく調べてない

感想

  • 覚えることが多いけどそんなに大変ではない
  • 個人的に js 内に html コードがあるのがすごく不思議
    • だからと言って js のみで書く気にはなれない（カッコ祭り）
  • 既存のサービス（ASP.NET MVCなど）の単体ページに適用するにしては仕様がでかすぎる

Vue.js

  • どっかの中国人が作ってる

  • チュートリアルが分かりやすい

  • Material ライブラリもある。結構充実してそう。

  • jsx とか回りくどいものがない。全部 vanilla js で書ける。

    • サンプル
    <div id="app">
    {{ message }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

感想

  • typescript と相性が悪そう
  • js メインで、導入もインポート一つなので、単体ページへの導入が楽
    • 依存関係とかあんま気にしなくていい。ASP.NET MVC ならテンプレートに一個タグ足すだけ。
  • 日本語ドキュメントが多いて、チュートリアルがあるからとっつきやすい。
  • 仕様が最低限であればさほど大きくない
  • SPA にするならルーディングめんどくさそう。

Angular

  • Google 製

  • 特にライセンスの縛りなし？

  • 仕様がでかすぎるけど、その代わり angular cli っていう機能がある

  • View フレームワークっていうか一個のサイト制作ソフトウェア

  • ファイル数が増える

    • サンプルはファイル数が多いので省略
    • 構造は以下
    ┬ app.module.ts
├ app.component.ts
├ app.component.html
├ app.component.css
└ components
    └ home
        ├ home.component.ts
        ├ home.component.html
        └ home.component.css
    • こんな構造で、コンポーネントを作っている
      • コンポーネントは コード / HTML / CSS で分かれている

  • 覚えること多そう

感想

  • ts / html / css で分かれているのが非常に好き。
    • MVVM とかがやりやすい。ビューとモデルを完全に（ファイルごと）分離できる。
    • React とかでやろうとすると自分で規則を作らないといけない
  • Google 製品で使われているので長く保守されそう
  • typescript がデフォルトで対応してるのがうれしい（AngularJS はしらん）

総括

  • 既存のサービスに View フレームワークを導入するなら Vue.js
    • 手なりですぐ書ける。初期コストも低い。
    • Vue.js でちょっとずつ SPA 化して、最終的に全部ごろっと Angular か React にするのがいい。移行する頃には API 全部そろってる。
  • 新規に作るなら React か Angular
    • どっちかは好み。俺は Angular のほうが好き。
  • Angular は言うほど覚えるの大変じゃない。
    • 公式チュートリアル一回やればだいたいわかる。ASP.NET MVC とか tornado とか使ったことあれば基本出来ることはそんなに変わらない。特に WebStorm とか使えばそんなに苦にならない。
    • 特に Material が公式対応なのがうれしい。React Material はかゆいところに手が届かない。

お役に立てましたらライク、サポートしていただけますと嬉しいです！🙇🙇

Discussion