こんにちは、G’s ACADEMYスタッフの大堀です。
ユーザーから愛されるwebサービスに欠かせない要素のひとつであるフロントエンド。
フロントエンドの開発に携わるエンジニアはどのように仕事を進め、何を大切にしているのかご存じでしょうか。
今回は現役フロントエンドエンジニアである甲斐さんに、フロントエンドエンジニアの仕事内容や大切にしていることを伺いました。

甲斐 匠平
ウェブエンジニア。熊本出身の36歳。
前職の社内エンジニアの働き方に感化されエンジニアへの転職を志し G’s TOKYO DEV10期生として入学。卒業発表会 (GGA) で声をかけてもらったHRベンチャー企業へ卒業後にジョイン。新規事業の開発に主にフロントエンドとして携わる。
Twitterはこちら

---

大堀　甲斐さん、本日はよろしくお願いします！

甲斐　はい、よろしくです。

フロントエンドとはなにか

大堀　早速話に入っていく前に、フロントエンドについて簡単に教えていただけますか。

甲斐　すごく広い意味だと、プロダクトやサービスの中のユーザーとの接点を構築する要素をフロントエンドといいます。インターフェースということもありますね。

大堀　ユーザーとの接点がフロントエンド、ですね。なるほど。

甲斐　身近なものだと、例えばwebサービスならばGoogle Chromeといったwebブラウザ上でユーザーが操作する画面がフロントエンドです。

大堀　YouTubeやDropboxの操作画面のことをフロントエンドというんですね。

フロントエンドやサーバーサイドについてはこちらの記事でも話に触れているので、ご覧ください。

甲斐　そうですね、ぼくも含めフロントエンドエンジニアというのはフロントエンド全般を担当するエンジニアのことを指します。

ユーザーとバックエンドを繋ぐ役割を担うフロントエンドエンジニア

大堀　具体的にフロントエンドエンジニアはどんな役割を担っているのでしょうか。

甲斐　先ほど触れたように、webサービスやプロダクトの見た目の(フロント)部分全般を開発していくのがフロントエンドエンジニアの主な仕事内容です。
その中には、各webページのレイアウトなどデザイン面を実装することも含まれますが、ユーザーからの要望(リクエスト)をバックエンドに受け渡す橋渡しの役割もとても重要です。

大堀　ユーザーからの要望をバックエンドに受け渡す？？

甲斐　例えば、あるwebサービスを初めて利用するとき、ユーザーの初回利用までの流れは大体こんな感じですよね。

1. ユーザー登録画面を開く
2. メールやパスワード、必要情報を記入欄に入力
3. 送信して登録完了
4. サービス利用開始

甲斐　初回登録時にはバックエンドに届けたい情報をユーザー自身に記入してもらっているわけですが、このユーザー登録画面を開く→情報を送信して登録完了　に至るまでの設計をいかにユーザーに親切なものにするかもフロントエンドエンジニアが向き合っています。

大堀　なるほど。
そういえば以前から存在するサービスと最近登場したサービスを初回登録するときでは登録完了までの作業時間もかなり違ったりしますよね。

甲斐　いい気づきですね！インターネットユーザーは日々目が肥えてきているので、求められる水準も年々高まってきています。実際、この登録作業に時間がかかるだけで直観的に古いサービスだと理解されるんですよ。

大堀　言われてみるとそんな気がしてきました。
Amazonには購入したい商品をスワイプするだけで注文できる機能もありますが、これも良い例ですよね。

甲斐　あの機能が実装されたことで通常完了までに2，3ページ介する動作を一回のスワイプで完了できるので本当に優れていると思いますね！

フロントエンドで扱う言語は3つ

大堀　次にどんな言語を使用して開発をしているのかにいてお伺いします。

甲斐　webの世界に限定した話ですが、フロントエンドでは基本的にHTML,CSS,JavaScriptの3つの言語を使用しています。

甲斐　他にも、ぼくは実務でVue.jsというJavaScriptのフレームワークを使用しています。フレームワークというのは、簡単にいうと開発に必要な機能を用途に合わせてカスタマイズしたもので、なかでもVue.jsはJavaScriptにHTML,CSSがセットになったものをイメージしてもらえば良いです。

大堀　おお、フレームワーク、すごく便利そうです。

甲斐　実際非常に便利なので、ほとんどの企業でフレームワークは使用されています。Vue.jsのほかに、世界的にシェアが高いものだとFacebookが2013年に開発したReact等があります。

大堀　ReactはG’sでも講義で扱っています！最近生まれたフレームワークなのに世界トップシェアとはすごいですね。

甲斐　うん、ただフロントエンドエンジニアにとって2013年に誕生したフレームワークは新しいイメージはないんですよ。というのもJavaScriptフレームワークは毎年数十個も出るので。

大堀　年間数十個！？変化が激しいです。(学習しなきゃいけないのだろうか。。)

甲斐　もちろん個人が開発したものからFacebookやGoogleのような企業が出すものまで幅広く存在するのですべてに目を通す必要なんてないですが、ぼくも注目されるような新しいフレームワークは毎年いくつかチェックするようにしています。

大堀　新しい技術のキャッチアップも仕事の内、ということですね。

マークアップエンジニアとの違い

大堀　よく耳にするマークアップエンジニアとフロントエンドエンジニアの違いはどこにあるのでしょうか？

甲斐　マークアップエンジニアとは、名前の通りマークアップ言語(テキストに意味をもたせる言語)を専門に扱うエンジニアのことを指す認識です。
マークアップ言語の代表的なものには、先ほども出てきたHTMLがありますね。他にもXMLがあったり、○○MLという言語は大体マークアップ言語です。

大堀　ML＝マークアップランゲージ、と。

甲斐　ただHTMLだけを扱えてもwebページは作れないので、マークアップエンジニアという肩書の方でも基本的にCSSも扱われている印象があります。
プロダクトのフロントエンド(接点)全般を担う役割をもつフロントエンドエンジニアはHTML,CSSに加えてJavaScriptを扱っているので、その点が大きく異なるのではないでしょうか。

webサービス開発の進め方

大堀　最後にプロジェクトの進め方についてお聞きします。
新サービスを開発するプロジェクトでは、フロントエンドエンジニアはどんな役割を担うのでしょうか。

甲斐　ぼくはフロントエンドの役割はバックエンドとユーザーをつなぐ接点だと考えているので、新しいサービスをつくる初期段階ではフロントエンドについてぐいぐい意見をだしていく必要はないと思っています。
あくまでサービスの本質はバックエンドにあって、それを最大限ユーザーに届けるためにフロントエンドが存在するんです。なので、まずはバックエンド(=本質)を詰めていき、ある程度全体像が見えてきた段階でフロントエンドに着手していきます。

大堀　「サービスの本質はバックエンドにある」。フロントエンドエンジニアが語るとかっこいいです。

甲斐　もちろんサービスによっては体験を重視して考える場合もあったり、技術的な相談をされれば積極的に議論に加わっていくことはありますけどね！
ざっくりプロジェクトの進め方はこんな感じです。

1. サービスの企画
2. バックエンドの要件定義
3. 大雑把なデザイン、設計図(ページ遷移等)の決定
4. 各ページで必要な機能確定
5. 機能を実現するうえで技術的な課題があれば優先してつぶす
6. 実装
7. テスト
8. リリース
9. バグや追加の要望、改善点があれば適宜改善

甲斐　いくつか補足すると、まず”3．大雑把なデザイン、設計図(ページ遷移等)の決定”に関してはデザイナーが担当する場合もあれば、フロントエンドエンジニアが兼任する場合もあります。開発規模やリソースによりますね。
また、フロントエンドエンジニアが実装作業をするために、各ページで必要な機能はかなり明確にしないといけません。後々大きな障害が発生することもあるので。なので、”4．各ページで必要な機能確定”の時点でかなり細かい設計図を作っていきますね。

大堀　一工程ずつ確実に進めていくような進め方ということですね。
リリース後の修正作業にはどのくらい時間を割くものなのでしょうか？

甲斐　プロジェクトや業界によってばらつきがあるとは思いますが、ぼくたちのチームでは極力問題が発生しないように慎重にテストや確認作業をするので、リリース後はあまり時間を割きません。自社開発を担当しているので、できるだけ新サービスの実装に多く自分のリソースを割くべきですし、そうできるように意識して取り組んでいます！

大堀　なるほど、色々と伺い参考になりました！