はじめに

ハンズオンの目的

本ハンズオンは、JavaでWebアプリケーションの開発経験はあるが、シングルページアプリケーション(以下SPA）とREST APIを組み合わせた構成での開発経験が無い開発者を対象とし、次のことについて学ぶことを目的としています。

• ReactとTypeScriptを使用したSPAの実装
• Nablarchを使用したREST APIの実装

（ReactやTypeScirpt、Nablarchについては使用経験が無くても問題ありません）

なお、いくつかの機能を実現するための実装は、サービス開発リファレンスのサンプルアプリケーション（以下example-chat）でも同様に実装されています。そのため、example-chatの実装を参考にできたり流用できたりする箇所では積極的に使用するようにしています。

ハンズオンの内容

本ハンズオンでは、ToDoを管理するためのサービスを提供するToDoアプリを作成します。

ToDoアプリは、フロントエンドをSPA、バックエンドをREST APIで構成します。SPAの実装にはReactとTypeScriptを、REST APIの実装にはNablarchを使用します。また、フロントエンドとバックエンドを分離して実装しやすいようにOpenAPIを使用します。

本ハンズオンはSPAとREST APIの実装を体験することに焦点を当てた内容としています。そのため、実際の開発プロセスとは異なり、画面デザインやアプリアーキテクチャ、バックエンドの一部実装については決まっているものとし、それを元に実装を進めていきます。

SPAについては開発経験が無いことを前提としているため、理解しやすくするためにReactがガイドしている開発ステップに近しくなるように進めていきます。そのため、コンポーネント分割等の一部の設計については進めながら行う内容としています。（Reactのガイドについては事前に読んでおく必要はありません。関連箇所では都度リンクを記載しますので、詳細を確認したい場合はリンク先を確認するようにしてください）

アプリの仕様やアーキテクチャの詳細については、後述します。