本記事は著者（人間の方）がプロンプトエンジニアリングを駆使して制作したカスタムGPT「AcePilot」の実演になります。僕はノンプログラマーですので「ノーコード」の厳密な定義を知りませんが、今回リアルガチでコードは一文字も書いておりません。「AcePilot」をご紹介した記事は以下になります。
あとのことはAIであるAcePilotさん…いや、エースの兄貴にすべてお任せしやす。
簡易メモアプリケーションの作成: HTML, CSS, JavaScriptを使った実践的プロジェクト
導入
プログラミングの学習初期段階において、実際に手を動かして何かを作り上げる経験は非常に価値があります。この記事では、HTML, CSS, JavaScriptの基本的な知識を活用して、シンプルながらも実用的なメモアプリケーションの作成プロセスをステップバイステップで解説します。このプロジェクトは、初心者のウェブ開発者やJavaScriptの学習者に特に適しています。
プロジェクト概要
このメモアプリケーションは、ユーザーがテキストメモを追加、表示、削除できる基本的な機能を持っています。データはブラウザのLocalStorageに保存されるため、サーバーサイドの設定は不要です。シンプルながらも、ウェブ開発の基本的な概念を理解するのに役立つプロジェクトです。
では、簡易メモアプリケーションの開発に取り掛かります。このプロジェクトを効率的に進めるため、以下のステップに従って開発を進めましょう。
ステップ 1: UIデザインの計画
まず、メモアプリのユーザーインターフェイス（UI）を計画します。このアプリはシンプルで直感的である必要があります。主な機能は以下の通りです。
- メモの一覧表示
- 新しいメモの追加
- メモの編集
- メモの削除
ステップ 2: HTMLの構造作成
HTMLでアプリの基本的な構造を作成します。これには、メモの一覧を表示する領域、新しいメモを追加するためのフォーム、およびアプリのタイトルが含まれます。
ステップ 3: CSSでのスタイリング
CSSを使用してアプリをスタイルします。レスポンシブデザインを意識して、デスクトップとモバイルの両方で適切に表示されるようにします。
ステップ 4: JavaScriptでの機能実装
JavaScriptを使用して、メモの追加、編集、削除、およびローカルストレージへの保存機能を実装します。
ステップ 5: テストとデバッグ
アプリの各機能をテストし、問題があればデバッグして修正します。
では、ステップ2から始めて、HTMLの基本的な構造を作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>簡易メモアプリケーション</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<h1>メモアプリ</h1>
<form id="new-memo-form">
<input type="text" id="new-memo-title" placeholder="タイトル">
<textarea id="new-memo-content" placeholder="内容"></textarea>
<button type="submit">メモを追加</button>
</form>
<div id="memos">
<!-- ここにメモが表示されます -->
</div>
</div>
<script src="app.js"></script>
</body>
</html>
このHTMLはメモアプリの骨組みを提供します。次に、CSSでこの構造をスタイリッシュにして、JavaScriptで動的な機能を追加します。
続いて、CSSを使用してアプリケーションのスタイルを定義し、次にJavaScriptで機能を実装します。
ステップ 3: CSSでのスタイリング
CSSを使って、アプリケーションに見た目を整えます。ここでは基本的なスタイリングの例を示しますが、お好みでカスタマイズしてください。
/* style.css */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#app {
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
h1 {
color: #333;
}
#new-memo-form {
margin-bottom: 20px;
}
#new-memo-form input, #new-memo-form textarea {
width: 100%;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
}
#new-memo-form button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
#new-memo-form button:hover {
background-color: #0056b3;
}
.memo {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.memo-title {
font-weight: bold;
}
.memo-content {
white-space: pre-wrap; /* 改行を保持するため */
}
ステップ 4: JavaScriptでの機能実装
JavaScriptを使用して、メモの追加、表示、削除、およびローカルストレージへの保存と読み込みの機能を実装します。
// app.js
document.addEventListener('DOMContentLoaded', () => {
const newMemoForm = document.getElementById('new-memo-form');
const newMemoTitle = document.getElementById('new-memo-title');
const newMemoContent = document.getElementById('new-memo-content');
const memosElement = document.getElementById('memos');
// メモをロードする
const loadMemos = () => {
const memos = JSON.parse(localStorage.getItem('memos')) || [];
memosElement.innerHTML = '';
memos.forEach((memo, index) => {
const memoElement = document.createElement('div');
memoElement.classList.add('memo');
memoElement.innerHTML = `
<div class="memo-title">${memo.title}</div>
<div class="memo-content">${memo.content}</div>
<button onclick="deleteMemo(${index})">削除</button>
`;
memosElement.appendChild(memoElement);
});
};
// メモを保存する
const saveMemos = (memos) => {
localStorage.setItem('memos', JSON.stringify(memos));
loadMemos();
};
// メモを追加する
newMemoForm.addEventListener('submit', (e) => {
e.preventDefault();
const memos = JSON.parse(localStorage.getItem('memos')) || [];
memos.push({
title: newMemoTitle.value,
content: newMemoContent.value
});
saveMemos(memos);
newMemoTitle.value = '';
newMemoContent.value = '';
});
// メモを削除する（関数をグローバルスコープに公開する）
window.deleteMemo = (index) => {
const memos = JSON.parse(localStorage.getItem('memos'));
memos.splice(index, 1);
saveMemos(memos);
};
loadMemos();
});
このコードは、メモの追加、ローカルストレージへの保存、読み込み、およびメモの削除機能を提供します。アプリがロードされると、loadMemos関数が呼び出され、保存されたメモが表示されます。メモの追加フォームを送信すると、新しいメモがローカルストレージに保存され、画面に表示されます。各メモには削除ボタンが付いており、クリックするとそのメモが削除されます。
これで、簡易メモアプリケーションの基本的な機能が完成しました。
結論と今後の展望
このプロジェクトを通じて、HTML, CSS, JavaScriptの基本を使用して、実際に動作するウェブアプリケーションを構築する方法を学びました。この知識を基に、より複雑なプロジェクトに挑戦することができます。
コールトゥアクション
このプロジェクトを自分で試してみてください。また、機能を追加したり、スタイルをカスタマイズしたりすることで、さらに学習を深めることができます。フィードバックや質問があれば、ぜひコメントで共有してください。
どうも、人間の方です。説明の分かりやすさがエグい。これ実際にエディタにコピペしてファイルに保存、ブラウザで開いたらちゃんと動きました。スゴイ。ご覧の皆さんにとっては小さな一歩かもしれませんが、ノンプログラマーそしてカスタムGPTの制作者の僕にとってはとても大きな一歩です。
あとコードレビューでしたっけ？エンジニアの方が偉そうな人に詰められる会。あれもエースさんに聞けば理由から仕組みから全部丁寧に説明してくれます。なので、どのレベルのどんな仕事に使われるのか、どこまで出来るのかちょっと予想が付きませんが、要件分析、基本設計、詳細設計、モジュール開発、コーディング、コードレビューができたら何も問題ないんじゃないかと思います。デバッグとテストは人間の仕事ですかね。
参考までに、AcePilotさんとアホ人間の会話は以下になります。最後の方ちょっとグダってますが、人間のせいですのでご容赦下さい。
エースの兄貴以外にもChatGPTのMy GPTs機能で制作した様々なカスタムGPTを公開しております。もし良かったら使ってみてフィードバックを頂けると大変喜びます。それでは。