PCはMacを想定しています。
今回の全体像
今回は下記のステップで進行
1.ターミナルでの操作
2.homebrewのインストール & 入門
3.nodebrewのインストール & Node.jsインストール
4.npmの利用と入門
1.ターミナルでの操作
結論から言うとsassに入門するだけならターミナルでの操作は必要ありません。
しかし、現在のフロントエンド業界ではターミナルから使用するツールが非常に多いため今のうちから少しづつ慣れていく必要があります。
「黒い画面は・・・」とは言わずに少しづつ慣れていきましょう。
今回は最低限必要なコマンドを紹介します。まずは少しづつ覚えていきましょう。
今回使用するコマンド(本当に最低限です。)
- cd : ディレクトリを移動する際に使用するコマンド
- ls : 対象のディレクトリの中に入っているファイル一覧を表示するコマンド
- mkdir : ディレクトリを作成するコマンド
- touch : ファイルを作成するコマンド
◆iTerm2の導入
今回はターミナルを使用する際に「iTerm2」というアプリを使用していきます。
Macにはデフォルトでターミナルアプリが入っていますが、初めての人には使いにくい部分があるので「iTerm2」というアプリをダウンロードして使用していきます。
ダウンロード完了後、PCへインストールしていきましょう。
◆iterm2の起動とコマンドの練習
では、先ほどインストールしたiTerm2を起動して実際にコマンドを入力してみましょう。
// ディレクトリの移動
$ cd
// 対象ディレクトリのファイル一覧を確認
$ ls
// ディレクトリの新規作成
$ mkdir ディレクトリ名
// ファイルの新規作成
$ touch ファイル名
補足
基本的にコマンドには「オプション」というものが存在します。
オプションを使わなくても操作はできますが、利用することでより快適にコマンド操作ができるようになるので余裕がある方は使いながら覚えていきましょう。
よく使用する可能性があるオプション
では慣れてきたところで次のステップにいきましょう。
2.homebrewのインストール & 入門
ステップ2では「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をダウンロードできない場合
下記のコマンドを実行してもダウンロードできない場合はパスを再度確認する
$ 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した際に インストールされない。