はじめに

こんにちは。西日本テクノロジー＆イノベーション室の奥田です。
私は19年度に入社した新人エンジニアで、これまでにHTMLとCSS、Reactなどの技術を使って画面を実装した経験があります。

とある短納期開発案件で、デザイナーとエンジニアが協業して開発する機会がありました。
そこに私はフロントエンドエンジニアとして参画し、デザイナーから受け取ったデザインを元に画面レイアウトを作成するタスクを担当しました。

その際に得たデザイナーとエンジニア間のコミュニケーション方法に関するTIPSは【デザイナー＆エンジニア協業で得たTIPS】にまとめています。
この記事では、その開発の際にエンジニアサイドで得たTIPSや感想をお伝えしたいと思います。

背景

システム

  • 経営のシミュレーションシステム
  • 特徴：一画面での入力/表示項目が多い
  • 工期：一ヵ月の短納期開発

開発規模

  • 体制：デザイナー1人, 機能設計者1人, フロントエンドエンジニア2人, バックエンドエンジニア1人
  • 画面数：7画面

フロントエンド開発の流れ

  • デザイナーが設計書に基づき画面をデザインする
  • その後、機能設計者と打ち合わせをしてデザインを精緻化
  • エンジニアがデザイン受け取り、デザインをHTML/CSSに変換する
  • エンジニアがデザインに基づきモックアップを実装する（モックアップ：実機能のない試作品のこと）
    ※この作業開始時点でフロントエンド技術未選定
  • モックアップ完成後、フロントエンジニアがサーバー通信や計算処理などの機能を実装していく

TIPS: それぞれの得意分野で開発する！

本章では、デザインをHTML/CSSに変換した際に得た知見を紹介していきます。

前章の「フロントエンド開発の流れ」でも述べたように、今回はこのプロジェクト特有の事情によりフロントエンド技術の選定がされていない状態で、デザインからモックアップを作り始める必要がありました。
そのため、厳密には以下のようなプロセスで開発を進めました。

  • デザインを一度HTML/CSSに変換（新人エンジニアの私が主担当）
  • フロントエンド技術を選定
  • その技術へHTML/CSSを移行してモックアップを作成

デザインをHTML/CSSに変換する作業中、「今回はプロジェクトの事情で仕方ないけれど、フロントエンド技術の経験者がモックアップを実装するときは、はじめからその技術で実装する方が速いのでは」と思っていました。
しかし、後にもう一人のフロントエンジニアに伺ったところ「デザインをHTML/CSSに変換しておけば、Angularのテンプレートに貼るだけでモックアップが完成する。HTML/CSSが苦手な私が一から開発するよりも速かった」とのことでした。

一言でフロントエンジニアと言っても、「AngularやReactなどの技術が得意！」だったり「HTMLやCSSでビジュアルを作るのが得意！」だったりとフロンエンドの中でも更に得意分野が分かれることが分かりました。
それぞれのエンジニアの得意分野で分担して進めることが開発時間短縮のための良い方法の一つであると学びました。

一方で反省点は、AngularやReactなら簡単に実装できるインタラクティブな画面動作を、CSSやJavaScriptで時間をかけて実装してしまった点です。
「どの動きをHTML/CSSで実装するのか？」「いっそ一律動きのないデザインのみに留めるか？」などを、作業開始前に予め決めてから始めるべきだったと思います。

TIPS: コピペだけでモックアップを作りたい！

本章では、デザインをHTML/CSSへ変換したものをクライアントサイド技術（今回はAngular）に移行する際に得た知見を紹介していきます。

フロントエンド技術選定の結果、本案件ではAngularを採用しました。
AngularはHTMLとCSS、JavaScriptを別ファイルに分けて構成することができます。
また、AngularのHTMLやCSSの記法は一見すると一般的な記法と大差がありません。
そのため、変換したHTMLとCSSを次のようにそのままAngularのファイルにコピー＆ペーストするだけで移行作業が完了し、動きのないモックアップを作成できます。

次のソースコードは、Angularに移行する前のHTMLとCSSです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="sample.css">
    <title>beer-detail</title>
</head>
<body>

<div class="contents">
    <div class="parent">
        <div class="child">
            <div class="title">
                Login
            </div>
            <input placeholder="ID" type="number" />
            <br />
            <input placeholder="Password" type="password" />
            <br />
            <input type="submit" value="Submit" />
        </div>
    </div>
</div>
</body>
</html>
.contents {
  width: 100%;
  height: auto;
  background-color: dodgerblue;
  color: white;
  padding-top: 50px;
  padding-left: 50px;
  padding-bottom: 50px;
  white-space: nowrap;
}
.parent { 
  padding-left: 500px;
} 
.child {
  text-align: left;
  display: inline-block;
  text-decoration: none;
  color: orange;
}
.title {
  padding-bottom: 50px;
  font-size: 22px;
}
.errorMessage {
  padding-top: 10px;
  padding-left: 130px;
  float: right;
  color: red;
}

そしてここに、エラーメッセージの表示やトーストなどの動きのあるデザインをAngularの機能を使って実装することで、動きのあるモックアップが完成します。

<div class="contents">
    <form [formGroup]="loginForm">
        <div class="parent">
            <div class="child">
            <div class="title">
                Login
            </div>
            <app-input formControlName="username" type="text" placeholder="ID"></app-input>
            <br />
            <app-input formControlName="password" type="password" placeholder="Password"></app-input>
            <div class="paddingBottom" (click)="login()">
                <button class="submit" [disabled]="this.loginForm.invalid">
                Submit
                </button>
            </div>
            <div class="errorMessage" *ngIf="hasError">
                IDまたはPasswordが違います
            </div>
            </div>
        </div>
    </form>
</div>
・
・
・
export class LoginPage implements OnInit {
  loginForm: FormGroup;
  hasError = false;

  login() {
    const form = this.loginForm.value;
    if (form) {
        return;
    } else {
        hasError = true;
    }
  }
}

先述の通り、それぞれのエンジニアが得意分野で開発することによって、デザインをHTML/CSSに変換する作業はモックアップ作成時間短縮につながりました。
ですが、もしそのHTML/CSSをクライアントサイド技術独特のHTML/CSS記法に変換する必要があれば、デザインを一度変換する作業はモックアップ作成時間短縮に最大限貢献することはできません。
ですからモックアップ作成時間短縮を目的としてデザインをHTML/CSSへ変換する作業を行うなら、それらをクライアントサイド技術へ「コピー＆ペーストだけで移行できる」というのが理想です。

AngularはHTMLとCSSを別ファイルに分けて構成することが可能で、かつHTMLとCSSは一見一般的な記法と大差がないという特徴がありました。
その特徴ゆえにHTMLとCSSを移行するだけで動きのないデザインのモックアップが完成するため、この移行作業に向いているということが分かりました。

おわりに&感想

デザイン変換後のHTML/CSSを移行した際の知見をAngularにフォーカスして紹介しましたが、「Angularが一番いい！」という結論を下したいわけではありません。
今回のHTML/CSSを移行するクライアントサイド技術はAngularでしたが、今後はReactやVue.jsなどでモックアップを実装してみて、それぞれの比較ができたら面白そうだなと思っています！

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。