【プログラミング学習2-2】日記アプリ
今日のお題 簡単な日記アプリを作成
概要
簡単な日記アプリを作るために、Node.js と Express を使用し、データベースを使わずにローカルでデータを管理する方法を説明します。このアプリでは、日記をブラウザ上で書き込んで表示できるようにし、アプリを閉じてもデータが残るようにローカルストレージ（ブラウザ内）に保存することを考えます。
必要なツール
Node.js と Express：サーバー側を構築します。
HTML/CSS：クライアント側のUIを作成します。
JavaScript（フロントエンド）：日記の保存、表示などの操作をクライアント側で行います。
ローカルストレージ：ブラウザにデータを保存します（データベースなしでデータの永続化を実現）。
プロジェクトのセットアップ
まず、プロジェクトフォルダを作成し、Node.jsのプロジェクトとして初期化します。
mkdir simple-diary-app
cd simple-diary-app
npm init -y
npm install express
2.サーバーの作成
Expressを使って、シンプルなサーバーを作成します。サーバーは、日記ページの表示や新しい日記の保存などの機能を提供します。
server.js（Expressサーバー）
const express = require('express');
const path = require('path');
const app = express();
// 静的ファイル（HTML, CSS, JS）の提供
app.use(express.static(path.join(__dirname, 'public')));
// ルートでindex.htmlを返す
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
// サーバーを起動
const port = 3000;
app.listen(port, () => {
console.log(`Server running on http://localhost:${port}`);
});
3.クライアント側のHTMLファイル作成
日記を書き込むためのフォームを作り、保存した日記を表示できるようにします。
public/index.html（HTML）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>簡単な日記アプリ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>簡単な日記アプリ</h1>
<form id="diary-form"> <label for="diary-entry">今日の日記</label> <textarea id="diary-entry" rows="5" cols="50" placeholder="日記を書いてください..."></textarea> <button type="submit">保存</button> </form> <h2>過去の日記</h2> <ul id="diary-list"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
4.スタイルの作成
UIを見やすくするために、簡単なCSSを追加します。
public/style.css（CSS）
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4 ;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd ;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #5cb85c ;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c ;
}
ul {
padding-left: 0;
}
li {
background-color: #f9f9f9 ;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
4.クライアント側のJavaScriptファイル作成
JavaScriptを使って、日記をローカルストレージに保存し、ページがリロードされても保存した日記を表示できるようにします。
public/app.js（JavaScript）
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('diary-form');
const diaryEntry = document.getElementById('diary-entry');
const diaryList = document.getElementById('diary-list');
// ローカルストレージから日記を読み込んで表示
const loadDiaryEntries = () => {
const diaryEntries = JSON.parse(localStorage.getItem('diaryEntries')) || [];
diaryList.innerHTML = ''; // 一度リセット
diaryEntries.forEach((entry, index) => {
const li = document.createElement('li');
li.textContent = entry;
diaryList.appendChild(li);
});
};
// 日記の追加
form.addEventListener('submit', (e) => {
e.preventDefault();
const newEntry = diaryEntry.value.trim();
if (newEntry !== '') {
const diaryEntries = JSON.parse(localStorage.getItem('diaryEntries')) || [];
diaryEntries.push(newEntry);
localStorage.setItem('diaryEntries', JSON.stringify(diaryEntries));
diaryEntry.value = ''; // フォームをクリア
loadDiaryEntries(); // 日記のリストを更新
}
});
// ページ読み込み時に日記をロード
loadDiaryEntries();
});
5.アプリを実行
すべてのファイルが準備できたら、サーバーを起動します。
node server.js
感想
昨夜前職の方と朝5時前まで電話をしてしまい、今日は一日中寝不足で、コードをなぞるだけの演習になりました。todoアプリの作成とも重複のある内容でしたね。今日はしっかり眠ろう。