UXデザイン会社のフロントエンドエンジニアのお仕事

まえがき

こんにちは、ajikeでフロントエンドエンジニアをしている峯です。

この記事では、業務アプリ開発、Webサイト作成などを経て、
現在フロントエンドエンジニア２年生の私が行っている仕事を少しタスクベースに深ぼって紹介します。

これからWeb業界を目指す人や、同業で他企業のフロントエンドエンジニアのワークフローに興味がある方に読んで頂けると嬉しいです。

主な役割・スキル

Webサービスの開発において、フロントエンドエンジニアの役割は
ユーザーが実際に操作する画面UI（まさにフロント）の開発です。

「HTML」や「CSS」といったマークアップ言語と、
「JavaScript」というプログラミング言語を使ってWeb画面のUI開発を行います。

上記３つの技術の使い分けとしては、
画面UIをHTML使ってレイアウト（ここはヘッダー、ここは記事の本文...など、文字やブロックに対して役割を付与）を形づくり、CSSで装飾（文字のサイズや色、ブロックのサイズや場所を設定）を行います。

ユーザーのインタラクションなど、動的な部分はJavaScriptを使って開発します。

昨今のフロントエンド 情勢

様々なところで紹介される、フロントエンドエンジニアの役割、必要スキルは前節の通りです。

しかし、昨今のフロントエンド 開発は複雑さが増し、上記３つの技術はあくまでベースのスキルとなり、その他、幾多のスキルが求められています。

現在皆さんが触っている、Webサービスのフロント開発で使われている技術は、前節で挙げた３つの技術のみで作られたサービスはゼロと言っていいくらいです。

Webがこの世に誕生して、先輩Webエンジニアが経験した苦労や、抱えている課題が新しい技術の誕生によって改善される。
または置き換わる。
今もなお、このサイクルは繰り返されています。

開発スピード向上を目的に生まれた技術、運用性向上を目的に生まれた技術、そしてモダンな表現を実現するための技術。

どれも技術革新の過程で生まれた意味のある技術なのです。

次の章から、複雑化したフロントエンドエンジニアの実務と、フェーズ別に行っている事紹介をしていきます。

0. プロダクトが生まれるまで

まず、ajikeが携わるプロジェクトでは、どのようなフローでプロダクトが生まれているのかざっくりご紹介します。

1. 要件定義・UXデザイン
2. 情報設計・ワイヤーフレーム
3. デザイン
4. 開発（フロント/バック）
5. テスト
6. リリース

プロダクト開発において、「1」は最も大切な工程です。
現状の潜在的な課題を洗い出し、目的を明確化します。
プロジェクト内外問わず、「1」の工程に関わる機会もあったりします！

課題、目的をハッキリさせた後、情報設計を行います。
整理した情報をワイヤーフレームに起こしてデザインしていきます。

1. フロント設計

いよいよエンジニアの出番です！

ここは、実際にコードを書く前の段階です。
どのような技術が必要なのか？フロント開発の構成を練ります。

デザインデータをベースに、どのような画面があり、
ユーザー操作に対して、どのように変化させる必要があるのかを整理します。

ワイヤーフレーム時点で主な仕様は詰められているため、デザイン以前から設計を開始することが多いです。

ここでは、以下を行います。

・技術選定（どの技術を使うか）
・開発構成（ファイルをどのように配置するか）
・変更容易性を意識（開発中、開発後、サービスは必ず変更されます。これに備えます。）

この段階で開発の全体像を描きます。
この段階が曖昧であれば、後の開発に響いてきます。

もちろん、開発段階で再設計を行う場合もあったりしますが、出来る限り決定事項を増やしておきます。

出来るだけ、想定される変更に対応した設計を心がけます。

2. フロント開発

設計が完了してようやく開発がスタートします。

業務で開発を行う場合は、必ずGitなどのバージョン管理ツールを活用します。適宜ログを残して安全に開発を行うためです。

バージョン管理を行うことで、過去バージョンに切り戻しを行ったり、
複数人で開発した内容をマージすることができます。

開発中は特に何も考えません。笑
行った設計通りに、ただただ画面を作っていきます。

技術的な問題や、バグとか出てきますが、とにかく頑張ってコードを書きます！

ここでは、以下のことを意識します。

・読みやすいコードを心がける（記述の順序やインデントに気を遣う）
・ブラックボックス化させない（意図が読み取りにくい場合はコメントに残す）
・書いたメソッドは何度か見直す（運用性の高いメソッドを目指す）

経験が浅かったり、未熟であればあるほど、進捗がなかなか出ませんが、とにかくコードを書くしかありません。

ここで価値を発揮するのがエンジニアなのです...。

3. テスト

開発が完了したらテストを行います。
テストライブラリなど、テストに役立つ技術も存在します。

人間が行うテストは人的ミスが出やすいので、可能な範囲のシステム化が理想です。

このフェーズはエンジニアにとって辛いです。
バグが上がってきます。仕様通りではないと言われたりします。
しかし、ここでしっかり自分のアイデンティティである、バグを認めて修正しないといけません。

ここでは、以下のことを自分に言い聞かせます。

・バグは必ず眠っています（見つけてもらったことに感謝しよう）
・テストライブラリを導入する場合は、何をテストするのか明確にする

実現性に気を取られて、バグを生んでしまうことは鍛錬を積んだベテランエンジニアでもきっとあります。

素直に認めて修正することが成長の条件です。

4. リリース

テストを終えれば残すはリリースです。
（ここも油断はできません...。）

時間をかけて開発したものが日の目を見る瞬間です。
やっぱりこの瞬間は嬉しいです。

開発に携わったメンバーみんなで頑張りを労い合いましょう。

5. 運用

エンジニアスキルとして運用フェーズは最も重要です。
開発期間より遥かに多いのが運用です。

開発前に行う設計の重要性は、ここからの運用にも大きく響きます。
良い設計ができていれば、あらゆる変更に対応でき、グッと負担を減らすことができます。

設計段階で変更を想定できていれば、全ページ修正する必要があった所を
たった1箇所で済むなんてことがあります。

運用フェーズは、サービスの仕様変更などに加え、プログラムのメンテナンスやリファクタリングがメインです。

利用している技術のバージョンにバグがあり、バージョンアップが必要になれば、バージョンアップしたり、新しいバグが見つかったら修正します。

その他、重要なものとして、ドキュメントの整理が挙げられます。
開発時はどうしても手がまわらなかった場合など、メンテナンスが属人化してしまうと問題です。

優秀なエンジニアとは、残り続けるソースコードをかける人だと思っています。

ここでは、以下のことを意識します。

・プログラムのリファクタリング（今後の運用に備えて、プログラムをベストな状態に近づけます）
・ドキュメントの整理（属人化したサービスは長生きしません）
・利用しているライブラリのドキュメントに目を通す（バグが発見されたら、バージョンアップに備えます）

大変だと感じること

とにかく頭に入れておくべき技術が多く、意識しないといけないことも多岐に渡ります。

様々なライブラリが開発を助けてくれますが、これらの管理も楽ではありません。

これまでトレンドとされていた、jQueryというJavaScriptを拡張したライブラリから、現在では、記法をルール化したフレームワークがトレンドになっています。

トレンドの変化がとにかく早いので、合間で動向を追ったりしなければ、すぐ時代に取り残されてしまいます。
（今のモダン開発はReactやVue.jsですが、これも後何年持つか...）

淡々と業務を行うだけでは、５年最前線で活躍することは難しいでしょう。
すべての業種、常に変化はあるかと思いますが、フロントエンドエンジニアという仕事はそれが顕著に現れています。

喜びや楽しさを感じること

やはり、ものづくり全般に言えることだと思いますが、成果物が残るというのは嬉しいです。

実際に自分が作った画面を、私が知らない誰かが触っていると思うと嬉しくなります。

流行を追うことは大変ですが、飽きのこない仕事だなと思います。
次のトレンドがすぐに来るし、未経験の技術がたくさん眠っているので、
学べば学ぶだけ表現力は上がり、楽しさが増します。

大変なだけ、そこから得る喜びは大きいものがあります。
（いつかの白球を追いかけていたあの頃のようです。笑）

さいごに

フロントエンドエンジニアという仕事はいかがだったでしょうか？

身につけないといけない技術が多すぎて、たまに嫌になる時はありますが、
それも含めて有意義な仕事だと感じています。

今では生活のインフラとなっている、Webという業界の１つのお仕事
「フロントエンドエンジニア」というお仕事を紹介させていただきました。

最後まで読んでいただきありがとうございました。