Windows 11 の VSCode の Jupyter 実行環境の構築

::: note
この記事は [「Windows 11 への Python のインストール」](https://qiita.com/mmake/items/5197afbe5c055f82265e) と [「Windows 11 への VSCode のインストール」](https://qiita.com/mmake/items/2cf2131a0ab5bc431215) の続きの内容になります。
:::

## Jupyter Notebook の概要
Jupyter Notebook（読み方：ジュピター ノートブック）はテキストと Python ソースコードをノートブックと呼ばれる 1 つの画面で組み合わせることができるアプリケーションです。

![](https://code.visualstudio.com/assets/docs/datascience/overview/jupyter-notebook-preview.png)

この記事では[「Windows 11 への Python のインストール」](https://qiita.com/mmake/items/5197afbe5c055f82265e) 、[「Windows 11 への VSCode のインストール」](https://qiita.com/mmake/items/2cf2131a0ab5bc431215) に引き続き、 18 歳の新入社員向けに VSCode の Jupyter Notebook 実行環境を構築する手順を説明します。

## Jupyter 実行環境の構築
### Visual Studio Code の起動
スタートメニューから「**Visual Studio Code**」を起動します。

![41_vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/f88aa5d6-b963-a554-2164-bd5b51b7c081.png)

### 拡張機能の追加
左端にある「**拡張機能**」アイコンをクリックします。

![32_installer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/8c08cb94-d013-c9df-ff07-4899784df11e.png)

### 拡張機能 の検索
拡張機能の検索ボックスに「jupyter」と入力します。

![43_extension.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/573c90ba-2d0b-279e-b103-7a53784fe8a6.png)

### 拡張機能 のインストール
検索結果に **Jupyter (Jupyter Extension for Visual Studio Code)** が表示されたら、「**インストール**」をクリックします。

![45_extension.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/ebef81fe-983f-2645-1a5e-1a9e1de74afa.png)

### ターミナルを開く
スタートメニューから「**ターミナル**」をクリックします。

![51_python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/27a68e3a-085e-1e43-581d-8b3f91e3dec4.png)

### Jupyter のインストール
ターミナルが開いたら、キーボードから「**pip install jupyter**」と入力し、Python の Jupyter パッケージをインストールします。

![53_python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/d05911e1-9df9-d391-86c9-eb9f7cc93fc8.png)

以上で基本的な環境構築は完了です。

## Jupyter ノートブックの作成例
### 新しいファイルの作成
VSCode のメニューから「**ファイル**」 > 「**新しいファイル**」の順にクリックします。

![61_python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/235e37bd-9694-ff20-c22b-d3b4dde9a965.png)

### ファイルの種類の選択
ファイルの種類の選択が表示されたら「**Jupyter Notebook**」をクリックします。

![63_jupyter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/8ce608cd-1a26-bd91-09f8-ed622792ab41.png)

### プログラムの入力
エディタが開いたら、セルに以下のソース コードを入力します。

``` Untitled-1.py
msg = "Hello world!"
print(msg)
```

![67_jupyter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/253b937e-5d31-60f6-1617-52d9c9ee14b0.png)

### プログラムの実行
セルの左にある **セルの実行ボタン ▷**をクリックします。

![69_jupyter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/4d58c258-24c9-4e70-9a76-494a8c5a6f8a.png)

### ネットワークアクセスの許可
Windows セキュリティの画面が表示されたら、「**許可**」をクリックします。

![71_jupyter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/e60efe9c-b2c7-b4ec-d253-faae6b7d5744.png)

### プログラムの動作完了
セルの下に、Hello World と表示されたら動作完了です。

![73_jupyter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3160433/cfd751b9-350e-257a-d05f-8e6d50833424.png)

# 参考文献
- Data Science in Visual Studio Code
https://code.visualstudio.com/docs/datascience/overview

- Visual Studio Code Marketplace > Jupyter
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

- Visual Studio Code> Marketplace Jupyter Keymap
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter-keymap

- Visual Studio Code Marketplace > Jupyter Slide Show
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.vscode-jupyter-slideshow

- Visual Studio Code Marketplace > Jupyter Cell Tags
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.vscode-jupyter-cell-tags

- Visual Studio Code Marketplace > Jupyter Notebook Renderers
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter-renderers