フロントエンド開発トレンド

フロントエンド開発とは｜バックエンドとの違いと担当範囲

フロントエンド開発とは、Webサイトやアプリのうち、利用者のブラウザ上で実際に表示され、操作される部分をつくる領域を指します。画面のレイアウト、文字や画像の見え方、ボタンを押したときの動き、スマートフォンでの表示対応などが担当範囲です。

これに対してバックエンド開発は、ブラウザからは直接見えないサーバー側の処理を担います。データベースへの保存と取り出し、会員認証、外部サービスとの連携などが該当します。同じ問い合わせフォームでも、入力欄の見た目や入力チェックの表示はフロントエンド、送信されたデータの保存と通知はバックエンドが受け持つ、という分担です。

近年はNext.jsのように、サーバー側の処理までフレームワーク側で扱えるものが増え、両者の境界は曖昧になっています。発注や体制の検討では、どこまでをフロントエンド側の担当とするかを最初に定義しておくと、認識差を防ぎやすくなります。

役割分担は収録記事の「フロントエンド開発とは？」で詳しく扱っています。

フロントエンド技術スタックの全体像

フロントエンド開発で使われる技術は、役割ごとの層に分けると全体像がつかみやすくなります。

土台となるのがHTML・CSS・JavaScriptで、これはどの構成でも共通です。その上に画面部品を組み立てるUIライブラリが乗り、さらにその上で、ページの構成、ページ間の移動、データの取得、ビルドと配信までをまとめて扱うのがフレームワークです。

これらと並行して、記述の安全性を高めるTypeScript、見た目を整えるCSSフレームワーク、コンテンツを管理するヘッドレスCMSが組み合わされます。配信面ではCDNやホスティング環境の選択が表示速度に直結します。

フロントエンドの技術選定とは、単一の言語を選ぶことではなく、層ごとに目的へ合う組み合わせを決める作業です。層に分けて考えると、話題の技術が自社にとって検討対象なのかを判断しやすくなります。

目的別の技術選定｜コーポレートサイト・オウンドメディア・Webアプリ

同じフロントエンド技術でも、つくるものによって適した組み合わせは変わります。

コーポレートサイトは更新頻度が高くない一方、表示速度と検索エンジンからの評価が重視されます。ビルド時にHTMLを生成して配信する構成が基本で、フォームなど一部だけを動的に扱う設計が扱いやすい選択です。

オウンドメディアは記事が増え続けるため、追加や修正のたびに全体を作り直さずに済む仕組みが必要です。ヘッドレスCMSと組み合わせ、更新のあったページだけを再生成する構成が現実的です。

Webアプリはログイン後の画面や利用者ごとに異なる表示が中心になります。検索エンジンへの露出よりも操作性と状態の管理が重要なため、画面をブラウザ側で組み立てる比重が高くなります。

迷う場合は、（1）検索からの流入が必要か、（2）利用者ごとに表示が変わるか、（3）更新頻度はどの程度か、の3点を先に整理すると候補が絞り込まれます。方式ごとの違いは収録記事の「CSR・SSR・SSG・ISRの違いを図解で理解する」で解説しています。

フロントエンド開発を外注するときの確認ポイント

外注先の検討では、提案書の内容に加えて次の点を確認すると、発注後の認識差を減らせます。

第一に、担当範囲です。デザイン、実装、コンテンツの入稿、公開後の運用のどこまでを含むのかを、見積もりの項目単位で確認します。
第二に、技術選定の理由です。フレームワークやCMSについて、なぜその構成なのかを自社の目的に沿って説明できるかが判断材料になります。
第三に、公開後の体制です。自社で更新できる範囲、更新を依頼する場合の費用、バージョン更新への対応方針を契約前に確認します。
第四に、成果物の扱いです。ソースコードの権利、リポジトリの引き渡し、ドメインやホスティング環境の管理者権限が、いつ自社側に移るのかを明確にします。

費用や期間の相場は収録記事の「フロントエンド開発の外注ガイド」、内製との比較は「内製化と外注のコスト比較」で扱っています。

フロントエンド開発について学ぶ

基礎から学ぶ

フロントエンド開発の役割分担と、React・Next.js・TypeScriptといった基本要素を扱う記事です。用語の意味と、それぞれが何を解決する技術なのかを先に押さえたい方はこちらから。

技術別に比較する

レンダリング方式、CSSフレームワーク、AIを使った開発支援など、個別の技術を掘り下げた記事です。構成の検討時に選択肢ごとの向き不向きを比較したい場合に参照してください。

外注・体制を考える

外注時の費用と期間の考え方、内製化との比較を扱う記事です。体制やコストの判断材料を整理したい方へ。