学習記録アプリ開発最終話 ~ React学習開始から20日目 ~

はじめに

どうもこんにちは！僕は現在1ヵ月本気の技術力向上を目指している現役高校生1年生、
@shuniiです！
僕はJISOUというコミュニティでReact学習をしているのですが、参加してから20日目で学習記録アプリを完成させることができたので共有したいと思います！やはり一つのものを完成させると達成感が段違いですね

前回も学習記録アプリを作りました！

前回のアプリと何が違うの？

前回の記事で紹介した学習記録アプリとの相違点をご紹介したいと思います。

• 機能
  • 編集ができるようになった
• 使用言語
  • javascriptからtypescriptに変更
• 使用技術
  • react-hook-formを導入
  • ChakraUIを導入
• UI
  • ChakraUIでUIが超いい感じになった

画面はこんな感じです

なぜオレンジフルーツかは突っ込まないでください！勘です笑

機能アップデート！

編集機能も追加されました！
確かに編集機能ないってわりと致命的だった。リセットボタンも追加したので編集をまちがえてもまた元に戻せます！！

TypeScript使ってみて

感想の流れ

1. ん～～～、よくわかんないや
2. 補完効く！らく～
3. やっぱちょっとめんどくさい
4. 慣れたら指摘してくれてうれしい( ？w )

JavaScriptからTypeScriptに移行してみて、はじめの方はめんどくさいなと思ってたんですけど、型定義できてコード書いてる時点でエラー出てくれるのはうれしいなと思いました。typescriptに移行するといい！！みたいな記事感想をよく見ますが、やはり最初はめんどくさいと思います。まだ便利～の境地にはいってないですかね。チーム開発だとより恩恵を感じそうです。

React Hook Formを導入してみて

https://react-hook-form.com/
うん、紹介する必要もないくらい便利。
フォームを実装するならぜひ導入を検討してみてください。useState書かなくていいし、onChangeとかいちいち設定しなくてもいい。楽です。

ChakraUIの威力

ChakraUIはめちゃくちゃ最高です。自分好みなモダンなデザインをすぐに適用することが出来ます。figmaで作ったデザインをChakraUIに変換できるっぽいことも耳にしました。学習コスト低いのでおすすめです。
しかし、結局どのcssライブラリ使うにせよ、ある程度のcss基礎知識は必要だということを感じました。そこまで自分はcss力ないのでそこ周辺もまた勉強したいとこ。

最速でアプリリリースしたいなら、ChakraUIとかでパパっと作ってしまうのはありだと思いました。

githubのリポジトリがいい感じになった

og:imageの設定もしてニヤニヤしてます笑、og:imageの設定はリポジトリの
setting >> General >> Social previewでできると思います！
画像はLeonardo.aiっていうのでしました！無料のトークン数めちゃおおいので気軽に画像生成できます。

リポジトリをおしゃれにしたい人必見！！JISOUでコーチングをしてくれている方の記事です！

感想

学習記録アプリという一つのアプリを作ってみて個人開発というものを学べたと思います。supabaseを使ったりしたのでフロントの部分しか開発はしていないのですが、テストやパイプラインの構築など今まで触れてこなかったところを勉強できたのはよかったと思います。
そして開発を進めていく中で、少しずつ自分の調べる力が上がってきました。調べればすぐわかる、という状況が作り出せたらすごく楽しくなってくると思います(ジュニアレベル??)。そこまで基礎力をつけてきましょう！
別の分野でプログラミング挫折した人はぜひフロントおすすめです！

終わりに

最近すごく開発・プログラミングしてるのがすごく楽しいです！プログラミングを同じように楽しんでいる方々とより多く関わりたいです！
いいね、コメント大歓迎です！X(Twitter)もよければフォローしてください～

About Me

• X(Twitter)

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
気になる方はぜひHPからライン登録お願いします！
https://projisou.jp