サーバサイドとフロントエンドって何？

Sep 7, 2019

Share on:

求人情報や技術情報を見ているとよく見かける「サーバサイドとフロントエンド」という言葉。

このブログ内でも何回も登場してきますが、まだ理解していない人のために解説します。

サーバサイドとフロントエンドの違いは、サーバサイドはデータを扱い、フロントエンドは画面操作を扱うと覚えておけば良いでしょう。

では、それぞれの特徴についてもう少し詳しく解説します。

サーバサイド（エンジニア）とは

サーバー側でプログラムを実行したりデータを管理したりすること。
コトバンクより

サーバ側だからサーバサイドというわけですね。（別名バックエンド）

WEB サービスは主にサーバとクライアントに分けることができます。

サーバというのは、クライアントから頼まれたデータやページを渡してあげる役割を担うもので、サービスを使うユーザからはサーバの中身が直接は見えません。

例えば、メールアドレスとパスワードを入力してログインを押すと、サーバが該当するユーザを探します。

そのユーザを探すための機能は使う人からはどうなっているかわかりません。

そうしたサーバ内での動作を実装する人を、サーバサイドエンジニアと言います。

プログラミング言語のほとんどはサーバサイド言語にあたり、代表的なのが、PHP、Ruby、Go、Javaなどの言語です。

フロントエンドは各種入力をユーザーから収集し、バックエンドが使える仕様に合うようにそれを加工する。
wikipedia

フロントエンドはサーバサイドからもらったデータをユーザが見やすいように加工する技術です。

ログインボタンを押した後にユーザデータをもらったはいいものの、そのデータがただ縦に並んでいるだけではどこにデータがあるのかわかりません。

画像は一番上、名前は左、プロフィールは下、というようにもらったデータをどのように見せるかを決めるのがフロントエンドです。

言語としては、HTML、CSS、Javascriptがあります。基本的にはこの 3 つです。

フロントエンドとデザインの違いについては触れておきます。

フロントエンドはあくまでもHTML、CSS、Javascriptといったコードを書いて WEB ページを作っていきます。

どこにボタンを配置し、どのような色にするかを決め、ロゴやバナーを作るのがデザイナーです。

最近では、フロントエンドとデザインのどちらもできる人が重宝されるので、どちらか一方しかできないのではなく、メインのスキルではなくても軽くできるようにしておく方が望ましいでしょう。

Javascript というフロントエンド言語に、node.js という言語が登場し、サーバサイドとフロントエンドの垣根が無くなってきました。

Node.js は、イベント化された入出力を扱う Unix 系プラットフォーム上のサーバーサイド JavaScript 環境である。
wikipedia

本来 Javascript はフロントエンド専用の言語でしたが、node.js はサーバサイド言語環境ですので、JavaScript1 つでフロントからサーバまでを実装することが可能になりました。

じゃあ Javascript だけを勉強していればいいのかという話になりますが、まだ node.js がそこまで普及しておらず、Ruby や PHP、Go といったサーバサイド言語で開発が行われることが多いので、そうはいきません。

とはいえ、フロントエンド言語としての Javascript はほぼ必須ですので、勉強はしておく必要があります。

Google より、Firebaseと呼ばれるインフラシステムが登場したことにより、サーバサイドがなくても WEB サービスが作れるようになりました。

まだ何でもできるわけではないので、サーバサイド言語の需要がゼロになったわけではないのですが、これから徐々にフロントエンドだけで WEB サービスが作れるようになっていくと思います。

Firebase は徐々に一部のスタートアップ企業では採用されている技術のようなので、自分の WEB サービスを公開するために使ってみてもいいかもしれません。

エンジニアとしてのキャリアにもよりますが、サーバサイドエンジニアになるのであれば、もちろんサーバサイド言語 1 つ以上は必要です。

それに加えて、フロントエンド言語（JavaScript のフレームワーク）も 1 つは扱えるといいでしょう。

フロントエンドの言語は HTML、CSS、JavaScript ですが、これら 3 つは完璧にマスターしておき、その他に JavaScript のフレームワークである（Vue.js や React.js）といったスキルがあると、幅が広がると思います。

フロントエンドエンジニアになりたかったのにサーバサイドを勉強していた、ということにならないように、サーバサイドとフロントエンドの違いはしっかりと理解しておきましょう。