はじめに
JavaScriptとJQueryの区別もつかない初学者が
苦しみながらReactでアプリを開発し、新しい技術に感動した記録です
使用技術
・React
・VITE
・SUPABASE
・Firebase
・Jest
・react-testing-library
・GithubActions
大量すぎる知らない単語と出会い
インプットとアプトプットを繰り返して学習記録アプリを作成しました。
作成したアプリはgithubで公開しています。
開発について
新しい技術にめちゃくちゃ感動したので、初心者なりの感想を添えておきます。機能の説明ではなくほぼポエムです。
SUPABASE
バックエンドが爆速で爆誕
学習の記録をデータベースで管理するために使用しました。
管理画面のUIも分かりやすくて良い。
API通信もかなり簡単にできて良い。
自分で作ったアプリがデータベースを操作できることに感動しました。
Firebase
ローカルデータが爆速でWEBへ公開
ページを公開するといえばサーバーをレンタルして、という知識しかなかったので、デプロイって？え、これだけでWEBに公開されちゃうの...とかなり感動しました。初めてのデプロイ当日は嬉しくて知人にURLを送りつけ、学習記録を追加してもらいました。
Jest
簡単にテストできるから安心してコード書ける
自分の経験になりますが、後任者にいかに伝わるコードが書けるか、と頭を悩ますことが多く、ちょっとした変更でJSが動かなくなることも、そしてそのデバッグ作業も大変な思いをしました。
Jest使えば未然に防げたバグがいくつかあったなあ、と。
導入も簡単だし、テストも単純に書けばそんなコストでもないのかも。
テストって大事！テストの実行結果も、いろいろ教えてくれるのがいいですね。
React Testing Library
ユーザーが使うようにテストできる
JestとRTLがいまいち掴めなくて、下記の記事が大変参考になりました。
クリックやテキスト入力など、ユーザーが実際に行うようnテストができるのはすごいですね。今後も使っていくとより感動しそうです。
GithubActions
プッシュで全部やってくれる。すごく気が利いてる
YAMLファイルに書いておけば、自動でテスト・ビルド・デプロイを実行してくれるってすごい。考えた人すごい。
YAMLファイルの作成に苦労しましたが、エラーがgithubでしっかり確認できるところも良かったです。初心者にやさしい！
開発を通して
たくさんの技術者の努力によって魔法みたいな便利さが叶えられていて、自分が身近に触れるアプリにも同じ技術が使われてるかもしれないと思うとワクワクした。
今はまだ小さなアプリしか作れないけど、「誰にでも使いやすい優しい仕組み」を考えて、「誰かの役にたつツール」を作りたいと思った
おわりに
取り組み始めた時は聞いたことがない単語ばかりで、理解することにとても苦労しましたが、どれも素晴らしい技術ばかりで、感動しました。
よりもっと使いこなせるようになりたいです
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼