今回は前回の記事に引き続き – ブラウザの役割について – プログラミングを始める前に知っておいて欲しいWebサイトの仕組み
サーバ
についてのお話です。
この画像にもあるように、 私も最初のうちはこのサーバという 言葉に慣れませんでした。 （知った風な感じで使ってはいましたが）
今回の記事ではサーバとはなんなのか。 また、Webサイトの中ではどういう役割があるのか ということについて書いていきたいと思います。
※アイキャッチ画像でいう右上部分の話です。
サーバーとは
サーバーというのは、 役割の名前と考えて頂ければ良いと思います。 （クライアントが通信をする先と考えても良いです）おおかたの内部の構造は、 みなさんが個人でお使いのパソコンと同じ構造で、 用途によって呼ばれ方が違うということです。
またまた、役割によってさらに細分化されりします。
DBサーバ(ディービー・サーバー）
MySQLやPostgresSQLがダウンロードされたデータベース用のサーバ
WEBサーバ(ウェブ・サーバー）
外部からのアクセスを処理するサーバ
ファイルサーバ(ファイル・サーバー）
ファイル共有の為に設置されているサーバ
皆さんお使いのパソコンがサーバと呼ばれないのは、 HTTP接続できるように外部に公開していたりするわけではないからで 皆さんが自信のサイトを外部に公開してしまえば、 それらはサーバと呼べてしまいます。
※実際には中規模〜大規模のサービスの サーバは24時間365日稼働する必要があるので、 一般的に個人のパソコンより性能が高かったり 停電や落雷などに対応できるような作りになっています。
サーバーのWebサイトでの役割
サーバーは、 Webサイトとしての役割です。 前回の記事や前々回の記事で説明したように、 クライアントからリクエストを受け取って、HTMLを返却する役割があります。
また、サーバの構造は 下記のようになっており、 OSの中に、 WebサーバであるApacheやNginxがあり、 その中にデータベースとアプリケーションがあります。
これらの構造が連動して、 レスポンス(HTML)を作ってリクエスト元に返します。
流れとしては、
外部のクライアント→Webサーバ→APP（PHPコード)→DB
→APP(PHPコード）がデータベースのデータなどを元にHTMLを返却
と言うようになります。 ※データベースは介さない場合もあります。
また、 ちなみにプログラミングというのは、 ここのアプリケショーンを作り上げる、開発する作業になります。 （javascriptなどのクライアント側のプログラミングはまた別ですが）
図では、 PHPで作られたアプリケーションを想定していますが、 そのほかのRuby,Python,Java,Cなどでも 基本的な構造は同じです。
サーバーでHTMLを作成する
では少しコードも載せつつ説明していきます。 まずHTMLのコードを紹介します。
HTMLは
タグというもので構造化されたファイルで
例えば、 titleというタグで囲まれた部分のテキストが そのページのタイトルになり、 ブラウザのタブ部分に表示されます。
また、 このHTMLファイルは 「Hello World!!」という文字列を表示するものでもあります。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Hello World!!!</p>
</body>
</html>
実際に利用されているHTMLはこれより複雑ではありますが、 サーバーは簡単に言うとこのようなファイルを生成して、 クライアントに送信しています。
しかし、これは静的なファイルと呼ばれ、 クライアントがリクエストする前に生成されているので プログラムの出番はありません。
実際のWebアプリケーションでは 動的にページを生成するので 下記のようなぺージになります。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p><?php echo date('Y-m-d'); ?></p>
<p>Hello World!!! </p>
</body>
</html>
下記のような行が追加されていますが、
<p><?php echo date('Y-m-d'); ?></p>
この で囲まれた部分が 実際のPHPのコードになり、 この部分が実際にwebサイトにアクセスした瞬間の日付を表示してくれます。
また、 データベースと連携してページを表示する場合は、
この間にデータベースからデータを取得するような処理を書いてHTMLの中に結果を埋め込みます。
サーバ側のエンジニアの主な仕事はこの データベースからのデータ取得部分や、 取得したデータの整形・加工などをコードで実現することになります。
フロント側のエンジニアと言うのも存在してそれらの 方々は、クライアント側で動くプログラムのコーディング が主な仕事になります。
最後に、 上にコードを貼りましたが、 このPHP部分を書いている時に実際の処理などを イメージできるかどうかでプログラミングの理解度というのは 変わってきます。 （よりリアルにイメージできるようになるのでハラオチし易い）
「こういうコードをかくとデータベースにもアクセスしてる」
などのようにデータの流れがイメージできているというのが 理想の状態になります。
二次元エンジニアにならないよう コードの先をイメージしながらコーディングできるよう になりましょう。
まとめ
最後で、 やっとプログラミングらしいことが出てきましたが、 プログラミングというのは システムの一部でしかないということは わかりましたでしょうか。 （一応三部作のように記事を書いたので）
プログラミングというのは、 アプリケーションを作るというWebシステム全体の 一部になり、 エンジニアというのは そのほかの膨大な項目のものを意識しながら コーディングする必要があります。
プログラミングを勉強して 自分がイメージしたものを作ることだったり それを学び上達する過程や新しい技術を試してみると言うのはとても 楽しいものなので、 まだあまり触ったことのない人には ぜひこの世界に踏み込んで頂きたいと思います。
が、
その道中 「ここはどこ？」「私はだれ？」状態 （今学んでいる内容がなんのためなのか、何に役たつのかわからない状態）
に 陥ってしまうことを避ける為にも、 アイキャッチのようなwebアプリケーションの全体像をイメージしながら プログラミング学習をすると より楽しい学びの時間になるはずです。
ぜひ、 立体的でよりリアルなイメージを持ちながら プログラミングをしてみてください。
では。
