フロントエンドとサーバーサイド

#この記事の対象となる人

・プログラミングを始めた人。
・フロントエンドとサーバーサイドの違いを調べたけどイマイチ、ピンと来てない人。

###この記事の対象でない人
・プログラミングを始める人（まずは頭でっかちにならず書くことをお勧めします。）
・フロントエンドとサーバーサイドの役割さえわかれば別にそれ以上求めない人。
・Webサービスの仕組みが既によくわかっている人。（そこまで高度な記事ではありません。）

#Webサービスにはどんなエンジニアがかかわっているのか？

###マークアップエンジニア
ユーザーがブラウザで表示する「見た目」を作るエンジニアです。HTML・CSSを使います。デザイナーの起こした図面をブラウザ上で忠実に再現します。
マークアップエンジニアとして仕事に就くとSEO対策やアクセス解析も入ってくるかもしれませんが、ここでは割愛します。

###フロントエンドエンジニア
ユーザーがWebサービスを操作したときに、画面に変化が現れる仕組みやサーバーサイドのプログラムにデータや指示を渡し、返答を受け取る仕組みを作るエンジニアです。主にCSS・javascriptを使います。HTMLのaタグやformタグなんかは厳密に言うとフロントエンドかもしれません。
フロントエンドと言いながらマークアップの仕事を与える職場もあります。マークアップとフロントエンドは結構混同されているようです。

###サーバーサイドエンジニア
サーバーの内部で動き、フロントエンドのプログラムからの指示を待ち受けて、複雑またはデータベース依存の処理を行う仕組みを作るエンジニアです。サーバーサイドの言語は多岐に渡り、代表的なところではphp・java・C#・python・perl・rubyがあります。

###サーバーエンジニア
サーバーサイドのプログラムを動かすため、物理サーバー内にサーバー環境を構築するエンジニアです。適切な環境がなければサーバーサイドのプログラムは動きません。

この記事で触れているのはフロントエンドとサーバーサイドです。マークアップエンジニアとサーバーエンジニアの領域にはさほど触れません。

#サーバーサイドのプログラムはどう動く？
先ほど、適切な環境がなければサーバーサイドのプログラムは動かないと書きました。
例えば、Qiitaを見ているとき、お使いのパソコンにはiOSかwindowsか、はたまたubuntuやらCentOSやらが入っていて、その上でchromeかfirefoxかedgeか、あるいはsafariやthunderbirdやchromiumを使っていることでしょう。
乱暴にいうとこの関係性がサーバー環境とサーバーサイドのプログラムの間にもあります。
pythonがインストールされていないサーバーではpythonで書いたスクリプトは動きません。スクリプトを動かすにはスクリプトを読むことのできるソフトウェアが必要になります。

※誤解なきよう。pythonはOSではありません。
サーバーにOSがインストールされ、OSの上でpythonが、pythonの上でpythonのスクリプトが動きます。

#フロントエンドのプログラムはなぜ動く？

ではフロントエンドのプログラムはどうして動いているのでしょうか。フロントエンドのスクリプトはサーバーの内部で動いているわけではないのです。でも動くのは不思議ですよね？

※不思議でないと思う人は、さほど技術に興味がない人かよくお分かりの人かどちらかだと思います。

フロントエンドのスクリプトは何が動かしているのでしょうか？

3択で選んでください。 ① スクリプト自体 ② ブラウザ ③ 動かしたいというエンジニアの想い フロントエンドプログラミング言語の代表格であるjavascriptの開発者はNetscape社のBrendan Eichという方だそうです。（ふーん） Netscape社はインターネット黎明期にブラウザソフトウェアを開発し、自社のブラウザに拡張機能としてjavascriptを搭載しました。当時はNetscapeのブラウザでしかjavaxcriptは動かなかったのですね。

その後、Microsoft社製のブラウザにもjavascriptを動かすエンジンが搭載され、今ではjavascriptはどのブラウザでも当たり前のように動く言語になりました。全てのブラウザがjavascriptを動かす仕組みを実装するようになったからです。

Javascriptに限らずフロントエンドはブラウザが動かしています。ここがサーバーサイドのプログラムと明確に異なる点です。ですから稀に同じスクリプトがブラウザによって違う動きをするということが起こります。

#フロントエンドはサーバーサイドとどう連携している？

フロントエンドのプログラムはサーバーと直接つながりを持っていません。ブラウザの中で動いているのですから、スクリプトファイルはサーバーの中に入っているからといって連携はできないのです。

普段から同じ町に住んでいるヤンキー同士はお互いにスルーするか、目が合っても「てめぇどこ中だぁ？」としかならないのと一緒です。スクリプトはヤンキーと一緒。

そこで使われているのがHTTP通信です。HTTP通信はエンドポイント（ここではブラウザを思い浮かべてください。厳密な意味は少し違うので調べてください。）とサーバーの間をやり取りする手段です。
ブラウザはアドレスバーやフロントエンドのスクリプトから情報を受け取ってHTTP通信を開始します。HTTP通信で送られた情報はサーバーの中にあるサーバーソフトウェア（Apacheなど）に渡され、そこからサーバーサイドのスクリプトに渡ります。

整理すると

フロントエンドのスクリプト
↓
ブラウザ
↓
↓　（HTTP通信）
↓
サーバーソフトウェア
↓
サーバーサイドのスクリプト

という感じです。元は同じサーバーに入っているのにメンドクサイ人たちですね。
でも繋がってしまえば熱い友情が芽生えていい仕事をします。スクリプトはヤンキーと一緒。

#フレームワークとは何か

Ruby on rails・laravel・django・.NETなどのフレームワークは、Webサービスを作る上で非常に強力なツールです。使いこなすにはベースとなる言語と併せてフレームワークの動きを理解する必要がありますが、Webサービスを作るならマストとも言える存在です。
フレームワークの根幹となっている言語はruby（ruby on rails）・php（laravel）・python・（django）・C#（.NET）です。こうして見ると分かりますが、すべてサーバーサイドの言語です。¹

さて、なぜフレームワークはサーバーサイドの言語でありながらWebサイトを表示することができるのでしょうか？

##フレームワークがWebサイトを表示できる理由

そもそも、なぜHTMLで書かれたWebサイトが表示されるのでしょうか。

ブラウザはアドレスバーや別のフロントエンドのスクリプトから受け取ったアドレスを元にHTTP通信を行います。HTTP通信でブラウザとやり取りをするのはサーバーソフトウェアです。
サーバーソフトウェアはHTTP通信で「～～にあるHTMLファイルの中身を教えて」と言われると、HTMLファイルの中身をブラウザに返します。

では、フレームワークの場合はどうなっているのでしょうか。

これと近い形で、ブラウザがHTTP通信を使って「～～によくわからないファイルがあるらしいけど、その中身教えて」という指示を出すと、サーバーソフトウェアはその場所を探しに行きます。
その場所には実際のところ目的のファイルはないのですが、探している途中でフレームワークが「代わりに探してきてあげる」と言って、何故かフレームワーク内部からHTMLで書かれたデータを取り出して渡してきます。
サーバーソフトウェアは「こまけぇこたどうでもいい」と思うらしく、とにかくHTMLが手に入ったのでブラウザに返します。

フレームワークはHTTP通信でリクエストを受けると、独自の解釈でHTMLを生成する機能を持っています。ですから、サーバーサイド言語でありながらWebサイトを表示することができます。

なお、phpはlaravelのようなフレームワークでないネイティブコードでもフレームワーク同様にHTMLを生成できるので、サーバーサイド言語でありながらフロントエンドエンジニアにも使われる言語になっています。

##フレームワークの役割

先ほどの説明だと、フレームワークを使うサーバーサイド言語を学べばフロントサイド言語は必要ないかのように聞こえますが、そんなことは全くありません。

フレームワークは機能の呼び出し口です。複雑なWebを表示したいという場合には、別途HTMLやjavascriptを実装しますし、高度な処理はサーバーサイド言語でAPIを実装したり、外部APIへ接続するよう設計します。

フレームワークはAPIを使うことで、フレームワークに使用している言語以外のサーバーサイド言語で書かれたプログラムの機能も利用することができます。

#余談
###むしろ、サーバーサイドの技術はこれから必要なのか？

よくフロントエンドエンジニア界隈で「サーバーサイドも触れないとダメ」なんていう話がある（web検索していると出てくる）のですが、今どき超優秀なAPIが溢れかえっているので、サーバーサイドの処理はAPIに任せて、フロントエンドだけで開発してもいいサービスは作れるような気はします。
AWSとかAzureとか、firebaseとか検索したら出てくるもの以外にも、ベンチャーでコアエンジンを開発してAPIで提供しているところも結構あります。

もちろん外部サービスなのでシェアが上がれば料金を上げたり、下がればサービス終了したりといったこともあるので自作できるに越したことはありませんが、個人的には好きな言語を書けばいいと思って書いています。
ちなみに自分はpythonとjavascriptが好きです。

1. フロントエンド言語のフレームワークもありますが、少々話の道筋が見えにくくなりそうなので省きます。
   ではフレームワークはサーバーサイドの得意とする複雑な処理やデータベース操作だけを行うのかというと、そうではありません。フレームワークはWebの表示からデータベース操作までの全体をカバーしているので、これ一つでWebサイトが立ち上がります。 ↩