4
1

【React × typescript × chakra-ui × Jest】学習記録アプリ作成 firebase hosting CI/CD

Posted at

はじめに

私は現在、プログラミングコミュニティ「JISOU」に参加させていただいており、Reactの勉強を基礎から行っています。
今回はchakra-uiを利用し学習記録アプリを作成しました。
typescriptによる型付け、Jestやtesting-libraryを使ったテスト・firebase hosting github actionsでのCI/CDも行っております。

今回作ったもの

stury_time.gif

前回の課題までに作ったもの(git)

前回作ったものとの変更点
UIコンポーネントライブラリのChakraUIを使用
typescriptによる型付けを行ったため、エラーが起きにくい設計
編集、削除機能を追加
Github ActionsによるCICD(自動デプロイとテスト実行)を追加

課題による気づき

  • typescriptの理解不足
     typescriptはこれまで少し書いたことがあったけど、今までは型を宣言してエラーを少なくするためのもの。←めんどくさいというイメージしかなかった。
    今回Udemyの動画で実例などをみたところ、__type宣言などをしておくとVScodeなどでそのtypeから予測変換をしてくれる。一つ共通ファイルとしてtypeを定義したファイルを作ることでそれを全ファイルで読み込むためあまり手間がかからない__という風に感じた
  • 自動テストの理解不足
    jestやreact testing libraryを今まで書いたことが無かったので書くのにとても時間がかかった。
    mockの使い方やstateの変更タイミングで処理を待ってあげること、ユーザーの入力操作の再現をすることなどで躓きとても時間がかかりました。
  • アウトプットの習慣がまだついてないこと。
    躓いた場面は何度かあったが、記事にする(文章にする)ということをめんどくさがってしまって記事にできていない部分が何件かあった。
    JISOUで言われていた「エラー解決記事はこれくらい雑に書く!! → 記事」という言葉を見て、なるべく簡単に雑でもいいので記事はすぐに書こうと思いました
  • とりあえず、勉強を始めるの意思がまだ弱い
     Reactの勉強を始める際に、今日はとても忙しくて疲れているから少し休んでから始めようなどと思ってしまい、ついついyoutubeなどの動画に時間を費やしてしまうことがありました。時間があるなら何も考えずとりあえず始めるということを続けられるようにならないとなと感じました

おわりに

これまでJISOUの課題として3つ行ってきました。まだまだアウトプットが足りなかったり、勉強にすぐ取り掛かるなどのことができておらず自分の中で課題が見えてきました。
今後のキャリアアップなどの為にも、今の自分の課題にも取り組みながらReactの勉強を今後も取り組みたいと思います!

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?
気になる方はぜひHPからお願いします:下向き指差し:
https://projisou.jp

4
1
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
4
1