0%

Programmingプログラミングナレッジ

Posted:2017.01.20

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

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)」でも引き続き紹介していきたいと思います。次は環境構築の準備などをメインにまとめていきます。

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】