作成日:2021/04/12 更新日:2022/08/09

#1 コマンドラインを使おう

なぜコマンドラインを使うの?

コマンドラインとはマウスを使わずに、キーボードだけの操作を指します。 PCへの命令コマンド する 入力行ラインですね。 コマンドラインはアプリケーション(コマンドラインツール)を使って実行します。

フロントエンドエンジニア中級まではPHPのバージョンをMAMP(XAMPP)などのアプリケーションを使うことで管理してきました。
上級になるとNode.jsやPython、JAVAなどを扱っていきますが、これらの言語のインストールやバージョンアップするのに便利なのが「パッケージマネージャー」です。
上級者はPHPやMySQLもMAMP(XAMPP)を使わずにパッケージマネージャーで管理します。

コマンドラインツールで「パッケージマネージャー」をインストールしたり、そのパッケージマネージャーからプログラミング言語をインストール、アプリの実行をしていきます。

CLIとGUIの違い

CUI操作画面
CLI
GUI操作画面
GUI
CLICommand Line Interfaceコマンドラインインターフェース)とは文字でPCに命令を出す手法で、画面上で命令文を打ち込み、ファイル操作やプログラムの実行を行います。
GUIGraphical User Interfaceグラフィカルユーザーインターフェース)とは、普段私たちがマウスやキーボードで画面を操作していることをさします
現在ほぼ全てのPCがGUIで操作していますが、上記で紹介した仕事効率化ソフトのインストールや操作をするときはコマンドラインで操作することがありますので今のうちに慣れておきましょう。

コマンドラインツールを起動する

早速コマンドラインツールを起動してみましょう。
MacとWindowsでは起動方法が異なるのでそれぞれの方法で起動してください。

Macの場合
アプリケーションフォルダのユーティリティの中から「ターミナル」をダブルクリック
ターミナル.app

Windowsの場合
【Win(Windowsマーク)+R】で「ファイル名を指定して実行」機能を起動して下記を入力しましょう。

cmd
Windowsはこれだけで起動します。

コマンド画面の見方

ターミナルを起動すると以下の画面が出ると思います。
※画面と文字の色に関しては設定によるものなので同じでなくて問題ありません。
実際に打ち込んでいくのはメソッドと引数の部分になります。
PC名、ディレクトリ、ユーザ名の部分はなにが表示されているかが分かっていれば問題ありません。

#2 パッケージマネージャーHomebrewを使う

Homebrewホームブリューはパッケージ管理ソフトです(Windowsの場合はChocolateyなど)。
フロントエンドエンジニア上級コースで使うプログラミング言語のバージョン管理が簡単に行うことや、jsライブラリ、PHPフレームワークをインストールできる便利なアプリです。

まず最初にWeb制作における「仕事効率化」をするために、 Gitギット Node.jsノード ジェイエスを習得しましょう。 Node.jsとは簡単に言うとプラグインをインストールするためのライブラリです。 厳密に言えばライブラリとしての機能は使い方の一部ですが今はそれだけ覚えていれば大丈夫です。

インストールの手順

インストール手順ですが、MacとWindowsで異なりますので自分が使っているOSの手順を見てください。

Macでのインストール方法

  1. Xcodeエックスコードのインストール
  2. Homebrewホームブリューのインストール
  3. nodebrewノードブリューのインストール
  4. Node.jsノードジェイエスのインストール

Xcodeのインストール

XcodeはMac OSで使えるIDE(統合開発環境)の1つです。
iOS向けのソフトやアプリ制作に特化しているIDEです。
実際に使うのはXcodeに含まれている、command line developer toolsコマンドライン・デベロッパー・ツールのみ使いたいのでIDEは起動しなくて大丈夫です。
インストール方法は2種類ありコマンドでインストールするか、AppStoreからインストールするかです。 今回はコマンドからインストールしましょう。

% xcode-select --install
上記のコマンドを入力すれば、下のポップアップが出てくるので「インストール」を選択しましょう

インストールが完了したらもう一度上のコマンドを打ち込んでインストールされているか確認しましょう。

% xcode-select -v
xcode-select version 2354.
この表示が出たらXcodeのインストール完了です。

パッケージマネージャーHomebrewを使ってみよう

Homebrewはツールの「実行ファイルや設定ファイルをひとまとめにしたもの=パッケージ」と呼ばれるもののインストールやアンインストール、アップデートを人間の代わりに管理してくれるツールです。
下記の公式サイトにインストールするためのコマンドが用意されています。
Homebrew公式サイト

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
こちらのコマンドを入力してHomebrewをインストールしましょう。

インストールされるファイルが表示されます。 このまま続行するので「Enter」を押しましょう。 そうすると下記の箇所で止まります。

PCにログインする時のパスワードを入力して、インストールが完了するのを待ちます。
完了したら、下記のコマンドを打ち込んでHomebrewがインストールされているか確認しましょう。

% brew -v
↓
Homebrew 3.5.8
このような表示が出たらHomebrewのインストール完了です。

Macのシェルを確認します

シェルとはコマンドを入力することで動くプログラムのことです。

% echo $SHELL
↓
/bin/zsh  ←などと表示されます
※MacはCatalina以降のデフォルトシェルがzshジー シェルとなっています。 それ以前はbashバッシュが使われていました。

Homebrewのパスを通します


//zshの場合
% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile

//bashの場合
% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.bash_profile
インストール後には記載されている通り、上記のコマンドを実行してパス(コマンド格納ファイルまでの階層)を記載しましょう。

% /opt/homebrew/bin/brew -v   //コマンドまでのパスが長い。。。
↓
% brew -v
このようにコマンドを短く記載できるようになります。
また、パスを通したあとはターミナルを再起動するか、コマンドsource ~/.zshrcを実行しましょう。
/Users/ユーザ名/の直下に.zprofileファイル(もしくは.bash_profile)が作成され、パスが通ります。
~//Users/あなたのユーザ名/と同じ意味です。

nodebrewのインストール

nodebrewは自分のPC内で複数のNode.jsのバージョン管理をするツールです。
プロジェクト毎に使用するNode.jsのバージョンが違う時にそれぞれのプロジェクトに異なるバージョンのNode.jsをインストールすることができます。

% brew install nodebrew
コマンドを入力すると、インストールされます。

nodebrewのパスを設定します


//zshの場合
% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc

//bashの場合
% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
「.bash_profile」や「.zshrc」という設定ファイルに「.nodebrew/current/bin」までのパスを変数 $PATH にいれて設定しています。
パスが追加されているかを確認しましょう。

//コマンドを打ち込むと
echo $PATH
↓
//この表示が出てくればOKです。
/Users/ユーザ名/.nodebrew/current/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
コロン区切りです。一番最初の/Users/ユーザ名/.nodebrew/current/binが優先されます。
これで、nodebrewに関しては完了です。

% nodebrew -v
↓
nodebrew 1.2.0
・
・
・
バージョンを確認するとインストールされていることが確認できます。

Node.jsのインストール

Node.jsをインストールするコマンドは複数あります。

nodebrew install-binary latest    //最新版のインストール
nodebrew install-binary stable    //安定版のNode.jsがインストールされます
nodebrew install-binary v16.11.0  //バージョンを指定してNode.jをインストールします。今回はこちらで。

//逆に、特定のバージョンを指定してアンインストールする場合
% nodebrew uninstall v18.7.0
今回は安定板のv16.11.0をインストールしましょう。

% nodebrew install-binary v16.11.0
Fetching: https://nodejs.org/dist/v16.11.0/node-v16.11.0-darwin-arm64.tar.gz
############################################################################################# 100.0%
Installed successfully
これでインストール完了です。

Node.jsを有効化する方法


% nodebrew ls
v16.11.0
v18.7.0

current: none
インストールしたNode.jsを確認します。バージョン18.7.0がインストールされていますが、何も有効化されていません。

% nodebrew use v16.11.0  /* 使用するバージョンを選ぶと... */
use v16.11.0             /* 指定したバージョンが利用できるようになります */
インストールしたNode.jsを有効化します。

% node -v  /* バージョン確認コマンド */
vv16.11.0    /* 正しく表示されました */

Windowsでのインストール方法

  1. Nodistノーディストのインストール
  2. Node.jsノードジェイエスのインストール
Windowsの手順を表示する/非表示にする

Nodistのインストール

Nodistとは、WindowsでNode.jsを管理するためのツールです。
HomebrewやNodebrewは現在、macのみに対応しているため、Windowsでは別のツールを使う必要があります。
Nodistのインストールは下記ダウンロードページからインストールします。
Nodistダウンロードページ
このページからインストーラーをダウンロードします。
ダウンロードが完了したら、インストーラーを起動してNodistをインストールしましょう。
インストールできたら、下記コマンドを打ち込んでインストールされているか確認しましょう。

nodist -v

v0.9.1 /** インストールしたバージョンが表示 **/
バージョンが表示されたらNodistのインストールは完了です。上記のコマンドを叩いても表示されなかった場合は以下を参照してください。
環境変数にパスを通す

環境変数にPATHを通す

環境変数パスとは簡単に言うと、「コマンドの実行ファイルが格納されている場所への道順」です。 先ほど、コマンドを叩いてもバージョンが表示されなかったのはPCがコマンドの実行ファイルを見つけられなかったのが原因です。
なのでPCがわかるように道順を記述していきます。設定方法は以下です。
  1. 「コントロールパネル」を開く
  2. 「システムとセキュリティ」を開く
  3. 「システム」を開く
  4. 「システムの詳細設定」を開く
  5. 「環境変数」を開く
  6. 「PATH」という変数の中に「..\nodist\bin (nodist.cmd があるパス)」を設定
  7. 「NODIST_PREFIX」という変数の中に「...\nodist (package.json があるパス)」を設定
  8. 設定が完了したら、もう一度、「Nodist -v」を叩いてみる。

Node.jsのインストール

Nodistがインストールできたら、次はNode.jsをインストールしていきます。
▼ Node.jsのインストールコマンド

nodist stable /** 安定板のインストール **/
nodist latest /** 最新版のインストール **/
nodist + 任意のバージョン /** バージョンを指定してインストール **/
インストールするためのコマンドは複数ありますが今回は安定板をインストールしましょう

nodist stable
Node.jsのインストールが出来たら、ちゃんと入っているかを確認します。

node -v
バージョンが表示されたらインストール完了です。