Vue.jsでAtCoder関連のサービスをサクッと作ってみた

はじめに

最近コンテストにあまり出ることが出来ていない192です。

ここ1ヶ月ほどVue.jsの学習に専念していました。

学習の結果、AtCoder Problems 4 Meというサービスを作ることが出来ました。今回はそのサービスについての紹介と、作成に至るまでの経緯を説明したいと思います。

AtCoder Problems 4 Meについて

大きく分けて3つの機能を持っているので順に紹介します。

  • 問題検索機能
    • 得点で絞り込みをかけることができます screenshot
    • コンテスト名で絞り込みをかけることもできます screenshot
  • 提出確認機能
    • 日付をカレンダーから選択すると、その日の提出を確認する事ができます screenshot
  • ステータス確認機能
    • 自分のACCountやRatedPointSumが何点問題で稼がれているかを確認できます screenshot
  • ライバルとの比較機能
    • 時間不足のため実装が殆どできませんでした
    • スクリーンショットがないので察してください

自己紹介

  • 新卒で某SIerに入社しました
    • 4月から社会人二年目です
  • 大学では金属疲労の研究をしていました
  • 主に業務ではSwiftやObjective-Cを書くことが多いです
  • 去年の7月に競技プログラミングを始めました(Highest: 1246)
    • 使用言語はPython3です
  • JavaScriptやVue.js歴は1ヶ月です

開発に至った経緯

なんとなくフロントエンドを触りたくなったので、しばらくVue.jsをやっていました。

ある日、AtCoder ProblemsのRatedPointSumを眺めていると、自分が何点問題でポイントを稼いでいるのか気になりました。

そこで、RatedPointSumを円グラフとして表示しようと考え、まず円グラフ表示部分を作りました。

そうやって作っていくうちに、スマートフォンで見やすいレイアウトの問題検索サイトを実現できたらいいなぁと考えたので、機能をいくつか追加して現在に至ります。

本当はもう少し実装を詰めてから世に出したかったのですが、諸事情によりこのままリリースすることにします。

これから追加したい機能・改善したいところ

  • アプリのPWA化
    • Service Workerの設定を詰めるのが大変ですが…
    • Backgroundで定期的にDB更新できたらいいなと思ったりしています
  • アプリ自体の高速化
    • 初回読み込み時以外はIndexedDBを使っているのにどうも遅い
      • 実装の仕方が悪いのでは

使ったライブラリなど

  • Vue.js
    • それはそう
  • Vuetify
    • UIフレームワーク
    • Material Designのページをサクッと作れるので採用しました
    • ドキュメントが充実しているのでコピペでもある程度見た目の良いものが作れます
  • Vuex
    • 状態管理のライブラリ
    • アプリで使用されるデータはだいたいこいつで管理しています
  • Vue-router
    • ルーティングライブラリ
    • 画面遷移のために使っています(SPAなので)
  • Dexie.js
    • IndexedDBを使うためのライブラリ
    • 何度も何度もAPIアクセスしないで良いように+低速回線でのパフォーマンスのためにDBを使っています
  • Axios
    • HTTPクライアント
    • APIを叩くときに使っています
  • Echarts
    • グラフ描画ライブラリ
  • vue-material-design
    • デザインの参考にしました
  • AtCoderProblems
    • 神

しんどかったポイント

  • 非同期処理
    • JavaScriptで躓くポイントだと個人的には思っています
  • (比較的大規模な)コードの管理
    • 大体2500行くらい書いたので…
  • 英語
    • お察しください

開発の流れ

2019/3/13~ 開発スタート

開発開始直後は使うライブラリの選定を行っていたので実装をあまりやっていなかったりします。

Vue.jsの知識(とJavaScriptの知識)がなかったので、この本を読んで学習を進めたり、vue-material-adminsを見ながらVueでの実装の仕方を学習していました。

2019/3/13~2019/3/18 ステータス確認機能を実装する

AtCoder Problems 4 Meではグラフ描画にEChartsを使用しているので、暇な時間にドキュメントを読むなどしていました。

2019/3/18 ~ 2019/3/21 問題検索機能と提出確認機能を実装する

Vuexにデータをどのような形式で保持しておくかで悩んだ記憶があります。

2019/3/21~ 複数ユーザに対応させる

無計画でコードを書いていった結果、収拾がつかなくなりかなりつらい思いをしました。

職場でも空いた時間はUIをどうするか考えたり、無駄な処理を洗い出したりしていました(つらい)

2019/3/28 リリース

仕事が忙しくなり、不本意な形でのリリースをしました。

おわりに

Vue.jsはフロントエンド初心者でもとっつきやすいので、とても良い印象をもちました。

Vue.jsでWebアプリを実装する場合、実装難易度としてはABC-B程度なので意外とサクッと作れます。Vue.jsはいいぞ