顧客との接点としてのUX～成功を収めた企業のサービス開発とは
スマートフォンの浸透やスタートアップの活躍により、既存のビジネスモデルやサービスをディスラプトするサービスが日々生まれています。競争が激化する中、企業が成長し生き残るためには、優れたUXにより顧客の心をすばやくつかむことが必要です。そのため、顧客との大きな接点となるフロントエンドの重要性が高まっています。
進化するフロントエンド開発技術
優れたUXの実現に向け、フロントエンドの開発技術は大きく変革しました。
中でも、「React」が注目を集めています。Reactは、Facebookが開発しOSSとして公開したライブラリで、複雑かつ大規模なUIの構築・管理を容易にします。InstagramやNetflixなど、急成長している企業の多くが、優れたUXを追求するために、自社サービスの構築にReactを採用しています。
さらには、コード規約に基づいたコード自動修正や、UIテストを効率化するスナップショットテストなど、生産性を高める手法も続々と登場しています。時代錯誤の技術・手法を使ったままでは、トップ企業と同じ土俵に立つのはもちろん、自社が成長を続けていくことも難しくなります。
PaaSを利用した「クラウドネイティブな開発」が前提
著名なサービスが使用している技術やツールをまとめたStackShare、FounderKit、Sifteryといったサイトがあります。これらを見ると著名なサービスは、多数のPaaSを巧妙に組み合わせて作られていることがわかります。成功した企業の多くは、コモディティ機能には既存の高品質かつ高機能な専用サービスを利用し、ビジネスのコアになる独自機能にリソースを集中的に投入しています。このようにクラウドを活用する「クラウドネイティブな開発」スタイルは、現代の開発者に必須なスキルのひとつとも言えるでしょう。
ユーザの声をもとに「MVP」を繰り返し改善
多くの企業の新規事業や起業の教科書となっている書籍『リーン・スタートアップ』の著者、エリック・リースは、ビジネスのアイデアをMVP（Minimum Viable Product）と呼ばれる必要最小限の機能を持った製品・サービスとして形にし、利用状況とユーザの声をもとに改善サイクルを回すことを提唱しています。顧客の心をとらえるためには、アイデアをすぐ形にできるスピーディな開発が必要です。実際の開発現場でも、新規企画をプロトタイプとともに提案したり、デモを数日で作ったりするシーンが増えているのではないでしょうか。そういった場合には、リーン・スタートアップの考え方が重要になります。
成功企業に学ぶ、時代をつかむ開発
こういった時代に、エンジニアはどんな開発を目指せばよいでしょうか。PaaSを組み合わせてスピーディにMVPを開発し、改善サイクルを回しながら優れたUXのフロントエンドを実現する。これがひとつの答えです。
本連載では、先述のような最新のフロントエンド技術を用いた本格的なWebアプリを、フロントエンド分野の初心者でも数10分～数時間で開発できるようにすることが目標です。以上を踏まえて、まずはWebアプリの基本を見ていきましょう。
Webアプリの基本原則～The Twelve-Factor App
開発者が作るべきWebアプリとはどのようなものでしょうか。その基本となるのがThe Twelve-Factor Appです。2012年、PaaSベンダーHerokuのエンジニアが、数多くのクラウドアプリを開発・デプロイ・サポートして得た知見をもとに、現代のWebアプリが従うべき12の基本原則を提唱しました。The Twelve-Factor Appは、この原則に沿って開発されたアプリのことであり、「クラウドネイティブなアプリ」の代名詞とも言われます。2016年にはPivotalのアーキテクトがこれを増補し、APIファーストをはじめ3条件を加えたBeyond the Twelve-Factor Appを提唱するなど、この思想の重要性はクラウドの発展とともに高まり続けています。
The Twelve-Factor App
- コードベース（Codebase）
- 依存関係（Dependencies）
- 設定（Config）
- バックエンドサービス（Backend services）
- ビルド、リリース、実行（Build、release、run）
- プロセス（Processes）
- ポートバインディング（Port binding）
- 並行性（Concurrency）
- 廃棄容易性（Disposability）
- 開発／本番の一致（Dev/prod parity）
- ログ（Logs）
- 管理プロセス（Admin processes）
The Twelve-Factor Appでは、アプリは安全に再起動できるステートレスなプロセスを基本単位として実装し、ポートを唯一のインターフェイスとして公開します（6. プロセス、7. ポートバインディング、9. 廃棄容易性、11. ログ）。プロセスは機能単位で分離して相互に独立させます（8. 並行性）。データベース等のアプリに必要な汎用機能には、容易に交換でき明確なインターフェイスを持つサービスを利用します（4. バックエンドサービス）。アプリのコードは、依存関係や設定を明確化したうえで、GitHubなどで一元管理し（1. コードベース、2. 依存関係、3. 設定）、CI/CDツールで構築やデプロイを自動化できるようにします（5. ビルド、リリース、実行、12. 管理プロセス）。これらを遵守することで、堅牢性・保守性の高いアプリの実現や容易な環境構築が実現します。
PaaSで簡単にThe Twelve-Factor Appを実現する
以上を踏まえて開発に取り組むとき、便利なのがHeroku、Cloud Foundry、Google App EngineといったPaaS基盤です。これらのPaaSは、Webアプリのコードをデプロイするだけで、適切なコンテナを生成し、必要なライブラリをインストールしたうえでインターネットに公開します。開発者が集中すべきことは、Webアプリを開発することです。開発者はインフラの構築・運用という作業から解放され、サービスのコアとなるコードの実装に専念できます。
富士通はクラウドサービス「K5」で、The Twelve-Factor AppやBeyond the Twelve Factor Appを支えるサービス群を提供しています。アプリ実行基盤「Cloud Foundry」、コードやイシューを管理する「GitHub Enterprise」、Apigee社のAPIゲートウェイ「Apigee Edge」、Akamai社の「CDNサービス」など、開発者にポピュラーなサービスをマネージドサービスとして提供しています。今後は、OSSのコンテナ管理基盤Kubernetesでコンテナ管理を行う「コンテナサービス（仮）」、ステートレスな関数がイベントドリブンに処理を実行する「FaaS（仮）」なども提供する予定です。
Webアプリの変遷
The Twelve-Factor AppがWebアプリの基本原則であることはわかりましたが、具体的なアーキテクチャはどうすればよいでしょうか。歴史を簡単に振り返ることで、これから作るべきWebアプリの構成を洗い出します。
1990年代半ば～ ブラウザ＋モノリシックなWebアプリ
かつてのWebアプリはモノリシックなアーキテクチャで、ブラウザ向けに静的なHTMLを返す形でした。サーバサイドのフレームワークやアプリ内の設計が重要で、始めた当初は問題なくても、日夜コードが肥大化し保守や改善に苦しんだことも多いのではないでしょうか。
2007年～ ネイティブアプリ＋モノリシックなAPIサーバ
2007年にiPhoneが発売されるとスマートフォンが急激に普及し、企業や個人がWebアプリよりもネイティブアプリを先に提供する「モバイルファースト時代」が到来しました。ネイティブアプリのバックエンドは、WebAPIがJSONを返す構成が基本です。WebAPIの重要性は高まり、WebAPIを中心にビジネスを行う企業も登場、後には「APIエコノミー」という言葉も生まれました。
2007年～ SPA＋モノリシックなAPIサーバ
ユーザが優れたUXを追い求めてネイティブアプリを好む時代になると、Webアプリの立場は苦しくなります。Webブラウザ向けにHTMLを返すバックエンドとスマートフォン向けにJSONを返すバックエンドの並行開発も重荷となりました。
こうした課題を解決するべく登場し、人気を博したのがSPA（Simple Page Application）です。SPAは、初めに単一のHTML（Single Page）をロードし、その後はJavaScriptがバックエンドのWebAPIからJSONを取得してビューを生成します。バックエンドから返されるデータが軽量なJSONに変化したことで、レスポンスの高速化が実現したほか、JavaScriptによって高度に動的なUXの実現が容易になりました。フロントエンドがバックエンドから分離され、フロントエンドの開発サイクルを回しやすくなったことも相当な収穫です。
SPAによりWebのUXは高度になったうえ、2015年にはサービスワーカーによってプッシュ通知やキャッシングを行い、さらにネイティブアプリに近いUXを目指すPWA（Progressive Web App）といった概念も生まれました。
2011年～ マイクロサービスの登場
フロントエンドから分離されたバックエンドは、もはやモノリシックである必要はありません。単一のバックエンドは、少しの機能を追加するにも既存の巨大なアプリに対する影響範囲を調査し、苦労して新しいコードを追加、全体をテストしてビルドしてデプロイして、……と相当な手間がかかります。Netflix社は以前、起動に40分もかかる、Java製の巨大なモノリシックバックエンドに苦労させられていました。
こうした状況で人気を博したのが、マイクロサービスパターンです。担当するサービスやインターフェイスが明確な単機能のマイクロサービスを組み合わせてシステムを構成する設計です。これは、The Twelve-Factor Appの「4. バックエンドサービス」「6. プロセス」「7. ポートバインディング」「8. 並行性」等とも関連します。
各マイクロサービスは、任意の言語やフレームワークを柔軟に選定できます。例えば、機械学習にはライブラリが豊富なPython、新機能にはパッケージの豊富なNode.jsなど、機能ごとに適切な技術を選定できるのでサービスと開発組織の関係性も柔軟性を増し、サービスや組織がスケールするようにもなりました。
現在のトレンドは？ フロントエンドとバックエンドをつなぐBFFの登場
Webアプリのアーキテクチャはこのような変遷を重ね、フロントエンドはSPA、バックエンドはマイクロサービスを中心に据えた開発が主流になります。しかし、課題もありました。マイクロサービス化が進むほどフロントエンドにとっては煩雑で扱いづらいアーキテクチャになってしまいます。そこで、バックエンドとフロントエンドをつなぐ「BFF（Backend For Frontends）」が生まれたのです。
SPAとBFFが現代のWebアプリ開発の最適解
2015年頃からBFF（Backend For Frontends）という「フロントエンドのためのバックエンド」という概念が提唱されます。BFFは、APIオーケストレーションの一種であり、フロントエンドとバックエンドの間に立って仲介します。一般的なAPIオーケストレーションと異なるのは明確にフロントエンドを意識していることで、APIのトランザクション集約やCORS（Cross-Origin Resource Sharing）対応やフロントエンドには扱いづらいプロトコルの仲介を行うなどして、フロントエンドが扱いやすいJSONを提供します。SEO対策のワークアラウンド的なSSR（Server Side Rendering）を担うケースもあります。
BFFがあることで、バックエンドも個別のフロントエンドの要求に過剰に影響されず、安心して美しいマイクロサービスの設計を追求できます。
SPA＋BFFは、「現状のWebアプリ開発のベストプラクティスのひとつ」と言えます。実際に2017年には、Twitter社がモバイルのWebアプリをReactのSPAとNode.jsのBFFによって再開発し、UXを大きく改善したことが話題になりました。さまざまなサービスが現在進行形でこうしたアーキテクチャに生まれ変わっています。
これからWebアプリを開発する人はどうしたらよいでしょうか。冒頭にも述べたとおり、フロントエンドの開発技術は日々進歩しており、特に初心者は何から始めてよいか戸惑ってしまうことでしょう。「時間がかかるならいいや」と開発を諦めてしまう人もいるかもしれません。自信のある開発者でも新しいことを始める場合は、重要な要素を見落として道を踏み外すこともあります。
SPAとBFFを誰でもすぐに始められるK5 Playground
富士通は、SPAとBFFをWebブラウザ上で作ってダウンロードできるサービスとして「K5 Playground」を始めました。Webブラウザさえあれば誰でも無償で始めることができます。Raspberry PiやArduinoには、初学者が簡単に開発を始められるよう本体にさまざまな部品と簡単な入門書が同梱されたスターターキットがありますが、そのWebアプリ版の位置付けです。入門書に当たるものとして、アプリ開発のレシピサイト「K5 Showcase」も用意しました。
典型的なUIパターンをReactとFluxで実装して提供
K5 Playgroundでは、さまざまなサービスの分析結果から頻出するUIの構造を抽出し、Reactと「Flux（UI構築のためのアーキテクチャ）」を用いたSPAとして実装しています。異なる目的のサービスであってもUIの基本構造は類似しているケースが多く、よく使うパターンをテンプレート化しています。
現在は、カードUIや地図、チャット、ダッシュボード、カメラなど7種類のテンプレートがあり、これらのSPAは、Webブラウザ上でカスタマイズできます。UI部品のカラーテーマやフォントはK5 Playground上の左セクションにある「Theme」のドロップダウンリストで、UI部品やレイアウトは右セクションのUI内部の「EDIT」ボタンをクリックすることで交換できます。
マイクロサービス連携ロジックを組み合わせてBFFを開発
BFFは、さまざまなマイクロサービスを集約してSPAに提供します。K5 Playgroundでは、RDB、NoSQL、メール・SMS、LINE、Slack、IFTTT、Twitter、Instagram、YouTubeなどのサービスと連携するための「APIロジック」を約70種類用意しています。APIロジックを一覧からドラッグ＆ドロップして組み合わせることで、独自の処理をスピーディに作成できます。
料理のようにWebアプリ開発を～K5 Showcase
初めての料理を作るときは、「クックパッド」などのインターネットのレシピサイトを参照するでしょう。K5 Showcaseは、そうした料理のレシピサイトのアプリ開発版で、アプリの概要とともに開発に必要な時間や具体的な手順を掲載しています。
初心者は、「何から手をつけてよいかわからない」「手順がわからない」といった状況に陥りがちです。こういった悩みを解決し、「誰でも」「等しく」「簡単に」アプリ開発を完了できるようにすることが、K5 Showcaseの役割です。K5 Showcaseのレシピをもとに基本的なアプリ開発をマスターした後は、バリエーションを加えてオリジナル料理を作るように、自由に機能を追加して自分好みのアプリに育ててみましょう。
現在は、LINEやFacebook Messenger用のチャットボット、Slackなど特定サービスの管理ダッシュボード、画像認識機能付きのアルバムアプリなど、20分から1時間程度で作れる学習用のWebアプリのレシピを約10種類提供しており、今後も追加していきます。現在は英語のみの提供ですが、2018年1月には日本語化を予定しています。
簡単だけど中身は本格派
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について使い方等を詳細に紹介します。
