前回JavaScriptの項目で話してたWebサーバーの部分が
バックエンドになるのかなー
うん、そうなるね^^
ただ、フロントエンドと比べて細かいところまで話してしまうと
だいぶでかい話になるから、
一般的なWebアプリケーションで使われている
Webサーバーとデータベースについてだけ話すことにするね^^
はーい！
うん、そのほうが助かるわ！
私ががっつり開発するわけではなくて
Webの裏側の仕組みが概要がわかれば良いから^^
- Webアプリケーションは、フロントエンドとバックエンドで出来ている
- フロントエンドはHTML、CSS、JavaScriptが使われている
- バックエンドはWebサーバーとデータベース(DB)が使われている
- Webサーバーはユーザーのリクエストを受け付けてあらかじめ決められた処理をする
- データベースはユーザー情報は投稿内容を保存する
フロントエンドについては 会話で使われる用語パート2 ~フロントエンド~ を確認
バックエンドとは
さっきも説明したけど
バックエンドはWebサーバーとデータベースで主に構成されているよ^^
まずは全体の流れを理解しやすくするために
次の図を見てほしい。
フロントエンドとバックエンド全体のデータのやりとりの流れ
データベースが増えているのと、
赤字になっているところが追加されているね^^
うん、そうだね(^^)
この図を元にWebサーバーとデータベースの説明をしていくね^^
Webサーバーは何をするの？
- クライアント(=フロントエンド)から来たリクエストに応じた処理を行う
- 必要があればデータベースと連携しデータを保存したり、取得したりする
なんで、
あえてクライアントって言葉を使ったの？
そういえば、リクエスト・レスポンスって言葉を使うときって
- サーバーにリクエストを投げる
- クライアントにレスポンスを返す
ってよく聞くかも。
まことの言う通りで、
フロントエンド・バックエンドって言葉を使っても意味は通じるから
あまり気にしなくても良いかもだけど
よく使われるほうで統一したほうが良いかなと思ったから、
ここでは
- クライアント(= フロントエンド)
- サーバー(= Webサーバー)
って言葉を使っていくね^^
郷に入っては郷に従え（？）ってやつね！
ま、まあ、そんな感じでいいかな^^;
で、話を戻して、
サーバーはクライアントからのリクエストに応じた処理を行うんだ^^
リクエストに応じた処理を行う？
Twitterの例にすると、
- ユーザーの新規登録をしたり
- ログインしたり
- タイムラインを見たり
- 投稿したり
って感じかなー
うん、そのとおり！
それぞれの処理は次のようになるね^^
- ユーザー登録・・・データベースにユーザー情報を保存
- ログイン・・・データベースに保存されているユーザー情報と比較して正しい情報だったらログインする
- タイムラインを見る・・・データベースからタイムラインのデータを取得する
- 投稿する・・・投稿内容をデータベースに保存する
全ての内容にデータベースが含まれているのね。
良いところに気がついたね！
基本的にどのWebサービスもデータベースを使っていると思ってもらって良いよ^^
厳密に言うと、静的なページを帰す場合はデータベースは使わないけど。
例えば
https://tsuyopon.xyz/index.html
のように HTMLファイル を取得する場合、
htmlの内容はJavaScriptで動的に変更されない限り、
毎回同じページが表示されるよね^^
Webページの構造を定義しているだけのファイルで
そのファイル内容が毎回返ってくるって認識で合ってる？
うん、その認識で大丈夫だよ^^
例えば今見ているこのページのURLを見てごらん^^
htmlって文字がどこにも入っていないよね?
あれ！？
ホントだ！
index.htmlって名前ファイルがあれば省略できて
htmlって文字が含まれていない可能性もあるんだけど、
今回の場合は index.html は用意していないから
HTMLファイルを使っていないんだ^^
ん！？
なんか頭がこんがらがってきた…
落ち着いて落ち着いてw
HTMLファイルは使ってないって言ったけど、
HTMLは使っているよ^^
HTMLファイル使わなくても
HTML使うことが出来るの？
うん、出来るよ^^
プログラムでHTMLファイルの内容と同じ内容を作るんだ(^^)
プログラムでHTMLファイルと同じ内容を作る？
なんでそんな事するの？
Twitterを考えてみて^^
タイムラインの内容って見る時間によって毎回違っているよね？
うん、そりゃそうだよ。
だってオレもそうだしフォローしている人が
好きなタイミングでツイートするからね。
ということは、
HTMLファイルとして事前にタイムラインの内容を決められなくて、
リクエストするたびにサーバーがタイムラインの情報をデータベースから取得して
取得したタイムラインのデータを使ってHTMLを動的に作るんだ^^
次の図を見てみようか^^
流れが微妙に変わっていることに注意してね(^^)
サーバーでHTMLを動的に生成する流れあらかじめWebサーバーがデータベースから最初のタイムラインデータを取得して
その取得したデータを使ってWebサーバー内でHTMLの内容を作成して
クライアントにその動的に作成したHTMLを返しているんだ^^
同じ内容だけどクライアントがWebページを表示する際に
一番最初にすることの流れをまとめたものだよ(^^)
- クライアントがサーバーにタイムラインページをくださいとリクエストを投げる
- サーバーはクライアントからのリクエストを受け取りデータベースに直近のタイムラインデータを取りに行く
- データベースは直近のタイムラインのデータをサーバーに返す
- サーバーはデータベースから受け取ったデータを元にHTMLを動的に生成する
- サーバーはクライアントに動的に生成したHTMLを返す
- クライアントは受け取ったHTMLを元にWebページを表示する
なるほどね～！
この図ってTwitterのタイムラインを表示するまでの流れだけど、
ブログの一覧ページとか、掲示板も
Twitterのタイムラインデータを取得して
動的にHTMLを生成する流れとほとんど同じ仕組みで動くんじゃない？
そう！まさにそうなんだよ！
ブログも掲示板も投稿されるたびにページの内容が変わるよね^^
どのWebサービスでもアプリとかでもそうだけど
基本的に次のような機能ってあるよね^^
- データの閲覧
- データの作成
- データの編集
- データの削除
そうそう！そんなイメージ！
やっぱり同じような仕組みなのかー！
すげー！
みゆきよく気づいたな！
私って天才なのかも！w
逆に言えば、
どのサービスでも同じ仕組みで動いているってことは、
この仕組みさえわかっていれば
Webの基本的な動きは理解していることになるね^^
データベースは何をするの？
- Webサーバーからのリクエストに応じてデータ操作を行う
- データ操作
- データの取得
- データの保存
- データの更新
- データの削除
データベースで出来ることは、
Twitterを例にして話して何となくわかったと思うけど
さっきの図をもう一回見てみようか^^
サーバーでHTMLを動的に生成する流れこの図でいうと②③の部分がデータベースを使った
やりとりになるけどデータベースがやることはシンプル！
- データの保存
- データの取得
- データの更新
- データの削除
の4つだけだよ^^
普段仕事でブログを書くからなんとなくイメージつくけど
- 記事の投稿がデータの保存
- 記事の閲覧がデータの取得
- 記事の編集がデータの更新
- 記事の削除がデータの削除
ってことよね^^
オレもプログラミングで勉強した内容とか
よくブログにまとめてる^^
ブログを見返して思い出したりするのにも良いし
アウトプットすると記憶に残りやすいんだよね(^^)
うん、みゆきのそのイメージで合ってるよ^^
まことも普段勉強したことをブログにまとめてるんだね！
勉強した内容をブログに書くのは本当にオススメで、
僕も同じようなことやってたな〜
つよぽんのプログラミング初心者だったときのブログ読んでみたい！
ググって探してみてw
なんだよそれーw
まあまあw
とりあえずバックエンドの説明はこのへんで終わるけど、
前回の「会話で使われる用語パート2 ~フロントエンド~」と合わせて
流れを抑えるともっと理解深まると思うから
ぜひ前回の話も復習しておいてね〜^^
フロントエンド早く出来るようになって、
早くバックエンドの勉強に入ってフルスタックエンジニアになるぞー！
おお！良い意気込みだね^^
わからないことがあったらいつでも聞いてね^^
- バックエンドは基本的にWebサーバーとデータベースで構成されている
- Webサーバーは必要に応じてデータベースとやりとりをしてデータの保存・取得・更新・削除を行う
- ほとんどのWebサービスはざっくり言えば同じ構成で動いている
- ブログなど
LINE登録で無料特典を受け取る
次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。
- Webエンジニアになりたいけど何から学習を始めれば良いかわからない
- 今まで独学で頑張ってきたけど、独学に限界を感じてきた
- プログラミングは出来るけど、大きめのコードが書けない
「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。
