卒業制作の構想
正確性を重視したタイピング練習サイト
制作の動機
制作の動機は以下の2つです。
- 正確性を重視したタイピング練習サイトが少ないため
- アプリケーションの拡張性が高く、融通が利くため
1. 正確性を重視したタイピング練習サイトが少ないため
1つ目の動機は、正確性を重視したタイピング練習サイトが少ないためです。
私はタイピング速度を上げるべく、寿司打やe-typingなどのタイピング練習サイトをよく利用しています。
しかし私がよく利用しているタイピング練習サイトは、タイピングミスに対する罰が甘すぎると感じています。
リアルなタイピングの場では、タイピングミスというのは非常に大きな時間のロスとなります。
タイピングミスをした場合、そのミスをした文字をBackspaceキーを押して削除し、また打ち直すという指の動きが必要だからです。
Backspaceキーで文字を削除しようとすると、右手をホームポジションから外さなければならず、非常に大きな時間のロスとなりますし、適切にホームポジションに戻すことができないと、さらなるタイピングミスを誘発することにも繋がります。
Ctrl+HでBackspaceと同じようにカーソルの左側の文字を削除することはできますが、私は小学校低学年からPCを与えられていたため、Backspaceキーを利用することが体に染み付いています。(これから1年間練習してCtrl+Hを体に染みつけ直す予定ではあります。)
そのため、タイピングミスをしながら速く打つよりも、タイピングミスを一切せずに遅く打ったほうが、結果的に速く文章を入力できることが多いです。
このように、リアルでタイピングが必要な場面では、タイピングミスは非常に大きなロスとなります。
にも関わらず、私が普段利用しているタイピング練習サイトでは、タイピングミスに対する罰が甘すぎて、正確性を重視しようとする気になれません。
もちろん、自分自身で「タイピングミスをしたら最初からやり直す」くらいの強い意志を持って練習を行えばよいのですが、ミスをするたびにescキーを押してやり直すのも面倒くさいです。
であれば最初から、タイピングミスをした瞬間に最初からやり直しとなる機能があるような練習サイトで練習したい。
そんなわけで、自分で作ろうと思うようになりました。
2. アプリケーションの拡張性が高く、融通が利くため
2つ目の理由は、タイピング練習サイトは機能の拡張性が高く、融通が利くためです。
このアプリケーションのMVP (Minimum Viable Product)は、こんな感じでしょうか。
タイピングスタート画面：「スタートボタン」が押されたら、タイピング練習画面へ画面遷移
タイピング練習画面：
①ユーザーのタイピング入力を受け付けて、表示されている文字と一致するなら次の文字へ、一致しないなら何かしらペナルティを課す
②1つの文章の最後の文字が正しく入力されたら、次の文章を表示する
③(あらかじめ設定された)最後の文章のタイピングが終了したら、スコアを計算し、結果の画面へ画面遷移
結果の画面：スコアと「スタート画面に戻るボタン」を画面に表示する
今思いつく限りでも、これに追加できそうな機能はたくさんあります。 ※順番は適当です
- キーボードを画面に表示して、入力されたキーを視覚的に表示する機能
- ログイン機能
- スコアランキング
- 苦手な指の分析ができる機能
- 苦手な指だけを練習できる機能
- タイピングを練習する文章をユーザーが作成できる機能
- タイピングミスのペナルティの種類を変更できる機能
- かな・ローマ字非表示機能
などです。
このように、このタイピング練習サイトは機能の拡張性が非常に高いです。
後に機能を拡張することが決まっていると、拡張性を意識したコードを書く必要があります。
これは実際の開発現場では非常に大切なことだと思うので、卒業制作を通じて少しでも体に染みつけたいです。
あと、MVP開発が難しくないので、仮に来年めちゃくちゃ忙しくても、なんとか動くものは作れそうです。
拡張性が高いとそのあたりの融通が効いて良いですね。
使用予定の技術
理想
フロントエンド：Next.js + TypeScript
バックエンド：★Python Flask, Flask-SocketIO, その他 ライブラリ
データベース：SQL(MySQL)
CSS：Tailwind CSS
フロントだけでやろうと思えばできますが、私の内定先の業務上、PythonやSQLなどの超有名主要言語はある程度理解しておく必要があるので、勉強のためにバックエンドもちゃんと書こうと思います。
フロントからDBを直接いじるのはセキュリティ上よくないと聞いたことがあり、実務ではほとんどの場合バックエンドを噛ませるそうなので、より実務に近い形で開発できたらなーと思っています。
Pythonメインで開発する予定なので、フロントは正直なんでもいいのですが、これも勉強のためにNext.jsとTypeScriptを触ってみようと思います。Tailwindも同様です。
とはいえ、私はVueを書いていたのが3年前で、あらゆることを覚えていない上に、現在PythonやSQLはなんとなく文法が分かる程度です。
挫折した場合に備えて、ほぼフロントだけで開発する案も残しておきます。
挫折した場合
フロントエンド：React or Vue
バックエンド：なし
データベース：Firebaseなどの既存のDBサービス or なし
CSS：Sass or Bootstrap
制作にあたってできるだけ意識したいこと(理想の理想)
卒業制作にあたって、意識したいことが以下の3つあります。
- 保守的に開発する
- リーダブルコードを心がける
- GitおよびGitHubをちゃんと使う
1. 保守的に開発する
TypeScriptを使いたいのも、バックエンドを噛ませたいのも、これが理由です。
グローバルで変数を定義しない、グローバルでCSSを当てないとかもですね。
エンジニアの方に、「まあ頑張ったんじゃない」と言われるくらいの保守性(？)を目指したいです。
2. リーダブルコードを心がける
これは当たり前といえば当たり前ですね。
最近はChatGPTが変数名を考えてくれたり、コードの整形をしてくれたりするそうなので、そんなに難しくはなさそうです。
コメントも書いていきたいところ。
3. GitおよびGitHubをちゃんと使う
ブランチとか、GitHub Actionsでのテストとかも利用したいですね。
とくにブランチは、適当に命名してあとで「何やこれ」ってなったり、なんか色々触ってたらmastarブランチを破壊したいりすることがあったのでちゃんとやりたいです。
でもGitもほとんど覚えていないので学習からやり直しです。
git pullを使うな、危険だと言うことくらいしか覚えていないです。
GitHub Actionsでのテストは全くやったことがありませんが、以前インターンをしていたプログラミングスクールの教材サイトでは、PRを送ると、自動的にテストが走ってかっこいいなと思った記憶があります。
余裕があればそのあたりもちゃんと実装したいです。
保守的にやるなら、少しずつブランチを切って少しずつPRを出してーってやらないとですよね。
今は意識が高いのでワクワクしていますが、なんか途中で面倒くさくなってやめそうです。
報告会のときにやってなかったら諦めたんだなと思っておいてください。
まとめ
卒業制作は、実務に近い形で、タイピング練習サイトを作ってみる というお話でした。
