LoginSignup
30
28

More than 5 years have passed since last update.

@kkeisuke(keisuke kimura)

React/Angular/Vueの比較のため各cliツールを試してみた

Last updated at Posted at 2016-10-19

背景

  • 新しいプロジェクトに向けてのフレームワーク選定のため
    • プロダクトは BtoBtoC の業務アプリ
  • いわゆるフロントエンドエンジニアがチームに少ない (10名弱中に1〜2名)
    • 社内外で探しても圧倒的に少ない。田舎だからか!?
  • 既存システムは AngularJS 1.x 系が使われており、2013年末から約3年くらいチーム内の実績がある。

結論

  • vue-cli、angular-cli、create-react-app それぞれ必要なもの(ビルド、テスト関連)が揃っており、ツール選定に疲れた人や悩みたくない場合には有効
  • PJ の取っ掛かり(プロト段階)でフレームワーク検証がてら利用する分には十分。
    • どれを選ぶかはプロダクトの要件しだい。
  • angular-cli が scaffold が揃っているので、メンバーには布教しやすそう。
    (若干 Angular 愛によるバイアス有り。)
    • BtoBtoC の業務アプリに TypeScript はオススメです。

各cliツール比較

以下、触った順です。

vue-cli

  • http://vuejs.org/guide/installation.html#CLI
    • http://jp.vuejs.org/guide/installation.html#CLI
      • ドキュメントは 1.0 だけど、2.0 にちゃんと対応していた。日本語ドキュメントあるとメンバーには布教しやすい。
    • 構成がわかりやすい。シンプル
    • 必要なものは一通り揃っており、過不足ない感じ
      • babel/karma/mocha/chai/sinon/nightwatch/webpack など
    • npm run dev して感動した。
    • 型がほしいので、flowtype などを追加したい
.
├── build
├── config
├── src
│   ├── assets
│   └── components
├── static
└── test
    ├── e2e
    └── unit

参考

angular-cli

  • https://cli.angular.io/
  • https://github.com/angular/angular-cli
    • このリポジトリがちょっと探しづらい。
    • 構成がやや複雑
    • 必要なものは一通り揃っており、不足ない感じ
      • typescript/karma/jasmine/protractor/systemjs など
    • ng generate <Scaffold> が充実してる
      • これに沿うようにメンバーに周知すればある程度の秩序は保てそう
    • 環境別に build などもできそう。
.
├── config
├── dist
│   ├── app
│   └── vendor
├── e2e
├── public
├── src
│   └── app
├── tmp
└── typings
    ├── browser
    └── main

参考

create-react-app

# npm run eject 前
.
├── public
└── src

# npm run eject 後
.
├── config
│   └── jest
├── public
├── scripts
└── src

参考

30
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
30
28