【CI/CD入門】開発初心者がデプロイの自動化に挑戦してみた

# :hatching_chick:はじめに
CI/CDというワードをご存知でしょうか…？
私は知りませんでした。今回はCI/CDに入門して得られたことについてまとめてみました。

# :wrench:CI/CDとは…？

> **wikipediaより引用**
継続的インテグレーションと継続的デリバリーまたは継続的デプロイのいずれかを組み合わせたプラクティスを指す
アプリケーションの構築、テスト、および展開の自動化を実施すること

ここで私は、`デプロイやテストの自動化…？どういうこと？`という感覚に陥りました。
私は、デプロイはベテランエンジニアやリーダーが行うもの、テストは手でポチポチ打鍵するものと思っていたからです。

調べていくと、**CI/CDを導入すると、コードを書いてプッシュするだけで自動的にテストとデプロイできる**ことがわかりました。かなり時短・便利です。
そんなことできるのかとこの時点では半信半疑でした。

# :beginner:行ったこと
## 1. Firebaseを使ってアプリのデプロイを実現
まず、自分で作った学習記録アプリを**Firebase**というサービスを使ってデプロイをすることを行いました。


https://firebase.google.com/?hl=ja

自分で作った学習記録アプリについてはこちらで紹介しています。

https://qiita.com/asa129/items/642e7d4e0eb9529cf402

以下の記事を参考に、デプロイを実現させました。

https://zenn.dev/yumemi_inc/articles/2020-10-06-react-firebase-deploy

初めて、自らデプロイできたときは思わず自室で「おおおお！」と声を出してしまいました。
今まで`ベテラン勢が行うもので、自分には縁がない`と思っていたことを、数時間でできたことに感動しました。

## 2. GitHub Actionsを利用してCD（継続的デリバリー）を構築
**GitHub Actions**を使ってコードをpushするだけで**自動的にデプロイ**ができることを知りました。

以下の記事を参考に、GithubActionsのワークフローの仕組み、作り方を理解

https://qiita.com/Teach/items/d2c4d7bec98228df1807

ドキュメントを読みつつ、pushするだけで自動デプロイが行われるように挑戦してみました。

https://docs.github.com/ja/actions

全くうまくいかず、何度もエラーに悩まされました。
その時の格闘を下記にまとめています。

https://qiita.com/asa129/items/65e301521f49e17ec11f


## 3. JestとReact Testing Libraryを使ってテストケースを作成、GithubActionsと合わせてCI（継続的インテグレーション）を実現

`CIってそもそもどのようにしたらいいのか？`という状態からのスタートでした。
方向性が皆目見当つかなかったため、ChatGPTに相談し、
以下の流れで進めることにしました。

1. CIで使用するJestとReact Testing Library がそもそも何なのかを理解
2. JestとReact Testing Libraryの基本的なテストコードの書き方を理解する
3. 自分で作ったプロジェクトにテストを組み込んで見る
4. GitHub Actionsを使ってpush時にテストが実行されるようにする

学習したことは下記の記事でまとめています。

https://qiita.com/asa129/items/b4962b1a353905e4bb5a



# :pencil2:入門してみて得られたこと、気づいたこと
## 自分なりの問題解決フローを構築できた

行き詰まった時、自分の行動パターンを見直しました。そこで気づいたのは、`「目的意識を持って行動する」`ことの重要性です。

具体的に以下のアプローチで解決するようになりました

1. まず課題を決める
課題の決め方がわからないときはAIや有識者に頼る
2. 解決するための選択肢を出してみる
解決策や選択肢がでないときはAIや有識者に頼る
3. 実践する

「目的意識を持って行動する」ことでやみくもに何かをする、勉強をするという状態から脱出できました。

## :book:公式ドキュメントを読むことの大切さ
公式ドキュメントは体系的に記載されています。
`まずは公式ドキュメントを参照する、読むことを軸にする習慣`をつけたことで、`概念を理解しやすくなった`と感じています。

ドキュメントは文字量が多く最初は圧倒されました。
何から読んだらいいかわからない状態にもなりました。
`クイックスタートや目次を読む（項目だけよんで中身はわかんなくてもまあいいやぐらいの雰囲気で読む）`ことを意識することで抵抗が減りました。



## :robot:AIの力を借りる

私の最も大きな発見は、**AIの力を借りる**ということでした。
それまでは`「自分で解決策を調べて試行錯誤するのが当たり前」`と思っていましたが、適切にAIを活用することで問題解決までの時間が大幅に短縮できることを学びました。

**例えば：**
**ChatGPTやClaudeに質問して、アプローチや方向性を得る**
CIを実現するために考えた方法もchatgptに聞いてアプローチを得ることができました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/33fe7902-8b41-425a-9cf6-a0fa0415e3d9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/600fc917-4542-46d5-aca2-7e0323b037cd.png)




**エラーなどはGitHub Copilotを使って解決やリファクタリングのヒントを得る**
エラーの解決方法や、処理の実現方法がわからないときはGitHub Copilotに質問しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3993509/37dfd8f9-6ded-4d6a-be58-daa275953dcd.png)



### AIに頼っても、基本的な概念や仕組みの理解ができていないと、同じエラーの堂々巡りになる

AIの助言でわからない処理やメソッドが出たときは公式ドキュメントを参照することを意識して行っていました。
私の場合、エラーに遭遇する度、また非同期処理関連のエラー…となることが多く、`基本的な概念の理解が不足していると、AIの助言だけでは解決できない`問題に直面しました。

非同期処理については自分なりに学習したことを下記にまとめています。

https://qiita.com/asa129/items/a79231425296e507c8bf





# :hatched_chick:おわりに
今回、CI/CDの導入を通して、開発からデプロイまでのイメージがついたと感じています。
私の中で`リリースを自ら行えること・自動化できたこと`は自信になったと感じています。
余談ですが、目的をもって行動するを意識するようになったことで晩御飯を作る時間が短くなりました。
（これを作るぞって決めて手順を考えた後に行動しているからでしょうか？）

# 参考

https://ja.wikipedia.org/wiki/CI/CD#:~:text=%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%A7%E3%81%AF%E3%80%81%20CI%20%2F%20CD,%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%9F%E3%83%97%E3%83%A9%E3%82%AF%E3%83%86%E3%82%A3%E3%82%B9%E3%82%92%E6%8C%87%E3%81%99%E3%80%82


https://zenn.dev/yumemi_inc/articles/2020-10-06-react-firebase-deploy


https://qiita.com/Teach/items/d2c4d7bec98228df1807


https://docs.github.com/ja/actions

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

https://projisou.jp