デザイナーが学習歴3ヶ月でミニアプリを開発してみた【React × TypeScript】 #ポエム - Qiita

はじめに

初めまして、UX/UIデザイナーとして活動しているKikoといいます。
デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました!

自分の簡単な自己紹介はこちら👇

3ヶ月でやったこと

ReactとTypeScriptを使ってミニアプリを開発し、最終的には CI/CD の構築まで行いました。
1-2ヶ月目はCSS などの装飾を行わず、React の基本を押さえたシンプルなアプリを作成しました。
そして今回はそのベースをもとに、React Hook Formや React Testing Libraryなどを取り入れながら、実践的な機能を段階的に追加していきました。

1-ezgif.com-video-to-gif-converter.gif

使用言語

バックエンド / DB

テスト

  • Jest
  • React Testing Library

UI / フォームまわり

  • Chakra UI
  • React Hook Form

ビルド / 開発環境

苦戦したこと

TypeScript のtypeやclassといったオブジェクト指向の概念を理解するのに苦労しました。

また、テストを進める段階で設計の甘さに気づきテスト直前で慌ててリファクタリングを行うなど、見直しが多く発生しました。

しかし突然サービスを終了しても依存が少ないUIを提供できるように設計する という開発においてかなり大事なことが早い段階で学べて良かったです。こういった体験はコミュニティに所属する恩恵だと感じました。

スクリーンショット 2025-04-13 19.04.12.png

課題での気づき

この課題を進める中での気づきは初歩的なものであっても、随時記事にまとめていきました。

AIとの向き合い方

今回もがっつりAI(chatGPT4o)を使いました。
React専用のGPTsを作り、キャンバスでラリーをしながらコードを書いていきました。
スクリーンショット 2025-03-06 8.30.40.png

AI補助無しでやるのもありだと思いますが、プログラミング経験のあまりない初学者には現状の自分では辿り着けない概念を使わなければならない場合もあるので、その点においては諸学者がAIを導入することはやはり欠点より利点の方が優ると思いました。とんでもない方向で進めてしまってスタックし、モチベーションが下がることを回避できるからです。

とはいえ何でもかんでもAIに聞くと身にならないので、悩む時間は決めてから(私の場合は15分)取り組みスタックしたらAIへ聞くようにしました。

Next Step

いよいよ次回から個人開発を見越して、自分の作りたいアプリの像を詰めていくことになります。
なので少しずつでも運用前提で設計できるように意識していきます。開発は誰かが使ってくれることがゴールなので、少しずつ練習から本番へとマインドセットwシフトさせていきたいです。

JISOUのメンバー募集中!

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?
興味のある方は、ぜひホームページをのぞいてみてください!



フラッグシティパートナーズ海外不動産投資セミナー 【DMM FX】入金

Source link