読み込み中...
投稿日
サービス開発リファレンスを利用してWebサービスのプロトタイプを開発しました
もくじ
はじめに
Webサービスを含めシステム開発では、フレームワークやライブラリを利用するだけでなく、サンプルやリファレンスを参考に効率的に開発を進めることが通例となっています。
筆者の所属する西日本テクノロジー＆イノベーション室では、2020年9月末にSPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）を公開しました。これは、SPAやREST APIを効率よく開発するためのリファレンスを目指しています。 筆者は、公開前のサービス開発リファレンスを利用してWebサービスのプロトタイプを開発しました。本ブログではその過程を紹介します。
※サービス開発リファレンスはこちらで公開しています → SPA + REST API構成のサービス開発リファレンス
開発案件の概要
社内の他部署より、行政・自治体や金融などに関わるWebサービスのプロトタイプ開発の依頼を受けました。
開発の目的は主に以下の2つでした。
- ユーザーにプロトタイプを通じてサービスを体験してもらいフィードバックをしてもらう
- 構想中のサービスを関係各所へプレゼンテーションする際にプロトタイプでデモンストレーションをしてイメージをつかみやすくする
目的と共に、要件は以下のようなものがありました。
- サービスは外部サービスが提供するAPIを利用する予定ではあるがプロトタイプではこれを実際に呼ぶ必要はない
- ユーザーにサービスの大まかな体験を提供するのが目的なので指定した内容を実装できていればよい
- プロトタイプで対象とした外部サービス以外に利用したい外部サービスをユーザーがプロトタイプ体験中にフィードバックできる
- 管理者がフィードバックを収集できるようにする
ユーザーからのフィードバックを管理者が収集する要件を実装するために、Webサーバーとデータベースで構成される、いわゆるBackendの構築を含めたWebサービスのプロトタイプを開発することにしました。 ちょうどサービス開発リファレンスが組織内に先行公開されたタイミングであったため、評価・フィードバックを目的としてこれを利用することとなりました。
サービス開発リファレンスの内容
サービス開発リファレンスのコンテンツは、以下のもので構成されています。
- SPA/REST APIで開発をする際にリファレンスとして活用できる方式設計ガイド
- 方式のコード例となる実践的なウェブチャットを題材にしたサンプルアプリケーション
- SPAやREST APIの開発が不慣れな方に向けた学習用ハンズオンコンテンツ
サンプルアプリケーションのコンテンツ内には、アプリケーションをローカルで立ち上げるための手順とコードも用意されています。立ち上げに必要な外部サービスはDockerで提供されています。
同じ組織内で開発しているサービス開発リファレンスなのですが、筆者が直接開発に携わっていたわけではなかったため、利用の前にこれらの概要を把握するところからスタートしました。
サービス開発リファレンスの概要を把握する
まず方式設計ガイドに目を通し、次にサンプルアプリケーションのREADMEの手順に沿いローカルでサービスを起動しました。 私の開発環境には開発に必要なソフトウェアが揃っていましたので、立ち上げは数コマンドで完了しました。 開発に必要なソフトウェアが入っていない場合には、各ソフトウェアのページに導入方法が掲載されています。自身の開発環境に合わせてソフトウェアを導入してください。
サンプルアプリケーションの実装コードは、大きくBackend、Frontend、Notifierにわかれています。 Notifierは、WebSocket周辺の機能を提供しています。 プロジェクトではNotifierが提供する機能は使用しない予定でしたのでNotifierの読解はスキップし、Backend→Frontend という順でソースコードを読み進めました。
Backendのコードを読み進めるうえで、Javaでなんらかの開発フレームワークを使ってWebサービスを開発した経験があれば大きな障壁はないような実装となっていました。
FrontendはTypeScriptを用いて記述されたReactで、簡潔かつ短いコードで書かれていました。そのため、私はTypeScriptとReactの開発経験が少ないのですが、つまずくことなくコードを読み進められました。
BackendとFrontendの開発において、筆者のような開発経験がない・少ない方のために、学習用ハンズオンコンテンツが用意されています。これはToDOアプリケーションのハンズオンです。サンプルで実装されているウェブチャットとは異なりますが、サンプルとハンズオンで実装が極力共有されています。ですので、ハンズオンコンテンツを経験いただくと、サンプルアプリケーションが非常に理解しやすくなっています。
ここまででサービス開発リファレンスの内容を大まかに把握しました。サンプルアプリケーションが実装している機能の内の一部を利用・流用すれば、プロトタイプに必要な機能を構築できることが想定できました。ここから開発のベースを作る作業に移行しました。
サービス開発リファレンスのサンプルアプリケーションから本プロジェクト向けの開発のベースを作る
方式設計ガイドとサンプルアプリケーションのコード読んでサンプルの実装を把握し、本プロジェクト開発向けにコードを変更する工程に入りました。
まずはBackend側の変更工程は次のようになりました。
- 不要なライブラリ・コードの削除
使用しないライブラリやコードを削除しました - データモデル周りの変更
サンプルアプリケーションと本プロジェクトではデータモデルがまったく異なるので、この周辺のコードをほとんど削除しました。しかし、初期化などを取り扱う設定などはそのまま利用できました - パッケージ名の変更
各所のパッケージ名を本プロジェクト向けに変更しました
次に、Frontend側の変更工程は次のようになりました。
- 不要なコードの削除
サンプルアプリケーションと本プロジェクトではWebページの内容がまったく異なります。ですので、WebページのReact Componentレベルでは利用できる部分がなく、ほぼすべて削除しました
これで開発のベースができました。Webサービスの開発のベースの立ち上げには、通常ではBackendのWebサーバの設定、BackendとFrontendのAPIの連携の設定、最小限のWebページの用意などが必要になります。開発のベースを作る工程にはこれらの作業は含まれません。これは大きなメリットでした。
本プロジェクト向けの実装
本プロジェクト向けの開発のベースの用意ができたところで、実装に取り掛かりました。
まずBackendの実装です。
データモデル周りや必要なREST APIの追加などをしました。サンプルの実装コードが簡潔で可読性の高いコードであったので参考にしやすく、実装の工数は少なくてすみました。
次にFrontendの実装です。
サンプルアプリケーションでは、Webページを表すReact Componentはボタンなどの再利用可能な部品React Componentから構成されています。この部品React Componentへ本プロジェクト向けの変更を加えていきました。
そして、これを用いてWebページを表すReact Componentをーから構築していきました。
これとは対照的に、ページルーティングを行うReact Componentやコンテキストを扱うReact Componentなどの大部分はそのまま流用できました。これが難しい部分はコードを参考にして実装しました。コードの流用または参考により、実装にかかる工数を減らすことができました。
Backend・Frontendの実装ができたところで、クラウド環境上で稼働させる作業に入りました。
クラウド環境上へデプロイ
サービス開発リファレンスは、クラウド環境上でサービスを展開した時のことも想定されていますが、クラウド環境上へデプロイするコードは含まれていません。 このデプロイコードは独自で用意しました。
さいごに
以上が、サービス開発リファレンスをサービス開発に利用した過程の紹介です。
利用した感想は、サンプルアプリケーションがWebサービスとしての体裁が整っており開発のベースにしやすかったこと、またサンプルのコードが簡潔かつ再利用しやすかったです。結果的に工数低減に繋がった印象があります。
ハンズオンコンテンツの解説が細かいところまで丁寧にケアされている印象があります。ですので、必ず目を通していただく方式設計ガイドとともに、このハンズオンコンテンツの解説も一読されることをおススメします。
本ブログ執筆時点では利用実績が少ないリファレンスです。今後のサービス開発において積極的に利用されることを目指し、フィードバックをもとに、さまざまに拡張していくことが予定されています。
サービス開発リファレンスを利用していただく際に本ブログが参考となれば幸いです。
本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。
