いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜

いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜

のびすけ

のびすけ

こんにちは、エンジニアなのにダンクができないのびすけです。今月から記事を書かせていただきます。

さてみなさん「Node.js」って知っていますか?
僕も最近Node.jsの勉強を始めたので「Node.jsを使ったことがないけど使ってみたい」と思っている人に向けて、Node.jsの入門的な内容を紹介したいと思います。

▼2020年最新版はこちら!

Node.jsとは

一言で言うとアツいJavaScriptです。

通常、JavaScriptはユーザーのブラウザで動作するプログラミング言語ですが、Node.jsはサーバー側で動作するJavaScriptであり、Web業界ではかなり注目されています。大量の処理に対応するために、ノンブロッキングI/Oというモデルを採用しています。

例えば、データベースから大量の情報を取得してWebページ上に表示をする処理をおこなう場合、通常はデータベースへアクセスしている時間に待ち時間(ブロック)が発生するため、ページの表示が遅くなってしまいます。
ノンブロッキングI/Oでは非同期処理をおこなうことで、データベースへのアクセスとWebページの表示を別々におこなってくれて、ストレスなくページの表示ができます。

また、Node.jsでは、Socket.ioというリアルタイムな通信を実現するライブラリを扱うことができます。この大量のアクセスに対応する仕組みと、リアルタイムな通信が注目されて、ソーシャルゲーム界隈やチャットサービスなど、いろいろな場面で利用されています。

技術評論社さん、Node.js日本ユーザーグループさんのサイトがわかりやすいので、詳細はこちらで見てください。

参考:第1回 Node.jsとは:基礎から学ぶNode.js|技術評論社

参考:Node.js日本ユーザーグループ

Node.jsの設定

以下、Node.jsの環境を整える手順になります。
個人差はありますが、手際が良い人なら5分程度でプログラムを実行するところまでいけると思います! 爆速!

1. nvmのインストール

以下についてはMacなどターミナルでの動作を想定していますので、ご了承ください。

Node.jsを使う前に、Node.jsを使った開発をおこないやすくするツールとしてNVM(Node Version Manager)を導入します。

Node.jsのバージョンによって動作しない機能があった場合に、バージョンの上げ下げを渋々おこなうのはかなりの手間です。nvmをインストールしておくことで、バージョンの切り替えが凄く簡単にできるようになります。

それでは実際にnvmをインストールしてみましょう。

$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

※Linuxなどを利用していてgitコマンドがインストールされてない(command not foundなどと表示される)場合は以下を実行してgitコマンドを利用できるようにしましょう。

$ yum -y install git

環境によって上手くいかない場合もあると思いますが、参考サイトをもとにチャレンジしてみましょう。

参考:Git - Gitのインストール | git-scm.com

nvmコマンドの動作確認をします。 エラーが出ないでhelpが表示されればOKです。

$ nvm help
Node Version Manager
Usage:
nvm help Show this message
・・・

2. nvmコマンドでNode.jsをインストール

nvm ls-remoteでダウンロード可能なNode.jsのバージョンリストが見ることができます。
Node.jsは偶数のバージョンがLTS版(安定版)、奇数のバージョンが最新版となっています。現在(最新編集時:2017年4月12日)は、LTSが6.10.1となっていて、最新版が7.9.0となっています。

Node.jsの最新機能を使いたい場合は最新版を、業務などで長期的な運用を行う場合やフロントエンド開発のツールとしてNode.jsを使う場合などはLTS版を使うと良いと思います。

$ nvm ls-remote
v0.1.14
v0.1.15
v0.1.16
・
・
・
v7.9.0

次にコマンドを利用します。 今回は最新バージョンの安定版の最新の0.12.7をインストールしてみました。

$ nvm install 7.9.0
########################################################################
Now using node v7.9.0

エラーが出なければNode.jsのインストールが完了です。 確認をしてみましょう。

$ node -v
v7.9.0

これでインストールは完了しました。

3. nvmの設定

nvmコマンドは、このままだとターミナル再起動時に同じような手順をおこなわないと使えません。いつでも使えるように設定しておきましょう。

まずはデフォルトのNode.jsのバージョンを指定しておきます。

$ nvm alias default v7.9.0
default -> v7.9.0

~/.bash_profileを、ターミナル起動時にnvmコマンドが適用されるように設定します。

$ vi ~/.bash_profile

viはターミナル上で動作するテキストエディタです。
画面が変わりますが、焦らずに操作しましょう。一般的なエディタとは勝手が違うのでターミナル初心者は注意です。

viは入力モードとコマンドモードを切り替えて操作します。
初期状態はコマンドモードでテキスト入力はできませんが、iを押す事で入力モードに切り替わり入力可能になります。矢印キーなどでファイルの末尾に移動してからiを押して、以下を追記してください。

if [[ -s ~/.nvm/nvm.sh ]];
then source ~/.nvm/nvm.sh
fi

編集が終わったらESC(エスケープ)キーを押しましょう。コマンドモードに切り替わります。
その後:wqと入力してエンターキーを押しましょう。ファイルが保存されます。
※ここの作業が不安な人は、他のエディタで編集しても問題ありません。

これで次回以降ターミナルを起動したときでも、Node.jsが使えるようになりました。

Node.jsでHello World!

それではお待ちかねのHello Worldをやってみましょう。Node.jsはコマンドライン上で動作しますが、Webブラウザ上で動作確認をしてみます。

エディタでexample.jsというファイルを作成し、以下のコードを書きましょう。

const http = require('http');
const PORT = 8124;

http.createServer((request, response) => {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World!\n');
}).listen(PORT);

console.log(`Server running at https://localhost:${PORT}/`);

保存をしたらいよいよ実行です。

$ node example.js

Server running at https://localhost:8124/

ターミナルが待ち受け状態になります。
この状態でブラウザから https://localhost:8124 にアクセスしてみましょう。

Hello World!

と表示されていれば成功です!

お疲れさまでした!

今回のまとめ

Node.jsの環境を整えて、画面に文字を表示させるHello worldまでをおこないました。Node.jsは数年前と比べてかなり有名になってきて、実績もあります。

PHPメインのサーバーサイドのエンジニアや、「ブラウザ側でJavaScriptは触っていたけどサーバー側もやってみたい」と思っているフロントエンジニアのみなさん、これを機会にNode.jsを勉強して、アイデア実現の範囲を広めてはいかがでしょうか。

それでは、また!

LIGでは、エンジニアを絶賛募集中!
LIGのエンジニアに応募する!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

のびすけ
のびすけ バックエンドエンジニア / 菅原 のびすけ

dotstudio株式会社 ( https://dotstud.io ) 岩手から上京してきました。 ギークハウスを経て、現在は0円シェアハウスに住んでいます。 好きなスポーツはフットサル/雪合戦/わんこそばです。 2015年は東京Node学園で登壇してみたいです。 ・milkcocoa公認エバンジェリストになりました。(https://mlkcca.com/) ・gihyo.jpで記事書いてます (http://gihyo.jp/dev/feature/01/milkcocoa-baas) ・html5experts.jpで記事書いてます。(https://html5experts.jp/n0bisuke/)

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL