SHIROBAKO大好き人間のブログ

SHIROBAKOが好きなエンジニアによる技術ブログ

JavaScriptのフレームワークを試してみた

最近、JavaScriptフレームワークの名前(ReactとかAngularJSとか)を見かけることが多くなってきました。

そういえばフロントエンドで話題になったものは全然触ったことが無いな、と思って簡単なものを作ってみました。

今回作ったのはAnnict VisualizerというAPIからデータを持ってきてそれを可視化するだけのシンプルなWebアプリです。

Annict Visualizer

f:id:phoro3:20161225184843p:plain

Annict Visualizerとは

そもそもAnnictって?

Annict (アニクト) は、アニメの視聴記録ができるWebサービスです。

Annict | アニクト - 見たアニメを記録して、共有しよう

Annictはアニメ向けのWebサービスで、色んな人が自分の見たアニメについて記録ができます。

ただ記録するだけでなくて、感想とか評価も付けられます。

例えば、Annictで響けユーフォニアム2のページを見てみるとこんな感じで表示されます。

f:id:phoro3:20161225212424p:plain

Recordsがそのアニメについた視聴記録の数、Watchersがそのアニメを見ている人といった感じです。

こんな風に、Annictではそのアニメについての記録を書いた人の数とか見ている人の数が分かります。

(もちろん、これ以外にも機能はあるので使ったことが無い方はぜひ使ってみてください)

今回はここに出ている数字のうち、記録数(Records)の部分を可視化してみました。

Annict Visualizerができること

Annict Visualizerの検索欄にアニメのタイトルを入れて、その中からアニメを選んでDrawを押すとAnnictでの記録数がグラフ化されます。

f:id:phoro3:20161225213025p:plain

これは各話ごとの記録数を表したグラフです。

上の図のように複数のアニメの比較もできるので、「ユーフォの1期と2期はどっちが記録数が多いんだろう?」とか思った時に気軽に見ることができます。

使ったフレームワークとか

  • フロントエンド

    • Vue.js:「シンプル」とか「小規模な開発向き」という評価を見かけたので選びました

    • Chart.js:グラフを作るのに使いました。特に設定をしなくてもいい感じのグラフを作ってくれます。

  • サーバーサイド

    • BottlePythonのWebフレームワーク。シンプルなので今回みたいにお手軽なページを作る時は便利です。

処理の流れは単純で、AnnictはAPIが公開されているので、そこからデータを取得してChart.jsに渡して表示するだけです。

APIからデータを取ってくるだけなので、本当はサーバーサイドは必要ないんですが、一応APIトークンを隠蔽したかったのでPythonを使ってます。

使ってみた感想

今まで「フロントエンド=覚えるのめっちゃ面倒くさそう」というイメージがあったので全然使ってませんでした。

なので、今まではサーバーサイドのテンプレート機能を使ったりして、なるべくフロントでの処理を避けてました。

ですが、今回Vue.jsを使ってみたら思ってたよりも簡単にフロント側の処理ができたので印象が変わりました。(大規模になれば話は違うんでしょうが)

これからWebページ作る時はちゃんとフロントも視野に入れていきたいと思います。