VS Codeしか勝たん

# はじめに

おはようございます！セイです

[MYJLab Advent Calendar 2021](https://qiita.com/advent-calendar/2021/myjlab)の14日目の記事です！

いよいよアドベントカレンダーも後半戦になってきましたね。あと少しで冬休みだからみんな頑張りましょう！

昨日は@linked34ceの[「Cとその基礎」](https://qiita.com/linked34ce/items/ecd8d745a427f92373ad)でした。ものすっごく量を書いてくれたのでびっくりしました、さすがししょう。

さて、前回は僕の担当記事では、pythonのデコレータを徹底的に説明しようと大きな目標を立てて結局途中で疲れってしまって、中途半端な記事になってしまいました。実は今日その記事を更新して、さらにあと二章ぐらいは書き足す予定ですが......

それはさておき、本日は簡単に僕が思うVS Codeの便利なところを少し紹介したいと思います。

# ブレークポイントでデバッグ

ブレークポイントはマイクロソフト的にはこうなるらしいです。

> ブレークポイントは、開発者が利用できる重要なデバッグ手法の 1 つです。 デバッガーの実行を一時停止したい任意の場所に、ブレークポイントを設定します。 たとえば、特定のブレークポイントで、コードの変数の状態を確認したり、呼び出し履歴を調べたりすることができます。 <br>
>出典(<https://docs.microsoft.com/ja-jp/visualstudio/debugger/using-breakpoints?view=vs-2022>)

要するにコードを好きな場所に止められて、そこから1行つづ実行していけると言うことです。その際実行中の変数の中身を簡単に調べられるからとても便利です。

では、早速く試してみよう！

## 基本

使用するコードば、前回僕の担当記事の関数の実行の所要時間、performanceを出力するものをサンプルとします。

```python
from functools import wraps
import time


def log_performance(func):
    @wraps(func)
    def with_logging_performance(*args, **kwargs):
        start_time = time.time()
        # 関数を実行
        res = func(*args, **kwargs)
        # 実行時間を計算して、プリントする
        run_time = time.time() - start_time
        print("%s was called in run time: %fs" % (func.__name__, run_time))
        return res

    return with_logging_performance


@log_performance
def Fib(n):
    """
    N番目のフィボナッチ数列を再帰法で求めている
    """
    def _fib(n):
        if n == 1:
            return 0
        elif n == 2:
            return 1
        else:
            return _fib(n - 1) + _fib(n - 2)

    return _fib(n)


print(Fib(10))
```

<br>
こんな感じです。

![demogif](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/Untitled.gif)


<img src="https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214090157.png" alt="ブレイクポイント" style="zoom:33%;" />

この赤いのがブレイクポイントです。行番号の前にクリックすると出てきます。それで、右上のDebug Python Fileを押せばデバグが開始され、ブレイクポイントで止まります。

ショットカットを使っても実行できます。僕の環境の場合はこうです


![実行メニュー](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214090232.png)

そしたらこういうツールバーが表示されます。

![ツールバー](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214090325.png)

左からそれぞれ

|                                                              |                   |                   |                                                              |
| ------------------------------------------------------------ | ----------------- | ----------------- | ------------------------------------------------------------ |
| ![20211214093243](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214093243.png) | 続行              | F5                | 次にブレイクポイントまで実行します。                         |
| <img src="https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214093304.png" alt="20211214093304" style="zoom: 50%;" /> | ステップ オーバー | F10               | 1行つづ実行します。関数があったらその内部に飛ばずにそのまま実行します。 |
| <img src="https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214093326.png" alt="20211214093326" style="zoom:50%;" /> | ステップ インする | F11               | 1行つづ実行します。関数があったらその内部に飛びます。        |
| <img src="https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214093338.png" alt="20211214093338" style="zoom:50%;" /> | ステップ アウト   | Shift+F11         | 呼ぶ出し元まで実行します。                                   |
| <img src="https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214093349.png" alt="20211214093349" style="zoom:50%;" /> | 再起動            | Shift+Command+ F5 | プログラムを再起動                                           |
| <img src="https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214093403.png" alt="20211214093403" style="zoom:50%;" /> | 停止              | Shift+F5          | プログラムを停止                                             |

と言う意味です。説明するより試してみるとわかりやすいです。

## 変数

VS Codeの左のここを押せばデバッグのビューが表示されます。

![vscode左のここ](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214090406.png)

そこの変数というところに全ての変数を調べることができます。

![［変数］ペーン](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/20211214082814.png)


## ウォッチ式
一番神と思えたのはここです。


![ウォッチ式git](https://raw.githubusercontent.com/KuroiCc/kuroi-image-host/main/images/Untitled3.gif)

すっごい！！！！！

こんな感じで、入れた表現式の値を表示してくれるので、コード変更しなくてもruntime中にいろんなものが調べられます。

## さらに
とにかく、ブレークポイントは本当に便利です。デバッグだけじゃなく、コードの挙動を理解するにも役立つので是非是非使ってみてください。

ちなみに、node.jsを入れればJavaScriptもブレークポイントできます。あと、環境配置が少しややごしいがTypeScriptもできます。

さらにいうと、VS CodeはSSHでサーバと繋いてその先のファイルを編集できるが、その場合でもブレークポイントできます。

でも使いすぎるとVS Codeなしでは生きていけない体になってしまうので、要注意かもしれない。


# おすすめの拡張機能

ついでに、翻訳系の拡張機能を二つだけ紹介します。

## Comment Translate

「Comment Translate」で検索されば出てきます。

Google Translate API を使ってコメントや変数名を翻訳してくれるものです。

![](https://raw.githubusercontent.com/intellism/vscode-comment-translate/af7de4bcd58024cd252ec2c4d0435bf337268877/doc/image/ja/Introduction.gif)

![](https://github.com/intellism/vscode-comment-translate/blob/af7de4bcd58024cd252ec2c4d0435bf337268877/doc/image/cn/variable.gif?raw=true)

機械翻訳くさいですが、なんか公式で[日本語のドキュメント](https://github.com/intellism/vscode-comment-translate/blob/HEAD/doc/README_JA.md)があったんで詳細は公式をチェック


## varTranslation

名前の通り変数名を翻訳してくれる拡張機能です。

コードを書いている時に、こんなことないですが

- 変数名をGoogle翻訳して
- 日本語を入れて
- コピペ

これを自動でできるのがこの拡張機能です。変数名を選択して以下のショットカットを押せば自動に変換できます。

```
win: "Alt+shift+t" 
mac": "cmd+shift+t"
```

![](https://raw.githubusercontent.com/SvenZhao/var-translation/f9ef10267874ca6b04bc0ac676cac0560c540b13/images/vscode1.gif)


「驼峰翻译助手」で検索しれば出てきます。なんでこの作者ここはチャイ語なのと思うところですが、こんなツール作るぐらいだからよほど英語で名前書きたくないでしょう。

## 最後に

ということで、いかがだったでしょうか。

少しは、あ、これ使えるって思ってくれたら嬉しいです。内容に関しては薄すぎて、あなた手抜きオブザ手抜きだねと思う人もいるかもしれないが、来年はちゃんとした技術的なもの記事を書きます。今はこれだけでご容赦を！！！

ではでは