理系大学生は研究でもJupyterNotebook(Anaconda)ではなくVScodeを使おう+Python環境構築

# はじめに
理系大学生諸君は、実験で得たデータの解析やグラフ作成にPythonを使っているでしょうか? 私の所属する研究室では、PythonまたはNgraphでグラフを作ることが推奨されています。
特定のグラフ作成ソフトと比べてPythonでグラフを作るメリットというのはいくつかありますが、各設定項目をテキストデータとして確認ができる(明確に記述されている)ところが一番のメリットだと思います。そんなPythonですが、Anacondaをインストールして、その流れでJupyter Notebookを使って解析する人が多いと思いますが、VScodeを使って解析したほうが良いと考える理由と、実例を上げていこうと思います。

:::note warn
Jupyter Notebook(Anaconda)は開発環境とそのエディタであり、VScodeはエディターであるため、直接的な比較は本来できないのですが、やんわりと流してください。
:::
# VScodeを使うメリット
1. __設定のカスタマイズが豊富__
 外観の設定や、キーボードショートカットなどが豊富であり、よりパーソナライズされた開発体験を得られます。
1. __情報が多い__
 VScodeは現在世界で一番普及しているコードエディターであり、日本語の記事もあふれるほどあります。知りたいことがあればほとんどすべてのものはすでに解決されていると思います。
1. __自由な実行環境を選択できる__
 VScodeは良くも悪くもエディターであるので、ベースとなる環境は自分で選択できます
1. __豊富な拡張機能__
 一番のメリットです。これまで作られた数々の拡張機能は、開発体験を格段に向上させてくれます。
1. gitが使いやすい(optional)
gitの扱いに慣れる必要はあるのですが、僕はwordファイルをgitでバージョン管理しています。txtファイルに変換するコードを組んでおけば、gitのdiffで変更点も見れるので後から確認するのに非常に有用。

# 環境構築
個人的なベストプラクティスはDockerを使い、仮想環境で開発をすることです。よくわからない方も、とりあえずインストラクションに従ってみてください。
環境構築はWindowsでおこないます。

## VScodeインストール
[公式サイト](https://code.visualstudio.com/download)にアクセスしてVScodeをインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/668b3405-24af-b5d0-7296-4a90cc79957f.png)

## WSLインストール
Microsoft Storeで`WSL`と検索して以下のアプリケーションをインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/cae0aee0-c7a7-0ed9-fa01-25d15fa107df.png)
(絶妙にペンギンのアイコンがキモい)
[Storeリンク](https://www.microsoft.com/store/productId/9P9TQF7MRM4R)

## Docker Desktop インストール
[公式サイト](https://www.docker.com/products/docker-desktop/)にアクセスしてDocker Desktopのインストーラをダウンロードし、実行しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/f4152940-5e7c-0c49-f026-6b0bb1962ad1.png)

終わったら一応再起動しておきましょう。

## セットアップ
Docker Desktopを起動しておきます。起動しておかないと後でエラーが起きるので、毎回起動するのが面倒という人はDocker Desktopの設定から`Start Docker Desktop when you log in`にチェックを入れておくといいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/9f886325-ebbb-e42e-a498-c2572b78ec0b.png)

VScodeを起動し、`ファイル`>`フォルダーを開く`から自分の研究用のデータが入っているフォルダを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/c3b24628-62c6-238b-6728-1ce8b3d5b36b.png)

四角が集まったようなアイコンを押して、Devcontainer拡張機能をインストールしておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/43a59caf-cba1-16cf-379a-d832efaa3163.png)


`Ctrl+Shitt+P`を押し、`reopen`と入力するとおそらく出てくる、`Dev Container: Reopen in Container`(開発コンテナー: コンテナーで再度開く)をクリックします。そして画像のように`すべての定義を表示`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/a35d8067-932b-70a1-ab87-131e1b1ece24.png)

pythonと入力し、出てきたPython3を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/e5c4307c-f86e-2948-e6ba-0e86c103612d.png)

後はエンターを数回押すだけです。そしてコンテナの立ち上げにそこそこ時間がかかるので気長に待ちましょう。

うまくいっていれば、左下に`開発コンテナー:Python3`と表示されているはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/aa5efdd6-6b7e-bade-26ca-170535ce0474.png)

jupyter拡張機能をインストールしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/770633bc-927a-e61a-f614-dd34f4a835f0.png)

`Ctrl+Shift+P`から`reload window`で画面を再読込して、拡張機能の有効化を完了しておきましょう。

試しに`main.ipynb`を作成して、HelloWorldしてみましょう。ファイルの作成は左上の方からできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/d39efeae-3fbb-b4b6-158f-3c6625f73570.png)

セルを選択して、`Ctrl+Enter`で実行できます。画像に従って進めていきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/07cf9f26-8dca-e32a-6588-1bcdecbb453c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/e4b2541e-068c-8793-b185-0e39c02b3cac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2034739/471547d1-b98a-0328-7a65-75a50d68d6e4.png)

これで実行できたはずです。更に詳しい設定については[こちらの記事](https://qiita.com/KMNMKT/items/636e7ba1fbd383bc1413)で紹介しています。

# 余談
この記事は自分の研究室の同期に紹介するテンションでできるだけ簡潔に環境を整えられないかと考えて書いた記事です。本当はもっと深いカスタマイズまで紹介したいのですが、あまり長ったらしくなると投げ出してしまうかな...と思いながら推敲しました。