プログラミング初心者のためのポートフォリオ作成ガイド②:作成準備

前回の記事でどのようなポートフォリオを作成するかの方向性がある程度固まってきたかなと思います。なのでやる気に満ち溢れているイマさっそくポートフォリオ制作を始めたいと意気込んでいるかと思いますが、その前に開発者にとって必須のツールであるGit hubについて学びながら設定まで行っていきましょう。

この記事を読んでできるようになる事
・Git hubとは何か理解できるようになる
・Git hubのアカウント登録ができる
・Git hubの使い方がわかる

Git hubとは

そもそもGit hubってなに?って方へ向けてまずは大まかな概要の説明をしていきます。そんなことは分かってるよという方は読み飛ばして下さい。
まずGit hubとはソフトウェア開発プロジェクトのためのプラットフォームで、主にバージョン管理システムであるGitを利用しています。このように説明すると初心者の方の中には「結局なんなの?」という状態になってしまう方もいるかと思いますが、要は開発したまたは開発途中のコードを指定した相手と共有し合えるプラットフォームになります。

Git hubを使う主な理由は大きく分けて下記の2つになります
①複数の開発者で同時にソースコードの変更を管理、変更履歴の追跡
②ポートフォリオなどのソースコードを公開

ポートフォリオ作成段階からGit hubを使っての開発に慣れておくと実際の業務においてもスムーズに開発を行うことができるようになります。また、Git hubでは開発履歴も確認できるため作成したポートフォリオが本当に自分で作ったという証拠にもなりますので必ず使って下さい。

Git hubアカウント作成方法

Git hubのサービスを利用するための登録から始めていきます。

GitHubのウェブサイトにアクセス

まず初めにコチラ(https://github.com/)のリンクをクリックしてGithubの公式サイトにアクセスします。

アカウントの作成

リンク先の画面に移動したら画面右上の「Sign up」ボタンをクリックして、新しいアカウントを作成します。

上記のように必要な情報を入力し、continueボタンをクリックします。
Email preferencesに関しては公式からの最新情報などを受け取りたい方はチェックを入れて下さい。必要ない方はチェックなしでも問題ありません。

次にアカウントを有効化するために簡単なテストを行います。
下記の画像のように画面の指示に従ってオブジェを動かしてください。

これを送信すると登録したメールアドレスに認証コードが送られてきますのでそれを入力して下さい。

コード認証が終わったら最後にプランの選択を行います。
基本的には無料プランで十分ですので下記の画像のように左側のcontinue for freeのボタンをクリックして下さい。

プラン選択が完了すると作成したアカウントのホームのページに自動で移動します。

プロフィールの設定

任意でプロフィールの設定が可能ですので、ポートフォリオの一環としてGit hubの利用履歴などを提出しようと考えている人はプロフィールの設定を行いましょう。
手順としては
①右上のアイコンをクリック
②プルダウンメニューの中から上から2番目にあるYour profileをクリック
③画面左側に出てくるEdit profileをクリックし編集する
④編集完了後したの方にあるsaveボタンをクリックして完了

以上でアカウントの登録・設定の完了です。

ソースコードの管理方法

web版のGit hubを使って基本的なコードの管理方法を学習する前にまずは基本用語を解説していきます。

基本用語集

リポジトリ(Repositoly)

プロジェクトの基本的なデータ構造で、ファイルやフォルダの集まりです。通常は特定のプロジェクトやアプリケーションのコードやリソースが含まれます。

クローン(Clone)

リモート(GitHub上)のリポジトリをローカルマシン(自身のパソコンなどの開発環境)に複製することです。これにより、自分のコンピュータでリポジトリのコードを編集できます。

ブランチ(Branch)

リポジトリ内で独立した作業用の枝です。主に新機能の追加やバグ修正などを行う際に使用されます。マスターブランチ(大元のブランチ)は通常、安定した状態を保つためのものです。
マスターブランチを修正したのちにバグが発生するなどのトラブルがあると修正が大変になってしまう為、基本的に編集作業を行う際はブランチを分けて作業します。

コミット(Commit)

ファイルやプロジェクトの変更をGitに記録する操作です。コミットはその時点でのファイルの状態をスナップショットとして保存します。

プッシュ (Push)

ローカルリポジトリでの変更をリモートリポジトリに反映させる操作です。通常、他の開発者との共同作業時に使用します。

プルリクエスト(Pull Request)

自分のリポジトリの特定のブランチ(通常は新機能を追加したりバグを修正したりしたブランチ)から、他のリポジトリのブランチに対して変更を取り込んでもらう(プルしてもらう)ためのリクエストです。

プル(Pull)

リモートリポジトリから最新の変更を取得して、ローカルリポジトリに統合する操作です。実際には、プルは「fetch(リモートリポジトリから情報を取得する)」と「merge(ローカルの変更と統合する)」の組み合わせです。

マージ (Merge)

異なるブランチやフォークされたリポジトリの変更を統合する操作です。例えば、開発中の機能をテスト済みの安定したマスターブランチに統合する場合に使用します。

コンフリクト (Conflict)

異なる箇所で同時に変更が加えられた場合などに発生する競合状態です。マージ時やプル時に解消する必要があります。

以上です。全ての用語を網羅している訳ではありませんが、業務上必ずといっていいほど必要になるものをリストアップしました。
一見多いように見えますが、プログラミング業務はカンニングし放題なので暗記しなくてはいけないものではありませんのでご安心ください。

続いて、Git hubを用いてのコード管理方法を具体的に見ていきましょう。

コード管理方法

今回はGit hub DsktopというGitを簡単に使う為のツールを用いてコード管理を行なっていきます。まず初めにコチラからGit hub Dsktopをインストールし、下記のようなホーム画面が出てくるまで登録を進めて下さい。

個人開発とチーム開発では流れが違う部分もありますが、チーム開発用の手順を理解できれば個人開発の方も簡単ですので今回は一緒にチーム開発に向けてのGit hub Dsktopの使い方を学習していきましょう。

チーム開発において、まずはリポジトリが作成されます。
そのリポジトリのメインブランチは基本的には触らないようにして下さい。

操作手順としては
①Current Branchの部分がmainになっていることを確認する
②Current Branchの横の▼をクリック
③プルダウンメニューの中からNew Branchを選択
④わかりやすいBranch名をつけて新しいBranchを作成
⑤Current Branchの部分が作成した新しいブランチになっているのを確認したらGit hub Dsktop上からテキストエディタツールを開きコード編集を行う
⑥コードの変更完了後、Git hub Desktopに戻りコミットメッセージ(何をどう修正したか)を記載してコミットする
⑦コミットした後、GitHub Desktopの「Push origin」ボタンをクリックして、変更をリモートリポジトリに送信する
⑧GitHub Desktop上で「Open in GitHub」をクリックして、リモートリポジトリの対象ブランチを開く
⑨GitHubのウェブインターフェースで「Pull Request」ボタンをクリックして、プルリクエストを作成する
タイトルと説明を追加し、他の開発者に変更内容を共有します。
⑩レビューが完了し、プルリクエストが承認されたら、GitHubのウェブインターフェースでマージを行う
マージ後、GitHub Desktopでメインブランチに切り替え、変更をローカルにプル(Fetch origin / Pull origin)する

まとめ

今回の記事ではプログラミングの効率を飛躍的に向上させるツールGit hubとGit hub Desktopについて学んできました。
おそらくこの記事を見てくださっているほとんどの方はプログラミングを始めて間もない初学者の方がほとんどかと思いますのであまりイメージが湧きづらい部分もあったかと思います。
さらに言えば今回の記事は「ポートフォリオを作るだけ」が目的なのであれば特に必要のないものかもしれません。
ただ、ほとんどの方は何かの目的のためにポートフォリオを作成する方がほとんどかと思いますので是非身につけてほしい知識になります。

次の記事ではいよいよ実際のコーディングを行う際の注意点を学んでいきますので、その記事を参考にしながら簡単な作品を作ってみて下さい。

コメントをどうぞ