macOS High Sierra(v10.13)でJavaScript開発環境を整える

macOS High SierraでJavaScript開発環境を整える

0. 開発するもののイメージ

• Webサイト、Webアプリケーション
• 将来的にスマホアプリにも対応できるように考える
• なるべくデファクトスタンダードを利用する
• 開発言語はトータルで一つにまとめたい
• サーバーサイドは node.js + Express
• フロントエンドは react
• データベースは mongodb
• サーバーインフラはAWSもしくはGCP

1. Homebrew をインストール

macOS用のパッケージマネージャー。いろんなソフトをインストールして使うことができる。https://brew.sh/index_ja.html

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. nodebrew をインストール

node.jsを色んなバージョンで動かすことができる。https://github.com/hokaccha/nodebrew

$ brew install nodebrew

3. node.jsをインストール

nodebrew を使って最新安定バージョンを入れる

$ nodebrew install-binary stable
$ nodebrew ls
v8.6.0
v8.7.0
v8.8.1

current: v8.8.1

4. 開発で使うnode パッケージをグローバルに入れる

npm を使って開発で使うパッケージをグローバル環境に入れる

• node-dev

  node.jsアプリのサーバーをソース変更のたびに自動立ち上げするツール
  https://github.com/fgnass/node-dev

• express-generator

  node.jsで動くwebフレームワーク express のプロジェクト構成を生成するツール
  http://expressjs.com/ja/starter/generator.html

• serve

  node.jsアプリを実行する
  https://www.npmjs.com/package/serve

• create-react-app

  フロントエンドをreactで構築する環境を整えてくれるツール
  https://github.com/facebookincubator/create-react-app

$ npm install -g node-dev
$ npm install -g express-generator
$ npm install -g serve
$ npm install -g create-react-app  

5. 動作確認

$ node -v
v8.8.1
$ express --version
4.15.5
$ serve
┌───────────────────────────────────────────────────┐
│                                                   │
│   Serving!                                        │
│                                                   │
│   - Local:            http://localhost:5000       │
│   - On Your Network:  http://192.168.11.15:5000   │
│                                                   │
│   Copied local address to clipboard!              │
│                                                   │
└───────────────────────────────────────────────────┘

$ node-dev
Usage: node-dev [options] script [arguments]