はじめに

こんにちは。
プラコレでフロントエンド（＆たまぁにサーバーとか）を担当しているエンジニアのタクシです。

今回のテーマはそもそも、雪が見たい！と思いThree.jsで雪を降らせてみようとか思っていたのですが、ちょうど一昨日パラパラとですが鎌倉でも雪が降ったので私の雪欲は満たされました。
豪雪で困っている方も多いということでもう雪なんて見たくない！と言われても仕方がないので、テーマを変えることに。。

ということで、来年には駆け出し新卒エンジニア三年目を迎えるタクシ的
「フロントエンドエンジニア」ってなんなんだ？
ということについて考えたいと思います。

フロントエンドとは

フロントエンド（Front-end）とはフロント（Front）が英語で「表」という意味であるように、
ユーザー（今読んでいるあなた）の目にふれ、実際に触れられる表側、つまりは顔の部分のことを一般的には指します。
フロントエンドではその顔を作り、様々な情報を提供する場（WEBサイトなど）を作ったり、
時として、データなどの情報をわかりやすく形を変えてあげなければいけない場合もあります。

例えばこんな感じ（イメージ）

https://pla-cole.co

上の図のデータは適当ですが、
例えば図のように、生のデータの形式（JSON）のままだと非常にわかりづらいです。
なのでそれを作成されたデザインなどに合わせて、形を変え、結果としてWEBサイトとして反映します。
ざっくりとした説明ですが、おおよそこのようなデータの整形や、
そこから派生した関連の物事を全般的に担当します。
その時に主に基本となるのが以下３つです。

HTML
CSS
JavaScript

特にJavaScriptには開発を支援するためのライブラリやフレームワークが多く存在し、
その根本となる深い言語知識はフロントエンドエンジニアとは切っても切り離せない、とても重要なものです。なのでそれを中心にお話ししたいと思います。

JavaScript

私は毎日フロント業務で、JavaScriptを書かない日はありません。
起床から就寝までそれしかしてません（嘘です）。
（くどくなりそうなので以降 JS とします）
ですが、それぐらいフロントエンド開発では中心となる技術なのは確かです。
シンプルなランディングページやHPでもだいたいはJSが使用されています。
使用目的は数多くあります。
・クリックやスクロールに応じたアニメーション
・データのグラフ化
・フォーム送信時のバリデーション
・Ajaxなどを使用した非同期通信
etc...

あくまで一部ですがこのように使用用途は多くあります。
アニメーションやグラフなどの生成はUI・UXの観点でも非常に重要であり、
フロントエンドで完結する場合も多く、実装も比較的しやすいです。

ただ少しトリッキーなのは、Ajaxなどを使用な非同期通信を行う場合などの、サーバーとの関係が出てくる部分です。
サーバーサイドとは言わずとも、通信などに関する基礎知識は最低限は必要なのです。

非同期通信(Ajax)

非同期通信とはものすごーーく簡単に言えば、画面をリロードしなくてもデータの送信や受信を可能とするものです。
主にAPI（Application Programming Interface）を使用し、
サーバー側から必要なデータを取得（GET）したり、送信（POST）したりできます。
APIを使いたい場合、XMLHttpRequestオブジェクトを使い、サーバーとやりとりをするのですが、
jQuery ajaxやaxios、SuperAgentなど記述を簡易化できるライブラリもあります。

データを取得するためGETでAPIにリクエストを送信した場合、APIは以下のような形式（JSON形式）でデータを返します。
このような⇩

以下の1行を例として説明します

"title": "冒険社プラコレ"

"title"　
keyと呼ばれるものです。サーバー側で名前を設定できることも多いです。

"冒険社プラコレ"　
valueと呼ばれるものです。上記のkeyが表すもの（値）です。

これらはkey-valueペアと呼ばれます。
既存のサービスで決まった形のAPIしか場合は除きますが、自社開発などの場合、
サーバーサイドと連携し、必要な値を返してもらうように依頼したり、
オブジェクトや配列などの形式の変更などをしてもらうこともあります。
私は理想の形を簡単なサンプルコードを書いて修正依頼などは送るようにしています。

このような一見直接的に見た目に関わらない部分でも、
最終的にWEBアプリケーション（WEBサイトやWEBサービスなど）の開発をする上で必要なデータ等のハンドリングやサーバーサイドとのコミュニケーションもフロントエンドということになります。

最近ではReactやVue.js、そしてそれらのフレームワークであるNext.jsやNuxtJSなどが登場し、JSをメインとしたフロントエンド開発が発展しています。
私も最近はもっぱらReactやGatsby（Reactフレームワーク）をこねくり回しています。

まとめ

ここまで色々話しましたがもちろん、HTML・CSSのコーディングが中心の方や、APIの設計から自分でやるという方もいると思います。
フロントエンドといってもその内容は関わるアプリケーションや会社などによって内容も異なる場合もあるので一概にこれだ！ということは難しいですね。
それはサーバーサイドも同じで、
どこまでがフロントでどこまでがサーバー
かはそれぞれで違います。
なので今回は私個人の思うフロントエンドエンジニアは何をしているのか
というよりは私が普段「フロント」として何をしているのか
という話でした。

Now hiring！
プラコレでは、自由な未来をつくるために
一緒に冒険したいエンジニア・デザイナーを募集しています！
https://www.wantedly.com/projects/262436
運営サービス
PLACOLE(プラコレウェディング)
DRESSY(ドレシー)byプラコレ
farny(ファーニー)byプラコレ