こんにちは。switchです。
今回はWebサービスの仕組みをざっくりですが簡単解説していきます。
WordPressでホームページやブログを立ち上げようとすると、初めて聞く言葉が多いですよね。「IPアドレス」とか「DNS」とか。
その都度ググってもいいんですけど、それやると結構時間かかっちゃうんですよね。
なので、まずWebサービスの全体的な仕組みを理解することをオススメします。
今回は「こうやってWebサービスって動いているんだあ」って理解するのが目的。ざっくり分かればOK。興味があればエンジニア系のブログやYouTubeを見て、深掘りしてください。
リクエストとレスポンス
まずリクエストとレスポンスについて。
別の記事で、サーバーとドメインについてざっくり解説しました。
・サーバー：インターネット上の土地のようなもの
・ドメイン：インターネット上の住所のようなもの
今回、もう少し詳しく解説しますね。
スマホやPCでYouTubeやInstagramのようなWebサービスを見たい時、そのサービスはサーバーと通信しています。
PC、スマホからサーバーに情報を要求することを「リクエスト」と言います。
例えば、この「Up Tempo!」のサイトを見たい時、「Up Tempo!」のアドレス「https://www.uptempo-marketing.com」をブラウザに入れてサーバーにリクエストします。
サーバーはこのリクエストに応えて、PC、スマホに情報を返します。これを「レスポンス」と言います。
こんなカンジです。情報を要求する側を「クライアントサイド」といい、情報を返す側をサーバーサイドと言います。
・クライアントサイド：情報を要求する側
・サーバーサイド：情報を返す側
そしてWebサービスはこのリクエストとレスポンスの連続で成り立っています。
このように往復の連続です。
PCやスマホがサーバーにリクエストして通信するので、通信先に送る住所のようなものが必要になります。
そのサーバーの住所を「IPアドレス」をと言います。
例えば、手紙を送る時は、こんな住所ですよね。
住所：東京都港区青山３丁目○番○号
サーバーの住所、IPアドレスはこんなカンジなんです。
IPアドレス：31.13.82.1
IPアドレスは0から255までの数字を４つのブロック分けた形式で表記されます。ホームページやブログを立ち上げる時、サーバー会社からサーバーをレンタルするんですけど、その時この数字を貰えます。
このIPアドレス：31.13.82.1
これFacebookのIPアドレスなんです。この数字をブラウザに打ち込むとちゃんとアクセスできるんです。試しにやってみますね。
Googleの検索エンジンページにこのIPアドレス「31.13.82.1」を打ち込んでエンターを押すと
facebookのサイトにちゃんとアクセスできるんです。
でもアドレスって「https://www.facebook.com」の方が馴染みがありますよね。
このアルファベットのアドレスのことを「ドメイン」と言います。
実はこのドメインとIPアドレスって紐付けされているんです。サイトを立ち上げる時、IPアドレスとドメインを紐付け作業するんですけど、なぜそんなことをするのかというと
・31.13.82.1 分かりにくい！
・https://www.facebook.com 分かりやすい！
という理由から。
サーバーにリクエストを送る時「https://www.facebook.com」では実際送れないので、IPアドレスに変換する作業をします。これを「名前解決」と言います。
ではどうやって名前解決するのか？
DNS（ドメインネームシステム）が解決します。
DNSはインターネット上のドメイン名を管理するシステムのこと。複数のサーバーから成り立っています。分かりやすく言えば、インターネット上の電話帳みたいなものです。
サーバーにリクエストを送る前にDNSで名前解決をしています。
という流れです。
こうやってリクエストとレスポンスの往復でWebサービスを見ることができています。
サーバーとは何か？
上の写真がサーバーですね。
でも皆さんのお持ちのパソコンも必要な設定をすればサーバーにすることもできます。でも自分のPCがリクエストを受けることはないのでサーバーにする必要はないです。
OSは「Operating System」の略で、「操作するためのシステム」 のこと。
もしPCやスマホにOSがなかったら、電源を入れても真っ暗な画面が表示されるだけ。何もできない。
OSはPC、スマホも全てのハードとソフトを管理し、ユーザーが利用しやすいようにサービスしてくれるソフトで欠かせないソフトウェア。
デスクトップだとWindows、Mac。モバイルだとiOS、Androidがメジャーですね。
そしてサーバーにもOSがあります。
色々あるんですけど、「Linux」というOSが代表的でよく使われています。これだけ知っていればOK。
ついでに、エンジニアの人ってこんな画面で作業していますよね。
謎の文字がたくさん並んでますよね。
今のPCはマウスやトラックパッドがあるので直感的にPCを操作していますが、昔のパソコンは文字だけしか打てませんでした。このようにテキストデータのみで表現されていることを
CUI（キャラクターユーザーインターフェース)と言います。
それに対し、皆さんのが普通に使っているアイコンや画像で表現されている形式のことを
GUI（グラフィカルユーザーインターフェース）と言います。
エンジニアの人が難しそうなテキストをパチパチやっているのは、そっちの方が効率が良いからです。
こうした難しいテキストデータだけのパソコンをクリックだけで誰もが使えるGUI（グラフィカルユーザーインターフェース）を普及させようとした人があのスティーブ・ジョブスだったりします。
CUIとGUI、覚えておくと良いです。
Webサイトの仕組み
次にWebサイトの仕組みについて。
クライアントがサーバーにリクエストすることで、情報を受け取ることができる。
その情報がどんな仕組みになっているのか解説。
Webサイトって専用の言語で書かれて作られています。
例えば、これFacebookのサイトの言語。
文字の羅列。よくわかんないですよね。
クライアント側からはいつものカンジで見れます。
Webサイトは主に次の３つの言語からできています。
・HTML
・CSS
・JavaScript
一度は聞いたことあると思います。
この３言語はそれぞれ役割があります。
・HTML：サイトのパーツ骨格を作る
・CSS：色や形などパーツの装飾を行う
・JavaScript：パーツに動きを加える
HTMLはサイトのメニューバーや見出し、文字、ボタン、画像などの構造的な部分を作ったりします。
CSSはWebサイトにデザインの要素を追加してキレイな見た目にするのが役割。HTMLだけだと味気ないサイトになるけど、CSSを追加するとサイトも装飾され見た目Goodです。
JavaScriptはパーツに動きを与える役割。スライドショー、タイマー、Googleマップなどサイトに動きを与える役割。
それぞれの言語がそれぞれの役割があるってことだけ知っていればOK。
このようにWebサービスやアプリで直接ユーザーの目に触れる部分のことを「クライアントサイド」とか「フロントエンド」って言います。
この部分を構築するエンジニアの人をフロントエンドエンジニアって言います。
HTML、CSS、JavaScriptはサーバーにアップロードされた状態でWebページで見ることができます。それでリクエストに対してレスポンスでHTML、CSS、JavaScriptで書かれたページを表示することができます。
スマホだとちょっと違ったりします。
スマホの場合はアプリをダウンロードした段階で、デザイン情報はすでにインストールされたりしています。なので通信する情報は最低限だったりします。
ちょっとした豆知識。
Webサイトはこんな仕組みになっています。
サーバーサイドスクリプトとデータベース
次はWebサービスの仕組みについて。
スマホやPCでリクエストを送ってレスポンスを返すまで、このサーバー内で何が行われてるのかを解説。
先ほどのWebサイトの仕組みでは、サーバー上にHTML、CSSのファイルがあるとクライアントサイドで見ることできます。
それはブログのようなページなら大丈夫。誰がみても同じページだから。
だけどTwitterやFacebookは？
人によって画面が違うので、HTML、CSSだけじゃ表示できない。
なぜ？
Webサービスではないから。
Webサービスで必要なもの
・データベース
・サービスの仕様に反映したロジック
この２つが必要。
[pdf-embedder url="https://uptempo-marketing.com/wp-content/uploads/2021/03/サーバーサイド画像.pdf"]
まずデータベースから。
データーベースは膨大なデータを保存しています。
Facebookで昔投稿した写真が、今のスマホになくても見ることができますよね。データベースに保管されているから。
そしてその写真欲しいなって思ったら、ダウンロードできます。
この時、データを抜き出したり操作する言語を「SQL」と言います。
このデータを使ってHTML /CSSに情報を生成して返す役割を担うのが「サーバーサイドスクリプト」って言います。
生成ってTwitterやFacebookは人によって画面が違うので、リクエストした人に合わせた情報を当てはめるってこと。
それをHTML /CSSに返して情報を表示する。レスポンスする。という具合。
サーバーサイドスクリプトの主な言語
・Ruby
・Java
・Python
・PHP
色々ありますが、役割は皆同じ。
サーバーサイド言語を扱うエンジニアさんをサーバーサイドエンジニアって言いいます。Webサービス構築の裏方さんみたいな方ですね。
リクエストからレスポンスまで１秒にも満たない間に、これらのやりとりがあります。
以上。今回のまとめ
・リクエストとレスポンス
・サーバーとは何か？
・Webサイトの仕組み
・サーバーサイドスクリプトとデータベース
ホームページやブログを始めると、初めて聞く言葉が色々出てきます。全体の仕組みが分かれば色々とスムーズです。
別に覚える必要はないので、ざっくりこんなカンジかと分かれば、それだけでOKです。
それではまた。