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ロジックを組み合わせて処理を作成します。
③アプリのダウンロード
作成したアプリをダウンロードして、ローカル環境やクラウドで起動します。
さて、大雑把な流れがわかったところで、K5 Playgroundをもう少し詳しく見てみましょう。
