簡単だけど中身は本格派
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について使い方等を詳細に紹介します。
