vscodeとgitを学ぼう！(初心者向け)

# vscodeとgitを学ぼう！

この記事は、プログラミングなんも知らんな友人に教えるために作成した教材兼どこで詰まったかを記録するものになります。

pcの初期セットアップなどにご活用ください。

## vscode編

vscode編です。コンテンツは以下の通り

- vscodeとは？
- インストール
- notebookファイルを走らせよう！

### vscodeとは？
vscodeとは、テキストエディターになります。
つまり、非常に雑にいえばメモ帳です。
そこにプログラミング用のコンテンツが大量に付加されてるものになります。
なので、別にコーディングだけでなく、何かを書くのにも使うことができます。便利ですね。
chatgptに聞いてみました。

> 💡 エディターって何？
> 「エディター」は文字を書く道具（ソフト）です。特に、プログラムを書くための道具を「コードエディター」や「テキストエディター」と呼びます。

### インストール

インストールします。
vscodeはmicrosoftが配信してるものなので、ちゃんとmsの公式サイトからダウンロードしましょう。

https://code.visualstudio.com/

### notebookファイルを走らせよう！
今回は、pythonのノートブックファイルを走らせることを目標としています。
内容は以下の通りです。

- pythonのinstall
- pythonの拡張機能のinstall
- pythonの仮想環境の作成
- notebookの作成

手順はある程度ここにまとまってたので、そこから抜粋してきます。

https://qiita.com/hotate_2235/items/3e93bf68282c8a309204

#### pythonのinstall

pythonを、MS Store(or pythonの公式サイト)からinstallします。

https://www.python.org/downloads/windows/

安定版を適当に入れてください。
今回は、3.13.4で。

#### pythonの拡張機能のinstall

vscode上で、pythonとjupyterの拡張機能をinstallしてください。
左側のサイドバーに、extensionというところがあるので、そこからpythonを入れてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806752/76e8f432-fe7e-4197-bb21-5f8c38b8bd9f.png)

#### pythonの仮想環境の作成

仮想環境を作成します。
今回は、わかりやすくminicondaをinstallしていきたいと思います。

参考リンク

https://www.i.h.kyoto-u.ac.jp/users/hioki/lect/clite/notes/miniconda_install_win.html

##### minicondaの初期設定

- 公式サイトから、miniconda installersをダウンロードして起動する
- インストーラーからインストール後、windowsボタンを押して出てくる"anaconda prompt"のファイルの場所を開き、ショートカットを右クリック、プロパティからショートカットのリンク先をコピーする
- anaconda promptを起動する

(以下、anaconda promptのショートカットのリンクpathの見本)
```
#コピペに使う、プロパティから取得できるpath参考
%windir%\System32\cmd.exe "/K" C:\Users\your-user-name\miniconda3\Scripts\activate.bat C:\Users\your-user-name\miniconda3
```

##### 仮想環境の作成

anaconda prompt上で、以下のコマンドを入力して仮想環境を作成してください。

```
conda create -n <環境名> python=3.12
conda activate <環境名>
> (環境名) user# のようになればOK
```

これで、仮想環境の作成は完了です。

:::note info
#### なんで仮想環境を作るのか？

仮想環境を作る理由としては以下の通りです

- ローカル環境に無駄なものを入れたくない
- 今後別の環境を使いたい時に互換性を確保しておくため
- もし何かに失敗したとしても、その影響をローカル環境に影響させないため

以上の理由が挙げられます。
なので、ストレージ容量がないなどの事情がない限りは、可能な限り仮想環境を作り、その中で作業することを推奨します。
:::

#### notebookの作成

次は、notebookの作成です.
vscode上で、上の検索欄をクリックし、`>Create New Jupyter Notebook`を実行して作成してください。

:::note warn
ipykernelが必要になりますので、仮想環境上で、
```python
pip install ipykernel
```
を実行して、installしてください。
:::

#### vscodeでのconda仮想環境の認識

condaの仮想環境をvscodeに認識させるため、以下を実施。

- vscodeの、file > preferences > settingsを起動し、searchにcondaと入力
- python conda pathの部分に、先ほどコピペしたanaconda promptのプロパティリンクをコピペする

設定後にvscodeを再起動し、notebookファイルを開いて、右上の`select kernel`から、作成した仮想環境の名前が確認できればＯＫ

### つまったところ

vscodeの初期設定で詰まったところです。

#### vscodeのterminalにcondaを認識させる

terminalの方でもcondaの仮想環境を認識させるために、以下を実行

- vscodeのterminalから、configure terminal settings > External: Windows Execを開く
- 開いたとこに、さっきのanaconda promptのプロパティリンクをコピペ

これでうまくいくはずがなぜか認識されず。
おそらくコピペしたanaconda promptへのリンクをterminal上にコピペして実行すればうまくいくはず？


## git編

git編です。コンテンツは以下の通り

- gitとは？
- githubとは？
- githubアカウントを作ろう！
- リポジトリを作ろう！
- リポジトリをクローンしてみよう！
- 編集してみよう！

### gitとは？
gitとは、分散型バージョン管理システムです。以下に分かりやすい記事があったので、一度こちらの三つを読んでみてください。

- [Gitを使ったバージョン管理](https://backlog.com/ja/git-tutorial/intro/01/)
- [履歴を管理するリポジトリ](https://backlog.com/ja/git-tutorial/intro/02/)
- [変更を記録するコミット](https://backlog.com/ja/git-tutorial/intro/03/)

参考リンク

https://backlog.com/ja/git-tutorial/intro/01/

リポジトリ、というものについて、リモートとローカルがあり、それぞれ別になっていることがわかったかと思います。

gitでは、ファイルの変更履歴を記録できる、という話があったかと思いますが、これはリモートリポジトリ、ローカルリポジトリの両方で記録されています。

なので、通常の開発では、ローカル上でファイルを編集し、その変更履歴を __ローカル__ のリポジトリに記録させます。(コミット)その後、その変更履歴を __リモート__ のリポジトリに記録させます。(プッシュ)
この一連の流れによって、ローカルでのファイル編集をリモートリポジトリに反映させることができます。

もし、リポジトリが複数ある理由について気になった方は以下の記事を確認してみてください。

https://qiita.com/yoshiichn/items/5d9c9105b980921f2809

### githubとは？
gitを使ったコード管理をより簡単に行えるサイトです。(リモートリポジトリのホスティングサービス)
通常のgitは、コマンドラインからのみ操作可能ですが、githubはマウスなどを使っての操作も可能になっています。
そこにさらに各種便利機能が付随していますので、非常に使いやすくなっております。

### gitをinstallしよう！

次のサイトの手順に従ってgitをinstallしてください。

https://qiita.com/takeru-hirai/items/4fbe6593d42f9a844b1c

#### githubアカウントを作ろう！

まずはgithubアカウントを作りましょう。
以下のサイトから登録してください。

https://github.co.jp/

:::note info
学生は、以下のリンク先手順に従うことで、github educationに登録できます。
これにより、github copilotなどを無料で使うことが出来ます。

https://docs.github.com/ja/education/about-github-education/github-education-for-students/apply-to-github-education-as-a-student
:::

### リポジトリを作ろう！

次に、作成したアカウントを用いてリポジトリを作成しましょう

まずは、ブラウザ上でgithubにアクセスし、自分のアカウントにログインしてください。
その後、画面左上の自分のアイコンをクリックし、`your repository`を選択し、`New`を押し、以下のような設定でリポジトリを作成してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806752/921e401e-f6cf-4fa1-a3ec-f63d4e242bf0.png)

これによって、リモートリポジトリを作成することが出来ました。

### リポジトリをクローンしてみよう！

今回は、github desktop経由でリポジトリクローンを行います。
まずは、github desktopを以下からinstallしてください。

https://github.com/apps/desktop?ref_cta=download+desktop&ref_loc=installing+github+desktop&ref_page=docs

![スクリーンショット 2025-06-09 13.48.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806752/cff08be3-28db-4be4-980a-5ef357f00647.png)

installした後、`Sign in to Github.com`を選んでブラウザ上d自分のgithubアカウントと接続し、`clone a repository`から、先ほど作成したリポジトリを選択してクローンしてください。

これによって、指定したフォルダに、ローカルリポジトリが作成されました。

### 編集してみよう！

編集してみましょう。
まずは、ローカルリポジトリを作成したフォルダをvscodeの`File > Open folder`から開いてください。
その後、適当なファイルを作成し、vscodeの左側サイドバーの`source control`を開いてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806752/f530fbf3-9d1f-4480-ab12-446a27fce4bd.png)

今回は、`test.txt`を作成しました。しかし、現在このファイルは変更履歴の追跡が行われません。(UはUntrackedのU)
なので、まずこのファイルの変更履歴の追跡が行われるよう、ローカルリポジトリにcommitします。
ファイルの横にあるプラスマークをクリックすることで、変更をstageすることが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806752/c21a0ab0-f8f7-4383-9fed-dc45c54e05a6.png)

これによって、`test.txt`ファイルの変更履歴をローカルリポジトリに記録させたい、という宣言をしていますが、まだ変更履歴は記録されていません。
なので、commit　messageを入力し、Commitをボタンを押すことで、ローカルリポジトリに、`test.txt`というファイルの変更履歴が記録されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806752/47388ea9-dab9-4b0c-8996-0cad598e962c.png)

最後に、現段階ではまだリモートリポジトリに変更内容が反映されていませんので、Sync Changesを押すことで、リモートリポジトリに変更内容が反映されるようになります。

この一連の作業によって、変更内容をリモートリポジトリに反映させることが出来ます。

### 書ききれてないところ

ブランチを切って作業し、作業内容をmainにマージする流れを説明できていません。
ここはいつか加筆します。

### つまったところ

gitの初期設定で詰まったところです。

#### gitとのssh接続

ssh接続がなぜかうまくいきませんでした。
まず、git bash上で、秘密鍵・公開鍵の生成を行いました。

```bash
ssh-keygen -t ed25519 -C "your_email@example.com"
```

その後、githubのアカウントで、`SSH and GPG Keys`から、公開鍵(id_25519.pub)を登録しました。

最後に、接続テストを実施しましたが、うまくいきませんでした。
```
ssh -T git@github.com
# 接続がそもそもされない
```

おそらく、接続時に使用する秘密鍵が正しくセットされていない。

ので、
```
ssh -i ~/.ssh/id_ed25519 git@github.com
```
として、接続時に秘密鍵のパスを明示するか、.sshフォルダに以下のconfigファイルを設定する
```config
Host github.com
  HostName github.com
  IdentityFile ~/.ssh/path_to_id_ed25519
  User git
```
ことで解決できると思われる。

参考

https://zenn.dev/hyzsa/articles/20230919-git-initial-setup