Angularで同じ絵文字をクリックするだけのクソゲーを作りました

この記事は [Angular Advent Calendar 2018](https://qiita.com/advent-calendar/2018/angular) の 9 日目の記事です。
[クソアプリ Advent Calendar](https://qiita.com/advent-calendar/2018/kuso-app)でやってくれとツッコミの入りそうなネタですが、Angular関連なのでこちらで書かせてもらいます。

# 作ったもの

Firebase Hostingにデプロイしてあるので、「 [same-emoji](https://same-emoji.firebaseapp.com/ja/start) 」から遊べます。
(PCのブラウザから遊ぶ際はビューポートをSPサイズにすることを推奨です...)

![タイトルなし.gif](https://qiita-image-store.s3.amazonaws.com/0/79414/d4f5c5fc-f4b3-4240-b973-7c61c2b9ecaf.gif)


2つ1組でランダムに表示される絵文字をタップして消し続け、タイムを競うという単純なゲーム(クソゲー)です。
画面構成もシンプルで、次の画面で構成されています。

- スタート画面
- レベル選択画面
- ゲームプレイ画面
- ゲーム結果画面

リポジトリ
https://github.com/daikiojm/same-emoji

# モチベーション

[Angular MokuMoku Night](https://ngjapan.connpass.com/event/88672/)というイベントがあり、これに参加した際に 「そうだ！ クソゲーを作ろう」 と思い立ったのがきっかけ。 
このイベントは[Angular日本ユーザー会](https://ngjapan.connpass.com/)が主催するイベントで、自分が参加したのは初回の1回のみでしたが、現在も定期的に開催されており、ただもくもくするだけではなく、メンター枠で参加されている方に直接質問できる場もあり、かなり有意義なイベントだと思います。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">お疲れ様でしたー、今日はこんな感じのクソゲーを作ってた。<br>そのうちリポ公開する。 <a href="https://twitter.com/hashtag/AngularMokuMoku?src=hash&amp;ref_src=twsrc%5Etfw">#AngularMokuMoku</a> <a href="https://t.co/pXjkQxZCgP">pic.twitter.com/pXjkQxZCgP</a></p>&mdash; Daiki (@daikiojm) <a href="https://twitter.com/daikiojm/status/1016304457280176128?ref_src=twsrc%5Etfw">2018年7月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


また、冒頭でも話題に挙げた[クソアプリ Advent Calendar](https://qiita.com/advent-calendar/2018/kuso-app)の [Vue.jsで絵文字をクリックするだけのクソゲーを作りました](https://qiita.com/kokushin/items/54894b6ff9a4b24c0855)という記事で紹介されているアプリがおもしろかったので、自分が作ったemoji系クソアプリもこのタイミングで紹介しておきたいと思ってこの記事を書いています。

# 技術面

とくに難しいことはやっていないのですが、はじめての試みがいくつあったので参考リンクと共に紹介します。

## 構成

- Angular (v7) + Angular Material (v7)
    - 現時点での最新版で開発
- Firebase Hosting
    - Firebase CLI(firebase-tools)を使ってデプロイのセットアップ

## Angular CLI & Angular Material

Angular CLIはいくつかのオプションを選択していくだけでアプリケーションの雛形が作成できるので、こういったぱっと出のアイデアを形にする際にも非常に有効だと思います。
Angularでのクソゲー開発にも欠かせないツールです。
こちらも、Angular CLIで簡単にセットアップすることができ、ユーザビリティの高いクソゲーUIを実現できるので、Angularでのクソゲー開発にも欠かせません。

## i18n

これは完全試してみたかっただけです。 [Angular公式のi18n機能](https://angular.io/guide/i18n)を使ってリソースファイルを作成し、ゲームのトップページからベースパスの切り替えによって日本語/英語の切り替えができるように実装しています。
リソースファイルの作成は、Angular CLIで提供されている次のコマンドで行なえます。

```bash
$ ng xi18n --i18n-format=xlf --out-file locale/messages.ja.xlf
```

クソアプリ開発の副産物として、Angularのi18nに関して次のような知見を得ることができました。

- [i18n対応Angularアプリケーションの開発環境](https://qiita.com/daikiojm/items/c7aebeae30c86d48d0c8)
- [i18n対応AngularアプリケーションをFirebase Hostingで公開するときの設定](https://qiita.com/daikiojm/items/b69643779c1b07fc26e2)
- [ngx-translateを使うときのTips](https://qiita.com/daikiojm/items/def764b12c8ff2ebbc92)


## Router Transiton

ゲームっぽさを出すために、ページ遷移時にアニメーションを入れています。
routerに `metadata` を設定して、ページ種類ごとにアニメーションを制御しています。

**参考**

- [Angular — Supercharge your Router transitions using animations](https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8)

## jest

かなりざっくりとですが、部分的にjestでテストを書いてました。
このアプリを作り始めた頃、早いと噂だったので、Angularでも使ってみたかった。

設定に関しては、 [jest-preset-angular](https://github.com/thymikee/jest-preset-angular)に従っておけば間違いなと思っています。
Angular CLIの設定との兼ね合いで `ng new`した際に作成される karma/jasminのconfigたちは基本いじらないでおいておくのが良さそう。将来的にはkarama/jasminへの依存も断ち切りたいところです。

**参考**

各種Angularコンポーネント(router, service, guard, pipe, component)のテスト方法に関しては次の記事が参考になりました。

- [Overview • Unit Testing • Angular 5](https://codecraft.tv/courses/angular/unit-testing/overview/)


# 振り返り

ぱっと出のアイデアを継続して少しずつ開発していくすスタイルは続かないということを学びました。
この教訓は、今後のクソアプリ開発に活かそうと思います...。

実案件で使う事になりそうな機能の検証や、Angularの新バージョンへのアップデートの検証などを行いたいときに、新たにプロジェクトを作るのではなく自分で構築して定期的にメンテナンスしているプロジェクトが手元にあるという状況は有用だという印象があり、そういった点はよかったと思っています。

ぜひ皆さんも、Angularのキャッチアップのためにクソアプリを作ってみてはいかがでしょうか。
来年は、有益な情報を発信しつつもクソアプリの開発に専念できればいいなぁと思っています。

明日は @tatsuya-takahashi さんです。