フロントエンド開発環境を作ろう（ES6用・超初心者向け）

自分のPCにある作業フォルダを、フロントエンド開発の「プロジェクトディレクトリ」にしていく工程です。
上から順にやっていけば出来上がります。
超初心者向けです。

前提

- VSCodeを使います。
- Node.jsはインストール済みとします。
- 主な作業はVSCodeのターミナルで作業します。
- GitHubのアカウントは取得済とします（Git使う場合だけ）

STEP1 : PCに作業フォルダをつくる

ローカルに任意のフォルダを作ります。場所はお好みで。
ここでは「project」という名前のフォルダにします。
作ったら、VSCodeで「project」フォルダを開いてください。当たり前ですが、中には何もない状態です。

STEP2 : npmで管理する = プロジェクトにする

「project」フォルダをnpmで管理できるようにします。
npmというのはNode.jsで使えるライブラリなどを管理してくれるマネージャーです。手動で管理するのは難しいからnpmさん頼みますっ！て感じです。

「フロントエンド開発プロジェクト」=「npmで管理されたフォルダ」でだいたい合ってると思います。

VSCodeのターミナルを開いて「project」フォルダに移動します。
移動コマンド→「cd」確認コマンド→「pwd」

移動したら、下記コマンドを入力します。
すると、このフォルダはnpmで管理されることになります。

npm init
npm init -y ← 面倒な場合はこちら
↓
package.jsonが作成される

STEP3 : Gitの準備（Git使う場合のみ）

「project」フォルダをGitで管理するには、「project」フォルダにいる状態でターミナルからこのコマンドを打ちます。

たったこれだけで「project」フォルダはGitで管理できます。

git init

Gitのリポジトリを設定します。URLはGithubで取得できます。

git remote add origin <Git リポジトリのURL>

その他、Gitの基本のコマンドはこちらです。

git add --all ← 更新ファイルを全てGitに上げる用意その１

git commit -m "更新内容のコメント" ← Gitに上げる用意その2

git push origin master ← 実際にGitに上げます

STEP4 : Webpackの導入

これはバラバラなJSをまとめてくれたり（バンドルと呼びます）、ローカルサーバー（更新したら自動リロードしてくれる！）を立てたりできる超便利なプログラムです。

npm install --save-dev webpack webpack-cli webpack-dev-server

この結果、作業フォルダにファイルが追加されたり、内容が変更されます。

- package.json に Webpack の情報が追記されます。（自動でやってくれるのです）
- package-lock.json ← 追加したファイルのバージョンを固定してくれます。
- node_modules が作成されます。インストール中にこれを.gitignoreに追加するか聞かれるので、Yesとします。
- .gitignore が作成されます。

STEP5 : Webpack を使いやすくするために package.json を編集する

"scripts"の部分を下記のようにします。
これはショートカットを作っています。
例えば、"test" コマンドで右側に書かれている "echo〜〜〜" というコマンドを実行できるようになります

  "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack-dev-server",
   "build": "webpack"
 },

STEP6 : webpack.config.js を作る（手動で！）

プロジェクトの中のファイル構成を下記にする例です。
- HTML : public/index.html
- ビルドされたJS : public/dist/bundle.js
- ソースコードJS : src/main.js

VCCodeで「project」のルートに「webpack.config.js」を作って、下記のように書きます。（コメントは消してください）

const path = require("path");
module.exports={
   mode:'development', ← 'production' にするとファイルが圧縮される（本番用）
   devServer:{
       open:true,
       openPage:"index.html",
       contentBase:path.join(__dirname,'public'), ← ルート。デフォルトでは「/」
       watchContentBase:true,
       port:8080
   },
   entry : './src/main.js',
   output : {
       filename : 'bundle.js',
       path : path.resolve( __dirname, 'public','dist' ),  ← ビルド先
       publicPath: '/dist/' ← 仮想JSの出力先。index.htmlから「/dist.bundle.js」で参照できる
   },
   devtool : 'inline-source-map'
}

STEP7 : .gitignore を編集（Git使う場合のみ）

不要なファイルがGitに上がらないようににします。

# mac
.DS_Store

# Node.js
node_modules

Goal : 使ってみる！

src/main.js を新規作成して何か書きます（console.logとか）
そして下記コマンドを入力すると、ローカルサーバーが起動してブラウザで下記URLにて確認できます！
http://localhost:8080/index.html

npm run start

ローカルサーバーを停止するには control + c です。

下記のコマンドで、ビルド（本番用にファイルを出力する）ができます。

npm run build

できましたか？