SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ(PR)

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

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

  • このエントリーをはてなブックマークに追加

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

  • このエントリーをはてなブックマークに追加

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はReactFluxによって実装されています。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ステップでアプリ開発が可能★確認お願いします:公式サイトの図 流用可能ですか?★
3ステップでアプリ開発が可能

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

次のページ
K5 Playgroundを始めてみよう

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
アイデアをすぐ形に! K5 Playgroundで開発するクラウドネイティブな最新Webアプリ連載記事一覧

もっと読む

この記事の著者

藤田 壮吉(富士通株式会社)(フジタソウキチ)

 富士通株式会社に入社後、会計ERP、機械学習、WebAPI、フロントエンド関連の開発に従事。企画・開発・教育・講演まで幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10635 2018/02/20 14:44

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング