パソコン初心者がMacでPHP(Laravel)とjs(Vue.jsさらにNode.js)とその他諸々の開発環境

#目的
パソコン初心者が突然LaravelとVue.js、さらにNode.jsのインストールをせざる得ない状況になった時に即座にインストールに困らないための手順書です。
Qiita初心者なので至らぬ点があるかもしれませんがよろしくお願いします。
各概要を軽く知りたい場合は
Laravel:[Laravelのここがすごい](https://qiita.com/nunulk/items/78d70ac809948b470bbc)
Vue:[Vue.js JP](https://jp.vuejs.org/v2/guide/index.html)
Node.js:[Node.js を5分で大雑把に理解する](https://qiita.com/hshimo/items/1ecb7ed1b567aacbe559)

追記:
[Windows版の開発環境の整え方]

#目次
- 1. [インストール前の下準備](#インストール前の下準備)
   - 1. [筆者の環境](#筆者の環境)
   - 2. [インストール前にインストールすると良いもの](#インストール前にインストールすると良いもの)
- 2. [Node.js](#nodejs)
    - 1. [インストール](#インストール)
    - 2. [パッケージ管理ツールの解説](#パッケージ管理ツールの解説)
- 3. [Laravel](#laravel)
    - 1. [インストール](#インストール-1)
- 4. [Laravel+Vue.js+Node.js+Mysqlの環境構築](#laravelvuejsnodejsmysqlの環境構築)
    - 1. [LaravelとVue.jsとそれとそれと](#laravelとvuejsとそれとそれと)
    - 2. [LaravelとMysqlの連携](#laravelとmysqlの連携)

# インストール前の下準備

## 筆者の環境

|項目|環境名|
|:-----------------:|:-----------------:|
|OS|MacOS high sierra|
|terminal|デフォルトにzshを導入|
|PHP|7.1.7|
|Mysql|14.14|
|初心者歴|1年|

## インストール前にインストールすると良いもの

Node.jsやLaravelを入れる前にまず入れておくべきものをご紹介
今回はここが本題ではないのでこの記事では~~すっ飛ばします~~必要な部分だけ触れて行きます。

| 名前|役割|
|:-----------------:|:-----------------:|
|Homebrew|Macのパッケージマネージャー|
|git||
|nodebrew|バージョンの管理/切り替え|
|composer|パッケージの管理/切り替え|

###homebrewのインストール

さらに詳しく知りたい方は[こちらの記事を](https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)読んでいただけると幸いです。
homebrewとは何者ぞ？という方はこの記事を見ている方なら多いと思いますが、簡単に言えばパッケージの導入を簡素かつさらに管理もできるシステムの一つだと思ってもらえれば良いかなと思います。
似たシステムとしてLinux(centos)のyumとrpmなども挙げられます。
勝手に私は索引のようなものと思っています。

```bash:terminal

$ ruby -e "$(curl -fsS http://gist.github.com/raw/323731/install_homebrew.rb)
```

これでhomebrewの導入が完了しインストールなどにもいけますが一応大切なコマンドだけまとめておきます。
brewの後ろにつけるコマンド

|コマンド|役割|
|:-----------------:|:-----------------:|
|search|パッケージの検索|
|install|パッケージインストール|
|remove|パッケージ削除|
|link|パッケージ有効化|
|unlink|パッケージ無効化|
|list|パッケージの表示|

他にもいっぱいあるけどここでは割愛

### ついでにgit

```bash:terminal

$ brew install git
```

### nodebrewのインストール

次にnodebrewです。
詳しいことは[こちら※英語(git)](https://github.com/hokaccha/nodebrew#install) [もしくは※日本語(qiita)](https://qiita.com/ebisennet/items/15c3c9fdb04e66db6323)

まずはじめにgithubからnodebrewをインストール

``` bash:terminal

$ curl -L git.io/nodebrew | perl - setup
```

次に.bashrcにパスを通します(zshの場合はbashをzshに変更)

``` bash:terminal

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```

その後適用

```bash:terminal

$ ebisennet$ source ~/.bash_profile
```

その後nodebrewで使えるコマンドまとめておきます

|コマンド       |役割|
|:------------------:|:-----------------:|
|ls-all|インストール可能な全てのバージョンを表示|
|install-binary　<任意>|バージョンインストール　<バージョン/stable(安定板)/latest (最新版)>|
|ls|インストール済みバージョン|
|use <任意>|バージョンの指定<インストール済みバージョン>|
|-v|バージョン確認|

useでバージョン指定していない場合は今後使うnpmが利用できないので確実に指定してください。

### composerのインストール

composerに関しては詳しくは[こちら](http://develtips.com/php/170)
とりあえず今回はbrewでインストールのDLし、

```:terminal

$ brew install homebrew/php/composer
```

導入を確認

```:terminal

$ composer
```

でこのような表示が出たらインストール完了

```:terminal

   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.6.3 2018-01-31 16:28:17

~~ 省略 ~~
  why                  Shows which packages cause the given package to be installed.
  why-not              Shows which packages prevent the given package from being installed.
```

# Node.js

## インストール

このインストールでは、先ほどインストールしたnodebrewを前提にして解説そして、インストールして行きたいと思います。もし先ほどのnodebrewでインストールが完了している場合は次のパッケージ管理まで割愛します。

#### ここからはインストールをしていない方向け

今回は最新版ではなく直近の安定板をインストールする前提で解説して行きます。
ターミナルではこのようにコマンドを叩いて見てください

```:terminal

$ nodebrew install-binary stable
```

これによってインストールは完了するはずです。
その後インストールの確認をするために

```:terminal

$ nodebrew ls 
```

とコマンドを打つと、直近の安定板がインストールされているはずです。
例えば2018/02/27だったらこんな感じ

```:terminal

$ nodebrew ls
v8.9.4
```

そしてバージョンを指定するために、ターミナルで

```:terminal

nodebrew use <任意のバージョン>
```

これでインストール完了かつ、有効化完了です。

## パッケージ管理ツールの解説

Node.jsをインストールすると一緒にパッケージ管理ツールとして**npm**というものがインストールされます。このツールによって可能となることとして、[このサイト](http://cabbalog.blogspot.jp/2017/12/npm-package-25.html)で紹介されているパッケージの一括管理やインストールを行えるようになります。
そして今回は早くて快適と言う噂に聞く**yarn**をそこからインストールして行きましょう。yarnについて詳しくは[こちら](https://www.webprofessional.jp/yarn-vs-npm/)。
インストールにはこのコマンドを打ち込みます

```:tarminal

$ npm install -g yarn
```

これによってyarnはインストールされます。
yarnを実際に使うのは環境構築の際に使って行きます。

# Laravel

## インストール

このインストールでの前提条件はcomposerをインストールしている状態であることです。
それでは初めて行きます。
と言ってもLaravelを**インストール**するだけならすごく簡単で、たったこのコマンドだけでインストール出来てしまうのです。(環境構築が終わるとは一切行っていない)

```:terminal

composer create-project --prefer-dist laravel/laravel <任意の名前> 5.5
```

# Laravel+Vue.js+Node.js+Mysqlの環境構築

ここからはLaravel+Vue.js+Node.js+Mysqlの環境構築をして行きましょう。
まずはじめに、この項目での流れを見て行きましょう。

- 1.LaravelとVue.jsとそれとそれと

- 2.LaravelとMysqlの連携

## LaravelとVue.jsとそれとそれと

cross-envをまずはじめにパスを通します。まずはじめにpackage.jsonを下記のように編集してください。

```:tarminal

{
  ~~省略~~,
"scripts": {
        "dev"		: "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch"		: "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot"		: "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
  ~~省略~~
}
```

さてここまで編集を終えたら次の段階に行きましょう
先ほどインストールしたyarnを使いパッケージをインストール

```:tarminal

yarn install
```

からの

```:tarminal

yarn run dev
```

で連携可能になりました。
もし間違えてはじめに素のままインストールをしてしまった場合は**yarn upgrade**からの

```:tarminal
yarn run dev
```

でエラー解消されます

## LaravelとMysqlの連携

LaravelとMysqlをリンクさせるために.envファイルを書き換えます


```:tarminal

vim ~/<任意のname>/.env
```

```:.env

~~省略~~
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=<任意のポート>
DB_DATABASE=<database名>
DB_USERNAME=<ユーザー名>
DB_PASSWORD=<パスワード>
UNIX_SOCKET=/tmp/mysql.sock
~~省略~~
```

一応これで連携は撮れるはずです


# 参考資料+もっと詳しく+読もう

Qiita
[homebrewとは何者か。仕組みについて調べてみた]
(https://qiita.com/omega999/items/6f65217b81ad3fffe7e6)
[NodeBrewインストール編]
(https://qiita.com/ebisennet/items/15c3c9fdb04e66db6323)
[nodebrew]
(https://github.com/hokaccha/nodebrew#install)
[Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4]
(https://qiita.com/acro5piano/items/908cd751b2ea97e19be1#%E3%81%AA%E3%81%9C-laravel-%E3%82%92%E4%BD%BF%E3%81%86%E3%81%AE%E3%81%8B)
[MacにNode.jsをインストール]
(https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
[PHP開発でComposerを使わないなんてありえない！基礎編]
(https://qiita.com/niisan-tokyo/items/8cccec88d45f38171c94)
[npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう]
(https://qiita.com/megane42/items/2ab6ffd866c3f2fda066)
[yarnチートシート]
(https://qiita.com/morrr/items/558bf64cd619ebdacd3d)
[Composerコマンドについて]
(https://qiita.com/reflet/items/d6f2c48688eb0f3af65d)
[Laravel artisanコマンドメモ]
(https://qiita.com/zaburo/items/37768b743ed6d0e28bf5)
他サイト
[人気npmパッケージ25本をサクッと紹介する]
(http://cabbalog.blogspot.jp/2017/12/npm-package-25.html)
[composer再入門(PHPパッケージ管理システム)]
(http://develtips.com/php/170)
[]
()