学習ロードマップ

React Native 入門 — React からモバイルアプリへ

React Native は React の知識の上に成り立ちます。 コンポーネント・Hooks の基礎を固めてから、 React Native と Expo でスマホアプリ開発へ進む読書順序。

Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門 基礎から学ぶ React/React Hooks 【POD】サンプルコードで作りながら学ぶReact Native実践入門 React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際
SCROLL TO BEGIN

このロードマップが扱うもの

React Native は「React を知っていること」 が前提のフレームワークです。 まず React 本体のコンポーネント設計と Hooks を固め、 そのうえで React Native / Expo のモバイル開発に進むと、 つまずきが激減します。

このロードマップの全体像

React Native は「React を知っていること」 が前提のフレームワークです。 まず React 本体のコンポーネント設計と Hooks を固め、 そのうえで React Native / Expo のモバイル開発に進むと、 つまずきが激減します。

学習ステップ

1. 前提: React のコンポーネントと Hooks を、 入門書で確実に身につける。 2. 中核: React Native の実践入門で、 モバイルならではの UI とネイティブ連携を学ぶ。 3. 実践: Expo を使い、 環境構築の負荷を下げて実機で動くアプリまで作り切る。

Web の React 経験をモバイルへ最短距離で持ち込むための順序です。

ロードマップ

4 つのステップで読み進める

  1. 01
    ステップ 01 React の全体像
    Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門
  2. 02
    ステップ 02 Hooks を腹落ちさせる
    基礎から学ぶ React/React Hooks
  3. 03
    ステップ 03 React Native の中核
    【POD】サンプルコードで作りながら学ぶReact Native実践入門
  4. 04
    ステップ 04 Expo で実機まで
    React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際

第 1 章

React の全体像

  1. React の全体像

    React ビギナーズガイド — コンポーネントベース開発の前提知識をまず固める。

    Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門
    この章の 1 冊 Reactビギナーズガイド : コンポーネントベースのフロントエンド開発入門

    Stoyan Stefanov/牧野 聡 / オライリー・ジャパン / 2017

    React コンポーネント指向と Flux データフローを実例で体得する

    この本で身につくこと
    • JSX の構文とコンポーネント分割の考え方を理解し、小さな部品を組み合わせて UI を構築できる
    • Flux アーキテクチャによる単方向データフロー(Action → Dispatcher → Store → View)の設計方針を把握できる
    • Jest を使ったコンポーネントのユニットテストを書ける
    • ESLint による構文チェックをプロジェクトに組み込む手順を理解できる

    想定読者: ES6 の基礎を習得済みで、React によるコンポーネント指向 UI 開発を初めて体系的に学ぶフロントエンド開発者

    前提知識: JavaScript (ES2015/ES6) の基本構文 — アロー関数・分割代入・クラス構文・モジュール(import/export)を読み書きできること / HTML・CSS の基礎知識 — DOM 構造と CSS セレクタの概念 / Node.js と npm の基本操作 — package.json の読み書きとパッケージのインストール手順

    本の詳細を見る →

  2. Hooks を腹落ちさせる

    基礎から学ぶ React/React Hooks — 状態管理と副作用の考え方を定着させる。

    基礎から学ぶ React/React Hooks
    この章の 1 冊 基礎から学ぶ React/React Hooks

    asakohattori / シーアンドアール研究所 / 2021

    JavaScriptの基礎から丁寧に積み上げ、React Hooksを実際のアプリ開発で使えるようにする

    この本で身につくこと
    • Reactが学習困難になる根本原因(JavaScriptへの理解不足)を先に解消する視点を持てる
    • useState・useEffect・useRef・useContext等の主要Hooksを一冊で体系的に把握できる
    • TODOアプリのゼロから実装を通じ、コンポーネント設計・状態管理の基本を体で覚えられる
    • Chakra UIを用いたスタイリング手法を実践レベルで習得できる

    想定読者: JavaScriptを少し触ったことがあり、Reactで挫折した経験がある、またはこれからフロントエンド開発に踏み出すWebデザイナー・初級エンジニア

    本の詳細を見る →

  3. React Native の中核

    サンプルコードで作りながら学ぶ React Native 実践入門 — モバイル開発へ踏み出す。

    【POD】サンプルコードで作りながら学ぶReact Native実践入門
    この章の 1 冊 【POD】サンプルコードで作りながら学ぶReact Native実践入門

    星 直史 / インプレスR&D / 2020

    Web エンジニアが React Native でスマホアプリ開発を実務レベルで習得する

    この本で身につくこと
    • React Native によるクロスプラットフォームアプリの開発環境構築と基本的なプロジェクト構成を理解できる
    • サンプルコードを通じて画面遷移・状態管理・コンポーネント設計の実装パターンを習得できる
    • Swift 単独開発と比較した React Native 採用の技術的メリット・デメリットを説明できる
    • Web エンジニアとして既存スキルを活かしながらモバイルアプリ開発に参入するための移行パスを把握できる

    想定読者: React や JavaScript の知識を持ち、モバイルアプリ開発に踏み出したい Web エンジニア。既存チームに Swift を読めるメンバーが少なく、技術選定から見直したい開発チームのリーダー。

    本の詳細を見る →

  4. Expo で実機まで

    React Native＋Expo で、 環境構築の負荷を抑えつつ動くスマホアプリを作り切る。

    React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際
    この章の 1 冊 React Native＋Expoではじめるスマホアプリ開発 : JavaScriptによるアプリ構築の実際

    松澤 太郎 / マイナビ出版 / 2018

    ExpoでiOS/Android両対応アプリをJavaScriptで構築する

    この本で身につくこと
    • Expo CLIで開発環境をゼロから構築し、実機・エミュレータ両方でのデバッグフローを確立できる
    • FlexboxレイアウトでiOS/Android共通のレスポンシブUIを設計できる
    • FluxアーキテクチャによるReact Nativeアプリの状態管理パターンを実装に落とし込める
    • GPS・カメラなどスマートフォン固有のデバイス機能をExpo API経由で利用できる

    読み終えると Before(読む前): Webアプリは構築できるが、iOS/Android両対応のネイティブアプリのビルドと配信の経路が分からない After(読み終えた後): ExpoワークフローでTODOアプリから地図・GPS連携アプリまで実装し、App Store/Google Playに配信できる

    想定読者: ReactやJavaScriptでWebアプリを開発した経験があり、スマートフォン向けネイティブアプリ開発へ踏み出したいWeb系開発者

    前提知識: JavaScript ES6以降の基本構文(アロー関数・分割代入・Promiseの非同期処理) / Reactのコンポーネント概念とJSXの基礎(本書はReact自体の解説は薄い) / npmまたはyarnを使ったパッケージ管理の基本操作

    本の詳細を見る →

続けて読む

次に読むロードマップ

全ロードマップを検索する →