学習目的で「ポケモンの名前を使ったしりとり」ゲームをつくってみた

## はじめに

Ruby on Railsの学習するために**[「ポケモンの名前を使ったしりとり」](http://www.pokemon-shiritori.com/)**をつくってみました！

本記事では、実際にやってみて感じた**学習目的で個人開発を行うことのメリット・デメリット、そして個人開発学習のモチベーションを維持するコツ**について書いてみました。

文字ばかりで恐縮ですが、プログラミング初学者の方や個人開発に興味のある方はぜひ読んでみてください。

ちなみに私は現在、Javaプログラマとして勤務しています。RubyやRailsの実務経験はありません。

## 何をつくったか

ポケモンの名前を使ったしりとりで、CPUと対戦することができるWebアプリケーションです。

<img width="600" alt="スクリーンショット 2019-07-11 22.48.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214962/31fadf2e-e188-1537-c7d4-b0fa9776413a.png">

**[ポケモンしりとり - 無料で遊べる「ポケモンの名前を使ったしりとり」](http://www.pokemon-shiritori.com/)**
※herokuのフリープランを使っているので、開くのに時間がかかる場合があります m(__)m

CPUはしりとりが成立するポケモンの中からランダムで選び回答します。CPUは機械なので、CPUに勝つにはしりとりが成立するポケモンがいなくなるまでしりとりを続ける必要あります。

![pokemon-shiritori.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214962/79caa3a6-b8a4-9b75-ef9d-6fcb8f74c360.gif)

現在は単純にしりとりが続いた回数がスコアになりますが、今後、早く回答するほどスコアが高くなるようにしたいと思っています。ランキング機能も実装する予定です。

<img width="600px" alt="スクリーンショット 2019-07-11 22.59.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214962/06342e24-7057-8476-14ae-24ed5cc55c74.png">

## 開発環境・使用技術など

- MacBookPro2018（MacOS Mojave 10.14.4）
- VisualStadioCode
- Ruby 2.6.3
- Ruby on Rails 5.2.3
- RSpec 3.8.2
- Vue.js
- Heroku

## なぜつくったか

- RubyとRailsの学習のため
- テストコードを書く経験を積むため
- Git（GitHub）を使う経験を積むため
- ゼロからつくるアプリ開発を経験するため
- 公式のポケモンしりとりをやったことがなかったので、やってみたかった

一言で言うと**「学習のため」**です。

今後はRailsアプリケーションの開発に携わりたいと考えているのですが、いまの私にはRubyやRailsの業務経験がありません。

これまで書籍やウェブで学習はしていましたが、**「知っている」のと「つくることができる」のでは圧倒的な違い**があります。「つくる」ことで自分のスキルを裏づけ・確認ができますし、つくりたいものをつくる方が単に勉強するよりも捗ります。

テストコードを書いたりGitでソース管理をする業務経験もなく（SVNはあるけど）、今後はそれらを活用している環境で働きたいと思っているので、RSpecやGitも活用しながら開発をしてみました。

## 「個人開発学習」のメリット・デメリット

### メリット

**ゼロからつくる経験を積める**

RailsチュートリアルやProgateのように、道筋を与えられて開発するのに比べると、ゼロからの開発では何度も壁にぶち当たります。

どうやって実装するか、どうやってバグを修正するか......。すべて自分で考え問題解決する必要があります。当然、その分難易度は高くなります。

しかし壁に当たれば当たるほど自分のスキルも上がります。悩んで解決したことは、記憶に定着しやすく、自力で解決すると自信にもなります。

**目的があるから中だるみしづらい**

未経験の技術について書籍などで机上学習するのは（手を動かすことに比べると）集中力が続きにくいという人は多いのではないでしょうか。

個人開発では自分がつくりたいものをつくるという目的があるので、**勉強のモチベーションが続きやすい**ように思います。というか、徐々につくるのが楽しくて勉強しているという感覚がなくなってきます。

「このアプリをつくってみんなに遊んでもらうんだ～！」というモチベーションが続く限り、勉強を続けられます。

......ただ逆に言えばアプリ開発のモチベーションが途切れてしまうと勉強しなくなってしまいます。その点については次の項「デメリット」にて。

### デメリット

**レビューしてもらえない**

とりあえず動いてはいるけど、自分が書いたコードを見て「なんかイケてないな～。もっと良い書き方があるんじゃないかなあ」と思うことが何度もありました。

しかし個人開発ですので、コードレビューしてくれる人はいません。これが「個人開発学習」の最も大きなデメリットだと思います。

とはいえ私の環境ではレビューをお願いできる人がいなかっただけで「個人開発 = コードレビューが不可能」ではありません。近くにコードレビューをしてくれるメンタ―がいるのであれば積極的にお願いすると良いと思います。

**モチベーションの維持が難しい**

個人開発界隈でよく話題になるのが「モチベーションの維持の難しさ」です。良くも悪くも、個人開発は自由なので強制力がありません。

「こんなもの作って何になるのか」「誰にも使われないんじゃないか」そんなことが頭をよぎり、開発モチベーションが低下し、いつの間にかプログラミングの学習自体辞めてしまった......なんてことも。

ですが幸運なことに「ポケモンしりとり」の開発においては、モチベーションは下がることなくつくりきることができました。この点の学びについては、次項で紹介します。

## 「個人開発学習」のモチベーションを維持するコツ

### あくまで目的は「学ぶこと」！

先にも述べましたが個人開発をしていると「こんなもの作って何になるのか」「誰にも使われないんじゃないか」と思ってしまうことがあります。

せっかくつくったのに使われないのは悲しいですが、今回の目的はWebサービスで一発当てることではなく「学習」です。

一番大切なことは学ぶことなので、**「最悪使われなくても構わない（使ってもらえたらいいな...）」くらいの気持ちで**取り組みましょう。

### 「つくれそう」なものをつくる！

個人開発を挫折してしまうもう一つの要因は、「壮大なアプリケーションをつくろうとしてしまう」です。壁に当たるほどスキルが上がると言いましたが、自分のスキルをあまりにも超えたアプリをつくろうとすると壁が厚過ぎてゴールにたどり着く前に力尽きます。。。

アイデアを思いついたら、**「今の自分につくれそうか」を考えてみてください。**

ちなみに「ポケモンしりとり」の主要機能は「自分の回答に対して、しりとりが成立するポケモンをランダムに選んで表示する。その際、勝敗判定を行う」、だけなので、これならRails初学者の自分でもつくれそうだなーと思いました。

**「アイデアはあるけどつくれるか判断できないよ！」という人は、個人開発の前にプログラミング問題に取り組んでみるのがおすすめ**です。1つ1つの問題は小規模で時間もそれほどかかりません。

問題を解くことで「自分にできること」が増えていくので、個人開発のアイデア出し＆「自分につくれそうか」の判断に役に立ちます。

[ブログでプログラミング問題に取り組んだ際のことを記事](https://blog.tatehitolog.com/entry/2019/06/07/120000)にしているので、良かったら読んでみてください。

**[SonicGarden伊藤さんのブログを読んで、Rubyのプログラミング問題に取り組んでみた](https://blog.tatehitolog.com/entry/2019/06/07/120000)**

### MVP（Minimum Viable Product）に絞る！

MVP（Minimum Viable Product）とは、**「必要最低限の機能」**のことです。先に述べた「つくれそうなものをつくる」と若干重なりますが、モチベーションの維持のためにも、**あれやこれやと機能を実装しないほうが良いと思います。**

たとえば「ポケモンしりとり」では「ランキング機能」や、「しりとり結果をツイッターでシェアする機能」などの構想もしましたが、初回リリースでは実装しませんでした。今後実装予定（たぶん）

デザインの調整も非優先事項としました。今でこそ、それっぽいデザインになっていますが、主要機能を実装した時点ではこんな感じでした。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Rails + Vue.jsでポケモンしりとりをつくってみました。デザイン整えたら公開する予定です。CPU強い。<a href="https://twitter.com/hashtag/%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#ポケモン</a> <a href="https://twitter.com/hashtag/Rails?src=hash&amp;ref_src=twsrc%5Etfw">#Rails</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://t.co/EIe9U59Ewu">pic.twitter.com/EIe9U59Ewu</a></p>&mdash; たてひと| ポケモンしりとり開発中 (@khattori89) <a href="https://twitter.com/khattori89/status/1137685557771767808?ref_src=twsrc%5Etfw">2019年6月9日</a></blockquote>

まずは主要機能だけつくって「使える」ところまで持っていきましょう。開発途中で追加機能のアイデアが浮かんでも、抑えて抑えて......。

### デプロイは早めに！

「ポケモンしりとり」はheroku上で動作しています。

開発を終えてから初めてherokuにデプロイを試みたのですが、ここで[RubyGemsのバグ](https://qiita.com/haru52/items/c2e062f6e1c7d4ecfe49)によりデプロイができず、解決するのに2日もかかってしまいました。

**デプロイでつまづくと結構萎えるので、デプロイは早めにやっておきましょう。根本的な変更（Rubyバージョンの変更など）が後から必要になってしまう場合もあります。**

ちなみに私は「先にデプロイしちゃったら開発途中の状態を誰かに見られるかも......」という余計な心配をしていたのですが、大丈夫です。URLを公開しない限り見られる可能性は限りなく低いです。

万が一見られたとしても、学習目的の開発なので問題無いはずですしね。

## まとめ

- 未経験言語の学習の手段として、個人開発は良いぞ
- 開発期間1か月くらいの「つくれそう」な小規模アプリケーションにすること
- 必要最低限の機能に絞ること
- デプロイは早めにやっておくこと

記事中で「最悪使われなくても構わない（使ってもらえたらいいな...）」と発言しましたが、やっぱり使ってもらえるとすごくうれしいです。

ぜひ遊んでみてください！

**[ポケモンしりとり - 無料で遊べる「ポケモンの名前を使ったしりとり」](http://www.pokemon-shiritori.com/)**

P.S. CPUはめちゃくちゃ強いですが[「五十音順のポケモン一覧」](https://ja.wikipedia.org/wiki/%E4%BA%94%E5%8D%81%E9%9F%B3%E9%A0%86%E3%81%AE%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3%E4%B8%80%E8%A6%A7)をフル活用すれば勝てますよ......

## 参考：開発に役立った書籍・記事など

- [プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ) ](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%99%E4%BA%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AERuby%E5%85%A5%E9%96%80-%E8%A8%80%E8%AA%9E%E4%BB%95%E6%A7%98%E3%81%8B%E3%82%89%E3%83%86%E3%82%B9%E3%83%88%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA%E3%83%BB%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E6%8A%80%E6%B3%95%E3%81%BE%E3%81%A7-Software-Design-plus%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA/dp/4774193976/ref=as_li_ss_tl?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E3%83%81%E3%82%A7%E3%83%AA%E3%83%BC%E6%9C%AC&qid=1562727804&s=books&sr=1-1&linkCode=ll1&tag=asobitaiblog-22&linkId=4be0dffe055c2f7b8a29fac3f6fecf31&language=ja_JP)

- [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)

- [Gitが、おもしろいほどわかる基本の使い方33 改訂新版](https://www.amazon.co.jp/Git%E3%81%8C%E3%80%81%E3%81%8A%E3%82%82%E3%81%97%E3%82%8D%E3%81%84%E3%81%BB%E3%81%A9%E3%82%8F%E3%81%8B%E3%82%8B%E5%9F%BA%E6%9C%AC%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B933-%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88%E3%80%88%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%80%81GUI%E3%80%81Sourcetree%E3%80%81Bitbucket%E3%80%89-%E5%A4%A7%E4%B8%B2-%E8%82%87/dp/4844368680/ref=as_li_ss_tl?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=Git&qid=1562731871&s=books&sr=1-4&linkCode=ll1&tag=asobitaiblog-22&linkId=67cdc558f391110c924228f06220ab8e&language=ja_JP)

- [プログラミング言語 Ruby リファレンスマニュアル](https://docs.ruby-lang.org/ja/)

- [Vue.js 公式ガイド](https://jp.vuejs.org/v2/guide/)

- [Bootstrap 公式ドキュメント](https://getbootstrap.com/docs/4.3/getting-started/introduction/)

- [使えるRSpec入門・その2「使用頻度の高いマッチャを使いこなす」](https://qiita.com/jnchito/items/2e79a1abe7cd8214caa5)

- [使えるRSpec入門・その4「どんなブラウザ操作も自由自在！逆引きCapybara大辞典」](https://qiita.com/jnchito/items/607f956263c38a5fec24)