# はじめに こんばんは、エンジニアのお家でまったり 青少無粧ラジオのニューブルです。 この番組は、エンジニアだからお伝えできることや、 日々気になったことなど、楽しくITを学べるチャンネルです。 聞きに来てくださってありがとうございます。 今日は、今こそ知りたいIT用語シリーズになります。 今更聞けないIT用語シリーズを聞いて、 ITって意外と面白いかもとか、 もっと知りたいなと感じてくれた、 あなたのための一歩進んだシリーズになっております。 一緒にいろんなことにチャレンジしていきましょう。 今更聞けないIT用語シリーズで覚えた、 点と点の知識がどんどん線につながるような、 そういう面白さを一緒に、 ワクワク感をあげていけたらなと思っております。 また、本シリーズはハッシュタグがありますので、 そちらからもこのシリーズの放送を 聞いていただければと思っております。 それでは、今日は話そうと思っていたのは、 サーバーサイドとクライアントサイド、 という2つのサイドという形で、 両面があるという話をさせていただこうかなと思っています。 これはウェブサービスに限らないかなとは 思うんですけど、ウェブサービスを作る上で、 サーバーサイドとクライアントサイドで どういう動きをしているのかというのを、 ちょっと深掘りというか、 お話ししていこうかなと思っております。 # レストランに例える「場所」の違い ウェブアプリケーションが、ウェブアプリケーションとか、 ウェブサービスとかなんですけど、 それが動くときに、実はプログラムが実行される場所って、 サーバー側、ウェブサーバーとかアプリケーションサーバーって言うんですけど、 そちらのサーバー側だけではないっていう話なんですけど、 皆さん、そういうふうにウェブサービスとかって言うと、 全部サーバー側で動いてるのかなと思われがちなんですが、 実はそうではなくて、サーバー側がサーバーサイドって言って、 もう一つが、これをお聞きのあなたのブラウザーですよね。 ウェブサービスを使うときにブラウザーを立ち上げて、 そこでアクセスすると思うんですけど、 そのブラウザー上で動くものをクライアントサイドって呼びます。 そんな感じで、サーバーサイドとクライアントサイドで、 それぞれの役割分担がされてますので、 その話をまずはいつものように、 レストランに例えてお話していこうかなと思ってます。 レストランに例えると、場所のサーバーサイドとクライアントサイド、 何になるのかなと思うんだということで、 まずクライアントサイドは、お客さんといえば、 皆さんこれウェブサービスを使っているお客さんだとして、 そのブラウザーっていうのは、レストランで例えると、 テーブル席にいるお客さんなので、 テーブル席のことだと思ってもらったらいいと思います。 メニューを注文して料理が届きました。 そのときにいろいろやり取りをすると思うんですけど、 手持ってきた店員さんとやり取りすると思うんですけど、 その辺りをクライアントサイドを イメージしてもらえればと思います。 サーバーサイドがお店でいうと、 シェフが料理を作る厨房というかキッチンというか、 その部分でお客さんからは直接は見えない部分。 お客さんとしては、ウェイターさんとか、 そういう料理を持ってくる人が窓口になってやってると思いますけど、 その裏側で厨房っていうサーバーサイド側の処理がある っていうのを考えていただければと思います。 あなたがメニューを注文したときに、 注文するとか出来上がった料理を運んでもらうとかっていうのは、 前回、今こそ知りたいか。 このシリーズでお話しさせていただいたリクエストとレスポンス。 この話がそこに繋がってくるんですけど、 その話はまだ聞いてない方は、 このチャプターにリンクを貼っておきますので、 よかったら聞いていただければと思います。 このテーブルが関、クライアントサイドと厨房、 サーバーサイドでそれぞれの何が行われてるかっていうのを、 それぞれのチャプターで見ていこうかなと思っています。 # クライアントサイド（あなたのテーブル席） まずはクライアントサイドですね。まずテーブル席ですね。 お客様のテーブル席で何が行われているのかと。 クライアントサイドというと、あなたのパソコンですとかスマホですとかのブラウザのその場所になります。 なのでブラウザ上で実行される処理のことをクライアントサイドの処理と言うんですけど、 例えで話でレストランのテーブルで起きることですよね。 なので、料理を運ばれてきて、あなたが目の前に料理を見て、実際に手で触れて、手で触れてでは触れないでしょうけど、 料理を食べるというその部分をプログラムが担当するという形になります。 ですので役割としてはウェブサイトとかだったら、ウェブページの見た目ですとか、 例えば動いているその中でアニメーションとか動くと思うんですけど、 ボタンをクリックしたときにボタンが変な動きをしたりとか、そういう動きをすると思うんですけど、 ユーザーが操作したことに対して即反応するという処理をクライアントサイドで作ったりもします。 ちょっとプログラミングの話になっていくんですけど、 言語としては今もう本当にほぼ主流になっているのがJavaScriptと呼ばれる言語を使って、 アニメーションですとかウェブページの見た目の操作、動きを作っているのはJavaScriptが大体作っている形になります。 JavaScriptは今のやつだとタイプスクリプトとかいろんな新しいのが出てきたりしてるんですけど、 ほぼそのタイプスクリプトの中身はJavaScriptですし、そのJavaScriptを覚えていただければと思っています。 レストランでの例えを言うならば、メニューを開いたときに何かアニメーションみたいなパッと綺麗なものが映ったりとか、 よく分かってないですけど、あとはウェイターさんを呼ぶときにテーブルの上に呼び出しボタンがあったら押したらピンポンってなる。 ピンポンではならないか。厨房に伝えに行ってくれたりとか。 あとは何でしょうね。いろいろ注文。例えばウェブサービスで言うと入力チェックとかってあるんですけど、 そういうのもこちらのクライアントサイト側でしたりするんですけど、そういう意味のレストランで言うと何でしょうね。 これを注文しようとしてるけど、もうそれは売り切れてましたよみたいな情報って、 1回1回サーバー側に問い合わせに行く。問い合わせに本当の処理は行くんですけど、 事前にクライアントサイト側に持ってれば、それを注文した時点で、もうそれ売り切れですってすぐに反応できたりとか、 そういう作り方をしてるときもあるので、そんなものができるのかなとは思います。 なので、このようにユーザーさん、お客さんの体験、UXって呼ばれる、UI UXって呼ばれる部分、 その部分を司るのが、このクライアントサイト側の処理になってくるかなと思います。 # サーバーサイド（お店の厨房） 続いてがサーバーサイド側のお話になります。 お店の中の厨房の部分になってきます。 ウェブサービスですと、サーバー側の方で処理をされた処理、 処理をされた処理って変化、処理のことを言いまして、 レゾランでいうと料理を作っている部分、本当にその中身の部分というか、 コアとなる部分がサーバーサイドの処理になってきます。 役割としてはウェブサイトですと、データベースという値を格納する、 永久的に保存させて動く部分がデータベースというものを使ったりするんですけど、 それのものとのデータのやり取りですとか、あとはユーザー情報、 そのデータベースの中にユーザー情報を持っていて、 画面の方から入力されたID、パスワードと一致するかみたいなのをチェックしたりとか、 そういういろんな本当にウェブサービスとしてコアとなっている部分の処理が、 ほとんどがサーバーサイド側で作られています。 これもちょっとプログラミング言語の話をしていくと、 本当にそこの部分って結構さまざまな言語が使われてまして、 今だと何でしょうね。 Pythonを使っているところとかあったりとか、 あとは私がよく使っているRubyとか、 昔ながらで言うとPHPっていう結構簡単な、 今はちょっと簡単ではないかもしれないですけど、 昔ながらの言語ですとか、 あとは結構大手さんとかで使われているJavaっていう言語もあったりとか、 そういうのがします。 レッスンでの話、例えで言うと厨房という話になるので、 注文がお客さんからやってきて、 それに対してデータベースで例えるなら、 冷蔵庫とかですから食料庫かな、 そんなところから材料を取り出して料理をするという形の処理の部分が、 サーバーサイド側での処理になるのかなと思います。 なのでプログラムがレシピですかね、料理で言うと。 そのレシピに沿って料理をしていくっていう処理が、 サーバーサイド側の厨房でのお仕事になるのかなと思います。 あとはユーザー認証とかの話で言うと、 会員情報とかをデータベースに置いておいてっていうのが、 ちょっと前に話させていただきましたけど、 そんな感じでユーザー認証の部分も、 サーバーサイド側でやるという形になります。 この辺もレストランであったら、 会員証のチェックとかいろいろあると思うんですけど、 その辺も厨房じゃないですけど、 サーバーサイド側でやるという形になります。 こんな感じで、 ウェブサービスとかのロジックという部分ですとか、 データの部分ですとか、 あとはセキュリティに関わる部分、 外には出せない部分ですね。 そういうところをいろいろ処理している。 本当にサーバーサイドがコアとメイン一緒ですね。 そんな感じになってくるものになるので、 大事な部分になってくるのかなと思います。 # なぜ役割分担が必要なのか？ 最後に、この役割分担。サーバーサイドとクライアントサイドをなぜ分けなきゃいけないのか、みたいなお話をちょっとしようかなと思います。 分けなくていいなら分けなくていいんですけど、いろいろ考えると分けた方が便利だなっていう話になってくるんですけど、 これ、例えばで言うと、ネットショップで買うときに、先ほどもちょっと話しましたけど、ユーザー認証ですよね。 IDとパスワードを入力して、そのIDとパスワードが合っているかっていうチェックをサーバー側に問い合わせて、サーバーサイドの処理によってチェックします。 これを、もしクライアントサイド側で全部やってたらどうなるでしょうっていう感じなんですけど、 それって、要はテーブル席に全員の会員名簿のIDとパスワードを、そのテーブル席にウェイターさんが持っていって、台帳を持っていってですね、 そこで、お客さんが誰だっていうのをチェックするっていう仕組みになります。 なので、そこまで台帳を持っていく必要があるって結構セキュリティ的に危険だっていうのが、それだけでも分かると思うんですけど、 そういうのが回避するというか、そういうのを避けるために、セキュリティ関係のものは全てサーバー側でチェックするっていうような役割分担っていうのがされている形になります。 あとは何を話そうかなと思うんですけど、データのやり取りですかね。サーバーサイド側でもデータのやり取りしてますよってお話をしたんですけど、 いろんなID、パスワードの認証情報以外にもたくさんの情報ですね。 レストランでいうとレシピの情報ですとか、そういうのを全部レシピの台本というか、そのレシピの本をテーブル席まで持っていって、 テーブル席ですべて材料をそこに持っていって、そこで料理して、すぐ提供できるっていうメリットはあるかもしれないですけど、そんなことをしてるレストランって存在しないですよね。 ライブキッチンとかそういうのを売りにしてるところはあると思うんですけど、そういうのを除いては基本サーバー側でそういう料理とかをしてると思うので、 複雑な処理というか重たい処理というか、そういうのはだいたいサーバー側でやって、ライブキッチンのように見せるためですよね。 そういう料理を食べてもらうときにアトラクションというか、見せるための料理をするっていう意味では、クライアントサイド側にそういう料理をする部分を持っていくことによって、 そういうメリットというか、売りというか、そういうのを持っていっているレストランじゃないですけど、ウェブサービスとかもあったりします。 という形でちょっとお話をつらつらとさせていただいたんですけど、このウェブサービスとかウェブページ、それを一つにとっても、 クライアントサイド側とサーバーサイド側でそれぞれの役割分担がされていて、それぞれのプログラムが走って動いていて、 という形になっていって、本当に1個の処理にもいろんな機械というか処理が複雑になっていて、それで最後にやっとその1個のウェブ画面が表示されるという形になるので、 そういうちょっと複雑な、また同じこと言ってますけど、ちょっとややこしい部分もありますが、ちょっとずつ一緒に勉強していければと思っております。 ということで、サーバーサイドとクライアントサイドのお話をさせていただきました。 ちょっと難しかったかもしれないですけど、このウェブサービスというものの全体像の1つがちょっと見えて、皆さんの知識になったならちょっと嬉しいと思っております。 ということで、最後まで聞いていただきありがとうございました。 それでは今日も適当にまったりお過ごしください。ありがとうございました。