JavaScriptのフレームワークを試してみた
最近、JavaScriptのフレームワークの名前（ReactとかAngularJSとか）を見かけることが多くなってきました。
そういえばフロントエンドで話題になったものは全然触ったことが無いな、と思って簡単なものを作ってみました。
今回作ったのはAnnict VisualizerというAPIからデータを持ってきてそれを可視化するだけのシンプルなWebアプリです。
Annict Visualizerとは
そもそもAnnictって？
Annict (アニクト) は、アニメの視聴記録ができるWebサービスです。
Annictはアニメ向けのWebサービスで、色んな人が自分の見たアニメについて記録ができます。
ただ記録するだけでなくて、感想とか評価も付けられます。
例えば、Annictで響けユーフォニアム2のページを見てみるとこんな感じで表示されます。
Recordsがそのアニメについた視聴記録の数、Watchersがそのアニメを見ている人といった感じです。
こんな風に、Annictではそのアニメについての記録を書いた人の数とか見ている人の数が分かります。
（もちろん、これ以外にも機能はあるので使ったことが無い方はぜひ使ってみてください）
今回はここに出ている数字のうち、記録数（Records）の部分を可視化してみました。
Annict Visualizerができること
Annict Visualizerの検索欄にアニメのタイトルを入れて、その中からアニメを選んでDrawを押すとAnnictでの記録数がグラフ化されます。
これは各話ごとの記録数を表したグラフです。
上の図のように複数のアニメの比較もできるので、「ユーフォの1期と2期はどっちが記録数が多いんだろう？」とか思った時に気軽に見ることができます。
使ったフレームワークとか
フロントエンド
サーバーサイド
処理の流れは単純で、AnnictはAPIが公開されているので、そこからデータを取得してChart.jsに渡して表示するだけです。
APIからデータを取ってくるだけなので、本当はサーバーサイドは必要ないんですが、一応APIトークンを隠蔽したかったのでPythonを使ってます。
使ってみた感想
今まで「フロントエンド＝覚えるのめっちゃ面倒くさそう」というイメージがあったので全然使ってませんでした。
なので、今まではサーバーサイドのテンプレート機能を使ったりして、なるべくフロントでの処理を避けてました。
ですが、今回Vue.jsを使ってみたら思ってたよりも簡単にフロント側の処理ができたので印象が変わりました。（大規模になれば話は違うんでしょうが）
これからWebページ作る時はちゃんとフロントも視野に入れていきたいと思います。
