More than 1 year has passed since last update.

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

Last updated at 2023-07-05Posted at 2023-07-04

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

ゴール

Javascript Playground 相当の環境構築

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

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

Visual Studio Code

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

拡張機能

拡張機能	提供元	概要
IntelliCode	Microsoft	コード補完が可能に
IntelliCode API Usage Examples	Microsoft	使用する API のコードサンプルに簡単にアクセス
Live Preview	Microsoft	Web プロジェクトをプレビューするこの拡張機能はまだ開発中とのこと
JavaScript Debugger (Nightly)	Microsoft	JavaScript デバッガー
Prettier - Code formatter	Prettier	フォーマッタ

環境構築

砂場
- フォルダ作成
```
mkdir sandbox
cd sandbox
```

空のhtmlファイル

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

テンプレート反映（ html:5 を選択）

<!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>

内容修正

<!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>

試行コードを記載するjsファイル
- フォルダ作成
```
mkdir src
cd src
```
- ファイル作成
```
touch script.js
```
- 記載例（※抜粋：JavaScript Questions）
```
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で言うところの右クリックメニュー「Format Code」）
  - コマンドパレット
    - ドキュメントのフォーマット（ショトカ: Shift+Alt+f）
デバッグ実行
- 事前準備（Live Preview）
  - コマンドパレット
    - Live Preview: サーバーの起動（ショトカ: 初期値なし）
  - デバッグランチャーの構成例（デフォルトIP: 127.0.0.1, Port: 3000）
    { "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）
  2. 注視したい行にブレークポイントを貼る
  3. デバッグの開始（ショトカ: F5）
    - リロード（ショトカ: Ctrl+Shift+F5）
- 実行例

参考サイト

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up