Youtube-react

Read this in other languages: 한국어 🇰🇷

You can try this app, click below badge!

⭐️ 機能

• React と Youtube Data API を利用して，Youtube サイト作成
• 実現した機能
  • 人気動画表示
  • 検索
  • 再生

🦄 使用言語とツール

                    

📚 使用ライブラリとリソース，API

• Youtube Data API: Youtube の人気動画と検索動画の情報を取得
• axios: Youtube API データの fetch
• unescape: 変換されなかった予約語を記号に変換
• Font-Awesome: 各種アイコン

This project was bootstrapped with Create React App.

📖 Project で新しく勉強した事

React Hooks

• React Component は 2 種類: Class Component と Function Component
• Function Component は Class Component と異なり，re-rendering の際に変数や関数を再定義 → State, Props, Lifecycle 管理が困難
• そこで登場したのがReact Hooks
• useState(), useCallback(), useRef(), useEffect()を使用
• React Hooks を利用して開発する長所
  • this keyword を使用しない → this 関連のミスを抑えられる，可読性も上がる
  • lifecycle 管理もより簡単

Denpendancy Injection

In software engineering, dependency injection is a technique in which an object receives other objects that it depends on. - Wikipedia

• 単体テストの効率化
• 特定のオブジェクトへの依存度を低下 → コードの再利用が用意
• 本プロジェクトでは Youtube API でデータを読み込む機能を分離し，Component に注入

.env で環境変数管理

An environment variable is a dynamic-named value that can affect the way running processes will behave on a computer. - Wikipedia

• 環境変数には API key のように公開してはならない情報もある
• Node.js では.env ファイルで環境変数を管理
• .env は repository にセーブしないため，Netlify などで deploy するためには環境変数を新たに設定 Build environment variables
• React の環境変数管理

Postman

• API 通信テストと fetch コード自動生成などが可能
• https://www.postman.com/

🐛 改善予定

• チャンネルサムネいるの表示
• レスポンシブウェブデザイン
• 接続地域のおすすめ動画表示