はじめに
実際にアプリを作るとなると、開発環境を整える必要があります。
アプリを作るためにプログラムを書くとなった場合、ソースコードの管理先が必要となってきます。個人開発であればソースコードを自己責任で管理する条件下ではソースコードを自分のローカル環境(パソコンの中)で管理することもできますが、パソコンの不具合があればソースコードが消える可能性があったり、チームで開発する場合にはソースコードを共有することができないため、管理の仕方は適していません。そこで、これらの問題を解決するためにGitHubを用います。
GitHubとは、ソースコードやその変更履歴を共有・管理できるツールであり、現在ではかなり主流となっているソース管理ツールとなっています。そこで今回はこのGitHubアカウントを作成して、ソースコードエディタであるVSCodeと連携する作業をしていきます(下図参照)。
VSCodeインストール
まずは、ソースコードエディタであるVSCodeをインストールします。
VSCodeのインストール
①VSCode公式からダウンロードする(自分の環境に合う製品を選択してください)。
②ダウンロードが始まるので、zipファイルを解凍する。
③VSCodeをアプリケーションフォルダに移動する。
④VSCodeをクリックする(下記画面が出ればOKです)。
英語→日本語表記へ変換する
インストールすると、基本的に英語になっていると思うので、VSCodeの拡張機能である「Japanese Lauguage Pack」を用いて日本語へ変換します。
①VSCodeの左タブから拡張機能ボタン(四角い箱)をクリックする。
②右下のポップアップの「Change Language and Restart」をクリックして、VSCodeを再起動する。
③VSCodeを開く。
上記画面の通り、日本語表記になっていればひとまず完了です。
GitHubアカウントの作成
次に、ソースコード管理ツールであるGitHubアカウントを作成していきます。
GitHubアカウント作成
①GitHub公式から「GitHubに登録する」ボタンをクリックする。
②アカウントの必要項目を入力する。
③入力したメールアドレスに届いた番号で認証する。
④GitHubのダッシュボードが表示される。
⑤右上のアイコンを押下して「Your Profile」をクリックする。
⑥下記のようなプロフィールが表示されているか確認する。
認証設定(任意)
ここでは、自分のアカウントに対して、さらなるセキュリティ強化を図るために、GitHubの認証設定を行っていきます。今回行っていくのは、「2段階認証」です。2段階認証を行うことで、パスワードだけでなく認証番号が追加で必要となるので、セキュリティが非常に強固になります。
①GitHubアカウント作成⑥の画面から右上のアイコンを押下して「Setting」をクリックする。
②「Password and authentication」をクリックする(下記画面が表示される)。
③2段階認証項目の「Enable two-factor authentication」をクリックする。
④QRコードで読み取って、認証番号を入力する。
(※Google Authenticatorと呼ばれるアプリで認証するので、手持ちのスマートフォンでインストールしておいてください。)
⑤リカバリーコードを保存するために「Download」をクリックする(※重要)
ここで必ずリカバリーコードをダウンロードしておきましょう。
自分は現在実務でもGitHubを使っているのですが、その際の2段階認証で必要な認証番号が入った携帯を紛失してしまった上に、リカバリーコードもダウンロードしていなくて、アカウントを再度作り直す羽目になってしまいましたので。。。
⑥「I have saved my recovery codes」をクリックする。
⑦次の画面でDoneをクリックする。
上記画像のようになっていれば、2段階認証が設定完了します。
VSCodeとGitHubの連携
ここで、自分がエディタで編集したソースコードをGitHubに反映するために、VSCodeとGitHubの紐付けを行っていきます。
リポジトリ(フォルダ)作成
まずはGitHubに連携するために、VSCode側でリポジトリを作成します。
①VSCodeを開く。
②VSCodeのターミナルを開いて、GitHubのアカウント情報をコマンドで入力する。
git config --global user.name {自分の名前}
git config --global user.email {メールアドレス}
③「フォルダを選択する」ボタンをクリックする(フォルダ作成していない場合は、ここで作成しておく。)
④適当なファイルを作成する（自分は下記のように作成しました）。
- フォルダ名：git-sample
- ファイル名：test.html（テキスト：VSCode連携テスト）
⑤左タブのブランチボタンを押下して「リポジトリを初期化する」をクリックする。
ここで、左下にブランチ名(デフォルトではmain)と変更部分にファイルが追加されていることが確認できます。
⑥変更の右側にある「+」ボタンをクリックして、ステージングへファイルを上げる。
⑦メッセージに変更内容(簡単に)を入力して「コミット」をクリックする。
連携作業
次に、GitHubを開いて、ローカル環境のVSCodeと連携します。
①GitHubを開いて、自分のプロフィールに移動し、「Repositories」をクリックする。
②Newボタンをクリックして、リポジトリを作成する(リポジトリ名は任意でOKです)。
③登録が完了したら、下記画面が表示されるか確認する(左上にリポジトリ名が出てます)。
④VSCodeに移動し、ターミナル上で下記コマンドを入力して、VSCodeをGitHubのリポジトリに紐付ける。
git remote add origin https://github.com/{ユーザー名}/{リポジトリ名}.git
git branch -M main
⑤〜⑦は2段階認証を設定した方のみ行ってください。
⑤GitHubのトークン生成画面から「Generate new token」をクリックする。
⑥設定が完了したら、トークンをコピーする。
⑦viエディタに入り、urlを下記のように更新する。
vi .git/config
url = https://{ユーザ名}:{生成したトークン}@github.com/{ユーザ名}/{リポジトリ名}
⑧GitHubへソースコードを反映する。
git push -u origin main
⑨GitHubに移動して、自分の作成したリポジトリが反映されているか確認する。
これで、VSCode上で編集していたファイルが反映できていたら連携完了です。
最後に
今回は、VSCodeのインストール,GitHubのアカウント作成、さらには両者の紐付けを行っていきました。特に初学者の方がよく行う作業になるかと思いますので、ぜひ全体観を意識しつつ手順を踏んでいただけたらと思います。今後は自分も個人アプリを作成して、そこから学びを得たりアウトプットしていく予定なので、よろしくお願いします。