【無料で読める】ReactでTodoアプリを作ってみよう

[概要] 本書はReactの入門書です。

「Webアプリケーションを作成しよう」と思った時に考えられる選択肢としては次のようなものがあります。
１．JavaScriptのみで作成
２．jQueryなどのライブラリを使用して作成
３．フレームワークを使用して作成

アプリケーションの規模が小さければ１や２の選択肢を選ぶこともあると思いますが、規模が大きくなってくると必要になってくるのが３の選択肢のフレームワークです。

Reactには「create-react-app」というツールがあり、「create-react-app プロジェクト名」というコマンドを実行するとアプリケーションの雛形を自動で作成してくれますし、「npm start」というコマンドを実行すると雛形で用意されているアプリケーションが起動します。

本書では簡単なTodoアプリをReactというフレームワークで作成することで、フレームワークを使うとどのようなことができるのかを体験していただこうと思います。

また、本書の後半では「Material-UI」といったReact用のUIコンポーネントを使ってTodoアプリをマテリアルデザインのUIのスタイルに変更したり、Cordovaというモバイルアプリケーション開発フレームワークを利用してTodoアプリをAndroidエミュレータ上で動作させてみようと思います。

[想定する読者] JavaScriptのプログラミング経験がある方で、Reactというフレームワークに興味がある方を想定しています。

[本書の構成] Chapter1ではJavaScriptにはどのようなフレームワークが存在するのかを簡単に紹介します。

Chapter2ではcreate-react-appを使ってアプリの作成および実行を行います。その後create-react-appによって作成されたプロジェクトのフォルダの中身を確認してアプリがどのような流れで実行されていくのかをみていきます。

Chapter3ではTodoアプリを作成するにあたって必要となるReactの基本文法を、簡単なアプリケーションを作成して実行することで理解していこうと思います。

Chapter4ではHtml+JavaScriptで作られたTodoアプリをベースにReactでTodoアプリを作成します。

Chapter5ではChapter4で作成したTodoアプリにUIコンポーネントを適用してアプリを完成させます。

Chapter6ではアプリのビルドを行って別途準備した簡易Webサーバーを使ってアプリを実行します。

Chapter7ではCordovaというモバイルアプリケーション開発フレームワークを利用して実際にアプリの作成と実行（ブラウザ上）を行うことでCordovaの使い方をみていきます。

Chapter8ではChapter5で完成させたTodoアプリをCordovaを利用してAndroidエミュレータ上で動かします。

Chapter9ではJavaScriptのフレームワークとして人気のAngular、React、Vue.jsという３つのフレームワークを比較してみようと思います。

[実行環境] Windows 10上でアプリケーションの作成や実行を行っています。

コマンドの実行はコマンドプロンプト上で行っています。

アプリケーションはChromeブラウザ上で動かしています。

■使用しているソフトウェアのバージョン
create-react-app 1.5.2
Cordova 8.0.0
Android Studio 3.1.4

[目次] はじめに
想定する読者
本書の構成
開発環境
Chapter1 JavaScriptフレームワーク
Chapter2 Reactの基礎知識
2-1 Reactの概要
2-2 React開発環境の準備
2-3 Reactアプリの作成と実行
2-4 プロジェクトフォルダの内容確認
Chapter3 Reactの基本
3-1 データバインディング
3-2 イベント処理
3-3 双方向データバインディング
3-4 リスト表示
3-5 コンポーネント間コミュニケーション
3-6 ルーティング１（Historyモード）
3-7 ルーティング２（Hashモード）
3-8 ライフサイクルメソッド
Chapter4 Reactの実践（Todoアプリの作成）
4-1 Html+JavaScriptで作られたTodoアプリの紹介
4-2 ReactでTodoアプリを作成１（１コンポーネント）
4-3 ReactでTodoアプリを作成２（複数コンポーネント化）
4-4 ReactでTodoアプリを作成３（ローカルストレージの利用）
4-5 ReactでTodoアプリを作成４（コンポーネントの独立）
4-6 ReactでTodoアプリを作成５（ルーティングの利用）
Chapter5 UIコンポーネントフレームワークの利用
5-1 Material-UIの概要
5-2 Material-UIアプリの作成と実行
5-3 TodoアプリのMaterial-UI化
Chapter6 簡易Webサーバーを使ってTodoアプリを実行する
6-1 簡易Webサーバーの準備
6-2 Todoアプリ（Html+JavaScript）の実行
6-3 Todoアプリ（React+Material-UI）の実行
Chapter7 Cordovaの基礎知識
7-1 Cordovaの概要
7-2 Cordovaのインストール
7-3 Cordovaアプリ（browser）の作成と実行
Chapter8 Androidエミュレータ上でTodoアプリを実行する
8-1 Androidの概要
8-2 Android環境の準備
8-3 Cordovaアプリ（android）の作成と実行
8-4 Todoアプリ（Html+JavaScript）の実行
8-5 Todoアプリ（React+Material-UI）の実行
補足情報 AndroidのJavaで作成したTodoアプリのコードの紹介
Chapter9 Angular/React/Vue.jsの比較
おわりに

• Vue.jsでTodoアプリを作ってみよう