PCはMacを想定しています。

##今回の全体像

今回は下記のステップで進行

1.ターミナルでの操作
2.homebrewのインストール & 入門
3.nodebrewのインストール & Node.jsインストール
4.npmの利用と入門

##1.ターミナルでの操作

結論から言うとsassに入門するだけならターミナルでの操作は必要ありません。
しかし、現在のフロントエンド業界ではターミナルから使用するツールが非常に多いため今のうちから少しづつ慣れていく必要があります。

「黒い画面は・・・」とは言わずに少しづつ慣れていきましょう。

今回は最低限必要なコマンドを紹介します。まずは少しづつ覚えていきましょう。

今回使用するコマンド(本当に最低限です。)

cd : ディレクトリを移動する際に使用するコマンド
ls : 対象のディレクトリの中に入っているファイル一覧を表示するコマンド
mkdir : ディレクトリを作成するコマンド
touch : ファイルを作成するコマンド

###◆iTerm2の導入

今回はターミナルを使用する際に「iTerm2」というアプリを使用していきます。
Macにはデフォルトでターミナルアプリが入っていますが、初めての人には使いにくい部分があるので「iTerm2」というアプリをダウンロードして使用していきます。

iTerm2のダウンロード先へ

ダウンロード完了後、PCへインストールしていきましょう。

###◆iterm2の起動とコマンドの練習

では、先ほどインストールしたiTerm2を起動して実際にコマンドを入力してみましょう。

// ディレクトリの移動
$ cd

// 対象ディレクトリのファイル一覧を確認
$ ls

// ディレクトリの新規作成
$ mkdir ディレクトリ名

// ファイルの新規作成
$ touch ファイル名

####補足

基本的にコマンドには「オプション」というものが存在します。
オプションを使わなくても操作はできますが、利用することでより快適にコマンド操作ができるようになるので余裕がある方は使いながら覚えていきましょう。

よく使用する可能性があるオプション

では慣れてきたところで次のステップにいきましょう。

##2.homebrewのインストール & 入門

ステップ2では「homebrew」のインストールを行います。

ちなみにこの「homebrew」は多くのプログラマが使用しているであろうスーパーソフトです。
非常に便利なソフトですので、使いながら慣れていきましょう。

最低限必要なコマンドを覚えることで使えるようになりますので使いながら徐々に慣れていきましょう。

homebrewのページへ

タウンロード方法は下記のコマンドをターミナルで実行するだけです。

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

####補足(トラブルシューティング)

#####★homevrewがなぜかダウンロードできない場合

MacのOSによってはsudoコマンドを使用する必要があります。
もし、homebrewのダウンロードがうまくいかない場合は下記のようにコマンドを実行してください。

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

実効後、PWを聞かれますのでMacにログインする際のPWを入力してください。

###◆homebrewとは

homebrewはMacでソフトの導入を簡単にしてくれるパッケージ管理システムです。

###◆homebrewで使用するコマンド

今回使用するコマンドは下記です。(最低限のコマンド)
※フォーミュラとはソフトのことだと思ってもらえれば大丈夫です

// インストール
$ brew install <フォーミュラ名>

// アンインストール
$ brew uninstall <フォーミュラ名>

その他の便利コマンド

// Homebrewの環境診断
$ brew doctor

// Homebrew自体を最新にする
$ brew update

// インストール済みのパッケージを最新にする
$ brew upgrade

// 古いバージョンのフォーミュラを削除
$ brew cleanup

##3.nodebrewのインストール & Node.jsインストール

では、次にNode.js」とそれを管理する「nodebrew」をインストールしていきます。
インストール方法は複数あるのですが、今回は先ほとインストールした「homebrew」を利用します。

まず、すでにNode.jsが入っているかどうかを確認します。
下記のコマンドを入力してください。

# node -v

このコマンドで何も起きなければそのまま下へ。
※ここでnodeのバージョン情報などが表示された場合はすでにnodeが入っています。

では、brewを使用して「nodebrew」と「node.js」をインストールします。

// nodebrewのインストール
$ brew install nodebrew

// nodebrewを使ってnode.jsをインストール※今回は最新版をインストール
$ nodebrew install-binary latest

はい。これでインストールは完了です。

ここでおまじない的なことを実施します。
下記のコマンドを実行してください。

// bashを利用している場合
$ echo 'export PATH=$PATH:/Users/ご自身のPCのユーザー名/.nodebrew/current/bin' >> ~/.bashrc

ユーザー名がわからない方は下記のコマンドを実行
xxxxx.localと表示されるので「 xxxxx 」の部分がユーザー名です。

$ uname -n
xxxxx.local

ここで、~/.bashrcを読み込ませます。

$ source ~/.bashrc

最後にnode.jsが入っているかどうかを確認します。

// node.jsが入ったかを確認※ここでバージョン名が表示されれば無事に完了
$ node -v

Node.jsのページへ

####補足(トラブルシューティング)

#####★node.jsをダウンロードできない場合

下記のコマンドを実行してもダウンロードできない場合はパスを再度確認する

$ nodebrew install-binary latest

一度、~/.bashrcの存在有無を確認する

// homeディレクトリへ移動
$ cd

// 下記のコマンドを実施し、`.bashrc`があるかを確認
$ ls -a

ファイルがない場合は、~/.bashrcを作成して下記を記述

export PATH=$PATH:/Users/ご自身のPCのユーザー名/.nodebrew/current/bin

ファイルがあった場合は、.bashrcの中身を確認する

#####★node.jsはダウンロードできたがnodeのバージョンが確認できない場合

ダウンロードができているが下記のコマンドを実行してもバージョンが表示されない

$ node -v

下記のコマンドを実行してダウンロードできているnodeを確認する

$ nodebrew list

使用するnodeのバージョンを指定する

$ nodebrew use ダウンロードしたバージョン

最後に、再度バージョンを確認

$ node -v

##4.npmの利用と入門

npm(ノードパッケージマネージャー)が使用できるか確認する。
※Node.jsがインストールされると、npmを一緒にインストールされているはず。

下記のコマンドでバージョンが出るかを確認してみます。

// ※ここでバージョン名が表示されれば無事に完了
$ npm -v

###◆npmとは

後で記述予定

###◆npmで使用する基本的なコマンド

####パッケージのローカルインストール

カレントディレクトリ(現在いるディレクトリ)に「node_modules」というディレクトリが作成され、インストールしたパッケージは「node_modules」ディレクトリに格納される

// インストール
$ npm install <パッケージ名>

// アンインストール
$ npm uninstall <パッケージ名>

####パッケージのグローバルインストール

通常、インストール実行後は対象となるディレクトリの中にインストールしたパッケージが格納されるため、そのディレクトリ以外ではインストールしたパッケージを利用できない。

しかし、グローバルインストールを実施すると対象のディレクトリ以外でもパッケージの利用が可能になる。

デフォルトはローカルインストールなのでグローバルインストールする際は-gオプションを使用する。

// グローバルインストール
$ npm install -g <パッケージ名>

// グローバルアンインストール
$ npm uninstall -g <パッケージ名>

####インストールの際のオプションについて

ネット上で色々調べていると下記のような記述が出てくるはずです。

ちなみに、下記の3つは全て同じです。

$ npm install --save <パッケージ名>

$ npm i --save <パッケージ名>

$ npm i -S <パッケージ名>

ちなみに、下記の3つは全て同じです。

$ npm install --save-dev <パッケージ名>

$ npm i --save-dev <パッケージ名>

$ npm i -D <パッケージ名>

--saveと--save-devにはそれぞれ違いがありますが、現状では一旦そういうものがあるとだけ覚えておいていただければ大丈夫です。

気になる方はご自身で調べてみてください。
※一応下に簡単に違いを記述しておきます。

#####--saveオプションとは？

--saveオプションを実行するとpackage.jsonの「dependencies」に記載される。
「dependencies」に記載されているパッケージはnpm installした際に インストールされる。

$ npm install <パッケージ名> --save

$ npm uninstall <パッケージ名> --save

#####--save-devオプションとは？

--save-devオプションを実行するとpackage.jsonの「devDependencies」に記載される。
「devDependencies」に記載されているパッケージはnpm installした際に インストールされない。

##こちらもどうぞ
新人の指導者 or 新人の方へ