3日目 ～新規登録＆ログインフォームを作成する②～

昨日は「メモ帳」を使用して様々なファイルを作成しました。

ただ、メモ帳によるファイル編集は効率がよくありません。

そこで、これからは開発者向けのテキストエディタであるVisual Studio Code（VS Code）を使用することにします。（所要時間：約1時間）

Visual Studio Codeのインストール方法は、ネットで検索すれば詳しい情報はいくつも見つかりますし、インストール自体に特に難しいことはありません。

Visual Studio Code公式サイトからインストーラーをダウンロードし、そのインストーラーをクリックした後、表示される案内に対して「OK」や「next」のボタンを押していくだけで完了します。

※「デスクトップ上にアイコンを作成する」を選んでおくと便利です

デフォルトでは英語表記となっていますが、これを日本語にすることも簡単です。
（こちらの記事を参考にどうぞ→ https://www.javadrive.jp/vscode/install/index4.html）

Visual Studio Code（VS Code）はアプリケーション作成に非常に役立つツールです。

初心者向けに最低限知っておくと良い基本機能をかんたんに説明します。

VS Codeには他にも多くの便利な機能があります。ただ、初めのうちは慣れないことも多いでしょう。
無理をせず、実際に使いながら少しずつ機能を覚えていくことをおすすめします。

ではさっそくVS Codeを使って、昨日作成したmy-projectフォルダと、その中にある下記4つのファイルを確認しましょう。

・server.js
・login.html
・register.html
・dashboard.html

昨日、これらのコードは不完全であると説明しましたが、どうすれば完全に機能するようになるのでしょうか？

答えはもちろんAIに問い合わせることです。

しかし、どのような質問をすれば良いのでしょうか？

そこで、ログインフォームを機能させるためにAIに質問した内容を、以下にまとめます。

実際のやりとりは下記URLから確認できます。
https://chat.openai.com/share/e9ac9e79-938b-47ec-afe2-8e94668963c3
（上記URLが開けない場合はこちらから）

上記4回のやりとりを経て、server.jsファイルの完全な修正コードが生成されました。

const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const bcrypt = require('bcrypt');
require('dotenv').config();

const app = express();
const port = 3000;

// データベース接続設定
const pool = mysql.createPool({
  connectionLimit: 10,
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME
});

// ミドルウェアの設定
app.use(session({
  secret: 'your_secret_key',
  resave: false,
  saveUninitialized: true
}));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static('public'));  // publicディレクトリのみを静的ファイルとして提供

// ログインページへのルート
app.get('/login', (req, res) => {
  res.sendFile(__dirname + '/public/login.html');
});

// ユーザー登録処理
app.post('/register', (req, res) => {
  const { username, password } = req.body;
  const saltRounds = 10;
  bcrypt.hash(password, saltRounds, function(err, hash) {
    pool.query('INSERT INTO users (username, password) VALUES (?, ?)', [username, hash], (err, results) => {
      if (err) throw err;
      res.redirect('/login');  // ログインページへリダイレクト
    });
  });
});

// ログイン処理
app.post('/login', (req, res) => {
  const { username, password } = req.body;
  pool.query('SELECT password FROM users WHERE username = ?', [username], (err, results) => {
    if (err) throw err;
    if (results.length > 0) {
      bcrypt.compare(password, results[0].password, function(err, result) {
        if (result) {
          req.session.loggedin = true;
          req.session.username = username;
          res.redirect('/dashboard');  // ダッシュボードへリダイレクト
        } else {
          res.send('ユーザー名またはパスワードが間違っています！');
        }
      });
    } else {
      res.send('ユーザー名またはパスワードが間違っています！');
    }
  });
});

// ダッシュボードページへのルート
app.get('/dashboard', (req, res) => {
  if (req.session.loggedin) {
    res.sendFile(__dirname + '/private/dashboard.html');  // privateディレクトリからファイルを提供
  } else {
    res.redirect('/login');  // ログインしていない場合はログインページへリダイレクト
  }
});

app.listen(port, () => {
  console.log(`サーバーがポート ${port} で稼働しています`);
});


Copy

このコードをコピーして、VS Codeで開いているserver.jsに上書きし、ファイルメニューから「保存」を選んでください。

そして修正したウェブアプリケーションを実行し、動作を確認しましょう。

まずはXAMPPで「Apache」と「MySQL」を起動してください（Startボタンを押す）。

そしてサーバー側のコードを立ち上げるために、my-projectフォルダでターミナルを開き、以下のコマンドを実行します。

node server.js

Copy

なお、デスクトップ上でターミナルを開いた場合は、まずmy-projectフォルダに移動する必要があります。

その際には、下記どちらかのコマンドを入力してください。

cd %USERPROFILE%\Desktop\my-project

Copy

または

cd my-project

Copy

「cd」というコマンドは「change directory」の略で、これを使ってフォルダを移動することができます。

ターミナル上でmy-projectフォルダに移動したことを確認してから「node server.js」コマンドを実行してください。
（下記画像参照）

「サーバーがポート 3000 で稼働しています」と表示されれば、正常に動作しています。

次に、以下のURLをブラウザを開き、修正コードの動作を確認しましょう。

ダッシュボードページに関しては、ログインしていないユーザーがアクセスすると自動的にログインページにリダイレクトされます。
これは意図した通りの動作であり、未認証のユーザーはログインページへ誘導するようにプログラムしています。

まずは登録ページで好きなユーザー名とパスワードを入力してみてください。

入力後は、自動的にログインページに遷移します。

設定したユーザー名とパスワードでログインしましょう。

するとダッシュボードページが表示されます。

これにより、新規登録とログインのプロセスが正常に機能していることを確認できました。

また、ブラウザで http://localhost/phpmyadmin/ を開いてみてください。

左側に表示されている「mydatabase」をクリックし、その後画面中央よりやや左にある「users」というテーブルをクリックします。

すると、あなたが入力したユーザー名と、ハッシュ化（＝ランダムな文字列に変換すること）されたパスワードが格納されていることを確認できます。

ところで、わずかこれだけの機能のために、たくさんのコードやファイルが必要となる現実に、もしかするとガッカリしているかもしれません(笑)。

新規登録やログイン機能のような単純な機能については、市場に出回っている既存のパッケージを活用することも一つの選択肢ではありますが、

しかし単純な機能だからこそ、ゼロから自分で構築することに様々なメリットがあります。

実用的なアプリケーションの作成には、まだまだ多くの追加機能が必要にはなりますが、生成AIの活用によって誰でもスムーズな開発作業が可能です。

今日はとりあえず、AIによって生成されたプログラムコードの理解を深めるべく、各コードの役割や意味を確認しておきましょう。

これらの資料は、ざっと目を通すだけで大丈夫です。
すべてを一度に理解したり、暗記したりする必要はありません。

ここで重要なのは、わからないコードや用語があった際に、AIに質問すれば分かりやすい解説を得ることができる、というのを実感することです。

とりあえず、①～④の編集されたコードを既存のコードに上書きしておきましょう。

明日はdashboard.htmlの編集を通じて、HTMLとCSSについての理解を深める講座を行います。

　次回はこちら

大蔵 販売ページ