Home

recsys-full | フルスタック推薦システム開発チュートリアル

概要

recsys-full はrecsys-djangoの後継版です。フロントエンドからバックエンド、データベース、オフライン処理までを含んだフルスタック推薦システム開発のチュートリアルです。推薦システムの開発演習を通して、Web アプリケーションの開発方法を学習できる内容となっています。

動機

研究室で推薦システムの実装を通して Web アプリケーションの開発方法を学習してもらうために作成しました。個人での学習に加え、大学での授業や研究室等でご活用いただければ幸いです。

到達目標

• TypeScript、React、Next.js によるフロントエンド開発の基本を修得できる。
• TailwindCSS によるスタイリングの基本を修得できる。
• Django によるバックエンド開発の基本を修得できる。
• 推薦ライブラリ RecBole による推薦アルゴリズム実装の基本を修得できる。
• MovieLens データセットを用いながら PostgreSQL によるデータベース操作の基本を修得できる。
• OMDb API を用いながら RESTful API によるデータ取得方法を修得できる。
• フロントエンド、バックエンドのデプロイ方法を修得できる。

取り組み方

下記の目次に記載している手順にしたがってチュートリアルに取り組んでください。チュートリアルどおりにコードを打ち込んでいくことで、次の完成イメージに示すような推薦システムが出来上がります。詳細な解説はありませんが、各ページに参考文献も示していますので、併せて参照してください。

完成イメージ

※インタフェース中の映画ポスター画像は OMDb API により取得

このシステムの主な機能は以下のとおりです。

• トップページにアクセスすることで、「本日のおすすめ」（ランダム推薦システム）、「あなたにおすすめの映画」（BPR ベース推薦システム、サインイン時））、「ジャンルごとの人気の映画」（人気ベース推薦システム）の各推薦リストが提示されます。
• 推薦リストの左右のボタンをクリックすることで、推薦リスト内の提示アイテムを切り替えることができます。
• アイテムをクリックすることで、そのアイテムの詳細ページを閲覧することができます。
• アイテム詳細ページにおいて、「この映画が好きな人はこんな映画も好んでいます」のように、映画類似度ベース推薦システムに基づく推薦リストが提示されます。
• 右上のSign Inボタンからサインインすることができます。
• サインインすることで、各アイテムに対して評価値を付与することができます。
• サインイン時、右上のアカウントメニューからMy pageを開くことができます。My pageでは、評価値を付与した映画リストがマイリストとして提示されます。また、「あなたにおすすめの映画」として、個人化された推薦リスト（BPR ベース推薦システム）が提示されます。

動作確認

本チュートリアルは以下の環境で動作確認しています。

• Linux Mint 22.3
• PostgreSQL 16.15
• Python 3.12.6
• yarn 1.22.22
• Node.js 24.20.0
• React 19.2.8
• Next.js 16.3.3
• TailwindCSS 4
• Django 6.1
• PyTorch 2.13.0
• RecBole 1.2.0
• Google Chrome 152.0.7977.64

目次

• 00: 基本事項

開発環境

• 01: 開発環境の構築
• 02: VSCode の設定

データ前処理

オフライン処理

• 03: オフライン処理の準備
• 04: MovieLens データベースの準備
• 05: MovieLens データセットの取込み
• 06: 推薦処理用のデータの準備

推薦処理

オフライン処理

• 07: 推薦システムの実行

準備

バックエンド

• 08: バックエンド開発の準備
• 09: online アプリケーションの作成

認証

• 10: 暗号化の設定
• 11: 認証用アプリケーションの作成
• 12: カスタムユーザモデルの定義
• 13: ユーザモデルの定義
• 14: 認証の準備
• 15: サインアップビューの作成
• 16: サインインビューの作成
• 17: サインアウトビューの作成
• 18: マイアカウントビューの作成
• 19: 管理サイト
• 20: CORS への対応

フロントエンド

• 21: フロントエンド開発の準備
• 22: インデックスページの作成
• 23: 共通レイアウトの作成
• 24: TailwindCSS の適用
• 25: 定数の定義
• 26: About ページの作成

認証

フロントエンド

• 27: アカウントメニューの作成
• 28: API クライアントの実装
• 29: 認証 API の実装
• 30: サインアップページの作成
• 31: サインインページの作成
• 32: 認証用ボタンの追加
• 33: 認証状態の判定
• 34: セッションの取得

映画

バックエンド

• 35: モデルの定義
• 36: データの登録とクエリセット API
• 37: マッパー
• 38: 映画リストビューの作成
• 39: 映画ビューの作成

フロントエンド

• 40: 映画リストコンポーネントの作成
• 41: ページネーションの作成
• 42: ページサイズの動的調整
• 43: 映画 API の実装
• 44: 映画詳細ページの作成
• 45: エラーページの作成
• 46: ローディングの作成
• 47: NotFound ページの作成

評価値

バックエンド

• 48: 評価値の登録と取得

フロントエンド

• 49: 評価値コンポーネントの作成
• 50: 映画カードへの評価値コンポーネントの追加
• 51: 評価値の登録
• 52: 評価値の取得

バックエンド - フロントエンド

• 53: ユーザ依存の評価値の取得

推薦リスト

バックエンド - フロントエンド

• 54: 人気ベース推薦システム
• 55: 映画類似度ベース推薦システム
• 55: BPR ベース推薦システム

マイリスト

バックエンド - フロントエンド

• 56: マイリスト
• 57: マイリストからの評価値の削除

更新

オフライン処理

• 58: モデルの更新

OMDb API

フロントエンド

• 59: OMDb API

デプロイ

• 60: バックエンドサーバの準備
• 61: バックエンドのデプロイ
• 62: フロントエンドのデプロイ
• 63: デプロイ後のモデル更新

参考

推薦システムの基礎

1. 奥健太，『基礎から学ぶ推薦システム ～情報技術で嗜好を予測する～』，コロナ社，2022．
2. 廣瀬英雄，『推薦システム ―マトリクス分解の多彩なすがた―』，共立出版，2022．

推薦システムの実装

1. 風間正弘，飯塚洸二郎，松村優也，『著推薦システム実践入門 ―仕事で使える導入ガイド』，オライリー・ジャパン，2022．
2. 与謝秀作，『特集 3 最新レコメンドエンジン総実装 協調フィルタリングから深層学習まで』，WEB+DB PRESS Vol.129，pp.69-100，技術評論社，2022．
3. Kim Falk, ``Practical Recommender Systems’‘, MANNING, 2019.

Web アプリケーション開発

1. 株式会社オープントーン，佐藤大輔，伊東直喜，上野啓二，『実装で学ぶフルスタック Web 開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン』，翔泳社，2023．
2. 手島拓也，吉田健人，高林佳稀，『TypeScript と React/Next.js でつくる 実践 Web アプリケーション開発』，技術評論社，2022．
3. チーム・カルポ，『Django4 Web アプリ開発 実装ハンドブック』，秀和システム，2022．
4. 横瀬明仁，『現場で使える Django の教科書《基礎編》』，2018．
5. 横瀬明仁，『現場で使える Django の教科書《実践編》』，2018．
6. 【Next.js13】最新バージョンの Next.js13 をマイクロブログ構築しながら基礎と本質を学ぶ講座 | Udemy
7. 【React アプリ開発】3 種類の React アプリケーションを構築して、React の理解をさらに深めるステップアップ講座 | Udemy

公式ドキュメント・チュートリアル

1. React リファレンス概要 – React
2. Docs | Next.js
3. Auth.js | Overview
4. Installation - Tailwind CSS
5. Overview - Material UI
6. Django ドキュメント | Django documentation | Django

データセット、ライブラリ、API

1. MovieLens | GroupLens
2. RecBole v1.2.0 — RecBole 1.2.0 documentation
3. OMDb API - The Open Movie Database

AI

1. ChatGPT | OpenAI
2. Claude Code | Anthropic

Acknowledgments & Credits

This site uses the MovieLens Latest Datasets with permission from GroupLens but is not endorsed or certified by them.

1. F. Maxwell Harper and Joseph A. Konstan. 2015. The MovieLens Datasets: History and Context. ACM Transactions on Interactive Intelligent Systems (TiiS) 5, 4: 19:1–19:19. https://doi.org/10.1145/2827872

This site uses the OMDb API but is not endorsed or certified by OMDb API.

LICENSE

Tutorial materials and documentation are licensed under the Creative Commons Attribution 4.0 International License (CC BY 4.0). Source code and code examples are licensed under the MIT License.

更新情報

• 2025-04-05: recsys-fullを公開
• 2026-09-02: recsys-fullを全体的に再作成

作成者

龍谷大学 推薦システム研究室 奥 健太