第１回ひよっこ🐣エンジニアが学習ログ管理アプリを作ってみた （プロジェクト紹介）

はじめに

日々の学習内容を記録するためのWebアプリケーション「Learning Log API」を開発してみました。この記事では、その開発過程や使った技術について書いていきます。

開発経緯

最近、OBの会社でエンジニアとして大学院に通いながらアルバイトを始めました。いろいろ働きながら学ばせてもらっている中、自分の開発に関する知識が足りないと感じることが多々あります。今後の就職にも役立てるため、基礎知識の学習として個人的に開発の練習としてこのアプリケーションの開発を開始しました。自分の学習内容が、今後のAPI学習初心者に少しでも参考になればと思います。

プロジェクト概要

日々の学習内容を記録・管理するためのREST APIとWebアプリケーションを作ってみました。

主な特徴

• CRUD操作完備: 学習ログの作成・読取・更新・削除が可能
• 2つのインターフェース: REST APIとブラウザベースのWebアプリ
• タグ管理: 学習内容をタグで分類・検索可能
• 統計機能: 総学習時間や平均学習時間を自動計算
• レスポンシブデザイン: スマートフォンでも快適に利用可能

学習ログを管理するにあたり必要最低限なものを実装しました。最終的には、実際のサービスとして提供できればと考えています。

使用技術スタック

今回使った主な技術はこんな感じです。

バックエンド

• Hono (v4.7.5)

  • 最近注目されている高速で軽量なWebフレームワーク
  • TypeScriptとの相性が良くて使いやすかった
  • API設計がシンプルで学習コストが低い

• MongoDB Atlas

  • クラウドベースのNoSQLデータベース
  • 無料プランから始められるのがありがたい
  • スキーマレスなので開発初期の試行錯誤がしやすい

• TypeScript

  • 型安全性のおかげでバグを事前に防げる
  • エディタの補完が効いて開発が快適
  • 大規模になっても保守しやすそう

今回、Honoというフレームワークを使用しました。下記の記事が個人的にわかりやすかったです。詳しく知りたい方は、他のWebサイトや記事を参考にしてください

使用したデータベース（DB）はMongoDB Atlasです。クラウドのDBであるためオンラインで立ち上げないと使用できないというデメリットはありますが、無料でも使用できるので練習用のデータベースとしてはこれで十分だと感じたので利用しています。以前、NotionでDBを作成したこともありますが使用感としてはMongoDB Atlasの方が下準備少なめで使いやすいと感じます。NotionでDBを作成した時の参考資料は下記の記事です。今後の開発練習の参考にこちらもご覧ください。

フロントエンド

• Vanilla JavaScript

  • あえてフレームワークを使わずシンプルに
  • 学習アプリとしてはこれで十分

• Modern CSS

  • グラデーションやアニメーションで見た目を華やかに
  • レスポンシブ対応でスマホでも使いやすく

この辺りはAIに聞いて実装しました。他にもおすすめのフロントエンドや学習向けにいいものがあればコメントに記載して頂けるとうれしいです。

その他のツール

• Node.js 20.x
• npm - パッケージ管理
• AWS Lambda - 将来のデプロイ先として検討中

主な機能

1. 学習ログのCRUD操作

基本的なCRUD操作を実装しました：

POST   /learning-logs      # 新規作成
GET    /learning-logs      # 一覧取得
GET    /learning-logs/:id  # 個別取得
PUT    /learning-logs/:id  # 更新
DELETE /learning-logs/:id  # 削除

こちらもAIに聞きつつ作成しました。個人的には今後のエンジニアに求められるものは、AIをどれだけうまく使い、効率的に作業できるかだと考えています。AIが提示したプログラムで実装して問題ないかを見極める目も大事だと考えています。それらを養うためにも一から書きたいのですが、いかんせん実験やらなんやらで時間が無くて...
他の記事を参考にしつつ、勉強していきたいです。

2. Webアプリケーション

ブラウザから直感的に操作できるUIも作りました：

• 📝 フォームから簡単にログを作成
• 📖 見やすい一覧表示
• ✏️ インライン編集機能
• 🗑️ ワンクリックで削除
• 🔍 タイトルや内容で検索
• 📊 学習時間の統計表示

実際の画面になります。実際にブラウザ側から操作して使いにくいは随時直す形で作成しました。今後は何人か実際に触ってもらい、どのような機能がほしいか聞いて実装を進めていこうと思います。

3. タグ管理

タグ機能で学習内容を整理できるようにしました：

{
  "title": "TypeScript学習",
  "content": "型定義について学びました",
  "tags": ["typescript", "programming"],
  "studyTime": 60
}

タグ機能は後からつけました。タグがある事で、自分自身が何を学習したのかがわかりやすくなり、タグ分けをすることで学習管理がしやすくなりました。

4. 統計機能

学習状況を可視化する統計機能も追加しました：

• 総学習時間の計算
• 平均学習時間の表示
• ログ数のカウント

個人的に、勉強やタスク管理をする際にどれだけ作業できたかを数値で可視化することがモチベーションになるので実装しました。今のところ累計と平均の時間、ログの総計のみですが、今後はタグごとのログ数カウント、タグごとの学習時間の実装を予定しています。

アプリケーションの特徴

モダンなUI

• グラデーションを使って見た目を華やかに
• ダークモードとの相性も考えた配色
• アニメーションで操作感を滑らかに

レスポンシブデザイン

• デスクトップでもスマホでも使いやすく
• 画面サイズに応じてレイアウトが自動調整
• 外出先でもサッと記録できるのが便利

使いやすさ重視

• プログラミング知識なしでも使える
• 直感的な操作を意識して設計
• リアルタイム更新で即座に反映

使用感としては、十分なものに仕上がりました。しかし、このまま仕様を追加していくと画面がごちゃごちゃになると感じたので、見栄えのいいページ遷移が作れるようにしようと思います。

プロジェクト構成

reqesttest/
├── src/              # ソースコード
│   ├── app.ts       # アプリケーションのメイン設定
│   ├── handler.ts   # Lambdaハンドラー
│   ├── db/          # データベース接続
│   └── models/      # データモデル
├── public/           # 静的ファイル（Webアプリ）
│   └── index.html   # ブラウザアプリケーション
├── GET/             # GETエンドポイント
├── POST/            # POSTエンドポイント
├── PUT/             # PUTエンドポイント
├── DELETE/          # DELETEエンドポイント
└── docs/            # ドキュメント

個人的に、プロジェクトの構成はこだわりました。各エンドポイントごとにフォルダを分けることで、どこを変更すべきかを明確にしました。こうすることで、バグが出た際にまずどこを見直せばいいかがすぐにわかります。今後、エンドポイントを増やす際はもう少しわかりやすいフォルダ分けをしていく予定です。

開発で学んだこと

今回の開発で基礎的な開発および実装の仕方を学ぶことが出来ました。他人に一つ一つ解説しながらというレベルにまでは程遠いですが、頑張って学習を続けたいと思います。

今後の展望

今後は、細かなUI部分や機能の追加を行いつつ、ユーザー認証を追加して外部に公開したいと考えています。（追加でＳＮＳ機能つけたいなと思ってたりなかったり）

まとめ

学習ログ管理アプリを作ってみたことで、Hono、MongoDB Atlas、TypeScriptを使った実践的な開発経験を積めました。シンプルなアプリですが、普段の学習記録に役立っています。今後は皆さんにも使用して頂けるようにしていきたいと考えています。もし、こんな学習管理アプリあればいいなというものがあればコメント欄に書き込んでいただけると参考になります

次回の記事では、環境構築の手順について書いていきます！

関連記事（後で追加）

• 第2回：環境構築編
• 第3回：Webアプリ活用編
• 第4回：API基礎編
• 第5回：トラブルシューティング編

---