【初心者歓迎】クライアントサイドとサーバーサイドの違いを解説!!

公開 :

努力という言葉が大っ嫌いな@It_is_Rです。
今回のテーマは、ちょっと細かいテーマですが、難しいこと考えずに気楽にいきましょう!

今回はクライアントサイドプログラムと、サーバーサイドプログラムの違いについての記事です。
大まかに言うと、クライアントのWebブラウザ上で動作するプログラムと、サーバー側で動作するプログラムです。

今回はこの二つを詳しく解説していきます。

クライアント、サーバーとは?

男性
まず、クライアントやサーバーの意味はご存知でしょうか?
もし知っている人は、この部分を読みとばしてしまって構いません。

いくつか意味はありますが、今回はIT用語でいうクライアントやサーバーの意味を解説します。
クライアントとは、簡単に言うとサーバーを利用する側のことをいいます。例えば、今あなたはこの記事をパソコンやスマホ上で読んでいますよね。では、この記事は一体どこに保存されているのでしょう?

答えを言ってしまえば、サーバーに保存してあるデータを、ネットワークを通してあなたのパソコンやスマホにダウンロードして、その画面に表示しています。
ネットワークに繋がり、サーバーを利用したコンピューターやソフトウェアのことをクライアントと呼びます。

つまり、データを提供するコンピューター(サーバー)に、ネットワークで接続され、サーバーを利用しているコンピューター、もしくはソフトウェアがクライアントです。

ここまで理解できたら次へいきましょう!

クライアントサイド

クライアントサイドプログラムは、Webブラウザ上で動作するプログラムのことです。
代表的なものとしてはJavaScriptがあげられます。(Node.jsなど、サーバー側で動作するJavaScriptもあります。)

クライアントサイドプログラムの仕組みとして、クライアント側がサーバーにリクエストすることによって、Webサーバー上のプログラムがクライアント側に送信され、そのプログラムをWebブラウザが実行するという形になります。
サーバーサイドとクライアントサイド

Webブラウザには、インタプリタと呼ばれるプログラムを実行するソフトウェアが組み込まれています。
それを使ってWebブラウザがプログラムを実行するという仕組みです。

サーバーサイド

サーバーサイドプログラムはWebサーバー上で動作するプログラムです。代表的なものにPHP、Ruby、Pythonなどがあげられます。

サーバーサイドプログラムというと、何やら難しいイメージがあるかもしれませんが、仕組みはそれほど難しいものではありません。
クライアントからのリクエストに対し、サーバー側でプログラムを実行し、実行結果をクライアント側へ送るという仕組みです。
サーバーサイドとクライアントサイド

つまり、クライアントサイドプログラムとサーバーサイドプログラムの違いは、ブラウザ上で動作するのか、それともサーバー上で動作するのかの違いです。

サーバーサイドプログラムの利点

女性
クライアントサイドプログラムに対して、サーバーサイドプログラムは厄介に感じる人もいるかもしれません。では、サーバーサイドプログラムの利点とは一体何なのでしょうか?

その利点は、サーバーサイドプログラムがどの様なものに使われているのかを知ることで、自然と分かります。

例えば、このブログにサーバーサイドプログラムが使われています。
ブログのソースを見るとHTML5で書かれてはいますが、実際にはそんな単純なものではありません。

最も重要なのはデータベースから記事のデータを読み込んでいることでしょう。
記事のデータだけではありません。カテゴリーやタグ、ユーザー情報など、様々なデータをデータベースから取り出して、それを元にサーバー上でウェブページを作成してから、クライアント側にデータが送られるのです。

なので、クライアント側でソースコードを見ても、ただ単にHTML5が記述されている様にしか見えないのです。

スポンサードリンク

おすすめの記事♪

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

[email protected]_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

【Poke LIVE】リアルタイムでポケモンの位置が分かる究極のアプリ!!

ポケモンGOのアイデアはすごいなーと感心するば[email protected]_is_Rです。(←何様!? さて、今回はポケモンGOをプレイする上で、リアリタイムでポケモンの位置が分かってしまう究極のアプリを紹介します

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめ[email protected]_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

[email protected][email protected]ゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

software

【Mac可】CrossFTPを使ってサーバーとデータを送受信する方法!!

[email protected][email protected]。だって痛いじゃん。 いままでサーバーとのファイルのやり取りにはDWを使っていたのですが、少し使い勝手

【Vim使い方】これで初心者卒業!!便利に使えるコマンド一覧。

作業をしようと思ってから、実際にするまで3時間[email protected]_is_Rです。 Vimの使い方、第5回目です。 今回は、初心者卒業向けとして、便利に使えるコマンドについて記事を書いてみたいと

【Vim使い方】ファイルの作成と開き方、保存の方法。(Mac OS X)

[email protected]_is_Rです。 前回に引き続き、Vimの使い方について解説していきたいと思います。 今回は、ファイルの作成、開き方、保存の方法について解説していきたいと思い

【ポケモンGO】効率よくポケモンゲット。絶対必要なサイト&アプリ!!

[email protected]_is_Rです。 田舎はアイテムやポケモンが少ないという不公平さからのストレスを、ポケモンにモンスターボールを投げつけて解消しましょう!! 今回はポケモン

P-GO SEARCHの奇妙なアイコンを、カスタムアイコンで直す方法!!

今日は雨だから、ポケモンゲットしにいけない。[email protected]_is_Rです。 P-GOサーチのアイコンや名前ファイルを修正する方法を、今回は記事にしてみました。 アイコンの画像を変更する

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

[email protected]_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では


コメントを残す

メールアドレスが公開されることはありません。


Category

Games