はじめに
タスク管理アプリは世の中にたくさんありますが、友達と2人でちょうどいい感じで使えるシンプルなアプリがほしいと思ったことはありませんか？今回は「タスケット」という、友達と2人で使える「いっしょにすることリスト」のWebアプリ開発について紹介します。
開発では「プリファクタリング」という考え方を採用しました。これは、コードを書き始める前から良い設計を意識することで、後からの書き直しを減らす方法です。まるで家を建てる前に設計図をしっかり作るようなものです。
開発の流れ
1. まずは要件を詰める
開発を始める前に、アプリの目的や機能を明確にしました。仕様書には次のような情報を含めました：
- アプリ名：タスケット (Tasket)
- 説明：友達と2人で使えるいっしょにすることリストPWA
- 基本機能：タスクの追加・完了、重要度マーク、並び替え、一括入力
- 同期機能：URLとパスワードで共有、疑似リアルタイム更新
仕様書を作ることで、作るものが明確になり、必要なファイルやモジュールの構成も見えてきました。設計図がないまま家を建てようとするのは難しいのと同じです。
2. モックアップの確認
次に、UI（ユーザーインターフェース）のモックアップを作成しました。モックアップとは、完成イメージを表す下絵のようなものです。
このモックアップで、「まずすること」と「予定すること」の2つのエリアの配置や、タスクの表示方法、入力エリアのデザインなどを確認しました。スマホ表示では左右スワイプで切り替える形にし、PC表示では左右に並べて表示することにしました。
モックアップを見ると、ユーザーがどのように操作するかがイメージしやすくなります。お店の模型を見れば、実際のお店の雰囲気がわかるのと同じです。
3. ファイル構造とコード設計
モックアップを参考にしながら、ファイル構造を設計しました。主なファイルは次のとおりです：
/tasket/
├── index.php # メインページ
├── create.php # 新規タスケット作成ページ
├── api/ # API関連ファイル
├── assets/ # CSS、JavaScript
└── includes/ # 共通PHPファイル
Code language: PHP (php)コードは「単一責任の原則」に基づいて設計しました。これは、1つのファイルや関数が1つのことだけを担当するという考え方です。例えば：
app.js：アプリケーション全体の初期化だけを担当taskManager.js：タスクデータの管理だけを担当ui.js：画面表示と操作だけを担当
このように役割を分けると、それぞれのファイルが自分の仕事に集中でき、全体としてわかりやすくなります。チームでそれぞれが自分の役割を果たすと、全体がうまく機能するのと似ています。
主要な機能の実装
1. タスク管理の基本機能
タスク管理の基本機能は次の通りです：
- タスクの追加：テキスト入力でタスクを追加
- タスクの完了：チェックボックスでタスクを完了状態に
- タスクの編集：コンテキストメニューでタスク内容を編集
- タスクの削除：不要なタスクを削除
タスクデータは、JavaScript内で配列として管理されます。例えば、1つのタスクは次のような形で表現されます：
{
id: 'task123',
title: 'メールの返信',
is_urgent: true, // まずすること
is_important: false, // 重要マークなし
is_completed: false, // 未完了
created_at: '2025-05-11T10:30:00', // 作成日時
created_by: 'ユーザー名'
}
Code language: JavaScript (javascript)こうしたデータ構造を使うことで、タスクの属性を簡単に管理できます。
2. データの保存と同期
タスクデータは次の3段階で保存されます：
- メモリ内：JavaScriptのタスク配列
- ローカルストレージ：ブラウザの保存領域に保存
- サーバー：データベースに保存（タスケットIDがある場合）
ローカルストレージとは、Webブラウザが提供する小さな保存場所です。メモ帳のように、ブラウザを閉じても情報が残ります。
サーバーとの同期は、30秒ごとにデータを取得する「ポーリング」方式で実現しました。誰かがタスクを更新すると、30秒以内に他の人の画面にも反映されます。友達と会話するときに、少し間があっても話がつながるようなものです。
3. レスポンシブデザイン
タスケットは、PCでもスマホでも使いやすいように「レスポンシブデザイン」を採用しました。これは画面サイズに応じてレイアウトが変わる仕組みです。
PCでは左右に「まずすること」と「予定すること」を並べて表示し、スマホでは左右スワイプで切り替えます。また、PC版では画面下部に入力エリアを常に表示し、スマホ版では右下の「+」ボタンをタップすると入力モーダルが表示されます。
これは、同じ内容の本が、大人用と子ども用で少しレイアウトが違うようなものです。内容は同じでも、読みやすさを考えて調整しています。
技術的な工夫
1. プリファクタリングの実践
開発では「プリファクタリング」という考え方を実践しました。通常、コードを書いた後で整理する「リファクタリング」とは違い、最初から良い設計を意識します。
具体的には：
- コードの役割を明確に分ける（データ管理、UI表示など）
- 関数やモジュールを小さく保つ（30行以内を目標）
- テストしやすい構造にする
これにより、後から大幅な修正をする手間が減りました。料理で言えば、最初に材料と手順を整理しておくと、途中で「あ、これが足りない」というミスが減るようなものです。
2. PWA対応
タスケットはPWA（プログレッシブウェブアプリ）として実装しました。PWAとは、Webサイトでありながらアプリのような機能を持つ技術です。
主な特徴は：
- ホーム画面に追加できる
- オフラインでも使える
- 通常のアプリのような見た目と操作感
PWA対応には、以下のファイルが必要でした：
manifest.json：アプリの基本情報pwa-sw.js：Service Worker（オフライン機能を担当）- アイコン画像：ホーム画面用のアイコン
Service Workerとは、バックグラウンドで動作するJavaScriptコードで、オフライン時でもアプリが動作するよう支援します。まるで、停電時にも動く非常用電源のような役割です。
3. エラー対応
開発中には、いくつかのエラーに遭遇しました：
- JavaScriptの構文エラー
- PWA関連のエラー
- ファビコンが見つからないエラー
これらのエラーを解決するために、コードの修正とファイルの追加を行いました。プログラミングでは、こうしたエラー対応も重要な作業です。エラーメッセージを手がかりに、問題を解決していく過程は、探偵が手がかりを頼りに謎を解くようなものです。
まとめ
タスケットの開発を通して、プリファクタリングの重要性を実感しました。最初にしっかり設計することで、後からの修正が少なくなり、効率的に開発が進みました。
また、シンプルな機能でありながら、HTML/CSS/JavaScript/PHPの基本技術と、ローカルストレージやPWAなどの少し進んだ技術を組み合わせることで、実用的なWebアプリが作れることがわかりました。
タスケットのようなシンプルなアプリでも、しっかりとした設計と実装プロセスを踏むことで、使いやすく安定した製品が作れることを学びました。家づくりと同じで、基礎をしっかり作れば、小さくても快適な家になるのです。
プログラミングは難しそうに見えますが、一歩一歩進めていけば、自分が欲しいと思ったアプリを作れる喜びがあります。皆さんも、ぜひ挑戦してみてください。