<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>これを書いてる人は職業エンジニアではなく、ただのしがない学生エンジニアです。なのでもしかしたら実際のお仕事とは違う部分があるかもしれませんが、そこはそういうものなんだな、とご理解いただければと思います。</p>
</div></aside>
<p>この記事は <a href="https://qiita.com/advent-calendar/2023/catechlounge" target="_blank" rel="nofollow noopener noreferrer">CA Tech Lounge Advent Calendar 2023</a> 20日目の記事です。</p>
<h2 id="web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A3%E3%81%A6%E3%81%A9%E3%82%93%E3%81%AA%E4%BA%BA%EF%BC%9F">
<a class="header-anchor-link" href="#web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A3%E3%81%A6%E3%81%A9%E3%82%93%E3%81%AA%E4%BA%BA%EF%BC%9F" aria-hidden="true"></a> Webフロントエンドエンジニアってどんな人？</h2>
<p>Webフロントエンドと言われるような領域を専門にするエンジニアのことをWebフロントエンドエンジニアとよく呼びます。しばしば単にフロントエンドエンジニアとも呼ばれます。<sup class="footnote-ref"><a href="#fn-408f-1" id="fnref-408f-1">[1]</a></sup>(この記事の中でフロントエンドと言えばWebフロントエンドを指すことにします)</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--hr5yMijw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7d1504c1e951487697a4d879.png%3Fsha%3De502ae66f6cac284de57e6dab92f696024b4adb3" loading="lazy" class="md-img"><br>
<em>Webフロントエンドエンジニアのイメージ画像 by GPT-4</em></p>
<h2 id="web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A3%E3%81%A6%E4%BD%95%E3%82%92%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%EF%BC%9F">
<a class="header-anchor-link" href="#web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A3%E3%81%A6%E4%BD%95%E3%82%92%E3%81%97%E3%81%A6%E3%82%8B%E3%81%AE%EF%BC%9F" aria-hidden="true"></a> Webフロントエンドエンジニアって何をしてるの？</h2>
<p>WebフロントエンドエンジニアというぐらいですからWebのフロントエンド、つまりHTMLとかCSSとかJSとかをガチャガチャして画面を組み立てているわけです。ここ最近 (直近10年ぐらい) で生まれてきて、ホントに最近激アツになってきた分野 (ボク調べ) です。</p>
<p>一昔前は、データ処理は主にサーバー側で行い、その結果をHTMLテンプレートに流し込んで動的なサイトを構築するのが一般的でしたが、モダンWebフロントと呼ばれるような技術スタックでは、サーバーはデータ (主にJSON) を返すだけで、そのデータをもとに画面を組み立てる、という方式が増えてきているように感じます。</p>
<p>その理由は単純で、その方がユーザー体験が良くなるからです。サーバー側でHTMLを生成するとなると何かアクションを起こすたび、データが変わるたびにページ全体の読み込み直しが発生します。一方フロントエンドはデータだけを受け取ることによって、追加のデータを受け取ることで柔軟に画面を構築することができ、画面の一部分のみを更新するといったことが容易にできるようになります。</p>
<h3 id="%E4%BB%96%E3%81%AE%E5%88%86%E9%87%8E%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#%E4%BB%96%E3%81%AE%E5%88%86%E9%87%8E%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> 他の分野との違いは？</h3>
<p>WebフロントエンドとWebデザインがよく混同されがちだと思っています。個人開発、あるいは小規模チームなどではフロントエンドエンジニアがデザイナーを兼任することもあると思いますが、しっかりとした大きなチームではデザイナーが画面を作ることがよくあります。となるとフロントエンドエンジニアがするべきことはなんでしょう？Figmaとかで画面を作ればHTML/CSS形式で出力してくれるのでこれでもうフロントエンドエンジニアはいりませんね、完。</p>
<p>とまぁ事はそう単純じゃないわけです。コーポレートサイトなどではデザインをそのまま書き起こすだけ<sup class="footnote-ref"><a href="#fn-408f-2" id="fnref-408f-2">[2]</a></sup>でほぼほぼ完成みたいなところはありますが、いわゆるWebアプリと呼ばれるようなものだとロジックを実装していく必要があります。</p>
<p>ロジックはバックエンドで書くんじゃないの？と思ったそこのあなた、間違ってはないです。ただ本質的にバックエンドでやらなければいけない処理というのは実は多くなくて、実質的にバックエンドでやらなきゃいけないこと、バックエンドでやった方が良いことなどが大半なことが多い印象です。誤解を生む発言をすると、バックエンドはDBの呼び出しをちょっと抽象化しているだけなので、権限周りさえどうにかすればバックエンドは必要ないんですね。実際FirebaseのRealtime DatabaseとかCloud Firestoreとかはセキュリティルールで権限周りを担保することでバックエンドをサービス化するということをやっていますね。(それが必ずしも良いとは言わないけれども)</p>
<h3 id="%E3%82%84%E3%81%A3%E3%81%A6%E3%81%A6%E5%A4%A7%E5%A4%89%E3%81%AA%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%83%BB%E6%A5%BD%E3%81%97%E3%81%84%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AF%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%82%84%E3%81%A3%E3%81%A6%E3%81%A6%E5%A4%A7%E5%A4%89%E3%81%AA%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%83%BB%E6%A5%BD%E3%81%97%E3%81%84%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> やってて大変なポイント・楽しいポイントは？</h3>
<p>よく勘違いされがち(?)なポイントとして、画面を作るの大変そうだね、というご意見を頂くことがあります。聞くところによると、CSSという言語は詳しくない人 (特にフルスタックでないバックエンドの人とか) から見るとよくわからないし書きたくない言語らしいんですよね。そんな言語を書いて頑張って画面を作っているなぁ、大変だなぁと思われるかもしれないんですが、実は画面を作るのは楽しいです。(ボク調べ)</p>
<p>CSS、実は和解すればかなり良いやつで、表現力は相当高いし、基礎だけ抑えればあとはパターン学習でかなり書けるようになります。すると画面を書くのはひたすらHTML (JSX) とCSSをバリバリと書いていくだけなので実はそこまで苦ではない、というかむしろ画面が出来上がっていく様を見るのはかなり楽しいです。<sup class="footnote-ref"><a href="#fn-408f-3" id="fnref-408f-3">[3]</a></sup></p>
<p>逆に何がつらいのかというと、難しいロジックや設計、キャッチアップですね。設計についてはどの分野でも存在して、難しいと言われるところだと思うので、ことさら強調する必要はないでしょう。難しいロジックについても他の分野でもよくあることに挙げられると思いますが、Webフロント特有の難しいロジックと言うのも存在しています。</p>
<p>例えばデータ取得周りで言うと、Optimistic Update (楽観的更新) というものがあります。例えばTwitterでいいねをするとき、いいねというアクションをサーバーに送信していいねされたのを確認してから画面に反映する、というのだとどうしても遅延が発生します。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--s-l5MkIv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/9fa64e9dfabf8bbb67f64430.png%3Fsha%3Df21b126fe676adf2557c65341d77876aa28f1bac" loading="lazy" class="md-img"><br>
<em>いいねをするアクションのリクエストが203msで返ってきている図</em></p>
<p>でも実際Twitterでいいねをするときってクリック/タップしてから200msも待たずにアニメーションが再生されてハートに色がつきますよね？逆にいいねを取り消すときも遅延なく消えますよね？つまりサーバーの返信を待つ前に画面を書き換えている、つまり画面の状態を書き換えているわけです。これをOptimistic Updateと言います。これの難しさは、単に画面を更新するだけならそうすればいいのですが、サーバーからデータが返ってきたとき、そしてそのデータが現状フロントで仮に更新したデータと違ったときにどうするかということです。食い違っていたら普通はサーバー側の状態に合わせる必要がありますが、それをうまくコードで書くのは難しいし、複雑性もグンと上がります。ただOptimistic UpdateはUXにかなり大きく響くので、難しいところです、、、、</p>
<p>他の難しい例として、アニメーションが挙げられます。これはモダンWebフロントになって難しくなったところだと思います。モダンWebフロントは UI = f(state) の考え方に代表されるように、state (やサーバーから取得したデータ) のみによってUIは定まり、その過程には関知しない (宣言的UI) という方向で設計されていることが多いです。つまり状態の間を繋ぐようなアニメーションは宣言的UIには表れて来づらいです。</p>
<p>特にあるあるの例として、画面から削除するときのアニメーション (フェードアウトなど) を実装する時に、愚直に実装するとアニメーションが終わる前にDOMから消えてアニメーションが再生されないという事件が起こります。これを回避するためにアニメーションが終わるまではDOMに存在させておく、ということが必要になり、これもまたコードの複雑性を増させる原因になります。細かいところのUXを上げようとすると、それに伴ってコードの複雑性と実装の難易度も上がるので本当に難しいところです。</p>
<p>さらにキャッチアップが大変というのもフロントエンドあるあるだと思います。Webフロントは技術革新の流れが相当早く、数年前は覇権を争っていた技術が今では下火になってしまったという例がいくつもあります。新しいライブラリやフレームワークもたくさん出てきますし、その流れの中でトレンドを掴んでいくというのは大変なところもあります。ただボク的には素晴らしい技術が次々と生まれてDXとUXを上げてくれるならそれは歓迎すべきことだと思っているので、キャッチアップはそれほど苦ではないです。</p>
<p>Twitterをチラチラ眺めてみんなが発言してたらトレンドなんだな～程度の認識で、面白そうなやつがあれば見てみる、触ってみるということをやっています。ただあんまり触るところまではやれてなくて、もっと頑張らないとなぁ、、という気持ちです。</p>
<h2 id="web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E5%B9%B4%E5%8F%8E%E3%81%AF%EF%BC%9F%E5%BD%BC%E5%A5%B3%E3%81%AF%E3%81%84%E3%82%8B%EF%BC%9F">
<a class="header-anchor-link" href="#web%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E5%B9%B4%E5%8F%8E%E3%81%AF%EF%BC%9F%E5%BD%BC%E5%A5%B3%E3%81%AF%E3%81%84%E3%82%8B%EF%BC%9F" aria-hidden="true"></a> Webフロントエンドエンジニアの年収は？彼女はいる？</h2>
<p>ボク自身は就職していないので何とも言えないんですが、調べてみたところ平均年収は550万円ぐらいらしいです。実際どうなんでしょうか、人によりそうですね。</p>
<p>彼女がいるかどうかも人によりけりな気がしますが、ボクはいないらしいです。この件に関しての統計情報は見つかりませんでした。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>いかがでしたか？この記事では</p>
<ul>
<li>Webフロントエンドエンジニアはどういうことをしているのか</li>
<li>どういうところが楽しいのか</li>
<li>どういうことが楽しいのか</li>
</ul>
<p>などについて見ていきました。知らないことも多かったのではないでしょうか？</p>
<p>明日は <a href="https://qiita.com/fki813" target="_blank" rel="nofollow noopener noreferrer">@fki813</a> さんと <a href="https://qiita.com/showsay" target="_blank" rel="nofollow noopener noreferrer">@showsay</a> さんの記事です！お楽しみに！</p>
<hr>
<h2 id="%E4%BD%99%E8%AB%87-(%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F%E8%83%8C%E6%99%AF)">
<a class="header-anchor-link" href="#%E4%BD%99%E8%AB%87-(%E8%A8%98%E4%BA%8B%E3%82%92%E6%9B%B8%E3%81%84%E3%81%9F%E8%83%8C%E6%99%AF)" aria-hidden="true"></a> 余談 (記事を書いた背景)</h2>
<p>ボクの所属してる<a href="https://trap.jp" target="_blank" rel="nofollow noopener noreferrer">traP</a>というサークルでB1、B2にバックエンド人間が多くてフロントエンド人間が少ないという状況がありました。またこのアドベントカレンダーの主催元(?)である <a href="https://www.cyberagent.co.jp/careers/special/students/tech_lounge/" target="_blank" rel="nofollow noopener noreferrer">CA Tech Lounge</a> というコミュニティではフロントエンドの会員が現時点でボクしかいません。事あるごとに布教を進めていて、だんだん興味を持ってくれている人が増えてきているのですが、でもフロントエンドって結局何をやるんだ？という疑問に対しての問いにボク自身が完璧に把握できてないなと思って、言語化ついでに記事化しようと思った次第です。</p>
<p>フロントエンドエンジニアに興味を持ってくれたそこのあなた🫵、<a href="https://www.cyberagent.co.jp/careers/special/students/tech_lounge/" target="_blank" rel="nofollow noopener noreferrer">CA Tech Lounge</a> のフロントエンドエンジニア会員になってボクと握手🤝</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-408f-1" class="footnote-item">
<p>一般にフロントエンドと言うだけでは表側に見えてくる部分、つまりPC・スマホのネイティブアプリなども含まれますが、それらはネイティブアプリと呼ばれることが多いので、フロントエンドと言えばWebフロントエンドを指すことが多いです <a href="#fnref-408f-1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-408f-2" class="footnote-item">
<p>デザインをHTML/CSSに書き起こす人材を「コーダー」と呼ぶこともあるらしいです (やることに対して言葉の意味広過ぎね...？) <a href="#fnref-408f-2" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn-408f-3" class="footnote-item">
<p>相当凝ったUIでなければデザインを見ればすすすっと画面は書けます。例えば今書いてるこの <code>zenn-cli</code> のプレビューとかも、画面デザインを起こすだけなら1,2時間あれば書けそうな気がしています (書かないけど) <a href="#fnref-408f-3" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


Webフロントエンドエンジニアってどんな人？何をしてるの？年収は？彼女はいるの？調べてみました！

Webフロントエンドエンジニアってどんな人？

やってて大変なポイント・楽しいポイントは？

Webフロントエンドエンジニアって何をしてるの？

Webフロントエンドエンジニアの年収は？彼女はいる？

Discussion