[JavaScript] Vue.js / React / AngularJS の個人的な感想

[JavaScript] Vue.js / React / AngularJS の個人的な感想 – 前編

2016/12/11

後編かきました
[JavaScript] Vue.js / React / AngularJS の個人的な感想 – 後編

—–

こんにちは。きんくまです。

今回は以下の3つのライブラリの個人的な感想です。

・Vue.js
・React
・Angular2

一通りチュートリアルが終わって、簡単なTodoアプリを作ってみたぐらいの理解度です。
全てをがっつり使い込んだわけではないので、それぞれのマスタークラスの人だとまた違った感想が出てくると思います。

そもそも何をするライブラリなの？

これらのライブラリはいろいろと機能はありますが、自分的にざっくりいってしまうと「コンポーネントを作れる」というのが一番のポイントだと思っています。
コンポーネントって何なのかといいますと、「ある機能をもつhtmlの独自タグ」みたいな感じです。

例えば、「ボタンがあって、押すとアラートでメッセージが出る」というコンポーネントを考えてみます。

完成したもの

内側の枠で囲まれた部分がコンポーネント部分です。「ページのタイトルです」と書いてある部分は親のコンポーネントです。
上のはVue.jsで作ったのでコンポーネント部分のソースはこうなりました。

CustomButton.vue

<template>
    <div>
        <button v-on:click="onButtonClick">{{ label }}</button>
        <p>{{ message }}</p>
    </div>
</template>
<style scoped>
    div{
        padding:20px;
        border:1px solid #ccc;
        width:300px;
        margin:0 auto;
    }
    p{
       margin:0;
    }
</style>
<script>
    export default{
        props:{
            message:""
        },
        data(){
            return{
                label:"押してみて"
            }
        },
        methods:{
            onButtonClick(){
                alert("押されました");
            }
        }
    }
</script>

これを親からこんな感じに使いました。custom-button というタグで上のコンポーネントを使っています。

App.vue

<template>
  <div id="app">
    <h1>{{ pageTitle }}</h1>
    <custom-button message="押すなよー。絶対に押すなよー"></custom-button>
  </div>
</template>

<script>
import CustomButton from "./CustomButton.vue"
export default {
  name: 'app',
  data () {
    return {
      pageTitle: 'ページのタイトルです'
    }
  },
  components:{
    'custom-button': CustomButton
  }
}
</script>

<style>
...style部分は大事じゃないので省略しました...
</style>

こんな感じに、あるhtmlのDOMにおこったイベントに対する振る舞いや、どこに何を表示するかといったデータをもたせて、それらをパッケージ化したものがコンポーネントということになります。そして、そのコンポーネントを親はhtmlの独自タグを使って表示することができます。もちろんタグなので、div などと同じく、何回でも好きなところに使うことが可能です。

そして、小さなコンポーネントを組み合わせて、ページのような大きなコンポーネントを作ることもできます。（最初からページのコンポーネントを作ってもよい）
それをURLによって見せるページを振り分けすることができるようにすれば（ルーティング）、SPA（シングルページアプリケーション）のできあがり！というわけです。

これまでってどうしていたの？

これらのライブラリが登場する前にも、SPA自体は存在していました。

DOMの操作について

jQuery

まずjQueryの場合はDOMを直接いじったりしました。htmlの文字列を作って $.html(文字列) したり、$.append(), $.remove() を使って、DOMを操作したりといった感じです。
この場合は、どうしてもDOMの操作を細切れで制御していくことになり、大規模なページ単位になると、だんだんプログラムを書くのが難しくなっていく問題がありました。

「jQueryは時代遅れ」的な感じで言われていますが、個人的には小規模な開発では今でも非常に手軽で便利だと思います。ただ上の3つのライブラリはDOMをそれぞれ制御しているので、jQueryと混ぜると機能的に重なってしまうので、DOMの制御としてはなるべく一緒に使わない方がよいと思います。でもAjaxの機能であれば一緒に使っても大丈夫だと思います。(Angular2はAjaxも自前で持っているのでやめたほうがいいかもしれません）

JavaScriptのテンプレートライブラリ

– Underscore.js の template
– Handlebars
などなど

JavaScript製のテンプレートエンジンです。テンプレートをhtmlで書いて、そこに変数を代入したら、変数が展開されたhtmlの文字列ができあがります。それをjQueryの$.html()などでhtmlに入れればわりと複雑なhtmlでも作れます。

これらを使うメリットとしては、そんなに覚えることがなく使えることです。
変数に応じてあるhtmlを生成するだけなんだったら、今でもこれだけでも問題ないと思います。

こういったテンプレートエンジンを使いながら、ルーティング用のライブラリを併用すれば、SPAも作ることができます。
さらにそれらをTypeScriptやES6などでクラスごとに機能を分けて作れば、わりとシステム的に固いアプリケーションを構築することもできると思います。

だったらどうして3つのライブラリを使うのか？そのメリットは何なのか考えてみました。

・自前で作るとライブラリを複数組み合わせて使うため、細かいライブラリを別々に勉強しなくてはいけない
・自前で作るシステム部分は、どうしても品質に差が出てくる

という感じでしょうか。
ようするに上の3つのライブラリを使えば、ある程度機能がまとまったライブラリなのでバラバラのものを勉強するよりは楽だし、オープンソースで品質が向上されているので安心。という感じ。多くの人がこういう機能があると便利だな！と思ったものが入っているのでそこも良いポイントだと思います。

あー、もちろんオープンソースでもバグはあると思うので、オレオレライブラリの方が安心という意見もあってもよいと思います。そのあたりは、個別に判断してくださいまし。

3つのライブラリの実際の感想を書く前に長くなってしまったので今回はここまでです。スミマセン、、。
次回こそ感想を書きたいです。

—–

後編かきました
[JavaScript] Vue.js / React / AngularJS の個人的な感想 – 後編