はじめに
仕事でSPA開発のプロジェクトに携わることになり、概要レベルぐらいの知識はつけておきたい、ということでSPA開発のハンズオンをやってみたので、同じように学習しようとしている人に向けて情報を共有したいと思います。
なお、この記事では初心者向けのハンズオンをやってみた結果の共有を目的としているので、SPAとは、とかReactとは、といった用語説明は割愛させていただいています。
学習したい技術
・SPA
・React（Type Script）
・REST API
ちなみに、私はSPAもReactも初心者でしたので、同様の初心者レベルの人でも問題ないと思います。
ハンズオンの内容
・大手SIerのTIS社が、SPA開発のハンズオンを無料で公開してくれているので、それを活用します。
SPA + REST API構成のハンズオン
SPAやREST APIの開発が不慣れな方のためにハンズオンコンテンツを用意しました。 テキストを読みながらコーディングをすることで学べるようになっていますので、プロジェクトへの新規メンバー参入時などに是非ともご活用ください。
・ToDoリストを管理するためのアプリを作成するハンズオンです。
・ToDoアプリは、フロントエンドをSPA、バックエンドをREST APIで構成します。
・SPAの実装にはReactとTypeScriptを、REST APIの実装にはNablarchを使用します。
なお、Nablarch(ナブラーク)は、TISが提供するJavaアプリケーションフレームワークですが、Springと同じようなものなのでSPA開発を体験する上では気にしなくてOKです。
ハンズオンの所要時間
大きく4つに分かれており、演習問題もあったりするのでそれないのボリュームがあります。
基本的に実装サンプルがあるので、コードをぺたぺたと貼り付けながら動作を確認して雰囲気を味わうだけならば1日で終わるボリュームです。
実装の説明を読み込んでいくと、2日ぐらいかかるかもしれません。
| No | タイトル | 所要時間 |
|---|---|---|
| 1 | 開発環境の準備 | 1時間ぐらい |
| 2 | スタータープロジェクトの初期動作確認 | 1時間ぐらい |
| 3 | ToDoの登録〜参照機能の実装（フロントエンド） | 2時間ぐらい |
| 4 | ToDoの登録〜参照機能の実装（バックエンド） | 2時間ぐらい |
| 5 | ToDoの削除（演習問題） | 2時間ぐらい |
| 6 | ユーザー認証の実装 | 2時間ぐらい |
ハンズオン アプリの仕様
画面構成
最終的な画面構成は、ログインを踏まえた画面遷移になります。
画面レイアウト
ハンズオンをやってみての所感
実際にやってみて結構勉強になりました。
・解説→実装サンプル→動作確認という流れが細かく切られており、エラー箇所を特定しやすい。（例えば、最後にまとめての動作確認だとエラー箇所の特定にも時間がかかってしまうが、このハンズオンはこまめに動作確認ができるので、エラー箇所を特定しやすい）
・実装サンプルを貼り付けて動かすだけなら数時間で終わるので、せっかちな人でも取り組みやすい。
・一方で、演習問題や認証機能などのステップアップもありので腰を据えての学習もできる。
・SIerが公開しているハンズオンなので現場の実践的な内容になっている。
・2020年にハンズオンが公開されてからも、こまめにメンテナンスされている。
といった感じで、1日あればざっくりとした内容が分かるようになっており、時間をかけて解説を読んだり、演習問題に取り組んでいけば、その学習量に比例して基礎的な知識が学べるようになっているようにと感じました。
参考：ハンズオンで少し苦戦したところ
基本的に教材に書かれている実装を貼り付ければ動くのですが、一部エラーが出たりするところもあったので情報共有しておきます
1. Mavenインストール
初歩的なところかと思いますが、Mavenってどうやってインストールするんだっけ？と調べたのでメモを残しておきます。
ハンズオンの教材に記載されているURLからファイルをダウンロードして、適当な場所に展開します。（今回は/User/ユーザ名の配下に展開しました）
その後、以下のコマンドで設定できました。(Bashの場合は~/.zshrcではなく、~/.bashrcになる)
$ cat << EOF >> ~/.zshrc
export PATH=$PATH:~/apache-maven-3.9.6/bin
EOF
$ . ~/.zshrc
インストールを確認します。
mvn -version
Apache Maven 3.6.3 (cecedd343002696d0abb50b32b541b8a6ba2883f)
2. バックエンドの初期動作確認
バックエンドの初期動作確認で、dockerを立ち上げようとしたときにRestartingのままUPにならなかった（つまり起動しない）ので、その対処法を以下にメモしました。ご参考まで。
（dockerエラー）postgres:12で「popen failure: Cannot allocate memory」
3. REST APIの作成／TodosActionクラスへ追加
TodosAction.javaに以下の追加が必要でした。
import javax.validation.constraints.NotNull;
import javax.ws.rs.*;
4. REST APIのテスト／Bean Validationエラーのテスト作成
TodoRegisterRestApiTest.java に以下の追加が必要でした。
import java.util.Collections;
さいごに
今回は自身のSPA開発の学習で用いたTIS社のハンズオンを紹介しました。
TIS社のハンズオンは無料にも関わらず、ドキュメントや演習問題も充実していて非常に勉強になったと思います。
同じようにSPAやReactを勉強したいと思っている方はぜひどうぞ。