デザイナー(非プログラマー)の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のセットアップ
こちらを参照してGit for Windows、Tortrise Gitを導入してください。
GitのホスティングサービスはGitLabで解説されていますが、GitHubでもほぼ同じ手順で実施できます。
上記の記事を参照し、最後のgit cloneまで全て進めてください。
ツールの簡易説明
Git for Windows: "Git"というツールをWindows環境で使用するために導入します。Tortrise Git: GitをGUI(マウス操作)で使用できるようにするために導入します。
Nodeのインストーラのダウンロード
以下からNodeのインストーラをダウンロードし、実行してください。
Node.js ダウンロード
たくさんの選択肢があり、どれを選択したらよいか迷うかもしれません。
ポイントは以下です。
- 32bit or 64bit
- Windows 64bit 確認といったキーワードで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のコマンドを実行するためにコマンドプロンプトを開きます。
開き方はコマンドプロント 開き方といったキーワードでGoogle検索して確認してください。
コマンドプロントを開くことができたら以下のコマンドを実行してください。
node --version
Node.jsのバージョンが表示されたら成功です。
C:\Users\ユーザー名>node --version
v12.13.0
Yarnのインストール
Yarnを導入します。
コマンドプロンプトで以下を実行してください。
npm install -g yarn
ダウンロードできたことを確認するために、以下を実行してください。
yarn --version
Yarnのバージョンが表示されたら成功です。
C:\Users\ユーザー名>yarn --version
1.19.1
Yarnの簡易説明
パッケージマネージャ（必要なものを簡単にダウンロードしてくれるツール）です。
よく「同じようなツールのnpmよりも優れている」と紹介されます。
yarn install
上記でYarnをインストールしました。
続いてYarnを使用して必要なパッケージをインストールします。
まず、作業フォルダを先ほどgit cloneしたフォルダに変更します。
パスは「git cloneを実行したフォルダ」ではなく「git cloneで生成されたフォルダ」という点に注意してください。
cd "git cloneで生成されたフォルダのパス"
# もしCドライブ以外(Dドライブなど)でgit cloneした場合、以下のように`/d`も付けてください。
cd /d D:\
そしてyarn installを実行し、必要なパッケージを取得します。
yarn install
最後にsuccessと表示されたら成功です。
Nuxt.jsの起動とアクセス
最後にNuxt.jsのプロジェクトを起動し、Web画面を表示します。
コマンドプロントにyarn devと入力してください。
yarn dev
そしてブラウザのURL欄にlocalhost:3000と入力してください。
画面が表示されたら成功です。
以上で全手順が完了です。
備考
非プログラマ向けの手順なので、用語を雑に説明している点はご了承ください。
ただ、誤った説明は書いていないつもりです。
もし誤りがありましたらご指摘頂けますと嬉しいです。
また、環境によって差異が発生しそうな部分には"たいてい"といった言葉を付けるようにしました。
手順に詰まった場合はそのあたりをまず確認してみてください。