ゲリラなフロントエンドエンジニア

 こんにちは！最近炎上記事ばっか書いてばかりでした（笑）ので、技術系企業らしい記事を書かせて頂こうと思います！

元々私はバックエンドエンジニアを主戦場として仕事をしてきましたが、最近は会社経営をしつつ、フロントエンドエンジニアとしても活動しております。

フロントエンドをやり始めて２年ですが、初心者の方にもどんなことをしているか分かりやすく伝えていこうと思います。

フロントエンドエンジニアって？

主にWebアプリケーションのユーザーが画面越しに触れる部分（つまりフロント）を設計、実装するエンジニアとなります。

もっとざっくりいうと、「画面部分の動的なアクションや振る舞い（ボタンに色がついたり、ページを開いたらINFO情報が中央に表示されるなど）を定義して作る」ような人達です。

弊社の場合ですと、React + TypeScriptをフロントエンドの技術スタックとして採用しておりますが、会社様やエンジニアによっては、「HTML + CSS + jQuery」、「PHP + Wordpress」をフロントエンドの技術要素として取扱う場合もあります。

広義的には、スマホアプリケーションの設計、実装をするエンジニアのこともフロントエンジニアとして呼ぶケースもありますが、私たちはアプリエンジニアとして呼んでいます。

今回の記事では、JavaScriptフレームワークであるReactをベースに解説していこうと思います。

以下の記事がJavaScriptフレームワークに関してざっと解説しておりましたので、参考にしてもらえたらと思います！

JavaScriptフレームワーク

どんな仕事をしているのか？

フロントエンドエンジニアがやっているお仕事（私観点ですが）は、以下となります。

・デザイナーと画面構成のやりとり

・画面構成からコンポーネントに切り出す作業

※コンポーネント：HPのボタンやヘッダー/フッター、情報の表示枠などの画面要素

・バックエンドエンジニアが作ったAPIとの疎通

1個ずつざっくり解説していきます。

1.デザイナーと画面構成のやりとり

フロントエンドエンジニアは実際デザインまでやるわけではなく、仕事先によっては専任のデザイナーがいます。私の場合デザイナーがいる現場にそんなに当たったことはないので、ほぼ現場エンジニアメンバーで頑張ってました（笑

そのデザイナーたちがビジネスサイドとやりとりして、ワイヤーフレームと呼ばれる画面レイアウト構成をまとめた資料をアウトプットとして提供していただき、フロントエンドエンジニアサイドで構成を確認していきます。

この際重要なのが、画面構成に矛盾がないか？、ビジネスサイドとのやりとりで決定した事項が漏れていないかを確認して擦り合わせていきます。

デザイナーさんもプロではありますが、ビジネスサイドで決まった要件は難易度が高いものもあったりするので、そこをサポートしていかないと意図しないデザインで開発が進んでしまうリスクもあったりします。

２.画面構成からコンポーネントに切り出す作業

1.で画面構成が決まったら、レイアウトの中から設計、実装する箇所を切り出していきます。作業としては、「コンポーネント設計」と呼ばれます。

コンポーネント設計を語ると、アトミックデザインや関心の分離などの様々な思想や概念が存在しますが、簡単に言えば画面をパーツごとに区分けして、共通化できるものは再利用できるように整理していくことを言います。

想像しやすい画面パーツといえば、

・ボタン

・ヘッダーやフッター

・アイコン

・データの一覧（ECであれば商品一覧、顧客管理システムであれば、顧客一覧）

などがあります。

世の中のサイトは、ある程度最適化されているためパーツを作る参考には尽きないです。

パーツを切り出して、共通化できるものが把握できれば、それを一つの画面に組み上げていきます。

コンポーネント設計をして気持ちいいのは、自分が設計した内容で画面を組み上げた際に、無駄がなく、余計ない思考が生まれないため楽に画面を組み上げることができます。

これは実際に別の作業者が入った際にも同じ効果が生まれ、最終的には開発全体の作業工数を下げることにもつながります。（この辺が整理されていないと、後々地獄を見る場合があります。

3.バックエンドエンジニアが作ったAPIとの疎通確認

コンポーネント設計と画面の実装が終わると、次はAPIでの繋ぎ込み作業になります。（フェーズによっては、API実装が既に完了している場合があります。

ここで言うAPIとは、「アプリケーションをプログラミングするためのインターフェース（システム間を繋ぐ境界面/接点)」と言う意味です。もっと簡単にいえば、「何かしらのサービスを提供してくれる出入口」のようなものです。

APIの具体的な例として、例えば、自分のHPにお薦めの居酒屋情報を載せたいとなった場合に、自分で情報を持っていないので、ぐるなびAPIを使おうという感じです。（参考：https://qiita.com/mikan3rd/items/ba4737023f08bb2ca161）

ここでは詳しく解説はしませんが、APIを活用することでシステムの振る舞う幅が一気に広がります。

APIはバックエンドの担当エンジニアが実装してくれており、そこから提供されるデータに合わせて、画面を動的に描画するようにフロントエンドエンジニアが調整を入れます。

ここでデータの構造が想定と違っていたりしたら、バックエンドエンジニアとコミュニケーションを取りながら調整していきます。（フロントエンドとバックエンドをどちらも兼務していたら、その場でサクッと直したりしてます

繋ぎ込みが完了したら、実際に動く動的なサイトが出来上がります。

こうして出来上がったシステムが、SPAと呼ばれるものです。

実際はもっと考慮しないといけないことが多いですが流れはざっくりとこんな感じです。

私としての思い

私もフロントエンド自体の経験は長いわけではなく、まだまだ実践中で失敗することも多々ありますが、仕事をしていく中で、デザイナーと経営層のやり取りにも提案するスタンスを取るようにしております。

「デザイナーの担当」、「経営者の担当」と言う区切りは明確に分業化されていて、メリットはあると思いますが、ある程度相手の領域にも踏み込んで理解していくことも大事だと思っています。

特にビジネスのスピード感が爆速している昨今、区切りを超えた仕事形態が何かしら新しい価値を生み出すのではと考えています。

今後もフロント周りの技術スタックや体験などを書かせてもらえたらと思います。

読んで頂きありがとうございました！