1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Reactを使用して初心者から基本的なアプリを作成できるようになるまでのまとめ

Posted at

React初心者の状態から、一通りwebアプリの開発を完了したので、全体的な所感を書きます。

完成したアプリ

image.png

image.png

使用技術

  • React
  • Jest
  • Chakra UI Ver 2.x
  • Firebase
  • Supabase

全体を通して詰まったところ

UI作成時

Ui作成時、当初はChakra UIのVer 3を使用していた。
しかし、開発中多数のエラーが発生し、情報も少なかっため、結果的にVer 2.xに下げて開発した。

それまで、新しく学び始めるときは、わざわざ古いものを学ぶよりも、最新のバージョンから学び始めた方がいいと思っていた。しかし、Ver 3のエラーで詰まって時間を浪費してしまったので、情報のあるもので一度学んでから、最新のものを学んで行った方がいいと感じた。

テスト時

Jestでテストを行う際、記述したはずの内容が検出できないことが多々あった。
原因は、エラーメッセージ内のDOMを確認したところ、ロード画面の状態でテスト内容を確認しようとしてしまっていたことだった。

教訓として、普段意図的にasync/awaitを記述していない、単純なダイアログ表示などのプログラムでも、テスト時には処理完了の待機時間を常に意識してコードを書くべきだった。
また、フロントエンドのコードは、バックエンドほどの確実性がないが、その中でも実行順番に関しては特にコードの記述順を参考にしてはいけないことを学んだ。

テスト時のダミーデータは、データのルールさえ守っていれば、それ以外の内容は問われないので、AIによるコード生成が特に力を発揮する場面だった。

詰まったりなどしてモチベーションが下がった時

人次第ではあるが、自分の場合、他のアプリケーションを開発していた。
そうしていれば、同系統の問題に対処する場合でも、別のことをしていると認識できるので、詰まってる感を紛らわせれた。

気付き(感想)

英語力が重要

エラーメッセージも、公式ドキュメントも、大抵は英語で、特にエラーメッセージはブラウザのように自動で翻訳することが難しいので、まず情報を仕入れるようになるための英語力が今のエンジニアに一番重要な能力だと再三感じた。

また、AI問い合わせる際にも、返答が英語で返ってきたりすることがあり、その度に小規模な動作の中断が起こって集中が途切れるので、常に英語力が欲しい状態だった。

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?

気になる方はぜひHPからお願いします👇

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?