OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

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

最終更新日:2018.5.1 Update!!
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)」でも引き続き紹介していきたいと思います。次は環境構築の準備などをメインにまとめていきます。    
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram