環境構築・システム 2017.01.20

WEB開発環境（Mac OS）に必要な各種インストール方法まとめ（1）

最終更新日：2018.5.1Update

WEBアプリケーション開発では開発環境の構築はもちろんのこと、いろいろな開発ツールやパッケージなどを使用します。今回はそれらのインストール方法を備忘録としてまとめてみました。まず第1回目はパッケージ管理ツールの導入や効率化するためのツールなどをメインにまとめています。

またこの後挙げていくツールのインストールはターミナルでコマンドを実行して進めていきますが、権限エラーなどが出る場合はsudoのコマンドで実行してください。

XcodeとCommand Line Toolsの準備

一部については事前にXcodeをインストールしておく必要があります。また合わせて、使用しているOSに合わせたCommand Line Toolsというものを入れておきます。まずはこちらから準備していきます。すでに両方とも揃っている場合は問題ありませんのでこのまま先に進めていきます。

【Xcode インストール】

https://developer.apple.com/xcode/jp/

上記公式サイトもしくはAppleのApp storeからインストールします

【Command Line Tools インストール】

1. https://developer.apple.com/にアクセス
2. AppleIDとパスワードを入力してアカウントログイン
3. Download Toolsを選択

【Command Line Tools インストール】

4. ページ下部のAdditional Toolsを選択
5. リストよりOSとXcodeの環境に対応するCommand Line Toolsを選択しインストールする

【Command Line Tools インストール】

XcodeとCommand Line Toolsが準備できたら進めていきます。

homeberw

OSへの各種開発ツールなどソフトウェアの導入やパッケージ管理を行います。インストール、削除、バージョンの更新や管理などが効率化されます。

// homebrewインストール
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

// インストール後の動作確認
$ brew doctor
Your system is ready to brew.　// このメッセージが表示されればOK

node.js ＆ npm

node.jsはサーバーサイドで動作するJavaScriptでプラットフォーム（実行環境）です。拡張性や高速化などが魅力的でさまざまなフレームワークが登場しています。node.jsとセットになっているnpm（Node Packaged Module）は、node.jsで使用するパッケージのインストール、削除、バージョンの更新や管理を行うものです。node.jsと合わせてインストールされます。

また、node.jsにはnodebrewというnode.jsのパッケージ管理ツールがあり、これを導入することで最新版以外のnode.jsも使えるようになります。なくても問題はありませんがいろいろと便利になるので先に入れておきます。

// homebrewでnodebrewをインストール
$ brew install nodebrew

// セットアップを行う
$ nodebrew setup

// パスの設定と有効化
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

// インストール後の動作確認
$ nodebrew -help　// ヘルプが表示されればOK

// nodebrewでnode.jsのインストール
$ nodebrew install-binary stable　// 最新の安定版バージョン
$ nodebrew use stable

// インストール後の動作確認
$ node -v　// バージョンが表示されればOK
$ npm -v　// バージョンが表示されればOK

bower

bowerはクライアント側で使用する各種パッケージのインストールや削除、バージョンの更新や管理を行うツールです。クライアント側の開発をより効率良く進めていくために役立ちます。また、bowerのインストールにはnode.jsとnpmが必要になります。

// npmでbowerをインストール
$ npm install -g bower

// インストール後の動作確認
$ bower -v　// バージョンが表示されればOK

gulp

gulpはコンパイルやファイル圧縮などのタスクを自動化するタスクランナーと呼ばれるツールです。こちらもいろいろなプラグインが用意されており拡張性あります。gulpのインストールには同じくnode.jsとnpmが必要になります。

gulpを実際に使用するにはグローバル環境とローカル環境（プロジェクトフォルダ内）の2つにインストールする必要がありますが、まず今回はグローバル環境のみのインストールを記載しています。ローカル環境へのインストールや詳しい使い方などは別記事で紹介したいと思います。

// npmでgulpをインストール
$ npm install -g gulp-cli

// インストール後の動作確認
$ gulp -v　// バージョンが表示されればOK

Sass & Compass

すでに前回記事「「Sass」＆「Compass」のインストール方法まとめ（Mac OS X）」でも詳しくまとめていますがあらためて紹介します。Sassはcssに拡張性を持たせたメタ言語です。コンパイルすることでCSSに変換されます。CompassはSassで使用できるプラグインで、効率的な制作ができるような機能がそろっています。SassとCompassのインストールにはrubyで書かれた各種ライブラリのパッケージ管理ツールであるgemというもの使ってインストールや更新を行います。

// gemでSassをインストール
$ sudo gem install sass

// インストール後の動作確認
$ sass -v　// バージョンが表示されればOK

// gemでCompassをインストール
$ sudo gem install compass

// インストール後の動作確認
$ compass -v　// バージョンが表示されればOK

いかがでしょうか、また次回記事「WEB開発環境（Mac OS）に必要な各種インストール方法まとめ（2）」でも引き続き紹介していきたいと思います。次は環境構築の準備などをメインにまとめていきます。