作成日:2021/04/12 更新日:2022/08/09
#1 コマンドラインを使おう
なぜコマンドラインを使うの?
コマンドラインとはマウスを使わずに、キーボードだけの操作を指します。 PCへの命令 する 入力行ですね。 コマンドラインはアプリケーション(コマンドラインツール)を使って実行します。フロントエンドエンジニア中級まではPHPのバージョンをMAMP(XAMPP)などのアプリケーションを使うことで管理してきました。
上級になるとNode.jsやPython、JAVAなどを扱っていきますが、これらの言語のインストールやバージョンアップするのに便利なのが「パッケージマネージャー」です。
上級者はPHPやMySQLもMAMP(XAMPP)を使わずにパッケージマネージャーで管理します。
コマンドラインツールで「パッケージマネージャー」をインストールしたり、そのパッケージマネージャーからプログラミング言語をインストール、アプリの実行をしていきます。
CLIとGUIの違い
GUI(Graphical User Interface)とは、普段私たちがマウスやキーボードで画面を操作していることをさします
現在ほぼ全てのPCがGUIで操作していますが、上記で紹介した仕事効率化ソフトのインストールや操作をするときはコマンドラインで操作することがありますので今のうちに慣れておきましょう。
コマンドラインツールを起動する
早速コマンドラインツールを起動してみましょう。MacとWindowsでは起動方法が異なるのでそれぞれの方法で起動してください。
▼ Macの場合
アプリケーションフォルダのユーティリティの中から「ターミナル」をダブルクリック
▼ Windowsの場合
【Win(Windowsマーク)+R】で「ファイル名を指定して実行」機能を起動して下記を入力しましょう。
cmd
Windowsはこれだけで起動します。
コマンド画面の見方
ターミナルを起動すると以下の画面が出ると思います。※画面と文字の色に関しては設定によるものなので同じでなくて問題ありません。 実際に打ち込んでいくのはメソッドと引数の部分になります。
PC名、ディレクトリ、ユーザ名の部分はなにが表示されているかが分かっていれば問題ありません。
#2 パッケージマネージャーHomebrewを使う
Homebrewはパッケージ管理ソフトです(Windowsの場合はChocolateyなど)。フロントエンドエンジニア上級コースで使うプログラミング言語のバージョン管理が簡単に行うことや、jsライブラリ、PHPフレームワークをインストールできる便利なアプリです。
まず最初にWeb制作における「仕事効率化」をするために、 Git Node.jsを習得しましょう。 Node.jsとは簡単に言うとプラグインをインストールするためのライブラリです。 厳密に言えばライブラリとしての機能は使い方の一部ですが今はそれだけ覚えていれば大丈夫です。
インストールの手順
インストール手順ですが、MacとWindowsで異なりますので自分が使っているOSの手順を見てください。Macでのインストール方法
- Xcodeのインストール
- Homebrewのインストール
- nodebrewのインストール
- 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をインストールしましょう。
% 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でのインストール方法
- Nodistのインストール
- Node.jsのインストール
Nodistのインストール
Nodistとは、WindowsでNode.jsを管理するためのツールです。HomebrewやNodebrewは現在、macのみに対応しているため、Windowsでは別のツールを使う必要があります。
Nodistのインストールは下記ダウンロードページからインストールします。
Nodistダウンロードページ
このページからインストーラーをダウンロードします。 ダウンロードが完了したら、インストーラーを起動してNodistをインストールしましょう。
インストールできたら、下記コマンドを打ち込んでインストールされているか確認しましょう。
nodist -v
v0.9.1 /** インストールしたバージョンが表示 **/
バージョンが表示されたらNodistのインストールは完了です。上記のコマンドを叩いても表示されなかった場合は以下を参照してください。環境変数にPATHを通す
環境変数パスとは簡単に言うと、「コマンドの実行ファイルが格納されている場所への道順」です。 先ほど、コマンドを叩いてもバージョンが表示されなかったのはPCがコマンドの実行ファイルを見つけられなかったのが原因です。なのでPCがわかるように道順を記述していきます。設定方法は以下です。
- 「コントロールパネル」を開く
- 「システムとセキュリティ」を開く
- 「システム」を開く
- 「システムの詳細設定」を開く
- 「環境変数」を開く
- 「PATH」という変数の中に「..\nodist\bin (nodist.cmd があるパス)」を設定
- 「NODIST_PREFIX」という変数の中に「...\nodist (package.json があるパス)」を設定
- 設定が完了したら、もう一度、「Nodist -v」を叩いてみる。
Node.jsのインストール
Nodistがインストールできたら、次はNode.jsをインストールしていきます。▼ Node.jsのインストールコマンド
nodist stable /** 安定板のインストール **/
nodist latest /** 最新版のインストール **/
nodist + 任意のバージョン /** バージョンを指定してインストール **/
インストールするためのコマンドは複数ありますが今回は安定板をインストールしましょう
nodist stable
Node.jsのインストールが出来たら、ちゃんと入っているかを確認します。
node -v
バージョンが表示されたらインストール完了です。