1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Webサービスが動く仕組み。

Posted at

アウトプットの為の文字起こし。

今日の目標
Webサービスの中で各技術がどのような役割をもって、全体感を掴む。

①リクエストとレスポンス
インターネットはサーバと通信をしている。

PCスマホからサーバーに情報を要求する事を、リクエストと呼びます。
リクエストに応えてサーバーからPC、スマホ側に情報を返すことをレスポンスと呼びます。

情報を要求する側をクライアントサイド、情報を返す側をサーバーサイドと呼ばれます。

リクエストとレスポンスの連続でサービスは成り立つ
リクエストを送るには住所(IPアドレスが必要)
リクエストを送る際に必要なサーバーの住所

ドメイン
数字の羅列である、IPアドレスに人間がわかりやすいように紐付けられたIPアドレス。

名前解決
リクエストを送る時http~だけではわかりにくいので、名前解決を行います。

では名前解決をどうやって行っているの?
DNS(ドメインネームシステム)
インターネット上のドメイン名を管理するシステム、複数のDNSサーバーよって成り立っている。
サーバーにリクエストを送る前に名前解決をしている。

ここまでの復習
①Webサービスは、リクエストとレスポンスの連続で成り立っている。
②情報を要求する側は、クライントサイド、情報を返す側はサーバーサイドと呼ぶ
③IPアドレスはサーバーの住所を示す数字の羅列である。
④ドメインは人間がわかりやすくしたIPアドレスの別名である。

②サーバーとOS
サーバーとはリクエストに対していつでもレスポンスを返すように設定されたコンピューター
分かりやすく言うと、電源つけっぱなしで繋がった画面のないパソコン。

サーバーとして動くために、必要な設定2つ。

①IPアドレスを固定する。
個人のPCはIPアドレスが定まっていません、通常他人からアクセスされることがないからです。
PCの住所(IP)を固定して電話帳(DNS)に登録することでたどりつけるようになる。
リクエストがたどりついただけでは動かない
リクエストを処理してレスポンスを返せるようにサーバーに設定する必要がある。

②リクエストに対してレスポンスを返すようにOSとアプリケーションを設定する。
OSとは何か?
OSとはキーボードタッチパッドなどから入力情報をアプリケーションに伝える最も代表的なソフトウェアのこと。

サーバーによく使われるOSLinux

サーバOSとして世界的に大きなシェアを占める
Linuxをベースとした様々なバージョンが存在、無料で利用できる

離れたところにある、サーバーにどうやって設定していくのか?

遠隔から自分のPCでネットに接続してCUIのコマンド操作で設定していく。

復習:サーバーとOS
・サーバーは特定のリクエストに対してレスポンスを返す電源つけっぱなしのコンピューター
・サーバーのOSにはLinuxが使われていることが多い
・直感的にマウス等で操作できるGUIに対して、開発はコマンド操作のみのCUIが中心である

③Webサイトの仕組み
サイトは文字の羅列で作られている

HTMLとは
ウェブページを作成するために開発された言語。
文章の構造を明確にしたり文章の中に画像や動画を配置できる。

HTMLはサイトの「見た目(デザイン)」とは無関係。
HTMLはあくまでサイトの文章、画像の構造を決めるためのもの

CSSとは
ウェブページのスタイル(見た目)を指定する為の言語です。
文章構造とデザインを切り分けることができます。

構造とデザインを分けるメリット。
例えば、デザインの変更をしたば、CSSファイルの一部を修正するだけで。
全てのHTMLのデザインが変えられる

もし分かれてなかったら…
全てのHTMLを修正する必要がある。

Webサイトを出すときにやること

サーバーにHTMLとCSSファイルをアップロードしておきます

レスポンスでファイルを返せばブラウザに表示される
ブラウザでウェブページを表示するために必要なのはHTMLCSS+(JavaScript)だけで他の言語を返しても動かない。

Qスマホアプリにレスポンスで返るファイルはWebサービスとは異なり、文章構造や画像だけが帰り、デザインの情報がないそれはなぜか?
A見た目(デザイン)の情報はアプリ内に用意されてる為文書と画像の情報を流し込むだけでいいから。

復習:Webサイトの仕組み
・HTMLはウェブページを制作するための言語で、文章の構造を決めることができる。
・CSSは、ウェブページのスタイル(見た目)をしてすることができる
・レスポンスでHTMLとCSSを返すことでウェブページを表示することができる。

④サーバーサイドスクリプトとデータベース

スマホやパソコンからリクエストを送ってリクエストを受けてサーバ内で何が起きているのか。

復習:サーバーにはLinux系のOSが入っています。

このサーバー内にHTML・CSSを置くだけでもWebサイトはできます。

ただし、何度見ても同じページが表示されます。

これでは投稿したり、検索したり、オススメを表示したり「サービス」を作ることはできない。

サービスにするために必要なもの
①データを保存する仕組み、
②サービスの仕様を反映したロジック

保存はデータベース、ロジックはサーバーサイトスクリプトが担当

⇨リクエスト⇨サーバーサイドスクリプト⇨データベース
レスポンス⇐(Ruby/java/PHP)⇐データベース

①データベース
サービスにある膨大な情報を保存する場所がデータベース
データを保存するシステム。通常エクセルのような表形式で保存され、1つの表をテーブルと呼ぶ。

②SQL
データベースを操作する為の言語。
テーブルの読み出し、追加、更新、削除などの操作が出来る。

③サーバーサイドスクリプト
データベースはあくまでデータの保存が出来る場所でしかない。
サービスの仕様にもとづいたロジックや実際に返すHTMLの情報をプログラムしておく必要がある。

例)レシピサイトのトップページでどんなレシピ一覧を表示するか

Ruby、java、PHPを始めとするサーバーでの処理を担うプログラム、
これらを用いてロジックを書くことで動的なアプリケーションを作成できる

①サーバーサイドスクリプトがやってくれること。
サーバーサイドスクリプトは、必要に応じて"SQL"用いてデータベースから情報を取得します。

②サーバーサイドスクリプトがやってくれること。
サーバーサイドスクリプトは、データベースは、データベースから取得したデータを利用してHTML/CSSを生成します。

ちなみに
Ruby、PHP、javaなど複数のサーバーサイドスクリプトの言語がありますが、書き方が違うだけで基本的な役割は同じです。

1つの言語を理解していれば、新しい言語でも一ヶ月程度の学習で使いこなせるようになる。

最後はブラウザにレスポンスとしてファイルを返して終了

サーバーからクライアントサイドにHTML/CSSを返して終了です。
⇨リクエスト⇨サーバーサイドスクリプト⇨データベース
レスポンス⇐(Ruby/java/PHP)⇐データベース

復習:サーバーサイドスクリプトとデータベース
・データベースは、データの保存するシステムでテーブルと呼ばれる表形式で保存される
・SQLはデータベースを操作するための言語
・サーバサイドスクリプト(Ruby、java、PHP等)はウェブサービスのロジックを担当する
・サーバサイドスクリプトは、データベースから必要なデータを取得する。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?