【#2. ログイン画面の作成】初心者がWebアプリを作ってみた【Node.js】

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

今回は、ユーザーがまず始めにアクセスする画面である、ログイン画面を作成していきます。
　

今回のゴール

ログイン画面の作成

  • login.ejsファイルの作成
  • CSSの作成
  • 使い回すコードのパーツ化



完成イメージ

↓ログイン画面はこのような形に仕上げていきます。

※夫婦仲向上アプリを作成しようと考えています

　　

ログイン用ejsファイルの作成

それではログイン画面を作成していきます。
　

login.ejsファイルの作成

ログイン用の画面なので、「login.ejs」ファイルを作成して下記のコードを記述しました。
　

//login.ejs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script src="https://kit.fontawesome.com/f3bdbfba30.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/responsible.css">
    <title>まんまるかぞく</title>
  </head>

  <body>
    <header>
      <div class="header__container">
        <img src="/images/rabbit-icon.png" alt="まんまるかぞく">
        <h1>まんまるかぞく</h1>
      </div>
    </header>
 
    <section class="login">
      <div class="container">
        <form action="/login" method="post" class="login__form">
 
          <div class="login__form-container">
            <input type="email" name="email" id="login-id" class="login__form-item-input" placeholder="メールアドレス">
          </div>
          <div class="login__form-container">
            <input type="password" name="password" id="password" class="login__form-item-input" placeholder="パスワード">
          </div>
          <button type="submit">ログイン</button>
          <p><a href="/register">新規登録はこちら</a></p>
        </form>
      </div>
    </section>
  </body>
</html>
MORE

「ejs」ファイルは、必ず「views」フォルダの直下に作成します。

　 　

ログイン画面へアクセスするためapp.jsを編集

ログイン画面にアクセスできるよう、既存の「app.js」ファイルのコードを一部修正します。

//app.js

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

//修正
app.get('/login', (req, res) => {
  res.render('login.ejs');
});

app.listen(3008);

　

CSSファイルの作成

CSSで見た目を整えていきます。
CSSフォルダや、JS、img用フォルダは、「public」フォルダの直下に作成する必要があります。
　

publicフォルダの作成

↓最初にpublicフォルダを作成します。

　

↓publicフォルダの直下にcssフォルダを作成します。



↓ログイン画面のheader部分にうさぎのアイコンを挿入するため、「images」フォルダも作成しました。

　

publicフォルダ読込みのためapp.jsを編集

作成したpublicフォルダを読み込んでもらえるよう、既存の「app.js」にコードを追記する必要があります。


↓5行目のハイライトされた箇所を追加します。

//app.js

const express = require('express');
const app = express();
app.use(express.static('public'));

　

reset.cssの作成

cssフォルダ内に、「reset.css」ファイルを作成します。
「同じコードを記載しているのに、各ブラウザで見え方が違う」という事態を避けるために、スタイルをリセットするためのものです。
今回は、normalize.cssを利用しました。
　　

normalize.cssは、ブラウザ間での見え方を統一するためだけのCSSです。
（destyle.cssと異なり、各要素の大きさや、余白等はデフォルトの設定が生かされたままです）

　

style.scssの作成

cssフォルダ内に「style.scss」ファイルを作成し、ログイン画面のスタイルを成形していきます。

//style.scss

$base-text-color:#604e4e;
$base-bg-color:#f4f0e6;
$base-link-color:#8181fa;
$pink:#F38181;
$base-font-family:'M PLUS Rounded 1c',sans-serif;
$form-input:3rem;
$base-font-size:1.4rem;
$icon-size:2.4rem;
$header-height:6rem;
$button-color:#9dd3a8;

// common
html {
 font-size:62.5%;
}

body {
 color:$base-text-color;
 font-family:$base-font-family;
}

a {
 color:$base-link-color;
 text-decoration:none;
 font-size:$base-font-size;
}

.container {
 width:95%;
 margin:0auto;
}

h1 {
 font-size:2rem;
 text-align:center;
}

button {
 display:block;
 border-radius:.4rem;
 border:none;
 cursor:pointer;
 transition:.5s;
}

textarea,
input[type="password"],
input[type="email"],
input[type="text"] {
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   appearance:none;
   -webkit-border-radius:.4rem;
   -moz-border-radius:0.4rem;
   -ms-border-radius:.4rem;
   border-radius:.4rem;
   border:0.1remsolid#d9d9f3;
   outline:0;
   margin:0;
   padding:08px;
   box-sizing:border-box;
}

textarea:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus{
   border:1pxsolid$base-link-color;
}

section {
 margin-top:$header-height;
}

header {
 height:$header-height;
 position:fixed;
 width:100%;
 z-index:10;
 top:0;
 background-color:#fff;

 &img {
   width:3.5rem;
   height:3.5rem;
   background-color:$base-bg-color;
   margin-left:1.6rem;
   border-radius:50%;
  }

 h1 {
   width:100%;
   display:block;
  }

 i {
   font-size:$icon-size;
   margin-right:1.6rem;
   cursor:pointer;

   &.hide {
     display:none;
    }
  }
}

.header__container {
 display:flex;
 justify-content:space-between;
 align-items:center;
 height:$header-height;
 width:100%;
}

.login,
.register {
 margin:10rem0;
 
 .login__form,
 .register__form {
   width:80%;
   margin:0auto;
 
   &button {
     width:50%;
     height:$form-input;
     margin:0auto;
     font-size:$base-font-size;
     padding:0;
     background-color:$button-color;
     color:#fff;

     &:hover {
       opacity:.8;
      }
    }
 
  }
 
 .login__form-container,
 .register__form-container {
   margin-bottom:2.5rem;
 
   &input {
     width:100%;
     height:$form-input;
    }
  }

 p {
   font-size:$base-font-size;
   text-align:center;
  }
}

// error-message
.errors {
 display:block;
 list-style:none;
 border:2pxsolid$pink;
 border-radius:.4rem;
 margin:0auto1rem;
 padding-inline-start:0.4rem;

 &>li {
   line-height:1.4rem;
   padding:.4rem;
  }
}
MORE

CSSの記述がとっても楽になるSCSSの書き方は、お馴染みのプロゲート様から勉強できます。
https://prog-8.com/courses/sass

　

publicフォルダ内のファイルのパス指定方法について

ejsでは、publlicフォルダ内にあるファイルのパスを指定する際は、publicフォルダより下の階層からパスを記載すればOKです。


ログイン画面の作成が完了したので、この状態でブラウザを確認してみます。


↓Terminalに下記コードを入力し、サーバーに接続します。

//Terminal

node app.js



↓ブラウザで「http://localhost:3008/login」にアクセスし、画面を確認します。

　

パーツ化

ejsでは、headやheader内のコード等、他のファイルにも使い回す必要のあるコードはパーツ化することが可能です。


パーツ化することによって、後々コードに変更が出た際に１ファイルだけを修正すれば良いだけになり、全ファイルのコードを書き直す手間や修正漏れによるミスを防ぐことができます。

headのパーツ化

「login.ejs」のhead内に記載したコードをパーツ化します。


↓「login.ejs」のheadのタグ内のコードを切り取ります



↓「head.ejs」ファイルを新規作成し、切り取ったコードを貼り付けます



↓「login.ejs」ファイルに戻り、空白になったheadタグ内に下記コードを記載します。

//login.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <%- include('head'); %>
</head>

　

Headerのパーツ化

「login.ejs」ファイル内のheader部も同様にパーツ化していきます。


↓「login.ejs」のheaderタブ内のコードを切り取ります



↓「form-header.ejs」ファイルを新規作成し、切り取ったコードを貼り付けます



↓「login.ejs」ファイルに戻り、空白になったheaderタグ内に下記コードを記載します。

//login.ejs

  <header>
    <%- include('form-header'); %>
  </header>



パーツ化が完了したので、この状態でブラウザを確認してみます。


↓Terminalに下記コードを入力し、サーバーを再接続します。

//Terminal

node app.js



↓ブラウザで画面を確認し、パーツ化前の画面と同じかどうかを確認します。


これでフロント部分のログイン画面が完成しました！
　

まとめ

今回は、ログイン画面のhtml・CSSの作成とパーツ化を行いました。
次回はこの画面のバックサイドの部分を作成し、ログイン機能を実装していきます。

スポンサーリンク