Django + DRF による投稿の動的読み込みと「いいね」サンプル

Web

概要

このリポジトリは「投稿(posts)」を DRF で API 化し、フロントエンドの JavaScript で動的に読み込む挙動(ページネーション + ロードモア)と、ユーザーによる「いいね(like)」機能を示す小さなサンプルプロジェクトです。サーバー側は Django と Django REST Framework を利用して API エンドポイント、シリアライザ、ビューを提供し、クライアント側は Fetch API を使ってページングされたデータを逐次取得してDOMに追加します。ManyToManyField による likes 管理や、認証(ログイン)に関する最小限の実装も含まれており、学習用・プロトタイプ作成に適しています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 4
  • ファイル数: 10
  • メインの言語: Python

主な特徴

  • Django REST Framework を使った API エンドポイント(投稿一覧、いいね等)
  • DRF のページネーション(1ページあたり 10 投稿)を利用した段階的読み込み
  • JavaScript(Fetch API)での動的読み込み・AJAX 更新
  • ManyToManyField による「いいね」システムと簡易的な認証連携

技術的なポイント

このプロジェクトの技術的注目点は、バックエンド(Django/DRF)とフロントエンド(プレーン JavaScript)の責務が明確に分離されている点です。DRF はシリアライザで投稿オブジェクトを JSON に変換し、ViewSet や APIView でページネーション(デフォルト設定で 10 件/ページ)を提供します。フロント側は初回ロード後に「もっと読む」的なトリガーやスクロールハンドラで次ページの URL(DRF の next フィールド)を参照し、Fetch API を使って非同期にデータを取得、受け取った JSON を DOM に差し込んでいきます。

いいね機能は ManyToManyField を用いる典型的な実装で、ユーザーと投稿を関連付け、いいねの追加・削除を API 経由で行います。API は認証情報(セッションまたはトークン)に基づいて操作を許可し、レスポンス側では投稿ごとのいいね数や現在のユーザーがいいねしているか否かのフラグを返すことで、フロントはボタン状態を適切に切り替えます。

さらに実践的な観点として、ページネーションのメタ情報(count, next, previous)を使うことでフロントは次ページの存在確認や読み込み停止判定が容易になります。エラー処理やローディング状態の表示(スピナーやボタン無効化)も Fetch ベースの実装で扱いやすく、CSRF トークン処理や認証ヘッダの設定を加えれば本番レベルにも拡張できます。本リポジトリは最小構成のため複雑な最適化(キャッシュ、差分更新、WebSocket)は含んでいませんが、学習から実装への橋渡しとして分かりやすい設計です。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .gitignore: file
  • README.md: file
  • accounts: dir
  • add_posts.py: file
  • manage.py: file
  • posts: dir(投稿モデル・シリアライザ・ビューを含む想定)
  • requirements.txt: file(依存パッケージを列挙)
  • db.sqlite3: file(開発用の SQLite データベースが含まれている可能性あり)
  • static/ と templates/: フロントの静的ファイルやHTML(最小構成)
  • その他設定ファイル(settings.py 等は Django プロジェクト内に存在)

(リポジトリ内のファイルは計10個で、ここには README に記述の主要ファイルを列挙しています。実際のディレクトリ構造はリポジトリのルートを参照してください。)

使い方(概要)

  1. リポジトリをクローンし、仮想環境を作成して依存パッケージをインストール。
  2. migrations を適用してデータベースを準備。
  3. add_posts.py のようなスクリプトでダミーデータを投入(存在する場合)。
  4. manage.py runserver で開発サーバ起動。
  5. ブラウザでフロントの HTML を開き、ロードモア/いいねの挙動を確認。

まとめ

Django + DRF とプレーン JavaScript による投稿の動的読み込みといいね機能を学ぶための簡潔で実用的なサンプルです(約50字)。

リポジトリ情報:

READMEの抜粋:

📝 Django + DRF Приклад Динамічного Підвантаження Постів з Лайками

Мінімалістичний приклад роботи з динамічним підвантаженням постів та системою лайків за допомогою Django REST Framework та JavaScript.

🎯 Що демонструє цей проект

  • Створення API endpoints з Django REST Framework
  • Пагінацію з DRF (по 10 постів на сторінку)
  • Динамічне підвантаження контенту за допомогою JavaScript
  • Систему лайків з ManyToManyField
  • Роботу з Fetch API для AJAX запитів
  • Автентифікацію користувачів

(抜粋終わり)