書籍詳細（基礎から学ぶReact Native入門）

基礎から学ぶReact Native入門 書影

ISBN: 978-4-7981-6956-9

基礎から学ぶReact Native入門

WINGSプロジェクト 中川幸哉 著

著者WINGSプロジェクト 中川幸哉
監修山田祥寛
出版社翔泳社
価格1,600円（税別）
判形B5正寸・1色
ページ数172ページ
発売日2021年2月25日
シリーズ CodeZine BOOK
対象レベル初中級
Amazonで購入
B!

人気のスマホアプリ開発ツールReact Nativeの解説書

ReactとJavaScriptによるWebアプリ開発に近い作法でAndroidやiOSのアプリを開発できるReact Native。その基本の仕組みからReactやTypeScript、Expoを使った開発／リリースの方法まで一通り解説します。掲載サンプルはサポートページから入手可能。
基礎から学ぶReact Native入門 ロゴ

更新履歴

  • FAQ情報：2024年9月14日 更新

目次

  • 第1章 React Nativeとは何か？ － 基本の仕組みと使いどころを理解する
  • 1.1 プラットフォームの多様化とそれに伴う課題
  • 1.2 クロスプラットフォームという選択肢
  • 1.3 React Nativeとはどんな開発ツールなのか
  • 1.4 React Nativeをどんなツールとして捉えるのか
  • 1.5 事例から見る、React Nativeが向いている領域
  • 1.6 まとめ
  • 第2章 Expoで始めるReact Native開発環境の構築
  • 2.1 React Nativeでできること
  • 2.2 React Nativeのつらいところ
  • 2.3 Expoでビルド環境を抽象化する
  • 2.4 Expoを使った開発環境を構築する
  • 2.5 公式Expoアプリでデバッグする
  • 2.6 まとめ
  • 第3章 Reactの基本を学ぼう － コンポーネントの仕組みと作り方
  • 3.1 Reactの特徴
  • 3.2 JSX
  • 3.3 コンポーネントとprops
  • 3.4 まとめ
  • 第4章 Reactの基本を学ぼう － コンポーネントで動的な状態管理
  • 4.1 動的な状態管理を行う
  • 4.2 ユーザー操作のイベントを使って状態を更新する
  • 4.3 ライフサイクルを使って状態を更新する
  • 4.4 まとめ
  • 第5章 React Hooksの使い方を学ぼう － 関数コンポーネントの状態管理を行う
  • 5.1 関数コンポーネントを高機能にする
  • 5.2 フック
  • 5.3 useStateで状態管理を行う
  • 5.4 useEffectで副作用を扱う
  • 5.5 独自フックに切り分ける
  • 5.6 フックを条件分岐で呼び分けてはいけない
  • 5.7 まとめ
  • 第6章 React Nativeでアプリの見た目を整えよう － スタイルでコンポーネントを装飾する
  • 6.1 レイアウトと装飾のためのスタイル機能
  • 6.2 レイアウトと装飾
  • 6.3 Viewを装飾する主なプロパティ
  • 6.4 Textを装飾する主なプロパティ
  • 6.5 まとめ
  • 第7章 React Nativeでアプリの見た目を整えよう － スタイルでコンポーネントをレイアウトする
  • 7.1 レイアウトのためのスタイル
  • 7.2 レイアウト機能の役割
  • 7.3 widthとheightでサイズを決める
  • 7.4 marginとpaddingで間を空ける
  • 7.5 Flexboxでレイアウトする
  • 7.6 absoluteやpositionでレイアウトする
  • 7.7 まとめ
  • 第8章 UIライブラリで美しいデザインを手軽に利用する
  • 8.1 美しいコンポーネントを自分で作るのは大変
  • 8.2 Material DesignをReactコンポーネントとして使う
  • 8.3 React Native Paperをセットアップする
  • 8.4 目的に応じてテキストを使い分ける
  • 8.5 3つのボタン
  • 8.6 カードで情報をまとめる
  • 8.7 まとめ
  • 第9章 React Navigationで画面遷移を実現する
  • 9.1 Reactと画面遷移
  • 9.2 React Nativeの画面遷移ライブラリ
  • 9.3 React Navigation
  • 9.4 セットアップ
  • 9.5 Stack Navigatorで基本の画面遷移を扱う
  • 9.6 Tab Navigatorでタブ切り替えを扱う
  • 9.7 Drawer Navigatorでサイドメニューを扱う
  • 9.8 まとめ
  • 第10章 React Nativeでメモアプリを作ろう － セットアップと表示
  • 10.1 メモアプリを作る
  • 10.2 プロジェクトをセットアップする
  • 10.3 データ構造を決める
  • 10.4 FlatListでリストを画面に表示する
  • 10.5 日時の表記を整える
  • 10.6 textが省略されないようにする
  • 10.7 日時を右寄せにする
  • 10.8 まとめ
  • 第11章 React Nativeでメモアプリを作ろう － 作成画面の構築と実データの利用
  • 11.1 メモアプリを完成させる
  • 11.2 メモ作成画面の見た目を作る
  • 11.3 データを永続化する
  • 11.4 永続化したデータを読み出す
  • 11.5 まとめ
  • 第12章 静的型チェックを行うTypeScriptで品質を担保しよう
  • 12.1 複数人で開発を行う難しさ
  • 12.2 静的型チェックでコードの意図を伝える
  • 12.3 TypeScriptとは
  • 12.4 React NativeとTypeScript
  • 12.5 TypeScript向けにExpoプロジェクトをセットアップする
  • 12.6 まとめ
  • 第13章 リリース用のアプリファイルを用意しよう
  • 13.1 アプリをリリースしよう
  • 13.2 Expoでリリースビルドを行う流れ
  • 13.3 アプリ名を設定する
  • 13.4 アプリIDを設定する
  • 13.5 アプリのバージョンを設定する
  • 13.6 画像リソースを準備する
  • 13.7 リリースビルドする
  • 13.8 アプリファイルのアップロード方法
  • 13.9 まとめ

正誤表

現在、正誤情報はありません。

FAQ

現在では、expo-cliのインストールは不要になっています。
また、プロジェクトのセットアップコマンドが変更されています。
expo initの代わりに、次のコマンドを実行してください。

$ npx create-expo-app@latest my-first-react-native-app

更新日: 2024.09.14

現在では npm start 後の挙動が変更しています。
npm start を実行後、自動でブラウザーは立ち上がらず、
すべてターミナル上で完結する形になっています。

更新日: 2024.09.14

現在では、プロジェクトのセットアップコマンドが変更されています。
expo initの代わりに、次のコマンドを実行してください。

$ npx create-expo-app@latest memo-app

更新日: 2024.09.14

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』