VS Code で快適Jupyter Notebooksコーディング　後編

# はじめに
この記事は2019/10/8に発表された[Announcing Support for Native Editing of Jupyter Notebooks in VS Code](https://devblogs.microsoft.com/python/announcing-support-for-native-editing-of-jupyter-notebooks-in-vs-code/)の要約記事＆弄ってみたレポートをしたいと思います。
[Announcing Support for Native Editing of Jupyter Notebooks in VS Code](https://devblogs.microsoft.com/python/announcing-support-for-native-editing-of-jupyter-notebooks-in-vs-code/)の要約記事が載っている[前編](https://qiita.com/ss_33_sss/items/b018e55834f21d1a593d)はこちらです。
今回は発表の機能を以下の７点に絞って動作を確認したレポートを掲載させていただきます。

- 動作確認１：そもそもJupyter Notebookの環境がVS Codeで利用できるようになっているか
- 動作確認２：オートコンプリート
- 動作確認３：OSコマンドとマジックコマンドの利用
- 動作確認４：変数エクスプローラー
- 動作確認５：グラフの表示
- 動作確認６：Markdownの記述
- 動作確認７：Pythonコードとしてのエクスポート

# VS Code で快適Jupyter Notebooksコーディング
## 導入編
[この記事](https://tech-blog.cloud-config.jp/2019-10-11-vscode-jupyter-notebooks-a/)を参考に、ショートカットCtrl+Shift+P(macの場合はCommand+Shift+P)でVS Codeコマンドパレットを開いて、「Python: Create Blank New Jupyter Notebook」を選択します。
私の環境ではアップデートしてもこちらのコマンドが見つからなかったので、空のJupyter Notebooksを作成して、VS Codeで開きました（そのあとは「Python: Create Blank New Jupyter Notebook」が出るようになったので、更新がうまくいっていなかったようです）。
一瞬、ipynbファイルのJSONが開いた後に以下のようなJupyter Notebookっぽい画面に切り替わりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/daa8f06d-4bb2-7172-e849-8352120e4cb3.png)

# 動作確認１：そもそもJupyter Notebookの環境がVS Codeで利用できるようになっているか
まずはJupyter Notebookの環境がVS Codeで利用できるようになっているか、簡単なprint文で確認してみました。
コードを書いて左下の再生ボタンをクリックすると、少し時間はかかりましたが、以下のように結果が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/e64896ba-c46a-b98b-c2a7-553b172814ef.png)

# 動作確認２：オートコンプリート
ライブラリ名や変数名は快適にオートコンプリートされました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/013e99d7-cd13-72d6-dfb4-c955b565208f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/a6ba8990-60c2-1397-41f8-4a66ccdd10de.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/ce0dd530-bd59-33ce-48b3-74b3ddd32c8c.png)

# 動作確認３：OSコマンドとマジックコマンドの利用
Jupyter Notebookでは先頭に「エクスクラメーション(!)」を付けることでOSのコマンドを実行することができます。
今回のVS Codeでも同様に利用することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/8f8ffb3a-1b30-ae22-fa37-3e21b83626bd.png)
また、[ここ](https://ipython.readthedocs.io/en/stable/interactive/magics.html)に載っているようなマジックコマンドも利用することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/e9aea3b8-2359-177e-015a-c96cd24ddee7.png)


# 動作確認４：変数エクスプローラー
[この記事](https://qiita.com/ss_33_sss/items/b018e55834f21d1a593d)でも紹介したように、変数エクスプローラーでは定義した変数の今の状態を見ることができます。
以下のように変数を定義します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/6dbf1759-4df0-f6ae-706a-826c32a83846.png)
そして、左から３つ目のアイコンをクリックすると、以下のように変数の中身を見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/2c0d48a2-779d-c115-2a24-5b62f06dad87.png)

# 動作確認５：グラフの表示
matplotlibを用いたグラフの表示もできました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/72a4cdea-8466-b724-a0b7-04de745eb8af.png)

# 動作確認６：Markdownの記述
セルにオンマウスしたときに現れる、以下のような左から２つめのMのアイコンをクリックすると、Markdown記法で文章を書くことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/72873a34-5a79-2724-ca55-98dabb0576c0.png)
以下のように編集＆プレビューすることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/897f6696-194b-b6e3-5f8c-82bc4018b24d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/ebc65687-7fd9-1edb-17ea-a5883dedeba9.png)
ちなみに右下の左から２つめの｛｝アイコンをクリックすると、Jupyter Notebooksに戻ります。

# 動作確認７：Pythonコードとしてのエクスポート
以下の右上のアイコンをクリックすることでPythonコードとしてエクスポートすることもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/2a0139c9-9a43-5799-6e37-a7e83360958c.png)
ちなみに以下のJupyter NotebooksをPythonコードとしてエクスポートしてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/8171ab09-9156-d662-c7de-d5b503f5b213.png)
結果は以下のようなPythonコードになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174954/2b03e12c-8338-000e-b267-21521bbba427.png)

# おわりに
2019/10/8に発表された[Announcing Support for Native Editing of Jupyter Notebooks in VS Code](https://devblogs.microsoft.com/python/announcing-support-for-native-editing-of-jupyter-notebooks-in-vs-code/)の弄ってみたレポートをしました。
今回は動作確認を行いませんでしたが、他にも以下の機能などがサポートされるそうです。  

- リモートJupyterサーバーへの接続：Jupyter Notebooksを開くと、デフォルトでローカルにJupyterサーバーが自動的に作成されますが、VS CodeコマンドパレットでJupyterサーバーURIを指定すると、リモートJupyterサーバーに接続できます。
- Jupyter Notebooksのデバッグ：上の「Pythonコードとしてのエクスポート」機能を使用して、Jupyter Notebooksのデバッグをサポートしています。Pythonインタラクティブウィンドウにコードを配置したら、VS Codeの統合デバッガーでコードをデバッグすることができます。今後、Jupyterエディターにセルデバッグできる機能が追加される予定です。

ますます便利になるVS Code。今後もその動向から目が離せませんね。