フロントエンド開発環境の構築 | siimplelab (단순함연구소)

Frontend Development Environment — Photo by Ilya Pavlov on Unsplash

フロントエンド開発には3つのツールが必要です。エディタ、ランタイム、バージョン管理ツールです。

VSCodeのインストール

code.visualstudio.comからダウンロードします。

インストール後、便利な拡張機能を追加します。

Prettier - コードフォーマット
ESLint - コード品質チェック
Live Server - ローカル開発サーバー

Cmd+Shift+X（Mac）またはCtrl+Shift+X（Windows）で拡張機能タブを開き、検索してインストールします。

Node.jsのインストール

nodejs.orgからLTS版をダウンロードします。

インストール確認：

node --version
npm --version

バージョン番号が表示されれば成功です。

Gitのインストール

git-scm.comからダウンロードします。

インストール後、ユーザー情報を設定します。

git config --global user.name "名前"
git config --global user.email "email@example.com"

設定確認：

git config --list

最初のプロジェクト作成

ターミナルでプロジェクトを作成します。

mkdir my-project
cd my-project
npm init -y
git init

VSCodeでフォルダを開きます。

code .

index.htmlファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Live Server拡張機能で右クリック後「Open with Live Server」を選択するとブラウザで確認できます。

.gitignore設定

node_modulesフォルダはGitに含めません。

echo "node_modules" > .gitignore

最初のコミット

git add .
git commit -m "Initial commit"

開発環境の設定が完了しました。