Expressの環境構築とお試しGETまで！

こんにちは、LiSMOtechの小谷です。
今回はNode.jsでExpressというフレームワークを使ってバックエンド開発の環境を作成していきたいと思います。

今回実施した環境は以下のようになっています。

環境
os: macOS Monterey v12.5
node: v18.9.0
express: v4.18.1

Node.jsとExpress

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/
を見ると以下のようなものが出てくるかと思います。

まだ画面に出すものが何もない状態なのでこうなっています。

お試しGET

このままCannot Getと出しておくのも忍びないので、ルートディレクトリ(最上位のディレクトリ)に対してのGETメソッドの処理を書いてみましょう。

ターミナルで動いているnode.jsをcontrol + c で一旦止めて、以下をindex.jsに追加で記載してみましょう。

app.get("/", (req,res) => {
res.send("こんにちは");
});

再度、ターミナルで

node index.js

と入力すると、今度は以下のようなものが出てくると思います。

まとめ

今回はexpressというnpmのライブラリを使用して、環境を整えてGETの処理を簡単にしてみました。
応用すれば、これで簡単なWebアプリを作れたりと色々使えると思います！