現場レベルの知識をぞんぶんに盛り込んだ実践的な教材でコンポーネント思考をマスターしよう！

本教材はJavaScriptプログラミング言語の上で動作するUIライブラリであるReactを使って簡易的なYouTubeビューワーアプリを作成します。

0からYouTubeビューワーの基本的な機能をステップごとに作成していきます。

React , Express を使用して開発しますが、主にUIコンポーネントの Atomic Design を使った設計を把握してもらうことを一番の目的としております。

その中で、可能な限り実践的な体験ができるように、ただプロダクトを作るだけではなく、設計の考え方やデバッグのやり方なども教材内に入れています。考え方を理解に努めながら教材を進めてもらえると嬉しいです。

また、本教材は動画配信サービスのYouTubeのAPIを使用しております。YouTubeを使ったことがない方は、まずはYouTubeとはどんなサービスかを見てみましょう。

参考）YouTube

教材を通して習得可能なスキル

✔︎ React による実践的なアプリケーション開発
✔︎ Atomic Design によるコンポーネント指向設計
✔︎ Storybook を使ったコンポーネント管理
✔︎ フロントエンド開発環境の構築方法
✔︎ YouTubeAPI との連携手法

学習内容

• React を使った実践的な開発スキルを学びます
• Webpack + babel を使ったフロントエンド開発環境の構築手法を学びます
• Atomic Design を使ったコンポーネント設計手法を学びます
• Storybook を使ったコンポーネント管理を行います
• Node + Express を使ったサーバー側の開発を行います
• YouTubeAPI との連携手法を学びます
• 動画お気に入り機能を開発します
• Chrome 開発者ツールを使ったデバッグ手法を学びます
• ESLint を使ったコード品質管理手法を学びます

作成するアプリケーションのイメージをつかもう

YouTube動画の検索、再生、お気に入り登録ができるアプリケーションの作成を行います。

この教材の対象者

• React を使った実践的なアプリケーション開発を学びたい方
• React のフック機能を使ったアプリケーション開発を学びたい方
• コンポーネント指向でのフロントエンド設計を学びたい方

受講における必要条件

• HTML/CSS/JS の基礎知識
• 入門者向けの教材で React の基礎知識を学んだことがある方

学ばないこと

本教材は React + Atomic Design を使った開発を通じてコンポーネント指向を身に付けることをいちばんの目的としています。Node + Expressについての解説は詳しくはしていません。細かく知りたい方はご自身で調べていただければと思います。

本教材の対応バージョン

• React 16.8.0 以降

フック機能が使える React のバージョンである必要があります。16.8.0未満のバージョンには対応していませんので、学習を進めるならReact 16.8.0以降のバージョンで進めることをおすすめします。

本教材で質問対応可能なOSや環境

• Mac OS

本教材の構成について

0章 はじめに

本教材を進める上での環境を整えたり、設計を解説していきます。

1章 新規Express+Reactアプリケーションの作成

簡易的なサーバーサイドの実装を行い、Reactアプリケーションをホストする環境を作成します。

2章 コンポーネントとstorybook

storybookを使ったUIコンポーネントの開発環境を作成します。

3章 トップページの作成

AtomicDesignを使ったコンポーネントの設計と実装を行います。

4章 検索機能の作成

非同期通信を行い、YouTube動画の検索結果を取得・表示する機能を作成します。

5章 動画再生ページの作成

コンポーネント設計を行い、動画の詳細情報の表示や関連動画の表示を行う機能を実装します。

6章 お気に入り機能の作成

Reactのコンテクスト機能を使った、動画をお気に入りに保存する機能を実装します。

7章 linterとデバッグ

ESLintを使ったコード解析とデバッグ手法を学びます。

最後に

フロントエンドの開発のコーディングだけではなく、環境構築と設計も含めた全てを0から実戦できるフロントエンドエンジニアを増やしていきたいと思い、執筆活動に励んできました。本教材が少しでもみなさんのお力になれたらうれしいです。