Node.js(Express)とPostgreSQLを使ってChatアプリを作る。第１回（全４回）

5409 ワード
PostgreSQL Express Node.js Node.js テキストリンク

はじめに

・Node.jsとExpressのインストール編
・PostgreSQLインストール＆Node.jsとdatabase接続編
・詳細ページの作成と非同期処理について
・ユーザー登録の機能

コピペ禁止です。
コマンド、コードはコピぺしないで作成してください。
気になった用語があれば各自で調べてください。

Chatアプリの説明

今回作成するチャットアプリは、
メインページでチャンネル名を設定し作成
作成したチャンネルをクリックするとチャットページに飛びます。

ユーザー作成とログイン機能も作っていきます。

Node.jsをインストール

Node.jsのインストール
Webアプリケーション作成において、現場などでよく使用サーバーのツールです。
詳しくはWikipediaを参照してください。
https://ja.wikipedia.org/wiki/Node.js

Expressを導入

$ cd 任意のディレクトリ
$ mkdir node-test (任意のディレクトリにnode-testというフォルダを作成)
$ cd node-test (node-testに移動)
$ npm i -g express-generator (グローバルでexpress-generatorを導入)
$ express --view=ejs (expressの雛形アプリを作成)
$ npm i (必要なnode_modulesをinstall)
$ npm start (アプリを立ち上げ)

ブラウザでhttp://localhost:3000/にアクセスします。
画像のように表示できたらローカル環境に接続できた、ということです。

Expressについて

このExpressを使うと以下のファイルやディレクトリが作成されます。
・ bin
・ node_modules
・ public
・ routes
・ views
・ app.js
・ package.json
このファイル及びディレクトリが何をしているのかを説明します。

bin（サーバーサイド）
binの中にwwwというファイルがあり、
wwwをターミナルからnode ./bin/wwwと叩くことによってサーバーを起動させます。

node_modules（サーバーサイドとクライアントサイド）
Expressで使うmoduleやnpm installしたmoduleが入る場所。
作業をする上でこのディレクトリはいじらないでください。

public（クライアントサイド）
静的なファイルの保管場所。
中を見るとimagesやjavascriptsやstylesheetsなどのフォルダがあります。

routes（サーバーサイド）
toutesではURLにリクエストがきた時に何をするかを定義します。
例えば、Expressを作成した時にできるindex.jsは以下のように書いてあり、

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

これは/に対してリクエストがきた時にviews/index.ejsをレンダリングしています。

views（クライアントサイド寄りのサーバーサイド）
ここにはindex.ejsやerror.ejsなどのファイルが置いてあります。
これらは画面側を作る上で必要なViewファイルでindex.htmlとほぼ変わりません。
唯一の違いはサーバーサイドからこのファイルに対して動的な値を渡すことが出来き、
routes/index.jsで記述してある
res.render('index', { title: 'Express' });は
index.ejsにtitleというkeyでExpressというvalueを渡しています。
なので、views/index.ejsの<%= title%>にExpressが入ります。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

これが

<!DOCTYPE html>
<html>
  <head>
    <title>Express</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
  </body>
</html>

こうなります。

app.js（サーバーサイド）
app.jsはExpressの設定周りを担っています。かなりたくさんやっているので気になった人は調べてください。

package.json（サーバーサイドとクライアントサイド）
アプリケーションで使うnpmモジュールの管理をしています。
なのでアプリケーションを作る上で必要なmoduleをインストールしたら必ずここに記述しなければいけません。
でも、npm installした後に記述するのはめんどくさいので--saveもしくは--save-devのオプションを追加すると勝手にpackage.jsonに記述してくれます。便利！

--saveはdependenciesに記述してくれて本番、開発環境で使えるモジュール
例）　データベースとか

--save-devはdevDependenciesに記述してくれて開発環境でしか使わないモジュール
例）　gulpとかコンパイルするやつはこっち

npmのコマンドの詳しいやつはこっちnpm コマンド

開発効率をあげるために便利なmoduleをインストールしよう。

Node.jsで開発する際にサーバーサイドのソールを更新するとその度にcontrol + cでサーバーを停止させ、DEBUG=node-test:* npm startで起動させるのはかなりめんどくさいです。
ソースコードを保存した際に、自動で再起動をかけてくれるnodemonと言われるmoduleを導入しましょう。

$ npm i -g nodemon (nodemonをグローバルインストール)
$ nodemon (ディレクトリを監視)

はい、便利！

今回は、ここまでです。
次は、PostgreSQLを使って画面にデータベースの値を表示するところをやっていきます。