Webブラウザで「SPA＋BFF」アプリを30分で作成！ スピーディな開発の味方「K5 Playground」を使ってみよう

アイデアをすぐ形に！ K5 Playgroundで開発するクラウドネイティブな最新Webアプリ 第2回

　本連載ではクラウドネイティブなWebアプリを手軽に、短時間で作りたい方を対象に、Webアプリ開発の最新事情と最適なツールを紹介します。第1回では、フロントエンドの重要性やWebアプリのアーキテクチャの変遷を見てきました。第2回となる本記事では、前半でSPA＋BFFアプリを手軽に開発できる無償サービス「K5 Playground」の使い方を解説し、後半ではアプリ開発のレシピ集「K5 Showcase」を参考に、K5 Playgroundの活用ポイントを紹介します。

• 第1回 トレンドは優れたUXとSPA・BFF！ 急成長企業の最新フロントエンド開発を体験しよう

SPA＋BFFアプリ開発を手軽に始められるK5 Playground

　K5 Playgroundは、フロントエンド初心者でも短時間でアプリを開発できるサービスです。

　Webブラウザ上で、無償で体験することができます。連載の第1回でK5 Playgroundでは、クラウドを活用したSingle Page Application（SPA）とBackend For Frontends（BFF）を作れるスターターキットであることを手短に紹介しました。

　まずは、K5 PlaygroundのSPAとBFFがどういったものなのかを、軽く振り返ってみましょう。

K5 PlaygroundのSPA

　地図、チャット、ダッシュボード、一覧詳細形式など、Webアプリに頻出するUIパターンをテンプレートとして用意しています。

　技術面では、これらのSPAはReactとFluxによって実装されています。ReactとはFacebook製のUIを作るためのエンジンで、Fluxも同じくFacebookが提唱したUI構築のためのアーキテクチャです。近年これらが、多数のサービスのフロントエンドで使われていることを前回の記事で紹介しました。

　また、テンプレートに加えて、Babel、Webpack、ESLint、Prettier、JestといったSPAを開発する際に必要になってくる多数のツール群も、設定済みの状態で同梱されているので、一から準備する手間を省けます。

K5 PlaygroundのBFF

　BFFとは、さまざまなマイクロサービスのトランザクションを集約するフロントエンドのためのバックエンドです。K5 PlaygroundではBFFを短時間で開発できるように、APIロジックと呼ばれるマイクロサービスと連携する部品を80種類ほど用意しています。

　これを組み合わせてBFFを作ります。BFFはNode.jsで最も有名と思われるWebアプリケーションフレームワーク「Express」をベースとしたWebAPIサーバです。

　K5 Playgroundは、こうしたSPAとBFFとマイクロサービスを組み合わせたWebアプリケーションをスピーディに作るためのスターターキットです。ゼロからこれらを開発するとしたら相当な労力と時間がかかり、途中で挫折してしまう人もいると思います。一方K5 Playgroundを使えば数10分〜数時間で、誰でも同じように完成まで到達できます。

3ステップでアプリを開発

　では、K5 Playgroundでは実際どのようにアプリを開発するのでしょうか。次の3ステップがK5 Playgroundにおけるアプリ開発の流れです。

①フロントエンド（SPA）の編集

　作りたいアプリに近いテンプレートを選択して、カスタマイズします。

②バックエンド（BFF）の編集

　バックエンドのWebAPIが呼びだされた時の処理をカスタマイズします。用意されたAPIロジックを組み合わせて処理を作成します。

③アプリのダウンロード

　作成したアプリをダウンロードして、ローカル環境やクラウドで起動します。

3ステップでアプリ開発が可能

　さて、大雑把な流れがわかったところで、K5 Playgroundをもう少し詳しく見てみましょう。