node.jsでチャットアプリ開発②
今回の目標はnode.jsのフレームワークの1つである
Expressを使って、Webサイトを作ってみましょう！^_^
フレームワークとは？
では、そもそもフレームワークとは何なのでしょうか？？🤔
フレームワークは日本語で翻訳すると「枠組み」「骨組み」です。
フレームワークは、システム開発の際によく使われる機能を用意・提供してます。
私たちは1からシステムを使うのではなく、
フレームワークによって提供されたアプリケーションを利用することで、
簡単にシステムを開発することができます。
Expressとは？
Webサーバの機能を提供するnode.jsで利用できるフレームワークの1つです
Webサーバを1から作るのは、非常に大変です💦
しかし、ExpressはWebサーバの機能を提供しており、
それを利用することで、簡単にWebサーバを作ることができるようになります✨
では、さっそくExpressをインストールしてみましょう！
Expressをインストールする
コマンドプロンプトを開き下記のコマンドを実行してください
npｍ init
そのあと、いろいろ聞かれますが、そのまま全てEnterを押してください
すると、フォルダにpackage.jsonというファイルができます。
npmパッケージマネージャとは？
npmというよく分からない用語が出てきましたので、ご説明します！
node.jsの機能は、さまざまなプログラムやファイルをまとめた「パッケージ」という形で提供されてます。
昔は、1つ1つ検索してサイトにアクセスして、パッケージをダウンロードして、
node.jsに組み込むようなことをしてました。
しかし、パッケージの数が増えていき、数百、数千も流通するようになると、
人手で対応しきれなくなります💦
そこで、提供されているパッケージを一か所にまとめて、
必要なパッケージをいつでもインストールできる仕組みができました。
それが、パッケージマネージャです。
node.jsでは、専用のパッケージマネージャとしてnpmが用意されてるというわけです^_^
package.jsonとは？
npm initコマンドで作成された、package.jsonファイルについてもご説明します
package.jsonはnpmで使用するパッケージ情報を管理したファイルです。
package.jsonの中身を見てみましょう。
{ "name": "node", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
これはJavaScriptのJSON(ジェイソン)と呼ばれる形式のテキストです。
JSONはJavasScriptのオブジェクトをテキストとして記述するためのものです。
JSONデータ内の各オブジェクトは、キー(Key)と値(Value)のペアからなるメンバーで構成されています。
上記のファイルでは、「name」「version」がキー、「noce」「1.0.0」が値になります。
このようにpackage.jsonでは、このプロジェクトの情報と必要なパッケージに関する情報が記述されてます。
Expressをインストールする(続き)
では、インストールの続きをしましょう！
package.jsonファイルが作れましたら、以下のコマンドでExpressをインストールしましょう！
npm install express
すると、package.jsonにExpressの情報が記載されるようになります^_^
また、node_moduleフォルダとpackage-lock.jsonというファイルもできてます。
これでExpressのインストール完了です！✨
ソースコードを書く
Expressがインストールできましたので、実際にプログラムを記述してみましょう！
先ほど、Expressをインストールしたフォルダ(package.jsonがあるフォルダ)に
app.jsonファイルを作ってください^_^
app.jsをメモ帳やTerapadなどテキストエディタで開き、
下記のWebサーバを構築するサンプルプログラムを記載してください^_^
//Expressオブジェクトの用意 const express = require('express') //アプリケーションオブジェクトの作成 var app = express() //ルーティングの設定 app.get('/',(req, res) => { res.send("Welcom My Home Page!!") }) //サーバの待ち受け開始 app.listen(3000, () => { console.log("Start Server Port:3000") })
書けましたら、コマンドプロント(ターミナル)を開き、以下のコマンドで実行してみましょう！
node app.js
すると、コマンドプロント上に「Start Server Port:3000」という表示がでるかと思います。
この状態で、ブラウザを開いてください。
そして、以下のURLバーに以下を入力してみましょう！^_^
「Welcom My Home Page!!」というページがブラウザに表示されればOKです！✨
Webサーバ(プログラム)を止める場合は、
プログラム実行しているコマンドプロント上でCtrlキーとCキーを同時に押せば、
止めることができます^_^
サンプルプログラムの説明
上記のWebサーバ構築プログラムについて説明したいと思います！
内容が少し難しいので、ざっくり流れを理解して頂ければと思います^_^
const express = require('express')
まず最初に行ってるのは、Expressオブジェクトの用意です。
「require」という機能でExpressのモジュールをロードしてます。
requireは、モジュールをローディングする役割があり、node.jsで用意されている機能です。
変数 = require(モジュール名);
次に行ってるのが、アプリケーションオブジェクトの作成です。
var app = express()
簡単に言いますと、
Expressの情報(オブジェクト情報)が変数appに入ると考えればよいかと思います。
このapp変数を使って、アプリケーションの処理を行っていきます^_^
app.get('/',(req, res) => { res.send("Welcom My Home Page!!") })
次は、ルーティングという設定を行ってます。
ここでは、/(トップページ)にアクセスした際に、
テキストを表示する処理をここで記載してます。
ここでは、「app.get」(appオブジェクトのgetメソッドと言います)という機能を使ってます。
これはGETアクセスの設定を行うためのものです。
GETアクセスについては別記事で改めてご説明したいと思います^_^
app.get(アクセス先のURL, 実行する処理);
app.getの実行する処理には、以下のような形で定義してます。
(req, res) => {…実行する処理…}
resはrequest(リクエスト:要求)、resはresponse(レスポンス:返信)のことです。
それぞれリクエスト情報、レスポンス情報を持っているオブジェクトです。
ここでは、「res.send」という機能を使ってます。
res.send(表示するテキスト);
これは、クライアントに送信する「実際にブラウザ画面に表示されるコンテンツ部分」も値を設定するものです。
この機能により、設定したテキストがそのままクライアントに送られて表示されるというわけです。
app.listen(3000, () => { console.log("Start Server Port:3000") })
最後に、待ち受けを開始します。
これは「app.listen」という機能を使ってます。
これで、ブラウザURLにlocalhost:3000を入力すると、
Webサーバにアクセスして、ブラウザに「Welcom My Home Page!!」が表示されます^_^
ちなみに、3000はポート番号と呼ばれる番号を指定してます！
ポート番号についても別記事で改めてご説明したいと思います^_^
今日はここまでです！^_^
次回はソケット通信についてご説明して、実際にプログラミングをしたいと思います(^^)/✨
