初めに
今回はjavascriptとhtmlを使って簡単なログイン機能を書いてみようと思います。
ファイル構成
ファイル構成は以下の通りです
ファイル構成
main |--html
| |
| |--main.html
| |--login.html
| |--register.html(まだ書いていない)
| --js
| |
| |
| |--main.js
| |--login.js
|--css
| |--main.css
コピペ
以下のコードをコピペしてください
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>
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>
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');
});
});
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でログイン機能を作ってみました。
それではまたお会いしましょう！