HOME > TECHNOLOGY > 開発環境

Node.js環境を手に入れよう!【WEBデザイナーのためのMac強化計画 #2】

Mac強化計画②

前回の記事ではHomebrewホームブルーについて解説しました。

初めの一歩、Homebrewの導入【WEBデザイナーのためのMac強化計画①】
今や、WEB開発(フロントエンド)の現場において、コマンドラインツールの利用はあたりまえになっています。
しかし、その管理については、かなり煩雑で面倒な場面が多いです。
MacでHomebrew(パッケージ管理システム)を利用すれば、コマンドラインツールのパッケージを一元管理でき、開発に集中することが可能になります。

既にHomebrew導入済みのあなたは、プロのWEBデザイナーへの道を一歩踏み出しています。

ここからが本番です。
さらに前に進むために、Node.jsノードジェイエス環境を是非とも手に入れておきましょう!

HTMLコーディングを学習している方なら、JavaScriptは触ったことありますよね?
WEBブラウザをなんか色々操れて、楽しいですよね!

そんなJavaScript、WEBブラウザ上でしか実行できないプログラム言語かというと、実はそうではありません。
PHPのように、WEBサーバー上でバックエンドの処理に使ったり、あなたのMacで日常作業の自動処理を記述/実行したりもできます。

とはいっても、HTMLコーディングを勉強中の方にはピンとこないかもしれませんね。
今はまだ分からないかもしれませんが、WEB開発についてあれこれ学んでいくうちに、Node.js実行環境の凄さが徐々に分かってくるとはずです。

習うより慣れろで、まずは体験あるのみです!


Node.jsを簡単にいうと…。

nodejs

Node.jsは「サーバーサイドのJavaScript実行環境」という解説をよく見かけます。

もちろん間違いではありませんが、そういった開発はWEBデザイナーの仕事として、ほぼ発生しません。

では、どう理解すれば良いかというと、なんか気の利いたことを自動でやってくれる、よく分からないが便利なやつ程度の理解で問題ないと思います。

HTMLコーディングって、結構地味な作業が多いですよね。

勉強し初めの頃は、苦もなくやれた作業も、レベルが上がるにつれて、だんだん苦痛に感じてくるようになるはずです。
例えば、HTMLタグを閉じたり、CSSを{}でくくったり、何万回やらなきゃいけないんだ!って必ずなります!

なんと私は、HTMLをコーディングするのに、ここ10年ほど閉じタグを書いたことがありません
なぜかというと、そういった決まりきった作業は、全てNode.js実行環境を通して全て自動化しているためです。
現役トップのWEB開発者のマシンには、これと同じ目的で、必ずと言っていいほどNode.jsがインストールされているはずです。(間違っていたらすいません)

どうですか?
興味湧いてきましたよね。

ちなみにNode.jsは、OSS(Open Source Software)なので、無償で利用することができますよ!

Node.jsインストールその前に

Node.jsには様々なインストール方法があります。
例えば、オフィシャルサイトを表示すると、macOS (x64)用のインストーラーをダウンロードすることができます。

Node.js® is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser.

こちらを利用すれば、ダブルクリックで起動する見慣れたインストーラーから、Node.jsをインストールすることができます。
もちろん、それはそれで間違いではないのですが、下記の理由であまりお勧めできません。

Node.jsは、しょっちゅうアップデートが行われますが、OSSという性格上バージョンが新しいほど使い易いという方程式が成り立ちません。
場合によっては、少し古いバージョンを使った方が良い場合すらあります。

インストーラー版の場合、開発案件ごとにバージョンを上げたり下げたりするのは、かなり至難の技です。
前回、Homebrewを導入した理由の一つはここにあります。

Homebrewを導入したことにより、nodebrewというNode.jsのバージョン管理ツールが利用できるようになります。
nodebrewによって、Node.jsのバージョンを瞬時に切り替えて利用することができるようになるので、案件ごとに違ったバージョンが利用できます。

何が良いかというと、前年構築したWEBサイトにちょっとした修正が発生した場合、開発環境が古くなって、プログラムが動かせないなんてことがあります。
インストーラー版のNode.jsですとお手上げです。
過去も、今もどちらも動かなくなって、調整に物凄い時間がかかってしまったりします。

そうならないためにも、nodebrewによるバージョン管理は導入しておいた方が良いです。

慣れればとっても簡単なので、ぜひ導入しましょう!

導入はいたって簡単です!

Terminal.appを起動し、以下コマンドを入力します。(公式のリポジトリはこちら)

$ brew install nodebrew

インストールが完了したら念のためバージョンを確認します

$ nodebrew -v
nodebrew 1.0.1

~ 以下省略、コマンドリスト等がズラズラと出力されます ~

画面が止まったら、以下コマンドを入力してみましょう!

$ nodebrew ls-remote

そうすると、以下のように(内容は常に変化するので参考まで)出力されると思います。

v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6  
    
~ 省略 ~  
    
v12.0.0   v12.1.0   v12.2.0   v12.3.0   v12.3.1   v12.4.0   v12.5.0   v12.6.0
v12.7.0   v12.8.0   v12.8.1   v12.9.0   v12.9.1   v12.10.0  v12.11.0  v12.11.1
v12.12.0  v12.13.0  v12.13.1  v12.14.0  v12.14.1  v12.15.0  v12.16.0  v12.16.1
    
v13.0.0   v13.0.1   v13.1.0   v13.2.0   v13.3.0   v13.4.0   v13.5.0   v13.6.0
v13.7.0   v13.8.0   v13.9.0 
    
~ 省略 ~  
    
io@v3.0.0 io@v3.1.0 io@v3.2.0 io@v3.3.0 io@v3.3.1

これが、現在インストール可能なNode.jsのバージョンのリストです。

2020年2月26日現在、LTSのv12.16.1と最新版のv13.9.0までインストール可能です。
v13以降にあるioとは、リアルタイムな双方向通信を行う「Socket.IO」と呼ばれるライブラリのことなので、サーバーサイドで使わない限り無視して構わないです。

それでは次に、いよいよNode.js本体のインストールをして行きます。

Node.jsのインストール

nodebrewからNode.jsをインストールする場合、まず前述のバージョンリストからインストールするバージョンを決めます。

バージョンが決まったら、ターミナルに以下コマンドを入力します。
v12.16.1の部分は、あなたがインストールするバージョンに読み替えてください。

$ nodebrew install-binary v12.16.1

最新版をインストールする場合は、以下のコマンドでもインストール可能です。

$ nodebrew install-binary latest

インストールが済んだら、以下コマンドで確認します。

$ nodebrew ls
v12.16.1
v13.9.0
    
current: none

複数バージョンをインストールしている場合は、その分のバージョンが表示されます。
このままですとcurrent(現在使用しているバージョン)が設定されていないので、使用するバージョンを設定します。

$ nodebrew use v12.16.1

これで、バージョン12.16.1を使用するように設定したことになります。
もう一度確認しましょう!

$ nodebrew ls
v12.16.1
v13.9.0
    
current: v12.16.1

currentにv12.16.1が表示されていればOKです。

実は、もう一手間必要です。

Node.jsがグローバルで実行できるよう、環境パスを通す必要があります。
詳しく知る必要は、現段階ではありませんので、何も考えずにコマンドを入力してください。

macOS Catalina の場合

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

macOS Catalina より古いmacOS場合

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

入力が終わったらターミナルを一旦終了し、再度開きます。

これでNode.jsがTerminal.appから実行できるようになりました。
確認してみましょう!

node -v
v12.14.1

これで完璧です!
Node.jsを利用する環境が整いました。

おまけ情報

nodebrewで使用するバージョンを変更しても、nodeのバージョンが変わらない場合は以下をチェックしてみてください。

/usr/local/bin/node

上記Symbolic linkが存在する場合、何らかの理由でnodebrew管理外でnodeがインストールされています。
その場合、Symbolic link自体を削除することで、nodebrewの管理するnode.jsに切り替わります。
困ったときはお試しください。


いかがでしたか?

黒い画面ばかりで、何が便利なの?
確かにここまでは、Homebrewの導入時と同じで、何の実感も湧かないかもしれません。

でも、安心ださい。
既にあなたのMacは、プロのWEBデザイナーが使うMacとしてかなり強化された状態に仕上がっています。

今後、Node.js環境で利用できる、様々なJavaScriptエコシステムを紹介していく予定です。
その一つ一つでNode.jsのパワーを必ず実感いただけるはずです!

Node.jsについてもっと本格的に学びたい方は、以下2つのオンラインスクールがおすすめです!

独学で勉強したい方は、以下の書籍がおすすめです!
(TechacAdemyの教科書として使われています)

本書は、Node.jsを使ってWebアプリケーション開発の基本から、Expressフレームワークを使った開発まで、自分の手を動かしながらおぼえる入門書です。

田畑を耕しながら田舎でのんびりWEB開発?
若い頃から準備すれば誰にでもできますよ!
今に疲れているクリエイターの方々の少しでも参考になれば嬉しいです。