Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

Node.js(Express)とPostgreSQLを使ってChatアプリを作る。

$
0
0

Nodeをインストール

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)
$ DEBUG=node-test:* npm start (アプリを立ち上げ)

ブラウザでhttp://localhost:3000/にアクセス。
画像のように表示できたらOK

スクリーンショット 2020-12-10 2.12.32.png

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があれば必ずここに記述しなければいけません。

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


Viewing all articles
Browse latest Browse all 8691

Trending Articles