Vue.jsとNuxt.jsに初挑戦してルーレットアプリを公開しました

今回こちらのMRouletteというWebルーレットアプリを作成しました。

Qiitaにも同じようなことを書きましたがこちらでも書きたいと思います。

Qiita version->

Vueを学び始めて２週間でルーレットアプリを公開した - Qiita

はじめに 今回 MRoulette というルーレットアプリを開発、公開したのでそれについて色々書いてみたいと思います。 （名前は安直にMasiRouletteから） コードは こちら なぜルーレットアプリを作ったか ...

Qiita

なぜ作ったか

以前所属している団体でルーレットを使いたいなと思った際に調べたのですがスマホアプリが多くWeb上でインストールせずに使えるものが見つかりませんでした。

-> 最近検索してみたところおそらく以前から存在していたであろうwebルーレットアプリを発見しました・・・

ないなら自分で作れば需要あるのでは？と思いいつか作成したいなと思っていたのですが技術力不足でどうすれば実装できるのか思いついていませんでした。

そんな折に こちら の記事を拝見し、これを使えば作れるのではないかと思ったので実際に作ってみました。

使った技術

• Vue.js
  • テンプレートとかDOM操作とかを良い感じにしてくれる最近流行りのやつ
• Nuxt.js
  • 同じく最近流行ってるやつ Vue.jsのフレームワークでSPAとかSSRとか良い感じにしてくれるらしい
• Chart.js
  • JavaScriptを使って円とか棒とかのグラフをすごく簡単に作ってくれるやつ
• vue-chartjs
  • 上記Chart.jsをVue.jsで使えるようにしてくれるもの
• chartjs-plugin-labels
  • Chart.jsで作ったグラフの中にラベルを表示してくれる良いやつ
•  Github Pages
  • Githubにコード上げてちょっと設定すれば公開してくれる。とても便利

良い部分

• 割とオシャンティになった（と個人的には思う）
  • 少なくともレガシー感はないはず
• 色はランダムに設定される
• 比率設定も対応してる。ずるできる
• pinがくるくる回るのもPhotoShop使って作れた
• 結果表示にModal Window使うとなんかいい感じに思えた
• 2週間というスピード開発ができた

改善の余地

• ルーレットをゆっくり止めたい
• 項目の削除を後ろからじゃなくて好きな順番で削除したい
• SEO・OG設定をしっかりしたい
• 選ばれたものは項目から消えて連続して使えるように(想定としては あたった人から準に賞品を選べるみたいなときに使われるように）

感想

Vue.jsやNuxt.jsについてQiitaの記事で見たことがある程度でしたが実際に触ってみるとすごいわかりやすいですし公式ドキュメントも充実してますしとても良い印象を受けました。

フロントエンドつよつよマンを目指して色々作ってみたいですね（でもホントはJavaつよつよマンになりたい）

一応公開できるような作りたいものはだいたい作ってしまって次何を作ろうか・・・って悩んでます

書籍に沿って言語自体の勉強をするよりは個人開発で実際使うほうが何倍も身につくと感じたので積極的に作っていきたい所存・・

とりあえずは「世界で戦うプログラミング力を鍛える本」と「マスタリングTCP/IP入門編」と「競技プログラミング(Atcoder)」をやってみて地力を上げていきたいと思います！