関連サイト
本書の関連ページが用意されています。
内容紹介
「React Native」は、Facebookが開発しているスマートフォンアプリ向けの開発環境で、2015年3月にオープンソースとして公開されました。ほとんどのコードをJavaScriptで記述でき、スマートフォンのAndroidとiOSに両対応したネイティブアプリの開発が可能です。名前からもわかるように、同じくFacebookが開発したUI用のライブラリであるReactをベースの技術としており、コンポーネントを組み合わせてUIを構築できます。Facebookは、自社や傘下のInstagramのスマートフォンアプリ開発にReact Nativeを利用しています。
Reactをベースにし、JavaScriptで開発を行えるため、Web系の開発者がスマートフォンのネイティブアプリ開発を始めるには、React Nativeは最適なプラットフォームといえるでしょう。
また、「Expo」は、React Nativeによる開発・アプリ配布を支援するためのツールとサービスです。本書では、開発環境としてExpoを使って解説しています。
本書では、ある程度、Web開発の知識があり、これからスマートフォンのネイティブアプリ開発に取り組もうという人に向けて書かれています。
【各章の内容】
●第1章 React Nativeの概要、および、その開発支援ツールである「Expo」と「Create React Native App（CRNA）」について説明しています。
●第2章 React Nativeに必要となるnode.js、そしてExpoの導入について説明しています。
●第3章 Androidエミュレータ／iOSシミュレータの導入と、デバッグ環境などの具体的な利用方法を解説します。また、実機での動作確認方法にも触れています。
●第4章 TODOアプリの開発を通してReact Nativeの基本を学んでいきます。
●第5章 Flexboxレイアウトを学ぶために、逆ボーランド電卓を作成します。
●第6章 統一的なUIを持ったアプリの作成を可能にする「UIライブラリ」を使ってTODOアプリを拡張します。
●第7章 Fluxアーキテクチャを使って、TODOアプリを書き直してみます。
●第8章 トイレマップとGPSロガーの2つのアプリを通して、ライブラリの利用、GPSやカメラといったスマートフォン機能の使い方など、本格的で実践的なReact Nativeプログラミングについて学びます。
●第9章 アプリ内でWebページを表示するための「WebView」を使ったプログラミングを解説しています。
●第10章 React Native CLIを使ったネイティブモジュールを使った開発について解説しています。
●第11章 Google Play／App Storeでの配信について説明しています。
●第12章 意外とハマるポイントでもあるReact Native／Expoのバージョンアップについて解説しています。
●付録 tvOS／Windowsに対応したアプリの対応方法を解説しています。
書誌情報
- 著者: 松澤 太郎
- 発行日: 2018-08-29 (紙書籍版発行日: 2018-08-29)
- 最終更新日: 2018-08-29
- バージョン: 1.0.0
- ページ数: 384ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
松澤 太郎
地理空間系プログラマー。合同会社Georepublic Japanで（顔がおっさんなので）シニアエンジニアとして働く。専門分野は、地図タイルおよびWeb／スマートフォンアプリケーション開発。古くからMozillaコミュニティやLinux/OpenSourceコミュニティで活動し、某組の組長だったことから、いまだに「くみちょ」と呼ばれている。日本UNIXユーザ会理事、OSGeo財団日本支部理事、OpenStreetMap Foundation Japanのメンバーでもある。趣味はブレイクコアなどの音楽を聞くこと。Twitterは、@smellman。
目次
第1章 React Nativeとは
- 1-1 React Nativeとは
- 1-2 Expoとは
- 1-3 Create React Native Appとは
- 1-4 React NativeとExpo/CRNAの違い
第2章 開発環境の構築
- 2-1 node.jsのインストール
- 2-1-1 nodistによるnode.jsのインストール（Windows）
- 2-1-2 nodebrewによるnode.jsのインストール（macOS/Linux）
- 2-2 Expoを導入
第3章 エミュレータ／シミュレータによる確認
- 3-1 Androidエミュレータのセットアップ
- 3-1-1 WindowsにおけるAndroid Studioのインストール
- 3-1-2 macOSでのAndroid Studioのインストール
- 3-1-3 LinuxでのAndroid Studioのインストール
- 3-1-4 Android Studioでエミュレータのセットアップ
- 3-2 iOSシミュレータのインストール
- 3-3 Expoの確認用プロジェクトと開発サーバの起動
- 3-4 ExpoでAndroidエミュレータの確認
- 3-5 iOSシミュレータでの確認
- 3-6 Expoのネットワークについて
- 3-7 実機での確認
- 3-7-1 Androidの実機での確認
- 3-7-2 iOSの実機での確認
- 3-8 Expoの動作モード
- 3-8-1 Reload／Reload JS Bundle
- 3-8-2 Live Reload
- 3-8-3 Toggle Inspector／Toggle Element Inspector
- 3-8-4 Debug JS Remotely／Debug remote JS
- 3-9 エディタを選ぶ
- 3-9-1 Atom
- 3-9-2 Visual Studio Code
- 3-9-3 EditorConfig
第4章 TODOアプリで学ぶ初めてのReact Native
- 4-1 作成準備
- 4-2 import
- 4-3 const／let／var
- 4-4 Componentとrender関数
- 4-5 Reactにおけるkeyとloop
- 4-6 setState関数
- 4-7 React.Componentのライフサイクル
- 4-8 JavaScriptの非同期処理
第5章 電卓アプリ開発で学ぶFlexboxレイアウト
- 5-1 Flexboxの「軸」
- 5-2 Flexboxでの配置
- 5-3 電卓アプリを作ってみよう
- 5-3-1 逆ポーランド記法
- 5-3-2 レイアウトを作成
- 5-3-3 電卓の機能の実装
- 5-4 画面の回転
第6章 UIライブラリによるTODOアプリの拡張
- 6-1 nativebaseとReact Native Elements
- 6-2 React Native Elementsの導入
- 6-3 SearchBarの導入
- 6-4 テキスト入力とボタンをReact Native Elementsに置き換える
- 6-5 ListItemを実装
- 6-6 iPhone Xへの対応
第7章 React Nativeの状態管理
- 7-1 Fluxアーキテクチャとは
- 7-2 ReduxによるTODOアプリの状態管理
- 7-3 redux-persistによる永続化
第8章 地図アプリとGPSロガーアプリ制作で学ぶ実践的React Native開発
- 8-1 react-native-mapsとreact-navigation
- 8-1-1 react-native-mapsとは
- 8-1-2 react-navigationとは
- 8-2 トイレマップを作成
- 8-2-1 Overpass APIとは
- 8-2-2 turf.jsとは
- 8-3 GPSロガーの作成
第9章 WebViewプログラミング
- 9-1 経路探索アプリの作成
- 9-2 WebViewにデータを渡す
- 9-3 WebViewからデータを受け取る
- 9-4 駅すぱあとWebサービスとの連携
第10章 ネイティブモジュールを利用した開発
- 10-1 開発環境のセットアップ
- 10-1-1 Java 8以降のインストール
- 10-1-2 React Native CLI
- 10-2 React Native Cameraで作るバーコードリーダー
- 10-2-1 Androidの実機テスト
- 10-2-2 iOSの実機テスト
- 10-3 Mapbox Maps SDKで作るトイレマップ
- 10-3-1 Androidのセットアップ
- 10-3-2 iOSのセットアップ
- 10-3-3 アカウントの用意
- 10-3-4 アプリケーションの作成
第11章 Storeへの配信
- 11-1 スプラッシュスクリーンの作成
- 11-2 アイコンの作成
- 11-3 Google Playでの配信
- 11-3-1 ExpoでのAPKファイルの作成手順
- 11-3-2 React NativeでのAPKファイルの作成手順
- 11-4 App Storeでの配信
- 11-4-1 App Storeの準備
- 11-4-2 ExpoでのIPAファイルの作成およびApp Storeへの配信手順
- 11-4-3 React NativeでのApp Storeへの配信手順
第12章 React Native／Expoのバージョンアップ
- 12-1 Expoのバージョンアップ
- 12-2 React Nativeのバージョンアップ
- 12-2-1 react-native-git-upgradeによるアップグレード
- 12-2-2 react-native ejectによるアップグレード
付録
- A-1 tvOSプログラミング
- A-1-1 環境構築
- A-1-2 プログラムの修正
- A-1-3 実機での検証
- A-2 Windowsプログラミング