最近サーバー側ばっかやっていて全然フロントエンド側触ってなくてやばい !っという理由と、そういえば去年の秋頃に Vue 2.0 が出ていたし触ってみるか！っという理由で Vue 2.0 を触ってみた。

ただ触るだけじゃつまらないので、( SPA で)はてブリーダーっぽいやつを作りました。

https://github.com/be-hase/vue-hatena-bookmark

Vue 公式が HackerNews リーダー的なものを sample として公開していたので、それじゃはてブ版でも作るかという軽いノリです。

“人気"と"新着"しかないぶん、わりとサクサク動くのでなかなか便利です。

使ってるもの

package.jsonに書いてあるとおりですが、

Vue 2.0
vue-router
vuex
vuetify
- Vue の Material Design componentsみたいなやつ
axios

で作っています。

RSSとYQL

記事情報はRSSから取得しています。

さらにYQL(Yahoo Query Language) を使用しています。

YQLを使うと、RSSのようなweb上のリソースをSQLのように取得することができます。

例えば、はてブのテクノロジーの新着を見たいなら、

select * from feed where url='http://b.hatena.ne.jp/entrylist/it.rss'

みたいなYQLを書きます。

axiosを使用して取得するなら、こんな感じになります。

axios.get('https://query.yahooapis.com/v1/public/yql', {
    params: {
      q: `select * from feed where url='http://b.hatena.ne.jp/entrylist/it.rss'`,
      format: 'json',
    },
  });

format=json を指定するとJSON で response を受け取れます。

ちなみにYQL, 特に認証しなくても使えるがcall数の制限はあります。 https://developer.yahoo.com/yql/guide/usage_info_limits.html

YQL, CORSできるので今回の例だと特にserver側で動的に書くことはなくて、static file置くだけで動きます。

所感

フロントエンドのフレームワーク、今までBackbone → Reactって触ってきましたが、一番お手軽感あって学習コストも低くて便利だなっていう感じです。
( React経由しているので学習コスト低く感じただけもしれないっていうのはありますが… )

ちょっと管理画面とかで複雑なことやりたいときとかに使ってみようかなという感じです。

be-hase blog

Vue 2.0, vue-router, vuex ではてブリーダーぽいやつ作った

使ってるもの

RSSとYQL

所感