【#1. Expressの導入】初心者がWebアプリを作ってみた【Node.js】

プログラミング
2023.05.21
この記事は約6分で読めます。

（知識不在のまま）Webアプリを作るぞ。と決断したのは、

「本などでインプットをしてから実際に手を動かす（アウトプットする）より、手を動かしながら足りない知識分を勉強する」と、Youtubeで誰かが言っていたことがしっくりきたことがきっかけです。


実際に、私の会社では尊敬する大先輩が

と、絶対的に正しいアドバイスをくれるのですが、私は大の活字嫌いです。
やらなくてはいけないのに、なかなか進まない自分に嫌になって、どんどん億劫になっていきます。


なので、楽しいと感じるままにWebアプリを作成して、必要な技術は都度身に付けていこうと思いました。

今回のゴール

Node.jsのフレームワーク「Express」を利用して、サーバーに接続する

  • Node.jsのインストール
  • Expressの導入～利用



利用する言語

身についている言語が少ないため、少ない選択肢の中から下記の言語を使用することにしました。

フロントエンド
・HTML / CSS
・JavaScript

バックエンド
・Node.js（フレームワークはExpress）

データベース
・My SQL

※OSはWindowsで、テキストエディタはVisual Studio Codeです。
　

Node.jsの利用（Windows版）

今回、Progateで学びたてのNode.jsでバックエンド側を作っていこうと思いました。
（バックエンドで知っている言語がそれしかないだけ）
　

Node.jsのインストール

Node.jsのインストールはProgate様が図解付きでわかりやすく記事を上げていらっしゃいます。
Node.jsの開発環境を用意しよう！（Windows） | プログラミングの入門なら基礎から学べるProgate[プロゲート] (prog-8.com)


公式サイトに記載されている、推奨VersionをインストールすればOKです。
※2023年5月現在、Progateが解説でインストールしているversionは、16.15.1です。
私は16.17.0を利用していますが、今後開発していく上で不具合があればUpdateします。

Node.jsインストール画面

　

プロジェクトフォルダにpackage.jsonファイル生成

プロジェクトフォルダを作成し、VS Codeでフォルダを開きます。
Terminalで下記コマンドを入力します。

VS Codeのターミナル
//Terminal

npm init--yes

※「–yes」を入れることで、デフォルト値を勝手に設定してくれたpackage.jsonファイルが作成されます。
入れないと対話式にいろいろと聞かれ、自分で設定を決めていく必要があります。
　

Expressの導入

Expressを導入することで、URLへのアクセスや、DBへのアクセス処理を簡単にさせることができるそうです。
（Chat gptは意地悪な上司よりも格段に丁寧で優しく教えてくれます。）

それではさっそくExpressを導入していきます。
　

コマンドでExpressインストール

VS CodeのTerminalより下記コマンドを入力します。

//Terminal

npm install express

　

「app.js」ファイルの作成

Expressを利用するためのコードを記述するファイルとして、「app.js」ファイルを作成します。

app.jsファイルの作成

　

【サーバー接続準備】コードの記述

サーバーを起動するためには、「app.js」ファイルに下記3つのコードが必要です。

//app.js

const express= require('express');
const app= express();

app.listen(3008);
//利用可能なポート番号を設定

　

【サーバー起動】コマンドの実行

Terminalに下記コードを入力し、サーバーを起動します。

//Terminal

node app.js

これでサーバーの起動が完了しました。
と言っても、これだけでは何も変化が起こらず、本当にサーバーが起動しているのか不明ですね。
試しに新たなファイルを作成し、サーバーを起動したらブラウザ画面に「Hello World」が表示されるようにしてみます。


※一度サーバーを停止するため、Terminalで「Ctrl」＋「C」を入力し、Enterします。
　

ブラウザに「Hello World」を表示

サーバーを起動したら、「test.ejs」ファイルにアクセスし、「Hello World」と表示される流れにしてみます。

※ejsファイルとは、JSのスクリプトを読み込んでくれる、Node.js用のファイルです。

　

コマンドでejsファイルの有効化

Terminalより下記コマンドを入力し、ejsファイルを利用できるよう、npmよりパッケージをインストールします。

//Terminal

npm install ejs

　

「test.ejs」ファイルの作成

ejsファイルは「views」フォルダ内に作成する必要があります。
これは、Expressがviewsフォルダ内のファイルを検出しようとするのがデフォルトの動きだからです。

viewsフォルダ内にtest.ejsファイルの作成

viewsフォルダ内に「test.ejs」ファイルを作成し、下記のコードを入力しました。

//test.ejs

<!DOCTYPE html>
<html>
 <head>
   <title>TEST Page</title>
 </head>
 <body>
   <h1>HELLO WORLD</h1>
 </body>
</html>

　

「app.js」にコードを追加

サーバー起動時にtest.ejsファイルへ接続するように、「app.js」ファイルにコードを追加します。

//app.js

const express= require('express');
const app= express();

//追加
app.get('/',(req, res)=>{
  res.render('test.ejs');
});

app.listen(3008);

「3008のポート番号にアクセスした時に、test.ejsファイルにアクセスしてね」という意味のコードです。
　

サーバーを起動しブラウザに「Hello World」を表示

Webブラウザを開き、設定したポート番号にアクセスします。
http://localhost:3008/

これで、サーバーが無事に起動され、test.ejsへもアクセスできたことがわかります！

ブラウザでtest.ejsファイルの表示

　

まとめ

Expressを利用しようとあれこれ調べていたのですが、導入方法もProgateに書いてありました。。
この記事で行った内容は下記の通りです。

次はログイン画面を作っていきます！

スポンサーリンク