はじめに

こんにちは。Webアプリエンジニアの生永です。弊社では、Webアプリエンジニアがバックエンドもフロントエンドも一貫して実装対応をしています。バックエンドは基本的にWebアプリエンジニアしか触ることがありませんが、フロントエンドはデザイナーも実際に実装対応をしています。

今年の頭にFWのメジャーバージョンアップを行い、その中でフロントエンドのVue.jsが2から3になりました。半年近く、触れてみて知見も深まってきたところだったので、改めてWebエンジニアとデザイナーとを巻き込んで知見の共有会を行いました。

そして、知見の共有に併せて、今後フロントエンドの開発はどのようにしていくのが良さそうかを話してみました。

techblog.openwork.co.jp

エンジニアとデザイナーの担当領域は分離できる？

弊社のフロントエンドはレガシーな部分が残っており、jQueryで書かれている部分があります。 DOM要素の操作だけでなく、Webアプリのデータ管理もまとめて記述されており、主にWebアプリエンジニアが実装、修正を担当していました。その名残からVue.jsの大部分の実装をWebアプリエンジニアが担当していました。

Vue.js2まででは特に違和感はありませんでしたが、Vue.js3からCompositionAPIが本格的に使用できるようになり、アプリケーションのデータ管理と画面要素の操作の分離がしやすくなりました。ここで、フロントエンド内でエンジニアとデザイナーの担当領域をファイル単位で明確にできるのでは？と考えてみました。

フロントエンドフレームワークを使いこなしていくにはお互いの知見の相互活用が大切

結論から言うと、今後フロントエンド内でエンジニアとデザイナーの担当領域は分かれないし、分けない方が良さそうと言うことです。このブログのタイトルに対する回答としては「どっちもが一緒に作っていく」になります。

Vue.js3でアプリケーションのデータ管理など状態依存の高度なロジックはコンポーネントの外に持ち出すことができるようになりました。一方でTeleportやSuspenseなどJavaScriptの記述を要さないコンポーネントそのものでできることが増えてきています。これらの扱いを安易にエンジニアとデザイナーで分けてしまうと、コンポーネントの再利用性が下がるなどのデメリットが発生することが予想されます。

コンポーネントを作っていくにあたって、エンジニアとデザイナーの知見をそれぞれ活かしていくことが大切です。 Vue.js3の具体的な機能活用にあたってはエンジニアの知見を、コンポーネントの再利用性を高めるためにはデザイナーの知見をそれぞれ組み合わせることで使いやすく整理されたコンポーネントを作っていくことができます。

ちなみにAtomic Designに則ってコンポーネントを管理することで、エンジニアとデザイナーを完全に分離するという選択肢もありますが、既存のプロダクトにAtomic Designを導入するのはコストが高く、またフロント専門のエンジニアの存在やデザイナーのVue.jsに対する習熟度が高い必要があります。そのため、今回はAtomic Designを導入しない前提で話を進めています。

知見の相互活用のためにはまずは相互理解から

エンジニアが主に大きく手をいれるVue.jsはTeleportやFragmentsなど画面のレイアウトや見た目の管理などデザイナー的な知見を要する機能が提供されるようになっています。今後のバージョンアップでもよりリッチなUX/UIを提供できる機能が盛り込まれることになるでしょう。一方でデザイナーがよく活用しているFigmaもConfig 2023にて発表されたアップデートの内容を見てみるとVariables機能の導入をはじめとしてエンジニア的な知見を要するような機能が入ってきています。

今後のWebアプリケーションのフロントエンド開発では、それぞれの専門性はそのまま（もしくはそれ以上）で、別分野の知見、理解が必要という潮流が来ていそうです。

すぐに両方の知見、理解を一人で取得するのは無理難題です。そこはチームプレーで、エンジニアとデザイナーで協力して知見を相互活用することができます。しかし、知見の相互活用にあたって、それぞれが勝手に「いい感じ」にしてくれるわけではありません。 GitHubのプルリクエストをはじめとして、今回のような知見共有会を活用することでエンジニアとデザイナーが互いにコミュニケーションを欠かさないようにし、エンジニアはデザイナーへの理解、デザイナーはエンジニアへの理解を促進していくことがより良いフロントエンドの構築へのコツになっていきます。

日常的なコミュニケーションや知見共有会のような機会を絶やすことなくデザイナーとエンジニア間で話し合い、互いの知見を持ってより良いフロントエンドを作っていきたいものです。