BFFに取り組む開発者たちが語る「UIT#3 The “Backends for Frontends” sharing」

Shoyo Kyo2018-06-26

Front-end Engineer

こんにちは！ UIT室フロントエンド開発1チームの姜勝陽（kyo shoyo）です。

2018年6月7日にLINE株式会社で開催されたフロントエンドエンジニアのイベント「UIT#3 The “Backends for Frontends” sharing」にスタッフとして参加してきました。今回は、UITのMeetupイベントの紹介と参加レポートを皆様にお届けします。

UITとは？

User Interface + Technology の頭文字を取って私たちはいわゆるフロントエンド開発のことをUITと呼んでいます。
私たちにとって重要なことは、エンジニアとして探究心をもって技術に取り組み、その知見をより良いUIをユーザーに提供する為に活かすことです。

このコミュニティはLINE株式会社でフロントエンド開発に携わるチームの有志によって運営されています。

引用: connpass UITグループ

UITはフロントエンド開発を軸に様々な技術領域について情報交換をおこなう開発者コミュニティです。
"フロントエンドエンジニアが気楽に集まり交流できる場を提供すること"を目的に様々な活動をおこなっています。定期的にMeetupイベントを開催しており、今回が3回目の開催でした。

2017年12月に"年忘れLT大会"というテーマで開催された、UIT#1 フロントエンドふりかえり 2017。

2018年3月に" 開発環境、ツール、プロセスなどについて、語り合う会"というテーマで開催された、UIT#2 怠けるために努力を惜しまないプロのフロントエンドエンジニアたち。

そして、3回目のテーマは。。。

3回目の開催テーマはBFF（Backends for Frontends）

2018年6月開催の3回目UIT Meetupイベントのテーマは、”Backends for Frontends”。略してBFFです。BFFの印象が強い、あの会社のあのエンジニアさんたちが集まり、実際のプロジェクトでの体験談や感想などを発表してくださいました。

今回は会場の入口で、UITのロゴを使ったオリジナルステッカーを皆様に配布。あと、登壇者の方々には通称"UITシャツ"がプレゼントされ、UITシャツを着ながら登壇されてる方も多かったです。ちなみに、当日手伝いをしているスタッフメンバーも着用していました。

BFFとは？

Backends for FrontendsはBFFという略称で呼ばれている、アーキテクチャ設計の一つです。

近年、アプリ開発分野、Web開発分野で"マイクロサービス"と呼ばれる、アーキテクチャの導入が増えています。特定のリソースを扱うのに特化したAPIサーバをリソースごとに配置し、アプリにデータを提供するアーキテクチャです。

しかし、IOSアプリ、Androidアプリ開発の際にAPIサーバが多いことで、データー取得の複雑化が課題となりました。そこで、APIサーバーの仲介役を引き受けるサーバーゲートウェイを用意したのが、"Backends for Frontends"というアーキテクチャの始まりと言われています。

フロントエンドエンジニアから見るBFF

ここ近年、フロントエンド開発は大きな進化を遂げており、SPA（Single Page Application）を使った構築が一般的となっています。それにより、Webサービスの構築方法に変化が生じました。

旧来	サーバーサイド：　アプリケーションを構築 JavaScript：　インタラクティブな処理の補助
SPA構築	サーバーサイド：　APIでデータを提供 JavaScript：　アプリケーション構築

そのため、フロントエンドエンジニア、サーバーサイドエンジニアの役割も大きく変わりました。しかし、SPAを使った構築手法は発展途上と言えます。ページの初回表示のパフォーマンスやSEO、よりユーザーに提供する画面に合わせたAPI Responseを生成する等、フロントエンドのみでは実現が難しい課題がでてきました。その解決の為にBFFの導入が行われるようになりました。

フロントエンド開発向けの機能とAPI仲介機能を持たせたサーバーを用意してサービスを構築。フロントエンド作業の範囲を広げることで、メンテナンス性の向上や、JavaScript側のビジネスロジックの簡素化、Server Side Renderingを用いたSEO等の問題を解決へ導きます。

発表の様子

恒例となっている、ビールを片手に乾杯からイベントがスタート。
会場説明とオープニングトークはLINE株式会社の@kawasakoさん。笑いありドキドキありのトークで和やかなムードではじまりました。

マイクロサービスの思想から捉える、Backends for Frontendsとその類似パターン

最初のセッションは株式会社FiNCのqsonaさん。
ヘルスケア領域でサービスを展開し、多くのマイクロサービスを持つFiNCで取り組まれているBFFについて説明されました。

今回のセッションのより詳細な情報は、マイクロサービスの思想から捉える Backends for Frontendsとその類似パターン – FiNC Engineering Blog – Medium で公開されていますので、是非ご覧ください。

FOLIOのBFFと秩序の話

続いてのセッションは、株式会社FOLIOのQuramyさん。
オンライン証券サービスFOLIOで取り組まれているBFFのお話と、開発時期の異なるBFF運用した際の経験談について説明されました。

merpay Frontend における BFF

続いてのセッションは、株式会社メルペイ @1000chさん。
merpay のフロントエンド開発で取り組んでいるBFFについて説明されました。

なぜBFFを導入しなかったのか

続いてのセッションは、Wantedly, incのKento Moriwakiさん。
wantedly,Inc.会社ページリニューアルプロジェクトでBFF導入を検討した際の経験談と、課題対応の為に取り組んだことについて説明されました。

LINEとBFFの話

続いてのセッションは、LINE株式会社 Jun さん。
BFFはサービス構築プロセスに大きな影響を与える取り組みです。LINEのサービスでBFFに取り組んだ経験を基に「どのような提案が適切か」「社内普及させる為にどうすればよいのか」等のプロジェクト導入方法論が説明されました。

BFFアンチパターン

最後は、@yosuke_furukawaさん。
BFFを2年間実践して実際に陥ったアンチパターンの数々が紹介されました。「システムアーキテクチャと組織設計は本質的には同じものである」の1文が印象的でした。

懇親会の様子

懇親会も多くの方が集まり賑わっていました。約1時間30分ほどの時間でしたが、会場内は終始和やかな雰囲気で、BFFや最近のフロントエンド技術についての熱い想いを参加者の皆さんが共有していました。22:30にイベントは閉幕しましたが、皆さん語りたりない様子で、私個人もあと2〜3時間は懇親会を楽しみたいなと思いました。私もスタッフとして今回のイベントのお手伝いをさせていただきましたが、次のイベントもフロントエンドエンジニアが楽しく集まり語り合える場にしたいです。

次回の4回目の開催準備も進めていますので、次回のUIT Meetupイベントも是非足を運んでいただければと思います。

なおLINE株式会社では、様々なサービスにてフロントエンドエンジニアを募集しています。ご興味がある方は、以下の各職種をご覧ください。

・フロントエンドエンジニア
・フロントエンドエンジニア(Fintech)【LINE Financial】
・ブリッジエンジニア（フロントエンド）
・フロントエンドエンジニア【京都オフィス】