reactを使ったWebサイトの作成 テスト
目次
1. Netflixをクローン
Netflixのような動画ストリーミングサービスのクローンを作成した。Reactの強力な機能と豊富なライブラリを活用して、見栄えの良いウェブサイトを構築。ほぼメモ書き。
2. 実際に作成したもの
React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションを作成した。
成果物は以下
https://ty-gcp2-96f8b.web.app/
Netflixの映画一覧を取得し、カテゴリー毎に表示。
ソースは以下
GitHub
3. 使用したライブラリ
Reactをより便利に使うために、以下のライブラリを活用。
3-1. react-redux
ReactとReduxは相性が良く、状態管理やデータフローを効率的に管理できます。本プロジェクトでも、react-reduxを組み合わせて効果的にデータを管理。
Redux自体は独立したものなので単体で利用することも可能。
3-2. react-player
動画ストリーミングサービスを作成する際には、動画の再生機能が必要不可欠。react-playerはReact向けの優れた動画プレーヤーライブラリであり、シームレスな動画再生を実現。
とにかくブラウザ上でサウンドを再生したい、動画埋め込みコンポーネントを作りたたかったため使用
- react-player（GitHub）
3-3. react-slick
ウェブサイトでのスライダーやカルーセル表示は、ユーザーエクスペリエンスを向上させる重要な要素の一つ。react-slickは使いやすくカスタマイズ性の高いスライダーライブラリで、Netflixクローンでも活用。
settingsにオプションを指定し、Sliderに渡すだけで
カスタムすることができる。
import React from "react";
import Slider from "react-slick";
export default function SimpleSlider() {
const settings = {
dots: true,
infinite: true,
speed: 500,
};
const images = [image, image2, image3]
return (
<Slider {...settings}>
{images.map(img)=>
<div>
<img src={img} alt="pictuer" />
</div
}
</Slider>
);
}
3-4. react-icons
アイコンはウェブサイトのデザインにおいて重要な役割を果たす。react-iconsは豊富なアイコンセットを提供し、簡単にアイコンを利用することができる。
4. 取得したデータ TMDB
Netflixクローンにおいては、映画やテレビ番組の情報を取得するために、TMDB（The Movie Database）APIを活用しました。TMDBは映画関連のデータを提供するAPIであり、Reactと組み合わせることでNetflixライクなコンテンツを表示することが可能となる。
具体的には、以下からAPIKEYを取得
The Movie Database
TMDBはエンタメ系の情報を多く抱えるデータベース。
postmanでAPIデータを送ってテスト。