Help us understand the problem. What is going on with this article?

Vue.jsで絵文字をクリックするだけのクソゲーを作りました

More than 1 year has passed since last update.

クソアプリ Advent Calendar 2018」7日目の担当、黒神(@kokushing)です。

みんなクソ(クオリティ高い)アプリを作っているので、僕も負けじと頑張りましたが、技術力に限界がありどうしようもないクソアプリができてしまいましたので先にお詫び申し上げます。

作ったもの

「Emoji Wars」というブラウザゲームです。

Emoji Wars

emoji.gif

ただただ絵文字をクリックして点数を稼ぐというクソゲーです。
5回絵文字をクリックするとフィーバーモードに突入して獲得点数が10倍になります。

ぜひ高得点を競い合ってみてください😂

使った技術

  • Vue CLI 3 (Vue.js + Vuex, babel + webpack)
  • GitHub Pages

今回使ってみた技術の目玉は「Vue CLI 3」です。
VueFesで公演を聞いたときから興味があったのですが、実際に一回も使ったことがなかったのでこの機会に触ってみました。

結論から言うと、めっちゃ使いやすかったです。特に「Vue CLI UI」が。
メリットをざっくりとまとめておきます。

  • GUIなのでポチポチするだけでVue.jsの開発環境が整う
  • 各種モジュール(vue-router, vuexをはじめ、npmで公開されているパッケージ等)をポチポチするだけでインストールできる
  • ビルドやリントなどのコマンド群もGUI上で実行できる
  • 日本語対応済み

vuexやvue-routerなんかは途中から追加したいときに、毎回自前でディレクトリやファイル用意するのが面倒くさかったので、数クリックで簡単にインストールできるというのは素晴らしいなあと思いました。

vue.config.js

Vue CLI 3ではwebpack.config.jsなどの設定ファイルがプロジェクトディレクトリ内に生成されないので、vue.config.jsという設定ファイルを自前で用意する必要があります。

今回はGitHub Pagesでホスティングしたかったので、docsディレクトリにビルドしたものを吐き出すようにconfigを変更しました。

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/emojiwars/'
    : '/',
  outputDir: 'docs'
}

baseUrlは環境変数に応じてディレクトリのパスを切り替えるようにしています。
outputDirでビルド後のファイルが吐き出されるディレクトリ名を指定しています。

他の設定項目は公式ドキュメントをご覧ください。
https://cli.vuejs.org/config/

感想

Vue js 幸せ

追記:
クソゲーに需要が生まれました。
全国のFPSプレイヤーの皆様、ご活用ください

クソコードはこちら

https://github.com/kokushin/emojiwars

他に作ったもの

クソからマジメまで、いろんなものを作ってます。
https://yusukeishiguro.com/

Tapbox
Tapboxは「決められた回数タップしないと開かない箱」を簡単に作成することができるサービスです。
https://tapbox.app/#/

makepost
つくったものをシェアできるSNS(リニューアル予定)
https://www.makepost.net/


黒神先生の次回作にご期待下さい!

明日は @watanabe_yu さんのクソアプリです。楽しみ🤪

kokushin
「つくる人がつくり続けられる世界を創る」べく、日々サービスを開発しています。
https://yusukeishiguro.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした