unstoppa61e / goro-goro-panda Goto Github PK

機能の説明

• bundle exec rspecでテストが走る
• GitHub Actions でテストが走る

何故この機能が必要なのか

安定した開発のため

タスクリスト

• RSpecをGemfileに追加
• RSpec用の設定を追加
• Rubocop の対象から RSpec のファイルが除外されるようにする
• GitHub Actions に設定を追加
• テストを１つ作成
  • ステージ選択画面からの遷移のテスト

機能の説明

I18n により、英語表示を可能にする。

何故この機能が必要なのか

例えば、本アプリは、日本語を学習中の英語話者などにとっても役立つかもしれない。
そのような方々へも利用を容易にしたい。

• リリース用のものを別に用意する予定。
• ひとまず仮のものとして、ロゴのパンダを使う。

機能の説明

• ステージ選択画面の、各ステージパネルが表示されている状態にする
  • ステージ１以外はロックされている状態にしておく

サブタスク

• タイルのコンポーネント作成
  • 画像ファイルの移動（Rails → Next）
• パネルのコンポーネント作成

機能の説明

slim で記述できるように設定する

何故この機能が必要なのか

• 簡素に書けるため
• 現場でもよく使われる技術であるので、使用に慣れたいため

機能の説明

• 自前で数字ボタンを 0 - 9 の 10 種類用意し、それをタップすることで数字を入力するようにする
  • これまでの input 要素を用いたキー入力は取り除く

何故この機能が必要なのか

これまでは、見えない input 要素を設け、ボタンのタップ時にそこにフォーカスさせることで、スマホのビルトインのキーボードを表示させ、そこからの入力を受け取っていた。
しかし、それでは以下のような問題があることが判明した。

• 各数字キーが小さいため、誤入力しやすい（特に小さい子ども）
• 数字以外の入力機能は不要なのに、余計なキーの情報が目に入ってくるため、没頭感を阻害しやすい

これらの問題を解決したい。

機能の説明

Next で開発を進めていくための、最低限の環境を構築する

何故この機能が必要なのか

• 当初の技術選定が適切でなかったため
  • Rails + Vue
    • 当時は早く完成させたかったので、使い慣れているというだけで選んだ
• 処理を高速化するため
• 構成をシンプルにするため

サブタスク

• GitHub Actions のリセット

何故この機能が必要なのか

今後、大量の Issue を作成していくことになるので、手間の削減のため

概要

ローカルでは問題なく表示されるのに、デプロイ先ではcssが動いていない状態で表示されてしまう

備考

• #66 の issue が解決されてから取り組む
  • デプロイ先で実際に設定が反映されていることを確かめたいため
• next-seo というプラグインを利用する予定

機能の説明

slimのlinterを導入する

何故この機能が必要なのか

コードをクリーンに保つため

機能の説明

• ステージプレイでの各種操作が実行できるようにする。
  • ボタンのクリックやキーのタイプを受け取って、ゲームが進行するようにする

サブタスク

• 覚えるターゲットのコンビネーションが、１回前のものと同じにならないようにする

機能の説明

クリックによって/stages/1といった URL に飛べるようにする

何故この機能が必要なのか

常にコードをきれいに保つため

機能の説明

main ブランチの状態がデプロイ先に常に反映されている状態にしたい

何故この機能が必要なのか

Next に置き換える前、Rails で Heroku での自動デプロイを行っていたが、ローカルでは気付けない問題点に気付けて逐次修正することができ、とても良かった。
Next での開発でも継続したい。

機能の説明

husky と lint-staged を利用することで、コミット直前に eslint と prettier が実行されるようにする

何故この機能が必要なのか

• コードをクリーンに保つため
• コードをクリーンに書こうという意識を保つため

機能の説明

PR作成時、以下のテンプレートが与えられるようにする。

closes #

## 概要

---

PR提出前のチェックリスト：
- [ ] 関連するコミットをsquashした
- [ ] テストを作成した

何故この機能が必要なのか

• PR作成時の手間を削減するため
• PRが不完全な状態でmainにマージしてしまうことを防ぐため

何故この機能が必要なのか

• コードをきれいに保つため
• 整形の手間を省くため

機能の説明

Vue でも slim のような記法で書けるようになる

何故この機能が必要なのか

• 負担を減らすため
• 業務でも使われる技術に慣れるため

スクリーンショット

関連 Issue

• #67

何故この機能が必要なのか

コードをきれいに保つため

機能の説明

本ゲームでは、解放されたタイミングが最新のステージをクリアした場合、次のステージが解放される。
この「どのステージまでがクリア済みか」という情報の管理をローカルストレージで行いたい。

何故この機能が必要なのか

最初から全ステージが解放された状態では、手を付けられることが多すぎて、やる気の阻喪を招くだろうと考える。
そのために、ステージのロック制をとっている。
本ゲームではログイン機能を組み込まない予定である（メインのユーザーとして想定している層は小学校高学年の子どもであるため）ので、この管理はローカルストレージにて実装するのが適切だと考える。

サブタスク

• 各ステージのタイルの背景色が、ステージカラーに応じたものになるようにする
• モーダルから「次のステージへ」を選択した際、ちゃんと開始されるようにする

機能の説明

URL のルートにアクセスすると、home#indexのアクション先が表示されるようにする

何故この機能が必要なのか

デプロイ先にて見た目や機能を確認しながら開発をしていきたいので、まずはデプロイが正常に動いていることを確認したいから

• gorogoropanda.com
• デプロイを早めに行う。その時に取得

機能の説明

スマホでのステージのプレイ時、入力モードに移る際に表示されるキーボードのモードが数字モードになるようにする。

何故この機能が必要なのか

現状では、入力モードに移るたび、入力モードを数字モードに変更する手間が発生しているため

• 数字の入力をさせる
  • PC から
  • スマホから

再現手順

1. ステージ選択画面にて、ステージをクリック
2. 画面が描写されない
   • リロードすると描写される

関連 PR

• #49

機能の説明

• Vue.js を導入する
• rootに"Hello Vue!"を表示させる

何故この機能が必要なのか

コンポーネントを利用したりすることにより、開発を効率的にするため

備考

rails newした際に--webpack=vueで導入したつもりだったが、実際には導入されていなかった

• 各イラストに対する日本語を表示させた方が良いかを検討
  • 表示させるとすれば、一語の回答をする時のみ、などが良いかもしれない

機能の説明

rubocop関連のgemを導入する

何故この機能が必要なのか

コードをクリーンな状態に維持するため

機能の説明

• Jest の導入
• push 前に自動で走るようにする
  • husky を利用

何故この機能が必要なのか

機能不全を抱えたままで開発が進んでしまわないようにするため

機能の説明

プルリクは Jest によるチェックを通らないとマージされないようにする

何故この機能が必要なのか

コードを実行可能な状態に保ちながら開発を進めた方が、手戻りの可能性が減り、安全性が高まるように思うため

機能の説明

bin/linterコマンドを打ち込めば、rubocopとslim-lintを実行してくれる

何故この機能が必要なのか

分けて行う手数を削減したいため

• 現在設定しているロゴは、仮のものになる予定

• 大雑把なものにする
  • 細かい必要性は、実装してみないと見えてこないように思うため