はじめに
本記事はBaaSとかいうBackendのゴタゴタした色々作業やら処理やらを丸投げしてめっちゃ簡単にWebアプリ作れちゃうんだよなﾀﾊﾊというコンセプトのPocketBaseを利用したｸｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｯｿ簡単なタスク管理アプリ作成方法を書いていっちゃうんですな。
一応筆者の環境を記述しちゃうんですな。
- MacBook M2 Pro(14インチ 2023)
- macOS Sequoia 15.5
- メモリ: 16GB
- SSD: 512GB
使うもの
- PocketBase
- VSCode
- JavaScript,HTML
- ターミナル
1. 下準備
まずは何事も下準備。PocketBaseをダウンロードしていきましょう。
https://pocketbase.io/docs/ にアクセスして1番上の「Download v0.34.0 for~」でマシンに合わせてダウンロードしてくださいな。
私の場合はmacOSなのでARM64の「Download v0.34.0 for macOS ARM64」をダウンロードいたしました〜。
ダウンロードしたらmkdirで作業ディレクトリ作ってその中でunzipしてください。
unzipしてなんかmdファイル2つとpocketbaseのシェルみたいなのができてたらばっちぐーでございます。
2. PocketBase起動
カレントディレクトリからシェルみたいなpocketbaseを指定してserveしてくださいな。
$ ./pocketbase serve
実行したらおそらくMacBook様の非常に優秀なセキュリティさんがブロックしてしまうのでアプリの設定から [プライバシーとセキュリティ] を開き、下部の方からpocketbaseさんを許可してあげてください。
さぁさぁ気を取り直して起動していくと、ブラウザで「 http://127.0.0.1:8080/_/ 」が開き、初期設定画面に遷移すると思います。
自分のお好きなEmailアドレスとパスワードで設定してみましょう。
アカウント作成に成功するとPocketBaseの設定GUI画面に遷移すると思います。
下の画像の画面になっていたら成功です！
3. コレクション作成
データベースにおけるテーブルみたいな感じでPocketBaseでは コレクション という概念があります。
画面左側の 「New Collection」 からコレクションを作成してみましょう。
今回は簡単なタスク管理アプリなので、 「New Field」 を押してPlain Textを選び、 「taskMsg」 というフィールドを作成してみましょう。最終的には以下の設定でいきましょう。
- Name: tasks
- Type: Base
- id(固定)
- taskMsg(Plain Text型)
- created(固定)
- updated(固定)
次に 「API rules」 という項目でこちらは色々と制約つけれたりログインアクセス管理とかもできるんですが一旦今回はフル無視で行きます。
あまりよろしくないんですが全ルールクリックして右上が 「Set Superusers only」 となるように設定し、 「Create」 ボタンを押下しましょう。
これでコレクションの作成に成功しました。
次節で実際にアプリの作成に取り掛かります。
4. アプリ作成(HTML)
作業ディレクトリでVScode(いや実際はなんでもいいですけども)とかのエディター開いて、以下のindex.htmlファイルを作成してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タスク管理アプリ</title>
</head>
<body>
<h1>タスク管理アプリ</h1>
<input type="text" name="task" id="taskText">
<button type="button" id="taskAddBtn">タスク追加</button>
<br>
<button type="button" id="taskDeleteBtn">削除</button>
<div id="taskArea"></div>
<script type="module" src="./taskApp.mjs"></script>
</body>
</html>
これで簡単なhtmlが作成されました。
個人的には ターミナルで$ npx serve -l 3000するのがおすすめです がhtmlをブラウザで表示させて以下の画像のようになっていればOK。
(5500番でLive Server使ってたらアプリ挙動おかしくなったのであまりおすすめしません(半ギレ))
5. アプリ作成(JavaScript)
今回作っていく機能は以下の3つです。
- タスク表示機能
- タスク追加機能
- タスク削除機能
まずは表示機能から作っていきましょう。
5.1. タスク表示機能
タスク表示機能とか作っていくために作業ディレクトリにtaskApp.mjs(※拡張子はjsではなくmjsであることに注意！！)を作成してみましょう。
まず、JavaScriptでPocketBaseを扱うにはSDKという開発ツールキット(またこの話は調べてくださいね？)を使わにゃいかんもんでぇ
それを使うために以下のおまじないをぶちこんでいきます。
import PocketBase from "https://esm.sh/pocketbase";
const pb = new PocketBase("http://127.0.0.1:8090");
何をしとんねん？ と。そうですね簡単に解説すると、PocketBaseのSDK(ツールキット)からPocketBaseをインポートしてきて、それを8090番で大絶賛起動中のPocketBaseと連結してますねんな。うんわからんよね。俺もわからん。()
次にPocketBaseからレコードを一覧取得するコードを以下のように実装していきます。
あっ、PocketBaseにおける1行分のデータをレコードっていいます。覚えておいてあげてね。
// タスク一覧表示
async function displayTasks() {
const tasks = await pb.collection("tasks").getFullList();
}
これで変数tasksにPocketBaseのデータが一覧取得されるようになりました。
PocketBaseは非同期処理が売りなのでawaitつけて、pb.collection("コレクション名").処理()っていう書き方していきます。とりまこれに関しては慣れてください。
じゃあもう...ﾊﾟﾊﾟﾊﾟっといきますね...？
// タスク一覧表示
async function displayTasks() {
// task表示するタグ取得
const taskArea = document.getElementById("taskArea");
taskArea.innerHTML = "";
// PocketBaseからデータ一覧取得
const tasks = await pb.collection("tasks").getFullList();
// タスクを表示するための処理
tasks.forEach((task) => {
const div = document.createElement("div");
div.className = "taskRow";
// チェックボックス
const chk = document.createElement("input");
chk.type = "checkbox";
chk.className = "taskCheck";
chk.dataset.id = task.id; // ← 削除用に ID を保存
// タスクメッセージ
const span = document.createElement("span");
span.textContent = task.taskMsg;
div.appendChild(chk);
div.appendChild(span);
taskArea.appendChild(div);
});
}
削除機能今後作っていくのでチェックボックスも付与させておきます。
またコードの下の方に、Webアプリを読み込んだら一発だけデータ表示呼び出すように記述しておきましょう。
// ページ読み込み時に一覧表示
window.addEventListener("DOMContentLoaded", () => {
displayTasks();
});
さぁ！これが実装できたらPocketBaseのGUIから 「New Record」 を押して適当なデータを追加してみましょう。
アプリ開いてこんな感じで表示されてたらよくできてます。
5.2. タスク追加機能
HTML側で
<input type="text" name="task" id="taskText">
<button type="button" id="taskAddBtn">タスク追加</button>
っていうタスク追加用のテキスト入力とボタンは書いているので、taskApp.mjs側に簡単なfunction作るだけですね。
// タスク追加機能
export async function addTask() {
const taskMsg = document.getElementById("taskText").value;
const data = {
taskMsg: taskMsg,
};
await pb.collection("tasks").create(data);
document.getElementById("taskText").value = "";
displayTasks();
}
特に注目して欲しいのは変数dataです。PocketBaseはJavaScriptでデータ連携しやすいようにjson形式でデータを扱います。フィールド変数をキーとして値を設定してあげ、createメソッドを使うことでデータを作成&追加することができます。
このaddTask()メソッドではtaskMsgを取得し、それをdataに設定。
その後PocketBaseに追加したのちにテキストエリアを初期化してtask表示を更新しています。
次に、アプリ読み込んだ直後に実施してほしい機能を書いておきましょう。
// ページ読み込み時に一覧表示
window.addEventListener("DOMContentLoaded", () => {
document.getElementById("taskAddBtn").addEventListener("click", addTask);
displayTasks();
});
では実装できたらWebアプリのほうから動作確認してみましょう。
これが。
こうなって。
こうです。
ちゃんとタスクが追加できていることが確認できましたね。
さぁいよいよタスク削除機能作ってTHE ENDです。
5.3. タスク削除機能
タスク削除を作っていきます。めっちゃ秒殺。簡単やね。
taskApp.mjsに以下のfunctionを追記しましょう。
// タスク削除機能
async function deleteTasks() {
const checks = document.querySelectorAll(".taskCheck:checked");
for (const chk of checks) {
const id = chk.dataset.id; // PocketBase のレコード ID
await pb.collection("tasks").delete(id);
}
displayTasks();
}
逆にクイズです。PocketBaseからデータ削除してる機能 is Where?
まぁawait pb.collection("tasks").delete(id);ですよね。わかりましたよね？？？
delete(record_id)メソッドによりPocketBaseからデータを削除することができます。削除するためにはレコードのidが必要である点に気をつけてください。
とりあえず削除してもいいレコードとして「削除レコード」を作成しました。
ほんじゃあこいつをやな。
あばよ。 \ﾃｨｳﾝﾃｨｳﾝﾃｨｳﾝﾃｨｳﾝ/
はい、データ消えてるのが確認できました〜。ザ・エンドってね。
6. まとめ
今回はマジでアテにならないレベルで簡単なWebアプリを作ってみました〜。語彙力低くてすんません...
まとめとして要点としては以下の通りです！
- テーブルみたいな概念としてコレクションがある
- データ1行分をレコードという
- とりま非同期処理であることに注意する
-
.jsじゃなくて.mjsを使う -
await pb.collection("コレクション名").メソッド()の書き方で操作する
これ使うとね。データベースなのにSQL書かなくても(書けないとはいってない)良かったりするんでSQLインジェクションにはつよつよですし〜？なんか他にもアクセス制御とかでWAF(Web Application Firewall)の代わりになったりとめちゃくちゃ便利にお仕事丸投げできるんですね〜〜！！ｷｬｰｽﾃｷｰ‼︎
もしこの記事が少しでも役に立ったなら、いいねやコメントいただけると励みになります。
改善点の指摘や質問もぜひお願いします。ありがとうございました。
Comments
Let's comment your feelings that are more than good