一から作るモダンフロントエンド環境【基本構築編】

どうも、ディベロッパーの羽田です。
最近業務でモダンJSフレームワークやwebpackを使うことが多くなってきたので開発環境の構築手順をまとめてみます。

概要

ウェブ開発のデファクトスタンダードとなりつつあるWebpackとモダンJSフレームワークを使用したフロント開発環境構築の手順をまとめました。
自分用のメモも兼ねてるので雑な部分や端折ったりしてる部分があります。

対象者

• ある程度JSの知識がある人
• モダンJSフレームワークに興味がある人
• Webpackを使用した開発環境構築に興味ある人

章節

• 【基本構築編】←イマココ
• 【Webpack & Babel編】
• 【css & sass編】(執筆中)
• 【React & React Router編】(執筆中)
• 【Redux編】(執筆中)

前提

実際のウェブ開発を想定して構築します

事前に導入しておくもの

• Node.js
• npm

上記ソフトウェアを使用するので環境に無ければインストールしておきます

$ node -v
v12.16.1

$npm -v
v6.13.4

執筆時点のバージョン情報。

作業環境と下準備

ターミナル or コマンドラインを開き、任意のディレクトリ内で以下コマンドを実行。

mkdir myapp

cd myapp

myAppディレクトリ内で、下記コマンドを実行。

$ npm init -y

すると以下のjsonファイルが生成されます。

packege.json

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ここまでが下準備。
続きは以下リンクから。

一から作るモダンフロントエンド環境【Webpack & Babel編】