開発環境の整備とコマンド一覧（Windows版）

# 概要
ここではWindows PCを利用している人向けに開発体験で利用するツールの紹介やインストール方法、コース内で利用するコマンドについて紹介します。
また、簡単はWebページを作って、最低限の動作確認もしてみたいと思います。

# 利用するツール
以下のツールを利用する予定です。

エディタ（プログラムを書くソフト）：Visual Studio Code（最新版）
ブラウザ：Google Chrome（最新版）
node.js（サーバでJavaScriptという言語を動かすソフト）：16.x（インストールは後々紹介）
node.jsのインストールについては「テストをしてみよう（単体テスト）」で改めて紹介します。


# Visual Studio Code(VSCode）のインストール
Visual Studio Codeをダウンロードしてインストールします。
[公式サイト](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)からダウンロードします。
「今すぐダウンロード」をクリックします。
![000001.jpg](https://drive.google.com/uc?export=view&id=18_F-NKd_PBD_LUkFb0QMaj4eeMualYjR&.jpg)

Windowsを選択します。
![000010.jpg](https://drive.google.com/uc?export=view&id=16zSX0tQHuLU-nyTNEySPn2dCWBBZon3S&.jpg)


デフォルトの場合、ダウンロードフォルダに入るので、ダウンロードフォルダを開きます。
`VSCodeUserSetup-x64-1.66.2`といったファイルがあるのでダブルクリックで開きます。
インストーラーが起動するのでガイダンスに沿ってインストールします。
「同意する」を選択します。
<img width="1756" alt="000020.jpg" src="https://drive.google.com/uc?export=view&id=1UA8t3gM-lOVBS6MWRje2mgGwOrVuIaVT&.jpg">
<img width="1756" alt=000030.jpg" src="https://drive.google.com/uc?export=view&id=1F2ez4DdL_arNAYkLv4ST9GVTO4eAoI03&.jpg">
<img width="1756" alt="000040.jpg" src="https://drive.google.com/uc?export=view&id=18M8S3SLwItIHWVGtlT7RfsQlyXPZseq7&.jpg">
デスクトップにアイコンを作成したい場合はチェックを入れます。
<img width="1756" alt="000050.jpg" src="https://drive.google.com/uc?export=view&id=1YVPHm63AFOE1ExpZNLMakyaRtXzes52i&.jpg">
<img width="1756" alt="000060.jpg" src="https://drive.google.com/uc?export=view&id=1o8wK3BAuzdlG5qKu1zFywnh7TWO9Cr7K&.jpg">
<img width="1756" alt="000070.jpg" src="https://drive.google.com/uc?export=view&id=175bOnkYewbs21iy0rUZKxVn_PXksTemv&.jpg">
完了をクリックするとVSCodeが立ち上がります。
<img width="1756" alt="000080.jpg" src="https://drive.google.com/uc?export=view&id=1PZX2eXB_MO29wURG2tFxckLUZZYZz5uT&.jpg">

## ターミナルから起動を確認
左下の検索に「windows power shell」または「コマンドプロンプト」と入力してpower shellまたはコマンドプロンプトを起動します。

:::note 
PowerShellとコマンドプロンプトはどちらもWindowsでコマンドを実行させるためのツールです。
PowerShellはWindows7から有効になった機能で、コマンドプロンプトと同じコマンドが使える上に更に多くのコマンドが使えるようになっています。
今回の開発体験ではどちらを使っても特に支障はありません。
:::
<img width="1756" alt="000090.jpg" src="https://drive.google.com/uc?export=view&id=1rdIksarXgfZ9LpYIe6prY-Pv-ozCv2Lt&.jpg">
「code」と入力してエンターします。

```
code
```
自動でVSCodeが起動することが確認できれば設定完了です。
<img width="1756" alt="000100.jpg" src="https://drive.google.com/uc?export=view&id=1Jcv_rKDwjpL4hWTWxSLkIwrXsEr-Uz9K&.jpg">



# 簡単な動作確認
HTMLファイルを作成して動作確認を行います。
方法はMac版と同様なので、[開発環境の整備と動作確認](https://qiita.com/minimumskills/items/23687e3ee5e5a5885534#%E7%B0%A1%E5%8D%98%E3%81%AA%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D)を確認して作業を進めてください。

# node.jsのインストール
https://nodejs.org/ja/

## インストール
node.jsのインストール方法です。
[公式サイト](https://nodejs.org/ja/)からLTS版（推奨版）をクリックしてダウンロードします。
![000110.jpg](https://drive.google.com/uc?export=view&id=1cOd54W7gKPhxCzRT-6D8oqcuB2fBRY5y&.jpg)

ダウンロードしたファイルをクリックして開きます。
![000120.jpg](https://drive.google.com/uc?export=view&id=12_jx49mnBib756uUX7WRAyah34ecXiMr&.jpg)

セットアップウィザードが開くので案内に沿って進めていきます。「Next」をクリックします。
![000130.jpg](https://drive.google.com/uc?export=view&id=1C9EmPRkzvA0GSxfyGJfepxpsEisgQ8pj&.jpg)

ライセンス同意書なので「I accept the terms in the License Agreement」にチェックを入れて「Next」をクリックします。
![000140.jpg](https://drive.google.com/uc?export=view&id=1DiHSrRZNxMNgt8dwd0imBvZpMuPfAda8&.jpg)

インストール先のフォルダの確認です。変更せずそのまま「Next」で進めます。
![000150.jpg](https://drive.google.com/uc?export=view&id=1zgST9HovijXqV1cKPd1Jy0BaepCzppzM&.jpg)

セットアップのカスタムができますが、何もせず「Next」をクリックします。
![000160.jpg](https://drive.google.com/uc?export=view&id=1Cc7kUliAoROfjCUpJ4x6Ew5g9IypvOhI&.jpg)


ネイティブ拡張の開発に必要なツールのインストールが必要な場合はチェックを入れますが、ここでは不要なので何もせず「Next」をクリックします。
![000170.jpg](https://drive.google.com/uc?export=view&id=1DR7kAC4U-crDBKlLxq6aTBLK3k3ExyOA&.jpg)

「Install」をクリックしてインストールを開始します。
![000180.jpg](https://drive.google.com/uc?export=view&id=1IQsfT5y_WvKqDlhW2fwPS62wagTswjX-&.jpg)

インストール状況を表示するウィザードが流れます。
> 「このアプリがデバイスに変更を加えることを許可しますか？ 」というダイアログボックス（ユーザーアカウント制御（User Account Control））が表示された場合は「はい」をクリックして進めます。
![000190.jpg](https://drive.google.com/uc?export=view&id=1GRpEbfujUbysDz8zPECTqp5xlgdy02WE&.jpg)

少しするとインストールが完了します。「Finish」をクリックして完了です。
![000200.jpg](https://drive.google.com/uc?export=view&id=1nKc-nAfct3cF3z3rPhOZo_fPNzA_XIcB&.jpg)


## 確認
インストールが正常に完了しているか、コマンドを使ってnodeとnpmのバージョンを確認します。
PowerShellまたはコマンドプロンプトを立ち上げて確認します。

```
node -v
```

`v16.18.0`といったようにインストールバージョンが返ってくれば正常にインストールができています。
次にnpm（nodeパッケージ管理ツール）のバージョンを確認します。
> node.jsのインストールしたバージョンによってnpmバージョンも異なります。詳しくは[公式サイト](https://nodejs.org/ja/download/releases/)で確認してみてください。

```
npm -v
```
`8.19.2`といったようにバージョンが返ってくれば完了です。


# Mac - Windowsコマンド対応表
開発体験コースで利用するコマンドについて紹介します。
開発体験コースの記事内ではMacのコマンドで進められています。
Windows PCでうまくコマンドが動作しない場合はこちらの一覧を確認して進めてください。

:::note 
PowerShellとコマンドプロンプトはどちらもWindowsでコマンドを実行させるためのツールです。
PowerShellはWindows7から有効になった機能で、コマンドプロンプトと同じコマンドが使える上に更に多くのコマンドが使えるようになっています。
今回の開発体験ではどちらを使っても特に支障はありません。
:::

「PowerShellで使える記述」はPowerShell内でエイリアスが設定されているため、この記述でも使えるという意味です。

|Macコマンド|コマンドプロンプト|PowerShell|PowerShellで使える記述|意味|
|---|---|---|--|--|
|ls|dir|Get-ChildItem|dirまたはls|一覧を取得|
|pwd|@cd|Get-Location|pwd|現在地確認|
|cd|cd|Set-Location|cd|ディレクトリ移動|
|mkdir|mkdir|mkdir|-|ディレクトリ作成|
|touch index.html|type nul > index.html|New-Item index.html|-|空のindex.htmlを作成|
|rm|del |Remove-Item|rm または del|ファイル削除|
|rmdir|rd|Remove-Item|rmdir または rd|ディレクトリ削除|