私は元々デスクトップアプリケーションの開発を行っていたのですが、その頃、WEBアプリっていうのはどうにも未知の領域でした。

デクストップアプリケーションを開発していた頃は、手元のPC上で動くプログラムを１つの言語で開発していました。
しかし、WEBアプリとなると、動作環境もサーバー上で動くバックエンドとブラウザ上で動くフロントエンドが分離されているし、サーバーの中でプログラムがどう動いているか確認する方法もよくわかりませんでした。

今回はWEBアプリの仕組みを私の解釈で、わかりやすく説明できればと思います。

バックエンドとフロントエンドってどういうこと？

まず、WEB開発で出てくるのが『バックエンド』『フロントエンド』です。

『バックエンド』はサーバー上のプログラミング
『フロントエンド』はブラウザ上のプログラミング
という認識ですが、もう少し細かく書くと

バックエンドは

• 表示させるページのルーティング
  アクセスのあったURLから、どのプログラムのどの情報を表示するのか決める
• データベースと通信を行い、リクエストに応じたデータをフロントに返してあげる。もしくは表示させる
  データベースと通信するのは、完全にバックエンドの仕事だと思う

フロントエンドは

• ユーザーが入力したデータをサーバーに送信できる仕組みを用意する
  ユーザーの入力をフォームで受けるのか、AJAXなどの仕組みで受けるのかなどはフロントエンドの仕事なんじゃないかな
• ユーザーが入力しやすいUI/UXを実装する
  ユーザーの入力・レスポンスについても、次のページに遷移させるのか、モーダル表示するのかなどを決めるのも、UXを決定づける重要な要素だと思う

がメインの仕事ではないかと思います。

WEBアプリケーションの動き

では、実際、WEBアプリケーションではプログラムがどう動いているのかを紹介します。

WEBアプリケーションでは、ユーザーが操作する『ブラウザ』と、データベースにつながっている『サーバー』が別々に存在しており、明確に仕事が異なります。

基本的にデータベースにアクセスできるのはサーバーサイドスプリプトのみで、ブラウザの表示を操作できるのはJavascriptなどのクライアントサイドスクリプトのみです。
これらをうまいこと操って、一つのアプリケーションを構築していきます。

ブラウザからリクエストを送信して、最初に動くのはサーバー側のスクリプトということになります。
まずサーバー内でスクリプトを処理して、結果をユーザーに送信。
ユーザーは受け取った結果からJavascript部分を実行して、表示するという流れです。

その上で重要なのは、スクリプトはコンパイル型プログラミング言語と異なり、解析されるまでは、ただの文字列でしかないという点です。
つまり、サーバー内ではJavascriptは処理できないただの文字列として扱われます。

そして、ユーザーがサーバーからデータを受け取った時点で、サーバーサイドスクリプトは実行し終わっているため、ユーザーに送信されるデータにはサーバーサイドスクリプトは含まれないということになります。

WEBアプリで最初に動くのはサーバーサイドスクリプト

ユーザーからのリクエスト（ページリクエストやサブミット等）があると、サーバーはユーザーに送信するファイルを探して、その中に記述されているサーバーサイドスクリプトを実行してからユーザーに送信しようとします。
そのため、サーバーサイドスクリプトが先に実行されるのです。

ただ、ユーザーのリクエストをブラウザが先に処理しているということもできるため、これはどの時点を開始点と考えるかで変わります。

Javascriptは解析されるまではただの文字列

WEB開発ではソースコードにHTMLやサーバーサイドスクリプトやJavascriptが混在した状態で記述されています。
これって、1言語で開発していた人からすると、カオスの極みのような状態ですよね。

しかも、先にPHPが動くって書いたけど、その時にJavascriptはどう扱われているのか不思議ですよね。
実は、サーバーサイドスクリプトが処理されている間、それ以外のHTMLやJavascriptはただの文字列も同然の扱いとなっています。
つまり、それ自体がコメントなのか、マークアップなのか、プログラムなのかを識別されていない状態です。

そもそもがコンパイル型言語ではないため、（サーバーサイド）プログラムの実行中に（クライアントサイド）プログラムの書き換えができちゃうということです。
そのため、例えば、PHP＆Javascriptの環境では、以下のような記述が可能です。

<?php echo "<script>alert('hoge');</script>"; ?>

全体がPHPのカッコで囲まれていますが、PHPはscriptタグをechoしています。
プログラムが標準出力したプログラムが動作するわけないと思ったら、動作するんです。
これはサーバーサイドスクリプトが出力した物を、ブラウザが受信してもう一度解析するためです。

PHPもJavascriptも、スクリプト言語は実行環境で解析されるまではただの文字列でしかない！

ユーザーにサーバーサイドスクリプトは送信されない

サーバーからユーザーに情報が送られる前に、サーバーサイドスクリプトは実行されてしまいます。

サーバーサイドスクリプトが実行されるとはどういうことか？
それはプログラムが処理され、結果として出力された文字列（HTMLやJavascriptなどを含む）だけが残るということです。

そのため、単純な話がJavascriptに記述したコメントはユーザーに読まれるけど、PHPに記述したコメントはユーザーに見られないってことです。
コメント一つ残すにしても、そういうプログラムが実行される流れを理解して、どこにどのようにコメントを残すべきかよく理解して進めていきたいですね。