5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-03-16

:hatching_chick:はじめに

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

:wrench:CI/CDとは…?

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

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

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

:beginner:行ったこと

1. Firebaseを使ってアプリのデプロイを実現

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

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

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

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

2. GitHub Actionsを利用してCD(継続的デリバリー)を構築

GitHub Actionsを使ってコードをpushするだけで自動的にデプロイができることを知りました。

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

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

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

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時にテストが実行されるようにする

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

:pencil2:入門してみて得られたこと、気づいたこと

自分なりの問題解決フローを構築できた

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

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

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

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

:book:公式ドキュメントを読むことの大切さ

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

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

:robot:AIの力を借りる

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

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

image.png

image.png

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

image.png

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

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

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

:hatched_chick:おわりに

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

参考

JISOUのメンバー募集中!

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

5
2
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
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?