Help us understand the problem. What is going on with this article?

React vs Vue.js vs Angular

More than 1 year has passed since last update.

2018/7/10 コメントでいただいた情報を反映しました


以前調べた内容のメモ書き。しばらく情報更新してないから今はちょっと違うかも。

調べた順

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 はかゆいところに手が届かない。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした