見出し画像

【React+TypeScript】Netflixのクローンを作るチュートリアル はじめに

てりー

こんにちは、フロントエンドエンジニアのてりーです。
記事を手に取って頂きありがとうございます。

このチュートリアルではNetflixクローンを作る過程で、React・TypeScriptの基礎やAPIを利用したWebサービス開発について学んでいきます。

※ この記事はZennで2021年に作成したチュートリアルを2024年4月に大幅アップデートしたものです。

ソースコードも1から作成し、解説も8割が新しくなり、ボリュームもリニューアル前の2.3倍なりました！！

リニューアル前の記事は3年間で

  • いいね：1917

  • 合計PV：114408

とても多くの方に手に取って頂きました！！

※zennの方もリニューアルしたので、内容は同じになります


作れるもの

React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションです。
完成するとこんな感じになります。

Netflixの映画一覧を取得し、カテゴリー毎に表示しています。

映画をクリックすると、YouTubeのプロモーション映像が流れます。

学べる事

  • Reactの関数コンポーネントとTypeScriptの基礎理解

  • React Hooksによるstate管理

  • Reactでの外部APIとの連携方法

  • Postmanを使ったAPIテストの方法

  • コンポーネント分割の考え方

  • Tailwind CSSの基礎理解

  • Vercelを使ったデプロイ方法

余談

また直接、プロダクトコードには関連しないですが、余談として以下の解説も行なっています。

  • APIとは？

  • HTTPステータスコードのついて

  • ReactフレームワークとReact環境の選択肢

  • .envについて

  • 非同期処理について

  • スプレッド構文とは？

  • 三項演算子 VS 条件式(if文)

  • 現場レベルでのGit-flow

こんな人に読んでほしい

  • React、TypeScriptで入門書やチュートリアルをやった後に、実際に何か作ってみたいという人

  • 普段仕事で基礎的なことはやっているけど、自分で1から何かを作ってみたい人

React・TypeScriptの完全初心者の方へ！

こちらを参考に基礎を学んだのち、Netflixクローンのチュートリアルにチャレンジするとちょうど良いかと思います。


機能一覧

  • TMDBのAPIから映像データを取得して活用する

  • カテゴリー毎に映像のポスター画像を一覧で表示する

  • ナビが一番上に固定してあり、スクロールにより背景色が変化する

  • バナーにはランダムで映画の情報を表示する

  • ポスター画像をクリックすると、予告映像がYouTubeで再生される

有料部分の説明

このチュートリアルは以下の章だてで構成されています。

  • はじめに(この記事！)

  • 1章 TMDBの下準備

  • 2章 環境構築

  • 3章 TMDBからのAPI取得

  • 4章 Rowコンポーネント

  • 5章 Bannerコンポーネント

  • 6章 Headerコンポーネント

  • 7章YouTubeトレイラーの表示

  • 8章 デプロイ・まとめ・今後の学習に役立つ資料一覧

見やすさを考慮した結果、章ごとに記事を分ける事にしました！
その為、有料部分では限定公開にしている各章へのリンクを記載しています。

口コミ

今までこの教材に対して頂いた口コミを一部抜粋して載せておきます。
zenn時代のも入れています。


制作物のイメージが出来た所で実際に取り掛かっていきましょう。


追加コンテンツの案内

5/10に追加コンテンツを作りました。
本編で入れられなかった

  • グローバルなステート管理(useContext)

  • サーバーステート管理(react-query)

  • 見た目をよりNetflixに寄せてスタイリッシュに

  • Youtubeトレイラー音声のOn/Off

などを加えています。(まだ加筆していく予定です。)

余力があればぜひ挑戦してみて下さい！！


ここから先は

1,234字

¥ 2,000

この記事が気に入ったらチップで応援してみませんか？