はじめてアプリケーションをつくりました。
作ったもの
SEOやマーケティングで使用される用語の4択クイズゲーム。
お時間がありましたら遊んでみてください！
また、この記事がアプリを作ったことがない方やこれから何か作ってみたい方などの参考になれば嬉しいです。
リポジトリ
作ろうと思ったきっかけ
仕事をしていく中で耳に入った用語などをゲーム感覚で覚えていきたいと思ったのと
Next.js React Typescript Supabaseの基礎的なスキルとアプリケーションを作成における
基本的なフローを学んでみたかったので作ってみようと思いました。
作る上で意識したこと
インプットする時間を少なくしてアウトプットすることを意識しました。
私は座学をするよりも手をどんどん動かして作りながら理解していく方が合っていると感じたので
基礎を学んだらすぐに手を動かしました。
ゲームをするときにチュートリアルやらずに遊びながら学ぶ感じです(笑)
調べても実行できないことは抱え込まずに質問したりしました。
実際にはgithubのDiscussionsなどに英語で状況を記述して解決を行いました。
最も意識したのは 「かたちにすること。作り切ること。」 です。
私のスキルレベル
HtmlとScssとJavascript(Javascriptは調べながら機能を実装できるレベル）
使った技術
- Next.js
- React
- Typescript
- Supabase
- Vercel
完成までの流れ
- 必要なプログラミングの基礎学習
- 要件定義
- 設計
- 開発
上記の流れで作っていきました。
必要なプログラミングの基礎学習
まず、javascriptについては基礎文法の知識はあったのでReactの学習から始めました。
下記の講座がわかりやすく感じました。
「モダンJavaScriptの基礎から始める挫折しないためのReact入門」
Reactを使う上で最低限理解しているべきJavascriptを復習してから
学習できる仕組みでしたのでとても良かったです！
「Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版」 Reactの基礎を学んだ後に実際にTypescript導入して、手を動かしながら模擬サイトを作っていくものでしたので作成における流れを学ぶことができました。
Typescriptについては下記の動画を見ながら少しずつ記述しながら触れていきました。
「最速で学ぶTypeScript」
Supabaseについては下記の記事を参考に触れていきました。 データベースについては下記の動画がとってもわかりやすかったです！
要件定義
要件定義についてはNotionを使って箇条書きにしてまとめていきました。
設計
ER図、フローチャートを初めてツールを使いながら作成をしていきました。
※一部作りながら仕様を変えたので異なるフローがあります。
下記のツールが何もわからない私でも使いやすかったです。
デザイン
デザインについてはfigumaを使って簡単に作成を行いました。
作成を進める上で作ったデザインと最終的なデザインが変わりましたが
予め作っておいたことで作成がしやすかったです。
感想
今まで一からアプリケーションを自分で考えて作ったことがなかったので、自分で学習して試行錯誤して作り切れるという実績になったのでよかったのと
平日は30分~60分、休日は60分~120分ほど時間をとって作業を行うようにできたので
毎日帰宅後も何かしら作業をするという習慣を身につけれられたのは良かったことだと感じます。
反省
- 制作期間のおしりを決めなかったこと。
- クイズの機能自体は2ヶ半月ほどでできていたのですが、機能改善など色々行なった結果
3ヶ月ほどかかってしまったこと。 - Typescriptをちゃんとかけていないこと。lintの警告で正しい型定義をする際に
どうしても警告を消せない時があったときにanyに逃げてし待ったこと。
課題
初回だけスタートするまでに時間がかかってしまう。
ブラウザで開かないと正しい動作がしないこと。
今後
今回作ったアプリはまだまだ改良の余地がたくさんあるので、ブラッシュアップをしていくのと
Next React TypeScriptをもっと使えるようになりたいと感じたので
個人サイトもこれらを使って作成をしていき、今回うまく使えなかったTypescriptについての
理解も深めていきたいです。
最後まで読んでいただきありがとうございました✨
Discussion