LoginSignup
2
0

More than 1 year has passed since last update.

Node.jsを基本からまとめてみた【Express入門】

Last updated at Posted at 2023-04-01

Node.jsとは?

Node.jsは、Googleが開発したV8 JavaScriptエンジンを使用し、サーバーサイドのJavaScriptアプリケーションを実行するためのランタイム環境のこと。わかりやすくすると、本来ブラウザ上でのみ動作するJavaScriptを、パソコン上で実行できる環境を作れるということ。
これにより、ブラウザ上では実現できなかったサーバーサイド(OS機能等)へのアクセスを実現し、自由にファイルの読み書きやネットワーク通信を実現できる。
また、Node.jsでは、高速でスケーラブルなネットワークアプリケーションを開発するための豊富なツールとライブラリが提供されているのも特徴の一つで、ウェブサーバーやAPIサーバー、ストリーミングサーバー、リアルタイム通信アプリケーションなど、さまざまな種類のアプリケーションの開発に利用できる。

Expressとは?

Expressは、複雑なWebアプリを効率よく開発できるようにさまざまなモジュールが統合されたフレームワークで、特に、独自のサーバー開発やGET/POST通信などを簡単な記述で実現できるフットワークの軽さは魅力的。

環境開発

ディレクトリを作成する

mkdir <プロジェクト名>

package.jsonを作成する

npm init -y

expressとnodemonをインストールする

npm i express nodemon

server.jsを作成する

touch server.js

expressを使いローカルサーバーを立ち上げる

server.jsを下記のように編集する

server.js
//express を呼び出す
const express = require('express');
//インスタンス化をする
const app = express();
//PORTを指定する
const PORT = 3000;
//expressを使い、ローカルサーバーを立ち上げる
app.listen(PORT, () => console.log('サーバーが起動しました'));

npm run devを実行し、『サーバーが起動しました』の表示を確認する

npm run dev

routesフォルダを作成する

routesディレクトリを作成する

mkdir routes

routes内に user.jsを作成する

touch user.js
routes/user.js
//express を呼び出す
const express = require('express');
//expressでルーティングの設計をするためにrouter関数を用意する
const router = express.Router();

router.get('/', (req, res) => {
  res.send('ユーザーです');
});

router.get('/info', (req, res) => {
  res.send('ユーザー情報です');
});
//ランダムの文字列をエンドポイントに設定する
router.get('/:id', (req, res) => {
  res.send(`${req.params.id}のユーザー情報を取得しました`);
});

//ルーターの情報をserver.jsにインポートする
module.exports = router;
server.js
//express を呼び出す
const express = require('express');
//インスタンス化をする
const app = express();
const useRouter = require('./routes/user');
//PORTを指定する
const PORT = 3000;
//静的な画面を作成する
app.use(express.static('public'));
//getメソッド ルートディレクトリを指定してページを表示する
app.get('/', (req, res) => {
  //console.log('hello express');
  //res.send('<h1>こんにちは</h1>');
  res.status(500).json({ msg: 'エラーです' });
});
//ルーティング
app.use('/user', useRouter);

//expressを使い、ローカルサーバーを立ち上げる
app.listen(PORT, () => console.log('サーバーが起動しました'));

publicフォルダを作成する

ディレクトリを作成する

mkdir public

publicフォルダ内にindex.htmlを作成する

touch index.html
server.js
//express を呼び出す
const express = require('express');
//インスタンス化をする
const app = express();
const useRouter = require('./routes/user');
//PORTを指定する
const PORT = 3000;
//静的な画面を作成する publicフォルダの中にHTMLファイルを作成する
app.use(express.static('public'));

//テンプレートエンジンを使うことができる"ejs"
app.set('view engine', 'ejs');

//getメソッド ルートディレクトリを指定してページを表示する
app.get('/', (req, res) => {
  //console.log('hello express');
  //res.send('<h1>こんにちは</h1>');
  res.status(500).json({ msg: 'エラーです' });
});
//ルーティング
app.use('/user', useRouter);

//expressを使い、ローカルサーバーを立ち上げる
app.listen(PORT, () => console.log('サーバーが起動しました'));

テンプレートエンジンをインストールする

npm i ejs

viewsフォルダを作成する

ディレクトリを作成する

mkdir views

publicフォルダ内にindex.ejsを作成する

touch index.ejs
views/index.ejs
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- テキスト情報を読み込む -->
    Hello, World! <%= text %>
  </body>
</html>
server.js
//express を呼び出す
const express = require('express');
//インスタンス化をする
const app = express();
const useRouter = require('./routes/user');
//PORTを指定する
const PORT = 3000;
//静的な画面を作成する publicフォルダの中にHTMLファイルを作成する
//app.use(express.static('public'));
//テンプレートエンジンを使うことができる"ejs"
app.set('view engine', 'ejs');

//getメソッド ルートディレクトリを指定してページを表示する
app.get('/', (req, res) => {
  //console.log('hello express');
  //res.send('<h1>こんにちは</h1>');
  //res.status(500).json({ msg: 'エラーです' });
  res.render('index', { text: 'NodejsとExpress' });
});
//ルーティング
app.use('/user', useRouter);

//expressを使い、ローカルサーバーを立ち上げる
app.listen(PORT, () => console.log('サーバーが起動しました'));

ミドルウェアを作成する

※ミドルウェアとは?
ミドルウェア(middle ware)とは、業務遂行に必要な機能を提供するアプリケーションとコンピュータの基本機能を提供するOSの間に位置し、さまざまな働きをするソフトウェアのこと。

server.js
//ミドルウェアを宣言する
app.use(mylogger);

//ミドルウエア
function mylogger(req, res, next) {
  console.log(req.originalURL);
  next();
}

参考サイト

【Express入門】Node.jsでWebアプリケーションの作り方を1から学ぼう!
Node.js とはなにか?できることを初心者にもわかりやすく解説
【Node.js入門】初心者のためのExpress入門(GET / POST)
【Express】Node.jsを学んでみる 最初の一歩
ミドルウェアとは?ミドルウェア の種類や機能を徹底解説

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0