React入門 - 1. nodebrewのインストール

1. nodebrewのインストール

それではReactプログラミングについて学習していきます。Reactはブラウザの中で動作するJavaScriptのUIライブラリです。テキストエディタを使って、HTML/CSS/JavaScriptを作成して、Reactを導入することもできるのですが、開発効率を高めるためにNode.jsを使ってReactの開発環境を構築することが一般的です。そのためまずはNode.jsをインストールするところから学習をスタートしていくことにします。

Node.jsとは主にバックエンドで利用されるJavaScriptの実行環境です。JavaScriptといえばブラウザの中で動作するというイメージがあると思いますが、Node.jsはブラウザとは独立してJavaScriptを実行させるための仕組みです。Node.jsを使えばJavaScriptプログラムからファイルやデータベースにアクセスしたり、あるいはWebアプリケーションとしてプログラムを開発することもできます。そのような意味ではNode.jsはPHPやPyhonのような言語に近いかもしれません。

Node.jsは配布元サイトからダウンロードしてインストールできます。

2022.03月時点ではLTS版が16.14.0、最新版は17.6.0となっています。配布元サイトからNode.jsをダウンロードしてインストールすることもできますが、ここではNode.jsのバージョン管理ツールである nodebrew を使ってインストールすることにします。nodebrew はターミナル上で動作するバージョン管理ツールです。 nodebrew を使うことで複数のNode.jsのバージョンを切り替えて利用できるようになります。

まずは nodebrew 本体をインストールします。ターミナルを開いて以下の brew コマンドを実行します。

% brew install nodebrew

brew コマンド（ homebrew ）を事前にインストールしておく必要があります。

nodebrew のインストールが完了したら、ターミナルに表示されているテキストをコピーして、以下の2つのコマンドを順に実行します。

1つ目は必要なディレクトリにセットアップです。

% /opt/homebrew/opt/nodebrew/bin/nodebrew setup_dirs

テキストをターミナルに貼り付けて実行すれば完了します。

次は環境変数 PATH にnodebewでインストールしたNode.jsのパスを追加します。

% echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

環境変数 PATH を追加することで、ターミナル上でNode.jsを実行するための node コマンドが利用できるようになります。またここでは echo コマンドに >> ~/.zprofile を付与しています。このような仕組みはリダイレクトと呼ばれるもので echo による出力をホームフォルダ下の .zprofile ファイルに追記モードで書き込んでいます。

.zprofile というファイルはzshの設定ファイルです。最近のMacのターミナルではzshがデフォルトになっています。

zshの設定ファイルである .zprofile を修正したので、ターミナルを開き直すか、あるいはターミナルに .zprofile を再読み込みさせる必要があります。ここでは source コマンドを使って .zprofile を再読み込みします。

% source ~/.zprofile

これで環境変数 PATH の設定が更新されます。

以上で、nodebrewのインストールと初期設定は完了です。さいごにnodebrewのバージョンを表示して、正しくインストールできていることを確認しておきましょう。

% nodebrew -v
nodebrew 1.1.0

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

結果がたくさん出力されますが、先頭部分に nodebrew 1.1.0 と表示されているのがわかります。またその後の部分には Usage （使い方）が表示されているので nodebrew コマンドでどのような操作ができるのか概要を確認できるようになっています。さいごの Example （例）の部分で具体的なコマンドの使い方についての説明も確認できます。

バージョン管理ツールについて

さいごにバージョン管理ツールについて補足しておきます。今回、Node.jsをインストールするために、ひと手間をかけて、Node.jsのバージョン管理ツールである nodebrew をインストールしています。なぜ、わざわざこのようなツールを導入したのかというと、開発の現場ではプロダクトごとに異なるバージョンのNode.jsを使うこともあるからです。1つのパソコンの中で1つのバージョンのNode.jsしか使えないのであれば、複数のプロダクトをメンテナンスしていくときに不便です。nodebrew のようなバージョン管理ツールを導入することで、そのような問題に対処できます。

また、Node.jsを学習する面においても nodebrew のようなバージョン管理ツールは有効です。たとえば手元にあるNode.jsの参考書は、異なるバージョンのNode.jsで記述されたものかもしれませんし、インターネットを検索していると、Node.jsの最新バージョンを使いたくなることがあるかもしれません。そのようなケースにおいても nodebrew を使えば上手く問題に対処できます。

バージョン管理ツールは多くの言語に存在します。たとえばPHPには phpbrew といったバージョン管理ツールがあります。また最近は Docker を使って仮想化によってバージョン管理を行うケースも多いです。

前置きが長くなりましたが nodebrew のインストールは完了です。つぎは nodebrew を使って実際に Node.js をインストールしてみようと思います。