いづいづブログ

アジャイルコーチになりたい札幌在住SEです。アジャイル札幌スタッフ&ScrumFestSapporo実行委員。Like:パクチー/激辛/牡蠣/猫/初期仏教

WEBサービスの基礎技術

「非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術」を読んで、Webサービスに関連した基礎技術を理解する。

ここ、初心者にはすごいわかりやすい!

1.Webサービスの超基本的な仕組み

Webサービスはリクエストとレスポンス

  • リクエスト クライアントからサーバーに情報を要求
  • レスポンス リクエストに応えてサーバーからクライアントに情報を返す

IPアドレスドメイン

やりとりをするためには相手の場所を知る必要があり、そのための「インターネット上の住所」のようなものがIPアドレス(Internet Protocol Address)。例) Facebookだと「31.13.82.1」。

IPアドレスは数字の羅列なので直感的にわかりにくいという問題があり、直感的にわかるようIPアドレスと紐付いた別名がドメイン

例) Facebook 【IPアドレス】31.13.82.1 【ドメインfacebook.com

参考

 IPアドレスとは?をわかりやすく解説します

 ドメインとは?をわかりやすく解説します

IPアドレスドメインの紐づけ

DNS(Domain Name System)によって実現している。

DNSとはドメイン名と紐付いているIPアドレスが何かを管理するシステム。

クライアント側がURLを入力すると、最初にDNSサーバーにアクセスしドメイン名に紐付いているIPアドレスを取得すし、次にIPアドレスを元に目的のサーバーにアクセスするという順番で通信しているのだが、この辺は裏で勝手にやってくれるのでユーザーは意識しなくてもいい。

この仕組を「名前解決」という。

2.サーバー

サーバーとは

サーバーOSが入った端末のこと。サーバーの役割は大まかにこんな感じ。

  1. データの保管
  2. 要求された形にデータを加工
  3. クライアントからリクエストを受け、必要なデータを送り返す

サーバーの役割を考えると「常時接続できる状態」であることと「IPアドレスは固定」である必要がある。

サーバーOS

サーバーOSはLinuxUNIXベースのOS)が大きなシェアを占めている。

さらにLinuxをベースとした様々はOSがある(ubuntuCentOS)。

3.Webサイトの仕組み

HTMLとCSS

WebサイトはHTML(構造)とCSS(デザイン)でできている。

  • HTML(HyperText Markup Language)

   HTMLは画像や文章の構造を決めるためのもの。

   クライアント端末のブラウザに表示されるあらゆるウェブサイトはHTMLで書かれている。

   見た目(スタイル)を指定する言語。

サーバーにHTMLとCSSファイルをアップロードしておき、クライアントからのレスポンスに応じてHTMLとCSSを返すことで、ブラウザにWebページを表示している。

構造とデザインを切り離すことで、デザインの変更を複数のサイトへ簡単に適用することができる。

4.サーバー側の処理

サーバー側の最終的なゴールは、前述の通りクライアントにレスポンスを返すこと。

だけど、サーバーにあるHTMLとCSSファイルをレスポンスとして返すだけだと、静的なページしか表示されない。

Webサービス」という観点で考えた場合、クライアントの要求に応じて必要なレスポンスを返す必要があるのでさらに以下の2つが必要になる。

  • データを保存する仕組みである「データベース」

  • サービスの中身となるロジックである「サーバーサイドスクリプト

データベース

データを保存するシステム。 データを操作(抽出、追加、更新など)するための言語がSQL

サーバーサイドスクリプト

サーバー側の処理を行うプログラム。言語はRubyJavaPHPなど。

これらを使ってロジックを書くことで動的なアプリケーションが作成できる。 サーバーサイドスクリプトで書くロジックは大きく以下ような感じ。

  1. 必要に応じて、SQLを用いてデータベースから情報を取得し
  2. データを利用して、HTML/CSSを生成

5.(1~4を踏まえて)改めてWebサービスの超基本的な仕組み

  1. クライアントがサーバーにリクエストを送る。
  2. サーバーは必要に応じて、SQLを用いてデータベースからデータを取得する。
  3. データを利用して、HTML/CSSを生成する。
  4. クライアントにHTML/CSSを返す(クライアント側のブラウザが認識できるのはHTMLとCSSだけ)。