SHOEISHA iD

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

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

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

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

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

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

簡単だけど中身は本格派

 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 関連リンク

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

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

もっと読む

この記事の著者

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

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング