Getting Started

2019/10/4

Node.js に触れてみよう

どうも、こんにちは！JellyWareです。

Getting Started!! Riiiver tutorialの第5弾となります。

このシリーズは、Riiiverやプログラミングを学び、初心者の方でもEco-Drive Riiiverを活用したオリジナルアプリを理解して作れるようになることを目指します。

今後使用していく『Node.js』に簡単に触れつつどういうものなのかを紹介します。

プログラミング初心者の方が読まれるのを想定して解説していきますので、経験者の方にとってはちょっとくどいかと思われますがご了承ください。

目次

Node.js とは？

Node.js に触る前に、まずはNode.jsがどういうものなのかを確認しましょう。

まず、Node.js の「js」のところから説明したいと思います。「js」とは「JavaScript」というプログラミング言語の略です。

JavaScript とは？

その「JavaScript」ですが、Webサイトのアニメーションをつけることなどに使われます。

例えばですが、『押すと色の変わるボタン』などをたまに見かけると思います。

押すと色が変わります

この『押すと色の変わる』というアニメーションを『JavaScript』で行っています。

こういったWebブラウザなどで『実際に人の目に映るところ』を『フロントエンド』と呼び、基本的に『JavaScript』は『フロントエンド』で使用される言語でした。

『フロントエンド』に対して、ユーザーが入力したデータの保管・加工やデータの送信などの『人の目には映らない裏側の処理』を『バックエンド』と呼びます。APIの通信も『バックエンド』側です。

この『バックエンド』でも『JavaScript』を使えるようにしたのが『Node.js』です。『Node.js』を使うことで、サーバーを立てたりすることもできます。

なぜバックエンドでも使われるようになったのか？

気になる方もいると思いますので、少し『Node.js』の歴史について説明します。

まず、昔はセキュリティの考慮が不十分で『JavaScript』を使用するサイトの印象はあまり良くありませんでした。しかし、『JavaScript』を使用した『Ajax』という新技術の開発により『JavaScript』 が見直され、徐々に使用されるようになりました。

それに合わせて『JavaScript』の価値も高まり、メインだった『フロントエンド』以外にも『バックエンド』ももっとできるようになると便利だよね、となりました。そこで開発されたものの1つが『Node.js』です。

Node.js でできること

フロントエンドで使用されている『JavaScript』をバックエンドでも使用できるようにしたのが『Node.js』ということなので、色々できます。

  • Webサービス
  • スマホアプリ
  • サーバー構築
  • IoT

実際に使用されているサービス/アプリだと『LinkedIn(モバイル版)』や『Facebook』では『Node.js』が使用されています。

Node.jsに触れてみよう

まずは、Node.jsをお持ちのPCにインストールする必要があります。

インストール方法は簡単です。Windows10, MacOS, Linuxそれぞれでのインストール方法を説明します。ボタンを押すとページが開くようになっています。

ご使用のPCに合わせてご確認ください。

Windows10 MacOS Linux

Windows10

Node.jsの公式サイトのインストーラーを使います。

まずは、下記URLからインストーラーをダウンロードします。
インストールするNode.jsは公式が推奨しているバージョンにします。

https://nodejs.org/ja/download/

(以降の画像は、出典：node https://nodejs.org/ja/download/ となります。)

赤枠のところをクリックするとインストーラーがダウンロードされます。

バージョンの数字は異なると思いますが、このようなファイルです。

開くとこのような画面が表示されます。
後は『Next』を押して進めていけば問題ないです。




最後に『Install』を押して終了です。

念のためインストールができたかを確認しましょう。

『コマンドプロンプト』を使用して確認します。

タスクバーの検索画面に「cmd」と入力します。

コマンドプロンプトが出てきますので、クリックして立ち上げます。

このような真っ黒な画面が現れます。真っ白に塗りつぶしている箇所はユーザー名が表示されています。

次に

node -v

この一文をコマンドプロンプトに入力して、実行します。
実行は、『Enter』キーを押すだけでオッケーです。

$ node -v
v10.16.3

上手くインストールできていれば、インストールした『Node.js』のバージョンが表示されます。

Windows10

MacOS

Node.jsの公式サイトのインストーラーを使います。

まずは、下記URLからインストーラーをダウンロードします。
インストールするNode.jsは公式が推奨しているバージョンにします。

https://nodejs.org/ja/download/

(以降の画像は、出典：node https://nodejs.org/ja/download/ となります。)

赤枠のところをクリックすると自動でインストーラーがダウンロードされます。

バージョンの数字は異なると思いますが、このようなファイルです。

開くとこのような画面が表示されます。
後は『続ける』を押して進めていけば問題ないです。




最後に『インストール』を押して終了です。

念のためインストールできたかを確認しましょう。

『ターミナル』を使用して確認していきます。

ターミナルの開き方ですが、

  1. Spotlight(Mac内の検索機能)を利用
  2. ファインダーから直接開く

の2種類があります。

まずは、1から説明します。

『command⌘＋Space』で『Spotlight』を開いて、『ターミナル』と打ち込んで『Enter』キーを押すと自動で『ターミナル』が開きます。

次に、2の方法ですが

『ファインダー』を開いて、『アプリケーション』 -> 『ユーティリティ』と開くと『ターミナル』が見つかると思います。

ファインダーにこのように表示されていれば大丈夫です。

通常のアプリ同様、ダブルクリックなどで開きます。

上記2つのどちらかでターミナルを開くと、このような画面が立ち上がると思います。黒く塗りつぶした箇所は、ユーザー名などが表示されています。

次に

node -v

この一文をターミナルに入力して、実行します。
実行は、『Enter』キーを押すだけでオッケーです。

$ node -v
v10.16.3

上手くインストールできていれば、インストールした『Node.js』のバージョンが表示されます。

MacOS

Linux編

Linuxには色々種類がありますが、今回は『Ubuntu』,『CentOS』,『Arch系』の3つに絞ります。ご了承ください。

まずは、『ターミナル』を開きます。Linuxユーザーの方であれば既に開き方はご存知かと思われますが、『ctrl + alt + t』で開くことができると思います。

それぞれのOSに合わせて、次のコマンドを実行していきます。

Ubuntu

sudo apt-get install nodejs npm

CentOS

sudo yum install epel-release
sudo yum install nodejs npm

Arch系

sudo pacman -S nodejs npm

うまくインストールできたか確認しましょう。

node -v

この一文をターミナルに入力して、実行します。
実行は、『Enter』キーを押すだけでオッケーです。

$ node -v
v10.16.3

上手くインストールできていれば、インストールした『Node.js』のバージョンが表示されます。

Linux

インストールが終わったので実際にNode.jsに少し触れてみましょう。

インストールできたかどうかを確認した時と同様に『コマンドプロンプト』や『ターミナル』を使用していきます。

OS 使用するアプリ
windowds10 コマンドプロンプト
MacOS,Linux ターミナル

それでは、先ほどと同じ手順で『コマンドプロンプト』or『ターミナル』を開いたら

node
と入力します。

$ node
>

何も表示されない代わりに「>」が現れて、さらに入力できるようになりました。

これは『対話状態』と言われていて、プログラミングが実行環境になっています。
今回は、Node.jsが使用できる環境になっています。

それでは

console.log("こんにちは、Node.jsさん！");

と入力してみましょう。

> console.log("こんにちは、Node.jsさん！")
こんにちは、Node.jsさん！

undefined

ダブルクオーテーションの中の文字が現れます。

console.log("") のダブルクオーテーションの中を色々変えてみてください。
現れる文字が変わります。

終わる時は、.exitと入力して実行してください。

次に、ここからファイルをダウンロードしてください。

※ファイル名が『riiiver_node_http.js』となっているかご確認ください！

これは自分が用意したJavaScriptのファイルです。拡張子が.jsなのが目印です。

そして、このファイルを『コマンドプロンプト』か『ターミナル』にドラッグアンドドロップします。
(対話状態の場合は一度終了させる必要があります)

windowsの場合

> C:￥~~￥Download￥riiiver_node_http.js

mac/linuxの場合

$ ~/Download/riiiver_node_http.js

このように表示されると思います。

riiiver_node_http.jsのパスが表示されています。そのため人によって違うパスが表示されます。

まだ実行しないでください。

windowsの場合

$ node C:￥~~￥Download￥riiiver_node_http.js

mac/linuxの場合

$ node ~/Download/riiiver_node_http.js

頭にnodeを追記する必要があります。

追記したら実行してください。

そして、以下のURLに飛んでください。

http://127.0.0.1:8989

ブラウザの真っ白い画面に
『Hello Node.js』と表示されていると思います。
(Safariだと上手くいかない場合があるかもしれません。)

これはNode.jsでサーバーを立てた結果です。

こういった風に、Node.jsを使用することでサーバーを立てることができます。

以上で、Node.jsがどういたったものなのか理解できたでしょうか？

『通信処理』を行うことのできる『JavaScript』というイメージが頭に浮かんでいれば問題ありません！

ご覧くださいましてありがとうございました。