React+TypeScriptでmovieサイトを作ってみた

映画サイトの紹介

今回作成した、映画サイトはシンプルなUIを心がけて作成しました。

映画を見る瞬間として、時間が空いた時にその時間を埋めるのが、
邦画や洋画だったら素敵だなと思い作成いたしました。

苦労した点

ポスター情報をuseStateで更新した後、map関数で新しい配列として展開するのに苦労しました。

 <div className={styles.movieList}>
   {movieList.map((movie) => {
     return <MovieItem item={movie} key={movie.id} />;
   })}
  </div>

はじめはmap関数の使い方が全く分からず、ポスター情報を取得するのにとても苦労しましたが、
下記のサイトや書物を購入し、見ていくうちにidの指定方法やkeyの使い方を理解することができました。

・参考にしたサイト
　　https://sossy-blog.com/useful/6285/

・参考にした書物
　　https://iwasiman.hatenablog.com/entry/20220801-react-jakee-book

・map関数に関する学習内容をまとめたサイトを作成
　　https://qiita.com/Yuta-Tsutsumi/items/72b6a0913692db06693f

工夫した点

onmouseover属性、onmouseleave属性を使用し、マウスがポスター画像に触れたときに
映画タイトル・説明がポスター内に表示されるシンプルなUIを心がけました。

↓マウスを当てたときに出現する映画タイトルと説明

↓onmouseover属性、onmouseleave属性、useStateえお使用し、true、falseの切り替えを行っている。

const MovieItem: React.FC<Props> = ({ item }) => {
  const [onMouse, setOnMouse] = useState(false);
  const onMouseOverEvent = () => {
    setOnMouse(true);
  };
  const onMouseLeaveEvent = () => {
    setOnMouse(false);
  };
  return (
    <div className={styles.root}>
      <div className={styles.posterBox}>
        <img
          className={styles.posterImage}
          src={`https://image.tmdb.org/t/p/original/${item.poster_path}`}
          alt="movie poster"
          onMouseOver={onMouseOverEvent}
          onMouseLeave={onMouseLeaveEvent}
        />
        {onMouse && (
          <div className={styles.movieInfo}>
            <div className={styles.movieTitle}>{item.title}</div>
            <div className={styles.overview}>{item.overview}</div>
          </div>
        )}
      </div>
    </div>
  );
};

・参考にしたサイト
　　https://www.sejuku.net/blog/77696

まとめ・今後の課題

今回、Web APIを使用した映画サイトを作成しました。

全体的にさっぱりとしたシンプルなサイトに出来上がっています。
map関数でポスターデータを更新・反映できず苦労しましたが、
調べるにつれて少しずつ解決していき、UIに処理が反映されたときは
本当にホッとしました。
今後の課題としてPaginationの実装ががあります。
20個のデータをそれぞれのページに反映させたいのですが、
うまく、ボタンの押したときの処理とUIが連動しなかったため、
今後、調べて分かり次第反映する予定です。