こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
まだReactやTypeScriptの基礎知識が不安な人
こちらの記事で完全に未経験からの勉強方法について書いてあるので、参考にして下さい。
こんにちは、フロントエンドエンジニアのてりーです。 僕がフロントエンドエンジニアとして、React + TypeScriptで開発して、3年ぐらい経過しました。 ノウハウがたまってきたので、React + TypeScriptの勉強[…]
このチュートリアルではNetflixのクローンを作成します。
※クローン=見た目についてです。
実際のNetflixにある機能で今回実装してしていない部分もあります。
React + TypeScriptのチュートリアルで作るNetflixについて
React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションです。
Netflixの映画一覧を取得し、カテゴリー毎に表示しています。
映画をクリックすると、youtubeのプロモーション映像が流れます。
機能一覧
- TMDBからNetflixの映画がを取得し表示している
- ナビが一番上に固定してあり、スクロースにより背景色が変化する
- バナーに映画とその詳細が表示される
- カテゴリー毎に表示されている
- リロード毎にバナーの映画が変わる（ランダムに取得される）
React + TypeScriptのチュートリアルで学べること
基本的にはフロントエンド開発のみで完結するプロジェクトです。
バックエンドは特に作らず、映像情報は外部APIから取得し、デプロイにはFirebaseを使います。
- ReactのFunctionComponent（関数コンポーネント）とTypeScriptの使用
- React Hooksによるstate管理
- TypeScriptで外部APIを扱い、非同期通信でデータを取得
- movie-trailerにYoutubeを組み込む
- Firebaseでデプロイ
チュートリアルの進め方
1. サンプルコードを見ながら手を動かしてNetflixクローンを作る
半日~1日程度で完成すると思います！まずは手を動かしながら、身体でプロジェクトの全体像を掴みましょう！
2. 解説部分をじっくり見ながら理解を深める
解説部分ではそのコードを書いた理由や、実装の方針についてくわしく説明しています。
その際に、Reach Hooks、API取得、コンポーンエントなど、今後も重要になってくる概念に対しては、応用の効くような解説記事なども紹介しています。
ここでは時間をとって、それらの知識の理解を深めていきましょう！
3. Netflixクローンに自分なりの機能やデザインを加える！
最後に、成果物に対してプラスαの機能やデザインを付け加えましょう！
新しい知識を身につけた時に、0→1でプロジェクトを作るのではなく、今あるプロジェクトにどうやって組み込むかを考える癖を付けるためです。(実際の現場では現場ではそういう思考が大事です)
また、+αの機能追加によって、独自性があり、完成度の高いポートフォリオが作れます！転職活動などで活用して下さい。
さて、成果物のイメージと学べる事が分かった所で、実際に取り掛かっていきましょう。
React+TypeScriptを使ったNetflixの映画一覧を表示するアプリケーションのチュートリアルです。 学べ…