※前回記事はこちらから
「これどうしたらいいの？」「あれってどうなったの？」で耳にタコ
小売業に勤めて数年になるあざらし。
新入社員とは呼ばれなくなり、パートさんの他に直属の部下も二人出来たので、仕事のことは聞くよりも聞かれることの方が増えた。
その中で最も多いのが、「これどうしたらいいの？」 と 「あれってどうなったの？」 である。
聞かれてすぐわからなければ、少し遠いところにあるパソコンルームに戻って、メールとファイルをひっくり返してお目当てのデータを探して…
こんなことに時間を割いていたら自分の仕事ができない！
正直、自分たちで調べてよと言いたい。
上司にも相談してみると、「これは永遠の課題です」 と遠い目。
――曰く、「部署に情報を伝えようとしたとき、紙だけだと３割の人間に伝わり、MTして６割、MT繰り返して８割、それでも２割には伝わらない。」
だったら！
困ったとき、自分たちで調べられる何かを作ろう！
情報共有は社員の仕事だが、一日中ひっきりなしに社員の電話が鳴るような依存状態はよくない。
そこで。
簡易データベースを作ってみた
今回は、ウェブ上で使える簡易的なデータベースを試作した。
情報を入力して、検索欄に入力した語句で絞り込みを書ける仕組みである。
使用したツール
- Copilot
- CodePen（動作確認用）
全体像
- 目的： 職場の「何でも聞いてくる」問題を減らすため、情報入力・一覧化・検索ができるWebアプリを作成
- 構成：タイトル・日時・担当者・内容を入力して追加
- 検索機能：検索欄に入力した語句を含むデータだけをリアルタイムで絞り込み。（空欄の場合は全件表示）
- データ保存：現段階ではブラウザ内メモリのみ（ページ更新で消えてしまうので、今後何かしらのストレージに保存する改良が必要）
Copilotが出力したソースコード
HTML
<div class="container">
<h2>情報共有データベース</h2>
<input id="search" type="text" placeholder="検索キーワードを入力">
<div class="input-area">
<input id="title" type="text" placeholder="タイトル">
<input id="date" type="datetime-local">
<input id="person" type="text" placeholder="担当者">
<textarea id="content" placeholder="内容"></textarea>
<button id="addBtn">追加</button>
</div>
<table>
<thead>
<tr>
<th>タイトル</th>
<th>日時</th>
<th>担当者</th>
<th>内容</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
</div>
CSS
body { font-family: sans-serif; padding: 20px; }
.container { max-width: 900px; margin: auto; }
input, textarea { width: 100%; margin: 5px 0; padding: 8px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ccc; padding: 8px; vertical-align: top; }
textarea { height: 80px; }
JavaScript
window.onload = () => {
const data = [];
const list = document.getElementById("list");
const search = document.getElementById("search");
const addBtn = document.getElementById("addBtn");
addBtn.onclick = () => {
const title = document.getElementById("title").value;
const date = document.getElementById("date").value;
const person = document.getElementById("person").value;
const content = document.getElementById("content").value;
if (!title || !date || !person || !content) {
alert("全ての項目を入力してください");
return;
}
data.push({ title, date, person, content });
render();
};
search.oninput = () => render();
function render() {
const keyword = search.value.toLowerCase();
list.innerHTML = "";
data
.filter(item => {
if (keyword === "") return true;
return (
item.title.toLowerCase().includes(keyword) ||
item.date.toLowerCase().includes(keyword) ||
item.person.toLowerCase().includes(keyword) ||
item.content.toLowerCase().includes(keyword)
);
})
.forEach(item => {
const row = `
<tr>
<td>${item.title}</td>
<td>${item.date.replace("T", " ")}</td>
<td>${item.person}</td>
<td>${item.content}</td>
</tr>`;
list.innerHTML += row;
});
}
};
Copilotにどう投げかけたのか？
＜発案のプロンプト＞
-
職場の情報共有を楽にしたい
→ 何でも聞かれる状況を改善したい -
Web アプリの形で作りたい
→ QR コードで誰でも使えるようにしたい
→ CodePen で動作確認したい -
入力項目を指定したい
→ 「タイトル」「日時」「担当者」「内容」 -
検索機能を付けたい
→ 入力した語句を含むデータだけ絞り込みたい
＜修正プロンプト＞
-
追加ボタンを押しても動かない問題の修正依頼
→ CodePen で確実に動くように改善してほしい
＜おまけ＞
- 内容を記事にしたいので、使用ツール・全体像・コードを整理してほしい
動作の様子
入力
基本の画面がこちら。「タイトル」以下の内容を入力すると…
このように追加されていく。
検索
検索は、欄に入力した単語で絞り込む仕組み。
氏名で検索
毎朝のルーティンとして、自分宛ての連絡を検索するのにも便利そう。
日付で検索
昨日相談したこと、どうなったかな？って時に便利そう。
「〇日の問い合わせについて：回答」とか。
AIにコードを書いてもらうこと
相手がAIなだけに、プロンプトは超重要。でも思ってる以上に難しかった。
良くも悪くもこちらが指示したことに忠実なので、「初心者だからコードの解説もして！」とか「最初から丁寧に説明して！」と言わないと、ドンドン先の手順を書き連ねていってしまう。
また、ついあれもこれもと欲張ってしまうと、思っている以上に複雑になってしまったり。
そういう時は、スモールステップで「まずここまでのコードを出して」→「次はこの機能を追加して」と指示してやると、マシだったように思われる。
終わりに
ひとまず、動作するコードを生成してもらうところまではできた。
今後は、入力した内容をオフラインで保存する仕組みの追加や、別のアプローチで同様の仕組みを作成する方法について、検討していきたい。
（noteの方でも仕事関連のことを発信しているので、ご興味があればぜひ。今回の試作に至った経緯の記事もあります）
