🤖

React vs Vue.js vs Angular

3 min read

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 はかゆいところに手が届かない。

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