最近流行りのフロントエンド構成（環境構築編）

こんにちわ
グローバルセンス株式会社のskanehiraです。

個人でサービスを作るに当たり
最近流行りのフロント構成を使ってみました。

備忘録も兼ねて構成について書いていきます。
何か参考になれればと思います。

★2018/05/03 追記
ディレクトリ配置が間違っていたので修正しました。
合わせて、少し文言も修正しました。

構成について

今回はこの構成にしました。
基本的にvue.jsをもとに公式推奨の周辺コンポーネントやライブラリを使っています。
ざっくり紹介します。

• node.js
  サーバサイドで実行できるjsの環境。
  つまりブラウザがなくてもjsを実行できる環境。
  node.jsを使って何かをするというよりも、
  node.jsでnpm(パッケージ管理システム)を使うことがメインかな。

• webpack
  js,css,画像ファイル,フォントファイル
  などのリソースをjsにビルドしてくれる。
  ビルダー的な役割として使っている。

• vue.js
  双方向バインドを導入しているjsフレームワーク。
  DOMを直接操作することはしないので値の変更・取得は簡単で扱いやすい。
  コンポーネントも扱えるので画面ごとにコンポーネントを分けることで可読性が上がる。

• vue-router
  vue.jsの拡張コンポーネント。
  名前の通りrouterの役割を果たしている。
  フロントだけで画面遷移処理をしてくれるので動きが軽く感じる。
  SPA（Single Page Application）にするならこれは欠かせない。

• ElementUI
  vue.jsのUIコンポーネントで、UI部品を簡単に使用する事ができる。
  Bootstrapみたいな感じ。
  vue.jsをもとに作っているので、親和性が高い。

• axios
  PromiseベースのHTTPクライアント。
  ajaxの代わりになるもの。
  非同期だけど、async/awaitによる同期処理も可能。

ゴール

フロント開発環境構築

node.js

• brewでnode.jsをインストール

brew install nodejs

• node.jsのバージョンを確認

skanehira:~/dev/php $ node -v
v9.11.1

• package.json（パッケージ情報が記載されているファイル）を作成する

mkdir sample
cd sample
npm init

npm initで対話側でpackage.jsonを作成しますが
具体的の内容は公式サイトを参照してください。

ちなみに、この記事用に作った時はこんな感じです。

skanehira:~/dev $ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (dev) sample
version: (1.0.0)
description: sample
entry point: (index.js)
test command:
git repository:
keywords:
author: skanehira
license: (ISC)
About to write to /Users/skanehira/Dev/package.json:

{
  "name": "sample",
  "version": "1.0.0",
  "description": "sample",
  "main": "index.js",
  "dependencies": {
    "npm": "^5.8.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "skanehira",
  "license": "ISC"
}


Is this ok? (yes) y
skanehira:~/dev $ cat package.json
{
  "name": "sample",
  "version": "1.0.0",
  "description": "sample",
  "main": "index.js",
  "dependencies": {
    "npm": "^5.8.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "skanehira",
  "license": "ISC"
}
skanehira:~/dev $

• webpack,webpack-cliを取得
  --save-devはプロジェクトごとにパッケージを管理したい場合につける

npm install --save-dev webpack webpack-cli

• vue.jsとその周辺コンポーネントを取得

npm install --save-dev vue vue-loader vue-router vue-template-compiler element-ui axios

• cssやimageファイルをwebpack通してjsに変換したいので、各種ローダーを取得

npm install --save-dev css-loader file-loader style-loader url-loader

コマンドを実行するのが面倒くさい方はこちらのjsonを使って下さい。

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "sample",
  "main": "index.js",
  "directories": {
    "test": "tests"
  },
  "scripts": {
    "build": "webpack"
  },
  "author": "skanehira",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.18.0",
    "css-loader": "^0.28.11",
    "element-ui": "^2.3.3",
    "file-loader": "^1.1.11",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  },
  "dependencies": {}
}

上記中身をpackage.jsonに保存後
jsonファイルが格納れているディレクトリ内で以下のコマンドを実行して下さい。

npm install

webpack.config.jsを作成

webpackで実際jsをビルドする時の設定をwebpack.config.jsに定義します。
ざっとこんな感じになります。

webpack.config.js

module.exports = {
        // ビルド対象js
        entry: './app/src/js/app.js',
        output: {
                // ビルド後出力するファイル
                path: __dirname,
                filename: './public/js/bundle.js'
        },
        resolve: {
                // webpackでvueをビルドできるようにするためのおまじない
                alias: {
                        vue: "vue/dist/vue.js"
                }
        },
        module: {
                // ファイルタイプ毎にローダーを設定
                // testに対象ファイル拡張子（正規表現可能）を指定
                rules: [
                        {
                                test: /\.vue$/,
                                loader: 'vue-loader',
                        },
                        {
                                test: /\.css$/,
                                loader: 'style-loader!css-loader', // css
                        },
                        {
                                test: /\.(otf|eot|svg|ttf|woff|woff2)(\?.+)?$/, // フォントやアイコン
                                loader: 'url-loader',
                        },
                        {
                                test: /\.(jpg|png|gif)$/, // imageファイル
                                loaders: 'url-loader'
                        },
                ]
        },
        mode : "development"
};

ディレクトリ構成

公開に不必要なファイルはサーバーに置く時に邪魔になるので。
プロジェクト構成はsrcと公開(public)を分けます。

ぼくは一応こんな感じにしていますが
他にもっと良い配置があるよという方はぜひご教示頂ければと思いますm(_ _)m

[skanehira@MacBook sample]$ tree -I "node_modules|vendor"
.
├── app
│   └── src
│       ├── components
│       │   ├── header
│       │   │   ├── header.html
│       │   │   └── header.vue
│       │   └── todoList
│       ├── css
│       ├── font
│       ├── img
│       └── js
│           └── app.js
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
└── webpack.config.js

上記の様にすれば
webpackでビルドしたらpublic/jsにbundle.jsが出来上がります。

次の記事で詳しく書きますが、
作るものによりますが、ぼくはpupblic/index.htmlをあんまりいじらないです。
画面の製造はapp/src/components配下を主に追加編集したりすると思います。

最後に

今回はフロントのプロジェクト構成や使用しているライブラリなど紹介しましたが
次回は実際どうやってコンポーネントを追加してくのかなどについて書いていきます。

本番はまだこれからです。