見出し画像

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

てりー

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

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

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

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

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

  • いいね：1917

  • 合計PV：114408

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

Zennで記事を購入されている方もいらっしゃると思うので、Zennも無料配布を終えたタイミングで記事内容をアップデートします！

こちらのnote、期間限定で無料配布します！！

Zennだけでなくnoteにも記事を書いた理由は、期間限定で無料配布を行いたかったからです！！

最初に多くの方に手に取って頂き、反応などを見て内容にさらに磨きをかけたいと考えています。

https://x.com/teriteri_code/status/1783358352447414464

ぜひこの機会に無料で手に取って下さい。


作れるもの

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章 デプロイ・まとめ・今後の学習に役立つ資料一覧

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

追加コンテンツの案内

  • パフォーマンス改善

  • useContextなどを使ったグローバルなstate管理

  • デザイン修正

などの章を追加しました！
今なら口コミを書いていただく事で無料でプレゼントしています！！

詳しくはこちらのポストをご覧ください。

ここから先は

1,234字

¥ 2,000

この記事が気に入ったらサポートをしてみませんか？