非プログラマのWindowsマシンにGit、Node.js、Nuxt.js環境を構築する手順

デザイナー(非プログラマー)のWindowsPCにNuxt開発環境を構築してもらう必要がありましたので手順書を作りました。

# 目標

非プログラマーが非プログラマ―の操作によって開発環境を構築します。
最終的にWindowsPCでNuxt.jsのプロジェクトを起動することを目標とします。

# 導入内容

- Git for Windows
- Tortrise Git
- Node.js
- Yarn
- Nuxt.js

# 事前に準備するもの(プログラマーが伝えておくこと)

- Nuxt.jsプロジェクトを管理しているGitリポジトリのURL
- 導入するNode.jsのバージョン(たいていLTSでOKかと思います)
- Nuxt.jsプロジェクトの起動・接続方法(たいてい`yarn dev`、`localhost:3000`でOKかと思います)

# 手順

## Gitのインストール

以下の記事が完璧な内容でした。
[TortoiseGitのセットアップ](https://qiita.com/SkyLaptor/items/6347f38c8c010f4d5bd2)

こちらを参照してGit for Windows、Tortrise Gitを導入してください。
GitのホスティングサービスはGitLabで解説されていますが、GitHubでもほぼ同じ手順で実施できます。

上記の記事を参照し、最後の`git clone`まで全て進めてください。

### ツールの簡易説明

- `Git for Windows`: "Git"というツールをWindows環境で使用するために導入します。
- `Tortrise Git`: GitをGUI(マウス操作)で使用できるようにするために導入します。

## Nodeのインストーラのダウンロード

以下からNodeのインストーラをダウンロードし、実行してください。
[Node.js ダウンロード](https://nodejs.org/ja/download/)

たくさんの選択肢があり、どれを選択したらよいか迷うかもしれません。
ポイントは以下です。

- 32bit or 64bit
  - [Windows 64bit 確認](https://www.google.com/search?q=Windows+64bit+%E7%A2%BA%E8%AA%8D)といったキーワードでGoogle検索し、自身のPCがどちらなのかを確認してください。
- LTS(推奨版) or 最新版
  - Node.jsのバージョンをプログラマに確認してください
- .msi or .zip
  - わからない場合は`.msi`でいいと思います。

参考までに2019年11月現在の場合、以下を選ぶ方が一番多いと思います。

- LTS(推奨版) (2019年11月現在はv12)
- Windows Installer (.msi)
- 64bit

### Node.jsの簡易説明

Nuxt.jsを実行するために導入します。
「ノードジェイエス」または「ノード」と呼びます。

## Node.jsのインストール

ダウンロードしたファイルを実行し、Node.jsをインストールしてください。
全てYesやOKで進められるので、詳細な説明は割愛します。
こちらはGitより簡単です。

## コマンドプロントの起動

Node.jsのコマンドを実行するためにコマンドプロンプトを開きます。
開き方は[コマンドプロント　開き方](https://www.google.com/search?q=%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%97%E3%83%AD%E3%83%B3%E3%83%88%E3%80%80%E9%96%8B%E3%81%8D%E6%96%B9)といったキーワードでGoogle検索して確認してください。

コマンドプロントを開くことができたら以下のコマンドを実行してください。

```.bat(dos):コマンドプロンプト(実行するコマンド)
node --version
```

Node.jsのバージョンが表示されたら成功です。

```.bat(dos):コマンドプロンプト(実行結果)
C:\Users\ユーザー名>node --version
v12.13.0
```

## Yarnのインストール

Yarnを導入します。
コマンドプロンプトで以下を実行してください。

```.bat(dos):コマンドプロンプト(実行するコマンド)
npm install -g yarn
```

ダウンロードできたことを確認するために、以下を実行してください。

```.bat(dos):コマンドプロンプト(実行するコマンド)
yarn --version
```

Yarnのバージョンが表示されたら成功です。

```.bat(dos):コマンドプロンプト(実行結果)
C:\Users\ユーザー名>yarn --version
1.19.1
```

### Yarnの簡易説明

パッケージマネージャ（必要なものを簡単にダウンロードしてくれるツール）です。
よく「同じようなツールのnpmよりも優れている」と紹介されます。

## yarn install

上記でYarnをインストールしました。
続いてYarnを使用して必要なパッケージをインストールします。

### 作業フォルダの移動

まず、作業フォルダを先ほど`git clone`で生成したフォルダに変更します。
パスは「`git clone`を実行したフォルダ」ではなく「`git clone`で生成されたフォルダ」という点に注意してください。

```.bat(dos):コマンドプロンプト(実行するコマンド)
cd "git cloneで生成されたフォルダのパス"

# もしCドライブ以外(Dドライブなど)でgit cloneした場合、以下のように`/d`も付けてください。
cd /d D:\
```

または、以下の画像のようにアドレスバーに`cmd`と入力してコマンドプロンプトを起動する方法もあります。
この場合`cd`の実行が不要になりますので、こちらの方法もおすすめです。
（コメント欄で@htsignさんからで教えて頂きました。ありがとうございました）

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231426/8df4d9cc-8437-c2f8-7919-9db281cfe33e.png)

### yarn installの実行

そして`yarn install`を実行し、必要なパッケージを取得します。

```.bat(dos):コマンドプロンプト(実行するコマンド)
yarn install
```

最後にsuccessと表示されたら成功です。

## Nuxt.jsの起動とアクセス

最後にNuxt.jsのプロジェクトを起動し、Web画面を表示します。
コマンドプロントに`yarn dev`と入力してください。

```.bat(dos):コマンドプロンプト(実行するコマンド)
yarn dev
```

そしてブラウザのURL欄に`localhost:3000`と入力してください。
画面が表示されたら成功です。

以上で全手順が完了です。

# 備考

非プログラマ向けの手順なので、用語を雑に説明している点はご了承ください。
ただ、誤った説明は書いていないつもりです。
もし誤りがありましたらご指摘頂けますと嬉しいです。

また、環境によって差異が発生しそうな部分には"たいてい"といった言葉を付けるようにしました。
手順に詰まった場合はそのあたりをまず確認してみてください。