JavaScriptだけでWebサイト開発

node.js + Express + mongodb系 + React でサービスを作るメモ

トップ > node.js > node.jsだけで掲示板アプリを作ってみる(前編)

node.jsだけで掲示板アプリを作ってみる(前編)

node.js webアプリケーション JavaScript 掲示板開発

node.jsだけで掲示板アプリを作ってみる

いろいろ便利なライブラリやパッケージを利用する前に素のnode.jsで一通りの機能を作ってみる

1. nodeのインストール

開発環境は http://ichi-bit.hateblo.jp/entry/2017/10/31/171806 で整えた。 コマンドラインで

$ node -v
v8.8.1

となればOK

2. ディレクトリ作成

app1という名前で作ります

$ mkdir app1
$ cd app1

3. Hello World

まずはおなじみの hello world から

app.js

const http = require('http'); // httpサーバーmodule
const hostname = 'localhost'; // ホスト名
const port = 3000; // port番号

// httpサーバーの定義
const server = http.createServer((req, res) => {
    // 全リクエストを処理
    res.statusCode = 200; // http ステータスコード
    res.setHeader('Content-Type', 'text/plain'); // テキストを返す
    res.write('Hello '); // res.write でコンテンツを送る
    res.end('World!\n'); // res.endでもコンテンツを返せる
});

// サーバー起動
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

保存してnodeコマンドで起動する。.js を省いてファイル名で指定できる

$ node app
Server running at http://localhost:3000/

ブラウザでアクセスると「Hello World」が表示される。 http://localhost:3000/hoge/ でもどんなアドレスでも同じ処理が行われる。 Ctrl-Cで終了する。

ソースを変更するたびに再起動しなくて良いようにnode-devを使って起動する。

$ node-dev app
Server running at http://localhost:3000/

これでソースの変更のタイミングで自動再起動してくれる。

4. URL毎に処理を変える

app.jsの

// httpサーバーの定義
const server = http.createServer((req, res) => {
    // 全リクエストを処理
    res.statusCode = 200; // http ステータスコード
    res.setHeader('Content-Type', 'text/plain'); // テキストを返す
    res.write('Hello '); // write でコンテンツを送る
    res.end('World!\n'); // res.endでもコンテンツを返せる
});

ここの箇所を

// httpサーバーの定義
const server = http.createServer((req, res) => {
    // 全リクエストを処理
    res.statusCode = 200; // http ステータスコード
    res.setHeader('Content-Type', 'text/plain; charset=UTF-8'); // テキストを返す 日本語返すので charsetもセット
    
    // ルーティング (url により振り分ける）
    switch (req.url) { // req.url にリクエストされたパスが入る
        case '/':
        res.write('トップページです\n');
        break;
        case '/up':
        res.write('投稿ページです\n');
        break;
        default:
        res.write('その他のページです\n');
        break;
    }
    res.end('以上!\n'); // res.endでもコンテンツを返せる
});

こう変えます。

やったこと

  • レスポンスヘッダに文字コードを指定。
  • req.urlにより処理を場合分けする。

ブラウザで確認

と表示されるようになりました。

5.HTMLを表示させる

app.js

const http = require('http'); // httpサーバーmodule
const hostname = 'localhost'; // ホスト名
const port = 3000; // port番号

// httpサーバーの定義
const server = http.createServer((req, res) => {
    // 全リクエストを処理
    res.statusCode = 200; // http ステータスコード
    res.setHeader('Content-Type', 'text/html; charset=UTF-8'); // HTMLを返す 日本語返すので charsetもセット

    // 全ページ共通HTMLヘッド
    res.write('<html><head><title>掲示板</title><style>* {box-sizing:border-box;}</style></head><body style="position:relative;height:100%;">');
    res.write('<header style="border:1px solid #888;padding:40px;">掲示板</header>');
    res.write('<nav><ul><li><a href="/">トップ</a></li><li><a href="/up">投稿</a></li></nav>');

    // ルーティング (url により振り分ける）
    switch (req.url) { // req.url にリクエストされたパスが入る
        case '/':
        res.write('<h1>トップページです</h1>\n');
        break;
        case '/up':
        res.write('<h1>投稿ページです</h1>\n');
        break;
        default:
        res.write('<h1>その他のページです</h1>\n');
        break;
    }

    // 全ページ共通HTMLフッター
    res.write('<footer style="position:absolute;bottom:0;width:100%;border:1px solid #888;text-align:center;padding:20px;">フッター</footer>\n'); // 共通のフッター
    res.end('</body></html>'); // res.endでもコンテンツを返せる

});

// サーバー起動
server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

HTTPヘッダのContent-Typeを変更
スタイルやHTMLを出力して、共通のタグとURLによってコンテンツを変更する。

ブラウザで確認するとヘッダーとフッターはどのページにも表示し、メニューのリンクでページ遷移を確認できます。

つづく

©ichi-bit