システム導入のための意思決定サイト

新・ITエンジニア図鑑

作ることに勝る勉強法はない、フロントエンドエンジニア

2017/10/16 島田優子=日経SYSTEMS
森側真一=日経SYSTEMS

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

Webブラウザーで動作するフロントエンドアプリの開発に特化したフロントエンドエンジニア。HTML/JavaScriptでアプリ的な動きが求められるようになり、重要性が増している。Webブラウザーの機能を理解する必要がある。

 リクルートのサービスの開発でテックリード(技術アドバイザー)を務める古川陽介氏。昨年末に開始したプロジェクトではフロントエンドチーム4人の開発リーダーを担った。市場調査のサービス内で、チャットをWebで実現する高機能なフロントエンドを開発。スタートから4カ月でカットオーバーした。

 このプロジェクトでは、サーバー側とフロントエンド側でチームを分けた。サーバー側はAPIを用意し、フロントエンド側はそれを使う分業だ。こうすればフロントエンドの開発にバックエンドのDB構造を意識する必要がない。

 今回、チャットと同様なリアルタイムの対話的な機能を、アプリではなくWebブラウザーで実現する必要があった。事業部からは「チャット機能がほしい。画像も張り付けられるようにしたい」「いいねボタンでリアルタイムに応答したい」などの要望が出ていた。

 事業部とのフロントエンド要件の打ち合わせは、ワイヤーフレーム(画面の素案)から入る。ボタンやチャットのウインドウなど、どこに何を見せたいかをお絵かき程度に作ったものだ。

 事業部からの素案に対し、古川氏らは「こうするとユーザーが困るのではないか」「こうすれば作りが簡単になる」といったアドバイスを出す。動きまで確認してデザインを完成させた。

 ここから、開発は4人がページ単位で分担して並列に進める。古川氏は、技術的な内容に責任を持ちつつ、アジャイル的に2週間単位でプロジェクトを回し、朝会やレビューも実施した。

 設計と実装が一体となりながら開発し、できたものを事業部が確認してブラッシュアップというサイクルを回した。「設計時にはモデリングなどをせず、すぐ実装した。設計図を共有する場はないし、時間も取れない」(古川氏)。

 チャット部分や管理画面などを古川氏が担当し、残りのメンバーへのアドバイスも実施する。チャット部分は、ページの部分更新が必要であるため、それが容易なJavaScriptライブラリの「React」を使った。

ブラウザー機能の理解が必要

1 2 次ページへ
次ページ以降は日経 xTECH Active会員(無料)の方のみお読みいただけます。
会員の方は、 ログインしてご覧ください。
まだ会員でない方は、ぜひ登録(無料)してください。
出典:ITpro 2017年 9月 19日、日経SYSTEMS 2017年5月号p.64
(記事は執筆時の情報に基づいており、現在では異なる場合があります)

注目コンテンツ