React NativeとExpoで作るiOS・Androidアプリ開発入門 – これ一冊でストアリリースまで進める本格的入門書 – 1/3

3巻で完結するシリーズです。この本は第1巻目になります。

第二巻：『React NativeとExpoで作るiOS・Androidアプリ開発入門 – これ一冊でストアリリースまで進める本格的入門書 – 2/3』

第三巻：『React NativeとExpoで作るiOS・Androidアプリ開発入門 – これ一冊でストアリリースまで進める本格的入門書 – 3/3』

この度は、「React NativeとExpoで作るiOS・Androidアプリ開発入門 – これ一冊でストアリリースまで進める本格的入門書」を手に取っていただきまして、誠にありがとうございます。

本シリーズはプログラミングの基本的な知識をお持ちの方を対象に、React Nativeとその便利な開発ツールであるExpoを使用したiOS・Androidアプリの開発とリリースの流れを掴んでいただくための本です。

本シリーズを最後までお読みいただくことで、Expoを使用したReact Native開発の流れを掴んでいただくことができます。

本書で作成して完成するアプリ

以下のURLからExpoのクライアントアプリを介して利用することができます。

詳しい利用法は本書のExpoの箇所で解説しています。

https://expo.io/@nakanoh/QiitaFeed

最初の１冊目となる本書ではReact Nativeの概要と環境構築、ReactとReact Nativeの基礎を学びます。

本書はリフロー型のKindle電子書籍のフォーマットを採用しています。

一般的な紙の本とは異なる装丁を採用しているため、Kindle本をあまり利用されたことのない方は事前に「無料サンプルを送信する」の機能を利用して、確認をお願いします。

## 本書を利用される場合の注意点

本書に限らずリフロー型の電子書籍を快適に閲覧するためのポイントを解説します。

MacやWindowsなどのデスクトップ版のKindleアプリで電子書籍を見る場合は「列の自動調整」・「二列」モードではなく、「一列」モードで閲覧されるようにお願いします。

「列の自動調整」・「二列」モードを使用した場合、コードが見辛くなるなどの問題点が発生します。

本書は「一列」モードでの閲覧を想定しているためです。

そのため、必ずアプリの設定タブから「一列」モードに切り替えてのご利用をお願いします。

また、本書ではフォントサイズの調節機能が利用可能です。

もし、文字が小さい、あるいは大きすぎると感じた場合はフォントサイズを変更して適宜変更を行ってください。

よくある質問

Q. コマンドラインを使うのは初心者向けではないのでは？

A. 「入門=プログラミングの初心者向け」ではありません。あくまで、ある程度の基礎知識を持った方が言語・フレームワークの入門をするための本という位置付けです。

具体的には独学で必要な知識をつけられる方が、自力でステップアップするための踏み台として位置付けています。

ドットインストールのようなオンラインの初心者向け教材を卒業した方が次にやる教材という位置付けです。

Q. レイアウトがチープで見辛い、改善してください。

A. リーズナブルな入門書を提供するため、また様々な端末に対応させるための妥協点です。

リーズナブルな入門書を提供するため、ある程度見た目を犠牲にしています。仮にデザインを大きく改善することとなるとその分定価に上乗せされることとなってしまいます。

そもそも筆者は技術書の本質は中身であり、見た目ではないと考えています。

筆者もスタイルシートの改善など工夫を重ねていますが、フォーマットの性質上限界があります。

また、電子書籍をリフロー型としてあらゆる解像度の端末に対応させるとなるとPDFなどのデザインを重視したフォーマットは諦めざるを得ません。

そのため大変申し訳ございませんが、レイアウトについてはこれ以上の改善はできませんことをご了承ください。

Q. 対象読者がよくわからない

A. 基本的にはタイトルに挙げられている言語・フレームワークの知識を必要としている方を対象としています。

基本的にはどのシリーズもタイトルに挙げられている言語・フレームワークを使いたい、以前使おうとしたけどわからなかった。と考えている方を対象にしています。

基本的にはタイトルに「初心者向け」と明記していない限り、プログラミングの完全な初心者の方に向いていません。あくまである程度の基礎知識を持った方を前提にしています。ブラウザ、HTTPといった基本的な用語はわかっている・あるいは自力で調べて確認できる前提で話を進めています。

具体的な前提知識はシリーズによって異なりますが、基本的にはMacOS・Linuxのコマンドラインの基本（mkdir, cd, mvなどが使える）とHTML・CSSの基本（headとbodyの違い、divやh1,pなどのタグの使い分けがわかる）を踏まえていただけるとわかりやすいと思います。

注意事項

本書で学んだ内容でアプリをインターネットに公開するときの注意点

本書はスマートフォンアプリ開発の初心者向けチュートリアルです。

スマートフォンアプリ開発の初心者が混乱しないように最低限のトピックに限定して解説を行なっています。

個人情報や決済情報などの機密情報を扱うためのには、セキュリティやOSの高度な知識が必要です。

本書の知識のみを利用してスマートフォンアプリ開発を公開する場合は、基本的にホビー目的のものに留めていただき、個人情報やクレジットカード番号など、クリティカルな機密情報を扱うスマートフォンアプリ開発は決して行わないでください。

目次

1. React Nativeについての基礎知識

1.1 React Nativeとは？
1.2 他のクロスプラットフォームアプリ開発フレームワーク
1.3 React Nativeの優れた特徴
1.4 React Nativeは実用的なのか？

2. React, ES6とJSX

2.1 Reactと仮想DOM
2.2 Reactとコンポーネント
2.3 propsとstate
2.4 ES6
2.5 JSX

3. ExpoでのReact Native開発

3.1 会員登録を行う
3.2 SnackでとりあえずReact Nativeの練習を実行してみる
3.3 スマホにExpoアプリをインストールする
3.4 React Nativeのアプリを動かして見よう
3.5 React Nativeの標準コンポーネント
3.6 app.json

4. 環境構築

4.1 Xcodeとコマンドラインの導入
4.2 Android Studioの導入
4.3 Homebrewの導入
4.4 Node.js, npmの導入
4.5 Watchman の導入
4.6 react-native-cliの導入

5. React Nativeのアプリを動かして見よう

5.1 react-native init
5.2 まずはReact NativeをiOSで動かしてみよう
5.3 React NativeをAndroidで動かしてみよう
5.4 ソースコードを見てみよう

6. React Nativeの標準コンポーネント

6.1 View
6.2 Text
6.3 Image
6.4 Button
6.5 TouchableOpacity
6.6 ActivityIndicator
6.7 FlatList
6.8 TextInput
6.9 WebView
6.10 DatePickerIOS

7. React Nativeの標準API

7.1 Share
7.2 ClipBoard
7.3 DatePickerAndroid
7.4 Dimensions

8. React NativeのUI構築 – スタイルシートを使ったレイアウト

8.1 React NativeのStyleSheet
8.2 CSSとの主な相違点
8.3 FlexBox

9. React Nativeでサンプルアプリを動かしてみよう

9.1 簡単なニュースアプリの機能を作ってみる
9.2 React Nativeとネットワーク通信

** 注意点 **

本書の中では、関連した書籍を紹介する意味、読者のみなさまが関連する書籍を探す手間を省かせていただくために、筆者の著作を紹介させていただきます。あらかじめご了承ください。

続編はこちらです。