3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

あなたの学びをシェア!2020年までにUdemyで学んだこと02【PR】UdemyAdvent Calendar 2020

Day 23

GitHubでIssueを活用してポートフォリオを管理する方法

Last updated at Posted at 2020-12-22

#まずはUdemyでGitとGitHubの基礎を学ぼう!
・GitおよびGitHubを一度も触ったことがない
・一応使ってはいるが、コマンドは意味も分からずコピペ
・何となく苦手意識がある

このような方は、GitHubでポートフォリオを管理する前に、Udemyで以下の講座を受講してみてください。1に関しては無料、2もセール時に買えば1500円程度で購入できます。

1. Git:はじめてのGitとGitHub
2. Git: もう怖くないGit!チーム開発で必要なGitを完全マスター

非常に丁寧でわかりやすい説明で、初心者でも内容がスッと入ってきます。
「Git, GitHubって何?」「なんか難しそう、、」「今日もコピペでpushするか、、」
こんな状態から、
「Git, GitHubって楽しい!」「全然難しくないじゃん!」「今やっている操作の意味がわかる!」
こんな状態になります(実体験)。

上記の講座で基礎学習を終えた方、または既に別で終えている方は、以下を見ていただきたいです。
#この記事の対象者
「GitHubでポートフォリオを管理したいけど、情報がいろいろあってわからん!簡潔に手順を教えてくれ!」という方。
#この記事を書いた理由
上記Udemy講座にて一通りGitおよびGitHubの学習を終え「いよいよGitHubでのポートフォリオ管理だ」と意気込み、具体的な手順を色々調査していましたが、体系的かつシンプルにまとめられた「とりあえずこれをやれ」という記事がなかったため、書いてみることにしました。

今回はGitHubのIssueを使ってポートフォリオ管理に必要なコマンドを簡潔にまとめました。
環境構築や初期設定は省き、実際に管理したいファイルに対して行う操作のみを示しています。
#GitHubでポートフォリオを管理する手順
ここから、僕が実際に行っているポートフォリオの管理手順を記述します。
一応、それぞれの操作で何を行っているかがわかるように、簡単に説明を入れています。
出てくるコマンドはググればすぐに出てくるので、詳しい説明は省きます。

初回のみの操作

  1. GitHubの「New」より、ポートフォリオを管理するリモートリポジトリを新規作成
  2. GitHubで管理したいフォルダにREADME.mdファイルを作成し、リポジトリの説明を記述
  3. ターミナルにてcdコマンドでGitHubで管理をしたいディレクトリに移動
  4. リモートリポジトリの「…or create a new repository on the command line」に記述してある通りにターミナルでコマンドを入力
        git init(git管理下に置く)
        git add README.md(先ほど作成したREADME.mdファイルをステージング)
        git commit -m "first commit"(コミットメッセージをつけてコミット)
        git branch -M main(ローカルブランチの名前をmainに変更)
        git remote add origin リモートリポジトリのURL.git(「origin」という名前でリモートリポジトリを登録、今後は「origin」を使ってプッシュしたりプルしたりすることができる)
        git push -u origin main(mainブランチをpush、-uをつけておくと、次回以降git pushだけでプッシュすることができる)
  5. ブラウザを更新し、pushされていることを確認

以降開発をする際の操作

  1. GitHubの該当のリポジトリで「Issues」→「New Issue」より、Issueを作成(Issue...Todoのようなもの)
  2. タイトルのところにタスクを入力((例)ログイン機能の実装、モーダルの実装)、詳細があれば本文に記述し「Submit new issue」(タイトルの末尾に「#番号」がつく、今回は例として#1とする)
  3. ターミナルで開発ディレクトリに移動し、git checkout -b develop#1(mainブランチから開発用ブランチを切って移動する、末尾に先ほど作成したIssueの#番号をつけることで、Issueと対応したブランチを判別しやすくなる)
  4. Issueで作成したタスクに沿って開発を行う
  5. タスクが完了したらgit add .(変更したすべてのファイルをステージング)
  6. git commit -m "#1 コミットメッセージ" (ステージングした変更をコミット、コミットメッセージに#1 と入れることでIssueと紐づく)
  7. git push origin develop#1(origin(リモートリポジトリ)にdevelop#1(ローカルブランチ)をプッシュ)
  8. GitHubで「Compare & pull request」が表示されているのでクリック
  9. タイトルを入力し、末尾にclose #1とつける(close #1をつけることで、プルリクエストが閉じられると自動的に#1に対応したissueがcloseされる(後から手動で閉じることもできる)、詳細があれば本文に記述する)
  10. 「base: main ← compare: develop#1」であることを確認して、「Create pull request」→「Merge pull request」→「Confirm merge」(develop#1ブランチをmainブランチにマージ)
  11. GitHub上で「Delete branch」(用済みのdevelop#1ブランチを削除)
  12. git checkout main(ローカルでmainブランチに移動)
  13. git pull origin main(リモートのmainブランチをローカルのmainブランチに統合、先ほどpushした内容がローカルに反映される)
  14. git branch -d develop#1(ローカルの用済みのdevelop#1ブランチを削除)

手順14の後、新たに開発をしたい場合は手順1に戻り新たにIssueを立て、同様に進めます。
また、上の手順では省いていますが、適宜git statusgit branchで確認作業を行うと、思わぬミスが減ると思います。
最初のうちは手順通り忠実にやるべきだと思いますが、たまに不測の事態が起きることがあります。その際に闇雲にコマンドを打ってしまうと何をやっているのかが分からなくなってしまうので、起きている事態を冷静に把握し、必要であれば調べるなり、Udemyで該当箇所を復習するなりすれば解決できると思います。

#GitHubでポートフォリオ管理をして感じたメリット
・Issueを立てることによって、一つのタスクに集中できる
他のタスクに目移りすることがなくなり、作業効率が爆上がりします。
・チーム開発を意識した管理ができる
Issueやプルリクエスト(本来はレビューが入りますが)など、チーム開発で使われる管理方法に慣れることができます。
・GitHubでContributionsが蓄積され、錯覚資産になる(かもしれない)
いわゆる「草をはやす」というやつです。初めて聞いたという方は「GitHub 草」でググってみてください。
#最後に
実は初めに紹介したUdemyの講座では、Issueは出てこなかったり、pullよりもmergeからのfetchを推奨したりしています(きちんと理解していればどちらでもよいとのことです)。上述したポートフォリオ管理は、色々なところから集めた情報を組み合わせて行っている方法ですが、Udemyで基礎を学んだおかげで、何のためにこのコマンドを打っているのかということをしっかりと理解できている実感があります。慣れてきた方は色々試してみて、自分なりに最適な方法を見つけていただきたいです。

3
3
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
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?