作ったもの
エンジニアが(特に記号系の)タッチタイピング練習に集中して取り組むことができるアプリがあったらいいな〜というモチベーションで作ってみました。(私がrubyネイティブなので、rubyのタイピング練習だけ実装してます)
なぜタイピングゲームがちょうどいいのか
1)数日でできるちょうど良さ
タイピングゲームのコア機能は、ごくごく単純な機能群から成り立っています。
- タイプした文字と画面に出ている文字が正しいか判定する機能
- 文章を入力し終わったら、次の文章を表示させる機能
- 入力文字数やミスった文字など、スコア関連の情報を保持し、終了時に結果を表示させる機能
- タイマー機能
- ゲームの流れ(開始前、ゲーム中、リザルト)を管理する機能
そして、これらを実現するのに必要なstateは全部でたかだか5,6個。このコア機能に絞ったことで、仕事終わりの時間を使って4日でリリースすることができました。(うち1日半くらいUIデザイン凝ってました^^;)
「アプリを作ろう!!」と意気込んでみたはいいものの、完成に至らずゴミ箱と化しているリポジトリに心当たりはありますか? 私はあります。
そして、そんなゴミを見るたびに完成させられなかった自分に対する若干の失望を感じ、「あまり実にならなかったなぁ」というもやもやがだけ残る...。
せっかく意欲的に勉強しているのに、こうでは勿体無いですよね。
逆に、短期間でサクッと完成させることができれば「動くプロダクトを作れた」という大きな達成感が得られますし、次に何を勉強するのかの計画も立てやすい。
そこで、今回はサクッと作ることを最優先にし、タイピングゲームをお題に個人開発を行いましたが、MVP(Minimum Viable Product)というのは個人開発においてもモチベーション面で大いに効果を発揮することを学びました。
つい要件をモリモリ足してしまって結局完成しないことが多い...という方は、グッとこらえてMVPリリースを目指してみると、気持ち良い個人開発体験ができるんじゃないかと思います^^
2)フロントエンドだけで完結するちょうど良さ
コア機能だけのタイピングゲームにバックエンドは必要ないので、コンポーネント化、hooksやjsx、css moduleなど、Reactの主要な機能だけに集中して学習することができます。
階層構造の設計やpropsの受け渡しなど、ごくごく基本的なところに脳みそを使ってもがき苦しむことができます。これを一足とびにバックエンドまで手を伸ばしてしまうと、結構キツいんじゃないかなと思います。まずは一歩一歩、自分が理解して使いこなせる道具を増やしていくのが大事ですね。
3)ぽつぽつ課題が出てくるちょうど良さ
私個人は、今回の個人開発で主に設計部分に課題意識というか、もやもや感が出てきました。
- cssって結局どうやって管理するのがいいんだろう...css moduleはグローバル汚染が起こらなくていいけど、さすがにcssファイル多すぎてめんどくさくなってきたな...
- state操作のための関数を孫までpropsで渡すの分かりづらくね...? まだ単純だからいいけど、複雑な構造になってきたとき「どこのstateいじってんねん!」ってなりそう...
- これまでオブジェクト指向プログラミングばかりやってきたけれど、そもそも関数型プログラミングっていうパラダイム自体よくわかってないな...
などなど。。。次に勉強するネタがほどよく集まって、そのまま新しい機能を追加するのか、課題を解消するための勉強をするのか、色々選択肢が見えてきたのがちょうどいいですね。
短期間でサクッと作るので、PDCAサイクルが速く、すぐに次のアクションを計画できるのがよいです。
ただ、全員におすすめできるわけではない...
Reactを実際に触ってみて、結構ハードルの高さを感じました。個人の技術力によっては、シンプルなタイピングゲームでも重たい可能性があります。
javascriptの基礎知識は必須
よく初学者がReactに手を出すなと言われていますが、私も同感で、jqueryで手続き的にDOMを操作するコードを書いたことがある程度のレベルではReactは早すぎる気がします。
『独習 JavaScript』くらいの内容は頭に入れておかないと、Reactの良さやシンプルさに感動できず、ただただハードモード版javascriptに感じてしまう可能性があるので、基礎に不安を感じる人にはReactのタイピングゲーム開発をおすすめはできないです。
いきなり触る前にオンライン講座をやっておくのが吉
jsライブラリに触れるのが初めてなのであればなおのこと、事前に基本的な機能の学習をしておくと良いです。慣れている人だとドキュメントを読んで「ふ〜ん」となった次の瞬間から実装できると思いますが、そうでないのならマストで基本の勉強はやっておくべきでしょう。
私は以下の2つのオンライン講座で勉強しました。
1)react本家のチュートリアル(日本語版もあります)
https://react.dev/learn
2)codecademyのreactコース(無料)
https://www.codecademy.com/enrolled/courses/react-101
1については、クラス記法で記述されているため若干の古さを感じます。functional componentが基本になってきているので...。[編集]いつのまにかfunctional componentで書き直されていました。なので、チュートリアルとしては良さげです。
2については、英語ではありますが非常に分かりやすく良いコースでした。まあ英語でなくてもゴロゴロ無料の講座は転がっているので無理にやる必要は全く無いです。
あとは、next.jsを使ってvercelにサクッと(無料で!!)デプロイするために、next.jsの公式ドキュメントをさらーっと流し読みしています。
まとめ
- 学習のための個人開発はサクッとできるものを作るのが正義
- 達成感が得られるし、次の学習プランも立てやすい
- 事前学習はやったほうが無難
以上、勉強熱心なあなたの参考になれば幸いです; )