Skip to main content

モダンフロントエンド開発環境構築

フロントエンドの開発を行うには、以下のアプリやプラットフォームをインストールする必要があります。

  • Git
  • nvm（nvm-windows）
  • Node.js
  • npm（Yarn）
  • VS CodeやWebStormなどのエディター

Cloud9を利用する場合​

Cloud9を利用する場合はGit,nvm,Node.js,npmはデフォルトでインストールされているため、手動でインストールする必要はありません。
Yarnはデフォルトではインストールされていないため、インストールする必要があります。
（YarnはDx Lab Portal（Docusaurus）で利用しています）

存在・バージョン確認​

2023年7月時点のCloud9の状態

# Gitの存在・バージョン確認
$ git --version
git version 2.40.1

# nvmの存在・バージョン確認
$ nvm -v
0.39.0

# Node.jsの存在・バージョン確認
$ node -v
v16.20.1

# npmの存在・バージョン確認
$ npm -v
8.19.4

# Yarnの存在・バージョン確認
$ yarn -v
bash: yarn: command not found

ローカルを利用する場合​

ローカルを利用する場合は何もアプリやプラットフォームがインストールされていないことを想定しています。
会社のWindows端末に以下をインストールするには、管理者権限が必要なので申請を行う必要があります。

  • Git
  • Node.js

各種インストールの方法は以下の章を参照してください。

Gitのインストール​

Git を git-scm Web サイトからダウンロードしてインストールします。
インストール ウィザードで、Git インストールの設定に関する一連の質問に答えます。
何かを変更する特別な理由がない限り、すべて既定の設定を使用することをお勧めします。

caution

Gitのインストーラーの実行には管理者権限が必要であるため、会社のWindows端末を利用してる場合は申請を行う必要があります。

Gitの初期設定​

インストールしただけでは、Gitのユーザ情報が設定されていない状態なので、設定する必要があります。

ユーザー名とメールアドレス​

git logなどで表示されるユーザー名やメールアドレスを登録します。これをしないと初回commit時に怒られます。
ユーザ名やメールアドレスは自分のものを設定してください。

$ git config --global user.name 'Taro Okasan'
$ git config --global user.email 't-okasan@okasan.co.jp'

文字色​

gitではgit statusやgit diff時などにTerminalの文字色を良い感じにしてくれる機能が備わっているので、ONにしておきます。

$ git config --global color.ui true

日本語ファイル名をエンコードしない​

この設定をしないと以下のように日本語ファイル名がエンコードされちょっと見づらいので設定。

# エンコードされるイメージ
$ git status
Changes not staged for commit:
    modified:   "Git\343\201\256\345\247\213\343\202\201\346\226\271.md"

# エンコードしないよう設定
$ git config --global core.quotepath false

設定内容の確認​

git configに--listオプションを指定することで現在の設定を確認することができます。

$ git config --list
core.symlinks=false
core.autocrlf=true
core.fscache=true
color.diff=auto
color.status=auto
color.branch=auto
color.interactive=true
help.format=html
rebase.autosquash=true
http.sslcainfo=C:/Program Files/Git/mingw64/ssl/certs/ca-bundle.crt
http.sslbackend=openssl
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge --skip -- %f
filter.lfs.process=git-lfs filter-process --skip
filter.lfs.required=true
credential.helper=manager
user.name=ka-horikawa
user.email=ka-horikawa@okasan.co.jp
color.ui=true
core.quotepath=false

nvmのインストール​

なぜnvmからNode.jsをインストールするのか​

Node.jsはバージョンの更新の頻度が高く、公式からNode.jsをダウンロードした場合、バージョンを変更するために、再度アンインストールとダウンロードをしなければなりません。

nvm(node version manager) からNode.jsをダウンロードすることで、nvmがNode.jsのバージョンを管理してくれるので、アンインストールの手間がなくなります。

important

nvm-windowsはMicrosoft / npm / Google が推奨するWindows用のNode.jsバージョンマネージャーです。Mac/Linux 専用の純正nvmと完全に異なります。

※コマンドは一緒なので利用方法は変わりません

The Microsoft/npm/Google recommended Node.js version manager for Windows. This is not the same thing as nvm! The original nvm is a completely separate project for Mac/Linux only. This project uses an entirely different philosophy and is not just a clone of nvm.

macOS や Linux の場合​

最新バージョンのインストール方法は nvm-sh/nvm - GitHub の公式サイトで確認してください。 インストール後は、ターミナル（bash など）を再起動するか、source ~/.bashrc を実行すると nvm コマンドを実行できるようになります。

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Windows の場合​

nvm はもともと Linux 系のコマンドラインツールとして作成されていますが、Windows でも nvm-windows のインストーラー を使えば簡単にインストールできます。

詳細手順はMicrosoft の公式サイトを確認してください。
https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows

Node.js（npm）のインストール・バージョン変更（nvmの使い方）​

caution

Node.jsのインストール・バージョン変更には管理者権限が必要であるため、会社のWindows端末を利用してる場合は申請を行う必要があります。

tip

Node.jsをインストールすればnpmも一緒にインストールされます。
また、npmのバージョンは、Node.js の現在のバージョンに関連付けられている npm のバージョンに自動的に変更されます。

nvm が現在アクティブにしている Node.js のバージョンを調べるには、nvm current コマンドを使用します。

# nvm が現在アクティブにしている Node.js のバージョン確認
nvm current

nvm で特定のバージョンの Node.js をインストールしたいときは、nvm install コマンドを使用します。

$ nvm install 16  # メジャーバージョンを指定してインストールする場合
Downloading and installing node v16.14.0...

$ nvm install --lts  # 最新の LTS 版をインストールする場合
Installing latest LTS version.
v16.14.0 is already installed.

$ nvm install node  # 最新バージョンをインストールする場合
Downloading and installing node v17.7.1...

Node.js 環境を追加インストールすると、自動的にそのバージョンがアクティブになります。

$ nvm current
v16.14.0

$ node -v
v16.14.0

使用する Node.js のバージョンを切り替えるには、nvm use コマンドを使用します。

$ nvm use system  # システムインストールされた Node.js を使う
$ nvm use 16      # nvm でインストールしたバージョン 16 の Node.js を使う

インストールされている Node.js の一覧を表示するには、nvm ls コマンドを使用します。

$ nvm ls
       v14.19.0
->     v16.14.0
         system
default -> 16 (-> v16.14.0)
...
stable -> 16.14 (-> v16.14.0) (default)
...
lts/gallium -> v16.14.0

Yarnのインストール​

npm 経由でYarnをインストールします。

# Node.jsの存在・バージョン確認
$ node -v
# npmの存在・バージョン確認
$ npm -v

# Yarnの存在・バージョン確認ル
$ npm install -g yarn
# yarnのバージョンを確認
$ yarn -v

VS CodeやWebStormなどのエディター​

好みのものをインストールしてください

一般的なのは、VS Code（Visual Studio Code）です。 https://azure.microsoft.com/ja-jp/products/visual-studio-code