javascriptとhtmlでログイン機能を書く

# 初めに
今回はjavascriptとhtmlを使って簡単なログイン機能を書いてみようと思います。
# ファイル構成
ファイル構成は以下の通りです
```:ファイル構成
main |--html
     |     |
     |     |--main.html
     |     |--login.html
     |     |--register.html(まだ書いていない)
     | --js
     |   |
     |   |
     |   |--main.js
     |   |--login.js
     |--css
     |    |--main.css
```
# コピペ
以下のコードをコピペしてください
```html:main.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <header>
        <h1>test</h1>
        <a href="#" id="logout">ログアウト</a>
    </header>
    <div class="settingsvar" id="loginvar">
        <a class="button" href="login.html" style="left: 70% !important">ログイン</a>
    </div>
    <div id="status" hidden>
        <p id="UserProfile"></p>
    </div>
    <main>
        <!-- メインコンテンツ -->
    </main>
    <script src="../js/main.js"></script>
</body>
</html>
```
```html:login.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ログイン - test</title>
    <link rel="stylesheet" href="../css/main.css">
    <script src="../js/login.js"></script>
</head>
<body>
    <header><h1>ログイン</h1></header>
    <div class="container">
        <p>ユーザー名を入力</p>
        <input type="text" id="username">
        <p>パスワードを入力</p>
        <input type="password" id="password">
        <br> パスワードを表示<input type="checkbox" id="showPassword">
        <br><button class="button2" id="loginButton">ログイン</button>
        <br>アカウントをお持ちでありませんか？<br><a href="register.html">こちらでアカウントを作成しましょう！</a>
    </div>
</body>
</html>
```
```javascript:main.js
document.addEventListener("DOMContentLoaded", function() {
    let d = document;
    let usernameElement = d.getElementById('UserProfile');
    let username = localStorage.getItem('username');
    if (username) {
        usernameElement.textContent = `ユーザー名: ${username}`;
        d.getElementById('loginvar').style.display = 'none';
        d.getElementById('status').removeAttribute('hidden');
        d.getElementById('logout').classList.remove('hidden');
    }

    let logoutLink = d.getElementById('logout');
    logoutLink.addEventListener('click', function(event) {
        event.preventDefault();
        localStorage.removeItem('username');
        usernameElement.textContent = '';
        d.getElementById('loginvar').style.display = 'block';
        d.getElementById('status').setAttribute('hidden', true);
        d.getElementById('logout').classList.add('hidden');
    });
});
```
```javascript:login.js
document.addEventListener("DOMContentLoaded", function() {
    let d = document;
    let usernameElement = d.getElementById('username');
    let username = localStorage.getItem('username');
    let passwordElement = d.getElementById('password');

    if (username) {
        usernameElement.value = username;
    }

    document.getElementById('loginButton').addEventListener('click', function() {
        login();
    });

    document.getElementById('showPassword').addEventListener('change', function() {
        if (this.checked) {
            passwordElement.type = 'text';
        } else {
            passwordElement.type = 'password';
        }
    });

    function login() {
        let usernameInput = usernameElement.value;
        let passwordInput = passwordElement.value;

        if (!usernameInput) {
            alert('ユーザー名を入力してください。');
            return;
        }

        if (passwordInput === "pass") {
            alert(`認証に成功しました。こんにちは、${usernameInput}さん`);
            localStorage.setItem('username', usernameInput);
            window.location.href = '../html/main.html';
        } else {
            alert('パスワードが正しくありません。');
        }
    }
});
```
※パスワード:pass
# 最後に
今回はhtmlとjavascriptでログイン機能を作ってみました。
それではまたお会いしましょう！