[AI Coding Challenge] 今まで見た映画を記録できるアプリを作ってみた！

はじめに

毎日ひとつ、AIアプリをつくる。
日替わりでテーマに沿って小さなアプリを開発します。Claudeで。

この記事は AI Code Challenge Advent Calender 2025 の 2 日目の記事です！

1 日目の記事：ワインのメニューからおすすめを教えてくれるアプリを作ってみた！
　 3 日目の記事：リアルタイム文字予測アプリを作ってみた！

AI アプリ

概要

今まで映画たくさん見てきたけど、何回くらい映画見に行ってるんだろう？

映画好きの私は、過去に、どのくらい映画を見ているのか日記につけてました。
日記もいいけどもっと気軽に記録をつけたいと思い、今までの映画の記録ができるアプリを作りたいと思いました

AI 実装

Claude Desktopでプロンプトを与えて実装してもらいます。

プロンプト（普通に欲しいアプリだったのでプロンプトもAIに考えてもらった）：

見た映画の記録、振り返りアプリを作る
記録機能のアイデア

• 映画ログ：タイトル、鑑賞日、場所（映画館／配信サービス）、誰と見たか、気分タグを記録。
• 感情スコア：「泣けた度」「笑った度」「ドキドキ度」を数値化して残す。
• 一言日記：映画を見た直後の余韻を短くメモ。「エンドロールで泣いた」「ポップコーン食べすぎた」など。

映画日記アプリを作成しました！
ブラウザのストレージに自動保存
アプリを閉じても記録は残ります

完成したアプリ

できました！

　　 映画日記

のリンクからアプリを確認できます

使い方：

• 「新しい映画を記録」で映画日記を追加

こんなイメージです。

「＋記録する」で新しい映画を追加します。

こんな感じで記録されます。

「年間まとめ」タブを開くとこんな感じです。

年間何本の映画を見たとか、感情ランキングとか、月別鑑賞数とか、いい感じのができました！

プログラム解説

ポイントとなるプログラムを解説します。

  const [formData, setFormData] = useState({
    title: '',
    date: new Date().toISOString().split('T')[0],
    location: '',
    locationType: 'theater',
    watchedWith: '',
    mood: [],
    genre: '',
    emotionScores: {
      cried: 5,
      laughed: 5,
      thrilled: 5
    },
    memo: '',
    posterColor: '#e74c3c'
  });

  useEffect(() => {
    loadMovies();
  }, []);

  const loadMovies = async () => {
    try {
      const result = await window.storage.get('movie-diary-data');
      if (result) {
        setMovies(JSON.parse(result.value));
      }
    } catch (error) {
      console.log('初回起動: データを初期化します');
    }
  };

  const saveMovies = async (updatedMovies) => {
    try {
      await window.storage.set('movie-diary-data', JSON.stringify(updatedMovies));
      setMovies(updatedMovies);
    } catch (error) {
      console.error('保存エラー:', error);
    }
  };

• useSateとuseEffectで状態管理

const [formData, setFormData] = useState({
  title: '',
  date: new Date().toISOString().split('T')[0],
  location: '',
  locationType: 'theater',
  watchedWith: '',
  mood: [],
  genre: '',
  emotionScores: {
    cried: 5,
    laughed: 5,
    thrilled: 5
  },
  memo: '',
  posterColor: '#e74c3c'
});

useEffect(() => {
  loadMovies();
}, []);

• window.storage を使ってブラウザに保存／読み込み（永続化）しています。

const loadMovies = async () => {
  const result = await window.storage.get('movie-diary-data');
  if (result) {
    setMovies(JSON.parse(result.value));
  }
  ...
};

• JSON形式で映画データを保存します。

const saveMovies = async (updatedMovies) => {
  await window.storage.set('movie-diary-data', JSON.stringify(updatedMovies));
  setMovies(updatedMovies);
  ...
};

おわりに

• 映画日記アプリは個人的に使っていこうと思います！
• データベースとかに保存はしていないので（ブラウザに保存している）、外部に保存できるようにしたいですね。（データベースは使いたくないからcsvとかファイル出力でもいいかも。エクスポート／インポート機能の追加。）

AI で楽しいアプリ開発を！！

この記事は AI Code Challenge Advent Calender 2025 の 2 日目の記事です！

1 日目の記事：ワインのメニューからおすすめを教えてくれるアプリを作ってみた！
　 3 日目の記事：リアルタイム文字予測アプリを作ってみた！