前提知識
前提として、Webサービスがサーバーとクライアントの二つによって成り立っていることを知っている必要があります。
過去の記事にてまとめていますので、もし知らない方は先にこちらを読んでみてください。
サーバーとは？Webサイトが見られる仕組み【Web開発入門】
バックエンド
バックエンドは、サーバー内で動作するプログラムのことです。
そのため、サーバーサイドとも呼ばれます。
また、それを開発する人のことを、バックエンドエンジニアやサーバーサイドエンジニアと呼びます。
バックエンドのプログラムを作るためには、そのためのプログラミング言語を勉強する必要があります。
PHPやRuby、Javaなどが有名です。
フロントエンド
フロントエンドは、クライアントすなわちユーザーのブラウザ内で動作するプログラムのことです。
そのため、クライアントサイドとも呼ばれます。
また、それを開発する人のことを、フロントエンドエンジニアやクライアントサイドエンジニアと呼びます。
プログラミング言語としては、今はほぼJavaScript、TypeScriptの二択です。
バックエンドの役割
クライアントのリクエストに対応して最終的にはレスポンスを送信しますが、サーバー内で動作するため、その間の処理を担当しています。
実はサーバーと言っても、いろいろな種類があり、Webサービスはそれらを組み合わせて作られています。
こちらの記事でも紹介したInstagramの例を取ってみてみましょう。
Instagram内で「〇〇さんが昨日投稿した写真」のデータを当然ながら格納している場所があるわけですが、「〇〇さんが」「昨日」「投稿した」等の情報は一般的にデータベースサーバー（以下DBサーバー）に保存されています。
一方で、実際の画像ファイルが保存されているのは、ストレージサーバーだったりします。
そして、DBサーバーに問い合わせて、「〇〇さんが昨日投稿した写真」を探す命令をするプログラムが実行されるのがアプリケーションサーバーです。
つまり、バックエンドエンジニアは。このアプリケーションサーバー内で動作するプログラムを書くのが主なお仕事ということになります。
フロントエンドの役割
ところで、クライアント側は「〇〇さんが昨日投稿した写真を見せてください」とリクエストを送信するわけですが、それには当然ブラウザ（もしくはスマホアプリ）の画面を操作する必要があります。
ボタンを用意したり、場合によっては入力フォームも必要になるかもしれません。
そのため、フロントエンドエンジニアは、プログラミング言語の勉強だけでなく画面を構成する言語（HTML）や見た目を整える言語（CSS）についても勉強しなくてはいけません。
先ほど「ブラウザ内で動作する」と言いましたが、確かに実際に動作するのはブラウザ内ですが、動作する前のプログラムはサーバー内にあります。
クライアントからのリクエストに対して、レスポンスする際に、これらのHTMLやCSSと一緒にJavaScriptもクライアントに送信して、ユーザーがブラウザの画面を操作して初めて動作するという仕組みです。
もちろん初回表示のアニメーションなどユーザーが操作しなくても動作する場合もあります。
また、最近はあらかじめサーバーサイドで画面を描画してそれを送信するサーバーサイドレンダリングなんてものも流行っていますが、難しい話なのでそれはまたどこかの機会で。
まとめ
- バックエンドは、サーバー内で動作するプログラム
- フロントエンドは、クライアントのブラウザ内で動作するプログラム
- また、それらの開発を専門にしているエンジニアがいる