デバッグ実行可能なJavaScript学習環境を構築する

JavaScriptを腰を据えて手を動かしながら知識を深めるべく学習環境を整えましたので、覚書ます。
（正直 [Javascript Playground][playcode] が素晴らしいので、守秘義務のかからない汎用コードを少し試したいだけなら環境構築する必要ないです :sweat_smile: ）

# ゴール
- [Javascript Playground][playcode] 相当の環境構築

[playcode]: https://playcode.io/

### 【補足】ローカル環境に構築した理由

- [Javascript Playground][playcode] ではブレークを貼って処理中のオブジェクトをトレースできなかったので  
 （＝デバッグ実行で処置中のオブジェクトをトレースしたかったので）

# [Visual Studio Code][vscode]

[vscode]: https://azure.microsoft.com/ja-jp/products/visual-studio-code
![vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1866227/699aba77-6c21-2ae8-c3ae-fdca08437c68.png)

> コードを Azure に簡単にデプロイするための統合ツールを備えた、強力で軽量な無料コード エディターです。

## 拡張機能

|拡張機能|提供元|概要|
|:-|:-|:-|
|[IntelliCode][intellicode]|[Microsoft][microsoft]|コード補完が可能に|
|[IntelliCode API Usage Examples][intellicode-api-usage-examples]|[Microsoft][microsoft]|使用する API のコード サンプルに簡単にアクセス|
|[Live Preview][live-server]|[Microsoft][microsoft]|Web プロジェクトをプレビューする<br>:warning: この拡張機能はまだ開発中とのこと|
|[JavaScript Debugger (Nightly)][js-debug-nightly]|[Microsoft][microsoft]|JavaScript デバッガー|
|[Prettier - Code formatter][prettier-vscode]|[Prettier][prettier]|フォーマッタ|

[intellicode]: https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
[intellicode-api-usage-examples]: https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.intellicode-api-usage-examples
[live-server]: https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
[js-debug-nightly]: https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly
[prettier-vscode]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
[microsoft]: https://microsoft.com/
[prettier]: https://prettier.io/

---

# 環境構築

1. 砂場

   - フォルダ作成
     ```bash
     mkdir sandbox
     cd sandbox
     ```

1. 空のhtmlファイル

   - ファイル作成
     ```bash
     touch index.html
     ```

   - テンプレート反映（ `html:5` を選択）
     ```html
     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>
     <body>
         
     </body>
     </html>
     ```

   - 内容修正
     ```html
     <!DOCTYPE html>
     <html lang="jp">

     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Document</title>
     </head>

     <body>
         <div id="app">
             <title>hello world!</title>
         </div>
         <script src="./src/script.js"></script>
     </body>

     </html>
     ```


1. 試行コードを記載するjsファイル

   - フォルダ作成
     ```bash
     mkdir src
     cd src
     ```

   - ファイル作成
     ```bash
     touch script.js
     ```

   - 記載例（※抜粋：[JavaScript Questions][javascript-questions]）
     ```js
     const shape = {
       radius: 10,
       diameter() {
         return this.radius * 2;
       },
       perimeter: () => 2 * Math.PI * this.radius,
     };

     console.log(shape.diameter());
     console.log(shape.perimeter());
     ```

   - フォーマット  
    （＝[Javascript Playground][playcode]で言うところの右クリックメニュー「Format Code」）

     - コマンドパレット
       - ドキュメントのフォーマット（ショトカ: `Shift`+`Alt`+`f`）

1. デバッグ実行

   - 事前準備（[Live Preview][live-server]）
     - コマンドパレット
       - Live Preview: サーバーの起動（ショトカ: 初期値なし）
     - デバッグランチャーの構成例（デフォルトIP: `127.0.0.1`, Port: `3000`）
       ```json
       {
           "version": "0.2.0",
           "configurations": [
               {
                   "type": "chrome",
                   "request": "launch",
                   "name": "Launch Chrome against localhost",
                   "url": "http://127.0.0.1:3000",
                   "webRoot": "${workspaceFolder}"
               }
           ]
       }
       ```

   - 手順
     1. 実行とデバッグ（ショトカ: `Ctrl`+`Shift`+`D`）
     1. 注視したい行にブレークポイントを貼る
     1. デバッグの開始（ショトカ: `F5`）
        - リロード（ショトカ: `Ctrl`+`Shift`+`F5`）

   - 実行例
      ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1866227/ab3a5d31-3399-8897-b85f-a915d4698522.png)


#  参考サイト
- [『入門向け』VSCodeでJavaScriptの学習環境を構築する - rubytomato&#39;s “Getting Started”][001207]
- [Visual Studio CodeでのJavaScriptのデバッグ方法 - ICS MEDIA][11356]
- [GitHub - lydiahallie/javascript-questions: A long list of (advanced) JavaScript questions, and their explanations][javascript-questions]

[001207]: https://rubytomato.hateblo.jp/entry/2020/05/04/001207
[11356]: https://ics.media/entry/11356/
[javascript-questions]: https://github.com/lydiahallie/javascript-questions