node.jsでチャットアプリ開発①

今回は下記のようなチャットアプリケーションを作ってみましょう!✨

f:id:RyoheiAdachi:20220123120338p:plain

目標

・チャットアプリケーションを完成させる
・node.jsの使い方について理解する
・ソケット通信の仕組みについて理解する

node.jsやソケットとかよく分からない単語が出てきましたが、
こちらについては、詳しく説明します^_^

node.jsとは?

今回はnode.jsという道具を使って、チャットアプリを作りたいと思います!

node.jsはサーバ側で動作するJavaScriptの実行環境のことです。

....サーバ?
....JavaScript

意味が分からない単語が出てきましたね‥💦
1つずつご説明いたします!

クライアントとサーバ

先ほど「サーバ」という用語が出てきましたので、
簡単に説明します^^

私たちがインターネットを利用する際には、
「サービスの要求」と「サービスの提供」の通信で成り立ってます。

サーバというのは、サービスを提供する役割があるコンピュータのことです。
逆にサービスの要求をする役割のことをクライアントと呼びます^_^

身近な例でいえば、レストランで注文をするお客さんがクライアントで、
注文を受けて料理を届けるウェーターさんがサーバになります!


Amazonのサイトを閲覧する際の
サーバとクライアントの関係は下記の図になりますね^_^


f:id:RyoheiAdachi:20220123120603p:plain

JavaScirptとは?


JavaScriptは、ブラウザを操作するために開発されたプログラム言語です。


ブラウザでは、テキストや画像などWebページを表示させる役割がございます。
そこでは、HTMLとCSS内容を読み込んで、Webページが作成されます。

しかし、HTMLとCSSは、一度読み込まれたらもう変化しないという特徴があります。

つまり、ページを更新しない限り、基本的にブラウザは同じものをずっと表示し続けることになります^_^

そこで、JavaScriptでは、HTMLやCSSを、その場でリアルタイムに書き換えて、一部のコンテンツを入れ替えたり、画像のスライドショーのような動きをつけたりすることができます。

結局、node.jsは何が凄いの?

JavaScriptクライアントが利用するWebブラウザで実行されるプログラミング言語です。

しかし、node.jsを利用することでWebブラウザの中だけではなく、サーバ上で実行することが可能になります^_^✨

難しい話なのですが、node.jsは「V8」というプログラムを使って作られてます。
この「V8」によって、単独でJavaScriptのプログラムを実行できるようになります。
そのため、サーバ側でも、クライアント側でもJavaScriptの実行が可能になります。


node.jsをインストールする

それでは、私たちのパソコンにnode.jsをインストールしてみましょう!☺

以下のサイトにアクセスしてください

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

ここでバージョン番号は、偶数バージョンのnode.jsをダウンロードしてください。
偶数バージョンのnode.jsは長期間サポートしてくれるバージョンです。
そのため、node.js自体にバグが発生した場合は、すぐに修正のパッチを適用することができます。
これをLTS(Long Term Support)と呼びます。

それに対して、奇数バージョンでは、短期間にしかサポート保証してくれないことになってます。

奇数バージョンで新しい技術に積極的に取り組んでいき、
偶数バージョンでは確実になった技術で安定的な運用を重視していく、という2本立てになっているのです。

f:id:RyoheiAdachi:20220123225252p:plain

f:id:RyoheiAdachi:20220123225458p:plain

ダウンロードしたexeファイルを実行して、node.jsをインストールしましょう!

基本的にすべて「next」で進んでいけばOKです!

f:id:RyoheiAdachi:20220123225543p:plain

f:id:RyoheiAdachi:20220123225649p:plain
※I accept~にチェックを入れる

f:id:RyoheiAdachi:20220123225707p:plain


f:id:RyoheiAdachi:20220123225821p:plain

f:id:RyoheiAdachi:20220123225729p:plain

f:id:RyoheiAdachi:20220123225743p:plain

f:id:RyoheiAdachi:20220123230055p:plain

f:id:RyoheiAdachi:20220123225951p:plain

「Finish」を押せば、node.jsのインストール完了です!!✨

では、本当にnode.jsがインストールされているか確認してみましょう!^_^
コマンドプロンプトを開いて、以下のコマンドを打ってください。

node -v

あるいは

node --version

このコマンド実行後に、node.jsのバージョンが表示されれば、
正常にnode.jsがインストールされてます!^^

f:id:RyoheiAdachi:20220123230955p:plain

テストプログラムを動かしてみる

では、実際にnode.jsのプログラムを作ってみましょう!(^^♪
「Hello Word」がブラウザに表示される簡単なプログラムを作ってみたいと思います^_^

まず、好きな場所にapp.jsというファイルを作ります。

f:id:RyoheiAdachi:20220124072050p:plain

次にapp.jsをメモ帳やTeraPadなどのテキストエディタソフトで開きます。

f:id:RyoheiAdachi:20220124072453p:plain


app.jsに下記の内容を記載します!

console.log("Hello World!");

記載しましたら、app.jsの内容を保存します^_^

次に、コマンドプロンプト(あるいはターミナル)を開いて、
app.jsが置いてあるフォルダに移動します。

cd <app.jsが置いてあるフォルダ>

f:id:RyoheiAdachi:20220124073032p:plain

移動しましたら、下記のコマンドでapp.jsを実行します。

node app.js

すると、「Hello Word」という言葉が表示されるかと思います^_^
これが表示されれば、OKです!✨

f:id:RyoheiAdachi:20220124073304p:plain


本日はここまでです!^_^
次回はnode.jsのフレームワークの1つである「express」についてご紹介します!✨