はじめに

グッドビーのフロントエンドクリエーション部が社内のフロントエンドに対する取り組みをシリーズ化したもので、この記事は記念すべき第一弾となります。
第一弾は「そもそもフロントエンドってなに？」という観点で記事を書いていこうと思います。

フロントエンドってなに？

フロントエンドとは、ウェブサービスやウェブアプリで直接ユーザーの目に触れる部分のことを指します。 ボタンをクリックしたり、文字を入力したりする部分で、クライアントサイドと呼ばれることもあります。
ウェブサイトを使っていると、「なんかもっさりしている」「操作性が悪い」と思うことがあると思います。そうした違和感の多くは、フロントエンドの実装品質や、UI/UX設計の不備に起因していることがあります。
フロントエンドはその名の通りシステムの最前線に立ち、ユーザーと向き合うことが多いため、フロントエンドエンジニアの立ち回り、一挙手一投足がユーザーからの評価に直結します。

フロントエンドは「事業成長」に直結する

サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する。

以前、Amazonがそのような調査結果を出していました。

参考文献：Marissa Mayer at Web 2.0
https://glinden.blogspot.com/2006/11/marissa-mayer-at-web-20.html

また過去のGoogleの調査では

表示速度が1秒から3秒に落ちると直帰率は32%上昇、1秒から5秒で90%、1秒から10秒で123%上昇する。また、表示速度が0.5秒遅くなると検索数が20%減少する。

という結果が出ています。

参考文献：Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
https://www.thinkwithgoogle.com/intl/en-emea/marketing-strategies/app-and-mobile/find-out-how-you-stack-new-industry-benchmarks-mobile-page-speed/

この結果からみてもフロントエンドがいかに事業成長に重要な役割を担っているかが見て取れると思います。
さらに現在では、Googleは「Core Web Vitals（コアウェブバイタル）」という指標を掲げ、ページの読み込み速度だけでなく、ボタンを押した時の応答性や、読み込み中のガタつきといった「視覚的な安定性」までを厳格に評価しています。
つまり、単に「表示される」だけでなく、「いかにストレスなく快適に動くか」が、検索順位やユーザーの離脱率を左右する時代になっているのです。 そういう意味でもウェブサイト、ウェブシステムの目に見える部分を作り込むことは、デザインの意図を正しく技術で翻訳し、ユーザーとビジネスを繋ぐ「架け橋」を強固なものにするプロセスそのものだといえます。
そのためグッドビーのフロントエンドクリエーション部ではいかにユーザーの満足度を上げるかという観点で、試行錯誤しています。

単なる「表示」から「アプリケーション」へ

かつてウェブサイトは、情報を一方的に伝えるだけの存在でした。しかし今、フロントエンドを取り巻く環境は劇的に変化しています。
PCやスマートフォンの性能が向上したことで、ブラウザ上でできることが飛躍的に増えました。以前は単にテキストや画像を表示するだけだったサイトも、現在ではチャットツールや高機能なフォーム、リアルタイムにデータが更新されるダッシュボードなど、サイトそのものが一つのアプリとして動作するようになっています。
また、マルチデバイスへの対応も欠かせなくなりました。 画面サイズが異なるだけでなく、OSの種類、ブラウザの仕様、さらには通信環境や端末の処理能力までさまざまな要因を考える必要があります。
特にスマホの登場は開発に大きな変化を必要とさせました。 「クリック」から指による「タッチ」や「スワイプ」へと変化したことで、フロントエンドはより直感的で、物理的な感覚に近い滑らかな挙動が求められるようになりました。さらに、モバイル回線や限られたバッテリー容量という制約の中で、高速でリッチな体験を届けるという「パフォーマンスの最適化」が必要になりました。
スマホも含め、どのデバイスでも一貫した使い心地を提供するためには、ターゲットを見極め、高度な最適化を行う「設計力」が求められます。

「ロジック」を担うフロントエンド

さらに大きな変化は、かつてサーバー側で行っていた「データの加工」や「条件分岐」といったロジックの一部を、フロントエンド側で担うようになったことです。

• ユーザーの入力に合わせて瞬時に表示を切り替える
• サーバーからの応答を待たずに画面を更新する
• オフラインでも動作させる

これらを実現するためには、単にHTMLやCSSを書くだけではなく、プログラミングスキルや状態管理の知識が必要不可欠です。
ユーザーに提供できる価値が広がるにつれ、フロントエンドエンジニアには「HTML、CSS」の知識と「バックエンドエンジニアのような論理的思考」の両立という、極めて高い専門性が求められるようになっています。

まとめ

今回は、「そもそもフロントエンドとは何か？」という基本から、その重要性がビジネスに与える影響、そしてフロントエンドの高度化についてお伝えしてきました。
フロントエンドがこれほどまでに高度化し、担う役割が大きくなったからこそ、従来の「サーバー側（バックエンド）と一体となった開発手法」では、変化の激しい現代のビジネススピードについていくことが難しくなってきました。
そこで注目されているのが、「フロントエンドとバックエンドの分離」です。

• なぜ、わざわざ別々に作る必要があるのか？
• それによって、開発効率やシステムの拡張性はどう変わるのか？

次回、その内容について書ければと思っています。