クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

初めてのNode.js:インストール確認、REPL、Hello worldまで

「黒い画面」叩いて初体験シリーズ!前々回「Python」、前回「Ruby」に続きまして、今回は「Node.js」にトライ。いや〜Node.js。サーバサイドJSですよ、ハイ。これも前々から気になっておりましたよ。でもどうやって初めたらいいのかわからなかった。黒い画面(ターミナル)が触れるようになると始める糸口になります。

【目次】

※Node.js / Expressを習得するためにやったことまとめ
qiita.com

Node.js=サーバサイドJSとは?

さて、サーバサイドJSとはいったいなんざんしょ。JSはフロントエンドのプログラミング言語じゃなかったの?

Node.jsはJS界でよくみる「ナントカJS」系の名前ですがフレームワークでもライブラリでもありません。ざっくり言うとNode.jsはサーバ上で「JS」を動かせるようにする「環境」です。

一般的なレンタルサーバは「LAMP(ランプ)」環境で構築されていることが多いです。

  • L = Linux:OS
  • A = Apatch:Webサーバ
  • M = MySQL:データベースソフト
  • P = PHP(Perl、Python):プログラミング言語

オープンソースで無料提供されているのが共通点です。

※参考:LAMP環境ってなに?Webサービスを作るための環境構築を理解しよう | 東京のWeb制作会社LIG

Node.jsをここに当てはめるとすると、Node.js=PHP?いいえ、違います。Node.JSはどちらかというとApatchに近い位置付けです。

※参考:初心者向け!3分で理解するNode.jsとは何か?

つまりこうなりますね。

  • L = Linux:OS
  • N = Node.js:JS実行プラットフォーム
  • M = MySQL:データベースソフト
  • J = JS:プログラミング言語

いうならば「LNMJ(ルンンジ)」環境です(キリッ)!いやいや、聞いたことないからw

多くのレンタルサーバにはApatchがインストールされていますが、Node.jsはインストールされていません。

では、ApatchとNode.jsの違いはなんざんしょ?Node.jsは「ノンブロッキングIO」といって一度に大量のアクセスがあったときに強い仕組みです。

ノンブロッキングIOについてはこちらのコンビニのレジに例えた記事がとてもわかりやすいです!

※参考:コンビニでわかるノンブロッキングIO - たけぞう瀕死ブログ

Node.jsのインストール

Node.jsをサーバ上にインストールするにはVPSサーバなどRoot権限をもったサーバでの構築が必要です。しかし、PCのローカル環境内であればインストールは可能です。

こちらの公式サイトからダウンロードをします。

※参考:Node.js

「推奨版」と「最新版」がありますが、とりあえず推奨版にしてみました。 f:id:idr_zz:20181121215005j:plain

「node-v10.13.0.pkg」というファイルがダウンロードされました。Wクリックで起動。 f:id:idr_zz:20181121215215j:plain

指示に従いイストール作業を進めます。パスワードを聞かれたら入力など。

インストールが完了したら、黒い画面(ターミナル)を起動。

※参考:ターミナルについてはこちら
初めてのPython(インストール〜Hello world)と初めての黒い画面 - クモのようにコツコツと

ドル$マークの後にnode -vと入力

$ node -v

エンターを叩いてで実行。

v10.13.0

バージョンが表示されたらインストール成功です!

※参考:5分で終了。node.jsの環境構築が拍子抜けするほど簡単だったのでサンプルプログラム付きでまとめてみました【Mac編】

REPL(自動応答モード)で四則演算

Node.jsにもREPL(自動応答モード)がありますので、四則演算してみましょう。

※参考:REPLについてはこちら
初めてのPython(インストール〜Hello world)と初めての黒い画面 - クモのようにコツコツと

Node.jsのREPLはnodeと入力します。

$ node

エンターで実行!

>

>と表示されたらREPLになっています。

※参考:Node.jsのREPLについて

>の部分はPythonは>>>、Rubyはirb(main):001:0>でしたね。

前回と同様に1〜9まで掛けてみます。

> 1 * 2 * 3 * 4 * 5 * 6 * 7 * 8 * 9

エンターで実行!

362880

正解!よくできました!(ナデナデ)

なお、Node.jsのREPL終了は.exitです。

> .exit

Pythonはexit()、Rubyはquitでしたね。

※参考:REPL の使い方

JSファイルを作成

次にJSファイルを作ります。拡張子はもちろん.jsです!

デスクトップにnodeというフォルダを作成。中にhello.jsというファイル名で保存。文字コードはいつも通りUTF-8。

中にはどんな命令を書きましょ…今回はお馴染みのconsole.log()です!

console.log("はろー、のーどじぇいえす!");

なんだか、ホームに戻ってきたようで、ほっとしますねw

nodeフォルダに移動(cd)、パス確認(pwd)、ファイル一覧表示(ls)

ここからは前回までの流れと同じになります。ターミナルを起動してcdコマンドを打ちます。

$ cd Desktop/node

場所がチルダ~からnodeに移動します。

コンピュータ名:node ユーザ名$ 

念のためpwdコマンドでパスを確認

$ pwd

エンターで実行!

/Users/コンピュータ名/Desktop/node

はい、ちゃんと合っています。

lsコマンドでファイル一覧を表示

$  ls

エンターで実行!

hello.js

ファイル名hello.jsが表示されます。

.jsファイルのJSプログラムを実行する

前回と同様に.jsファイルの中のJSプログラムをターミナルから実行してみましょう。

nodeコマンドのあとにファイル名を繋げます。

$ node hello.js

エンターで実行!

はろー、のーどじぇいえす!

でました!console.log()の引数の文字列「はろー、のーどじぇいえす!」だけが表示されました。

hello.jsの中のプログラムが動いたということです!

※参考:Node.jsで動くものを作ってみる、Helloworld

最後に

ということで、Python、Ruby、Node.jsと、書式の違いはあるものの、ターミナル上の操作としてはほとんど同じ流れで「Hellow World」までたどり着きました!

Pythonはデータ分析をやってみたくてインストールしてみたのですが、RubyとNode,jsはなにしましょ。そうだ、「HTMLテンプレートエンジン」「AltCSS」「AltJS」のトランスパイル(変換)しよう!

※参考:HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと

環境構築不要でCodePenで体験できたフロント代替言語ですが、気がつけばPC内に環境構築ができたことになりますね!

あと、黒い画面に慣れてきたところで、もしかしてだけどテキストエディタ無しで黒い画面だけでWebページ作れるんじゃないの?という気もしてきたので、こちらもトライしたく思います。


※Node.js / Expressを習得するためにやったことまとめ
qiita.com