CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

簡単だけど中身は本格派

 K5 Playgroundは、数10分でアプリが作れる簡単さが魅力ですが、それだけではありません。昨今のWebアプリ開発ではフロントエンドが極めて重要な役割を担います。ユーザに優れたUXを提供できるかどうかが、製品・サービスの成否を左右すると言っても過言ではありません。同時に、ユーザのニーズに合わせて頻繁に、かつスピーディに変更することが求められるため、保守性、拡張性が高いアーキテクチャが必要です。

 K5 Playgroundでは、このようなフロントエンド開発を実現するために、ReactおよびFluxを採用しています。Reactは先述のとおり多くの企業で利用されており、小さく堅牢なUI部品を組み合わせて複雑なUIを構成できる点が特長です。Fluxはフロントエンドアプリケーションのためのアーキテクチャで、同名のライブラリも併せて提供されています。

 また、フロントエンドを正しく成長させるためには、開発チーム全員が同じスタイルのコードを書けることが重要です。K5 PlaygroundではそのためにAirbnb社のJavaScriptとReactのコード規約を採用しています。このコード規約は「ESLint」を用いて静的に解析され、規約違反のコードをリストアップできます。さらに、「Prettier」によってコード規約に沿って自動的にコードをフォーマットすることも可能です。定型的で非生産的なコードレビューに、チームメンバーの時間や労力を使う必要はありません。さらに、Facebookが開発したテストフレームワーク「Jest」を採用し、スナップショットテストによってUIの予期せぬ変更を検出するなど、UIの効率的なテストを可能にしています。

 その他にも、フロントエンドが扱う複雑なデータの堅牢性を高める「Immutable.js」や、HTTP通信を簡単に行うための「Axios」など、さまざまな技術を利用しています。BFFでは、WebAPIの仕様をAPI記述言語「Swagger」で管理しており、対話的なAPIドキュメントを自動生成します。また、Swaggerに基づいてHTTPリクエストを検証するため、設計と実装が乖離しません。

 K5 Playgroundでは、こうした技術を採用することで、保守性、拡張性の高いフロントエンドの開発を可能にしています。K5 Playgroundのメリットのひとつは簡単にアプリを作成できることですが、作成したアプリは単なるプロトタイプにとどまらず、プロダクションのサービスとしてリリースすることが可能です。

 実際に、富士通の社内でもReactやFluxをまったく触ったことのないエンジニアやデザイナーが小さく始めたフロントエンドが軌道に乗り、130kステップ(アプリ:50kステップ、テスト:80kステップ)規模にまで成長している例などもあります。

 K5 Playgroundで形にした新しいアイデアは、保守性の高いReactやFluxのアーキテクチャやESLint/Prettier/Jestといった優れたツールの力によって、クリーンなコードやアーキテクチャを保ったまま、優れたアプリへと成長を遂げることができます。

 今回は、クラウドネイティブなWebアプリを知るために、その必要性やアーキテクチャを説明し、誰もが簡単にアプリを開発できるK5 Playgroundの概要を紹介しました。次回は、K5 Playgroundについて使い方等を詳細に紹介します。

K5 Playground 関連リンク



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

バックナンバー

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

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5