
こんにちは、LiSMOtechの小谷です。
今回はNode.jsでExpressというフレームワークを使ってバックエンド開発の環境を作成していきたいと思います。
今回実施した環境は以下のようになっています。
環境
os: macOS Monterey v12.5
node: v18.9.0
express: v4.18.1
Node.jsとは、ブラウザ外でのJavaScriptの実行環境を提供してくれるものです。
JavaScriptはブラウザで使用するイメージが強いと思いますが、
なぜブラウザ外でJavaScriptを実行環境を提供してくれると良いかと言うと、
バックエンド側(データのやり取りを担当する領域)でもフロントエンド側でも同じ言語であるJavaScriptを使用出来るからです。
また、Node.jsを使ってバックエンド開発をする時によく使われるライブラリでExpressというものがあります。
Expressを使用することで、コードの簡略化、効率化を図ることができます。
では、早速環境を作成してみましょう!
今回はお手持ちのPCにnode.jsが入っていることが前提で進めていきます。
まず、作業するフォルダを作成しましょう。
ターミナルを開いて、以下のコマンドで作成しましょう。
mkdir express-test
※express-testにあたる部分はフォルダ名になるので、任意の名前で大丈夫です。
作成したフォルダに移動する
cd express-test
開発ではnpmを用いて進めていくので、npmを使う初期の準備を以下のコマンドでします。
npm init -y
完了すると、package.jsonというものが出来上がると思います。
ここからは、Visual Studio Codeで作業を進めていきましょう。
作成したexpress-testの直下にindex.jsを作成しましょう。
左のメニューのファイルのアイコンからファイルを作成して、index.jsと名付けましょう。
そして、expressを以下のコマンドでインストールしましょう。
npm i express
インストールが完了したら、先ほど作成したindex.jsに以下のようなコードを書いてみましょう。
const express = require("express");
const app = express();
app.listen(5000, () => {
console.log("Listening on localhost port 5000");
});
expressと使用してローカルホストの5000のポートで開いている状態になります。
また、
app.listen(5000, () => {
の部分でバックエンドサーバーとブラウザを繋ぎこむ働きをしてくれてます。
以下のコマンドで実際に起動してみます。
node index.js
するとターミナルの方では、
Listening on localhost port 5000
と表示され、
ブラウザで
http://localhost:5000/
を見ると以下のようなものが出てくるかと思います。
まだ画面に出すものが何もない状態なのでこうなっています。
このままCannot Getと出しておくのも忍びないので、ルートディレクトリ(最上位のディレクトリ)に対してのGETメソッドの処理を書いてみましょう。
ターミナルで動いているnode.jsをcontrol + c で一旦止めて、以下をindex.jsに追加で記載してみましょう。
app.get("/", (req,res) => {
res.send("こんにちは");
});
再度、ターミナルで
node index.js
と入力すると、今度は以下のようなものが出てくると思います。
今回はexpressというnpmのライブラリを使用して、環境を整えてGETの処理を簡単にしてみました。
応用すれば、これで簡単なWebアプリを作れたりと色々使えると思います!
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved