JSフレームワークの選定とVue.jsを使ってみた所感
JSフレームワークに以前より興味を持っていたのですが、日々の業務や他の学習事項に時間を取られて中々学習時間を取ることが出来ませんでした。 しかし、最近少し落ち着いてきたこともあってようやくJSフレームワークに手を出すことが出来たので、その使ってみた所感を書いてみることにします。
その前に...
そもそも何故JSフレームワークに興味を？
いわゆるSPAというものに興味を持っていたからです。
ページ遷移を画面自体の切り替えではなく、画面内のコンテンツを切り替えることで実現するSPAは、ストレスなく遷移出来るという点において自分にとってはとても革新的で魅力的なものでした。
また、SPAであればネイティブアプリと遜色ないWebアプリを構築することが出来るらしい、と以前コチラの記事等で紹介されていたことも大きく自分に印象付けるものでした。
そうしたSPAを実現するためのツールとして、JSフレームワークが紹介されていた、これが自分がJSフレームワークに興味を持ったキッカケです。
JSフレームワークの選定→何故Vue.jsにしたのか？
JSフレームワークの数は多い
JSフレームワークは現在開発が大変盛んで、いざJSフレームワークに手をつけようとしても、 下記に示したようにぱっと有名なものだけで目がまわる程の数があります。
- Backbone.js
- Ember.js
- Knockout.js
- AngularJS1系
- AngularJS2系
- React.js
- Ractive.js
- vue.js
そんな中で、私はJSフレームワークとしてVue.jsを選定しました。
何故Vue.jsにしたのか？
理由は単純で、私は下記の基準を以て選定しており、その基準に最も合致したのがVue.jsであったからです。
- メジャーなフレームワークである(質が担保されている)
- 現在も活発に利用されている、あるいは最近トレンドになってきている
- シンプルで学習コストが低い
実際に使ってみた感想
公式ページを見ながらサンプルを作りつつ、APIを使った通信などもしてみました。 下記はその感想です。
- 確かにSPAを実現するのに適したツールだと感じた
- そして、SPA実現のキモとなるのは、ルーティングとコンポーネントであると感じた
- htmlに独自の要素を持たせたり、jsにhtmlテンプレートを持たせたりすることに少し戸惑いを感じたが、概ね抵抗なく使えた(今までjQueryを使っていたが、特に発想の転換などを迫られるような感触はなかった)
詰まったところ
APIとの通信
単純にAPIとの通信を行おうとすると、'Access-Control-Allow-Origin'のエラーが出てしまいます。
調べてみますと、これはサーバサイド側のサイトで'Access-Control-Allow-Origin ヘッダー'を付け足してやらないことによるエラーでした。
ただ、APIを送る先は自分で管理しているサーバではなかったので、どうするべきか悩みましたが、結局自前のPHPを仲介して取得してやればいいと気付き、解決しました。
最後に
githubに公開してます
今回学習用に作成したサンプルアプリをgithubで公開してますので、もし興味がありましたらご覧ください。
