いまさら聞き辛い!WEB開発におけるサーバサイド言語とクライアントサイド言語の違い

こんにちは。TECH DRIVEの小笠原です。
本コミュニティの協賛企業でもあるサークルアラウンドが開催している「プログラミング相談所」にて、以前より参加者の方から「サーバサイドとクライアントサイド、それぞれのプログラミング言語の違い」についてよく質問をいただきます。

今回は「最近WEB開発を始めた」「これから始めたい」と言う方に向けて、WEBシステムの仕組みも含め、サーバサイドとクライアントサイドそれぞれの言語の役割について、解説をしたいと思います。

WEBシステムを知ろう

さて、本題に入る前に、前提知識となるWEBシステムについて軽く触れておきたいと思います。
WEBシステムとは、クライアント(ブラウザ)とサーバが通信を行い「WEBサイトの閲覧」ないしは「WEBサービスの利用」を行うための仕組みを指します。

以下のようにブラウザがあるサーバに対し欲しい情報をリクエストし、サーバがリクエストに応じHTML/CSS/JavaScriptファイル等の必要なデータ(レスポンスデータと言います)を返します。

f:id:kabaneshi:20180816035759p:plain

多くの場合、ブラウザはサーバから返却されたレスポンスデータを解釈し、ページの描画を行います。
では、ブラウザはどのような手段でリクエストを送るのでしょうか?
これには、いくつか手段があるのですが、わかりやすい例として「ブラウザのアドレスバーへのURLの入力」が挙げられます。この意味でURLは、クライアントとサーバが通信を行うために必要な情報の集合体と言えます。

サーバサイド言語の役割を知ろう

WEBシステムについて軽く触れたところで、本題に入りたいと思います。 サーバサイド言語とは、読んで字のごとくサーバ上で動作するプログラミング言語です。
サーバサイド言語は、クライアントからのリクエストに応じ、多くの場合「何かしらの処理」を実行した後、HTML等のレスポンスデータを作成します。
また、サーバサイド言語は複数あり、日本ではPHPやRubyといった言語が多く利用されています。

f:id:kabaneshi:20180816040030p:plain

上で述べたサーバサイド言語が行う「何かしらの処理」は多義にわたるため、一概に「これ」と言いづらいのですが、以下に代表的なものを挙げます。

  • データの操作
    サーバサイド言語は、必要に応じてデータベースという「サービスにおいて使用される様々なデータが保存される領域」との通信を行い、データの操作(作成/更新/参照/削除)を行います。 例えば、WordPress等のCMSにおける「記事の作成」や「作成した記事の取得」も、このデータ操作に当たります。

  • メールの送信
    メール送信といっても様々なケースが存在するのですが、サーバサイド言語が使用される例としては、フォームから問い合わせがあったユーザーへの自動返信や、サービスの新規登録を行ったユーザーへの認証メールの送信等が挙げられます。

  • ログイン等の会員認証
    普段SNSやECサイト等をWEBサービスを利用している方にとって、ログイン/ログアウト処理は、馴染みが深いのではないでしょうか? これらの機能を実現するのもサーバサイド言語の役割となります。

繰り返しとなりますが、サーバサイド言語は、上記のような処理を行った後、クラアイントに返却するレスポンスデータを作成することが主な仕事です。

クライアントサイド言語の役割を知ろう

複数種類のあったサーバサイド言語とは事情が異なり、クライアントサイドのプログラミング言語は、現状JavaScriptが唯一と言って良いかと思います。
そのため「WEB開発におけるクライアントサイドのプログラミング言語 = JavaScript」という認識で問題ないでしょう。
JavaScriptのプログラムは、基本的にはサーバからレスポンスデータとして返却され、ブラウザ上で動作します。

JavaScriptの主な仕事は、大きく以下の2つが挙げられます(※)。
※ この限りではありませんが、JavaScriptの主な役割を知るという段階においては、一旦以下の理解で問題ないかと思います

  • WEBサイト訪問者の操作等に応じて、ページの見た目を変更する
    JavaScriptでは、クリックやスクロール等、ブラウザ上で行われる「何かしらのユーザー操作」に応じてページの見た目を変更することができます。例えばWEBサイト上でユーザー操作に応じて特別な演出を行うといったことは、JavaScriptの得意分野という訳です。

  • ブラウザに変わりサーバへリクエスト行う
    WEBシステムついてに触れた際に、ブラウザがサーバへのリクエストを行うと述べましたが、実はJavaScriptはブラウザに代わりサーバと通信を行う機能が備わっています。 本記事で詳しく触れることはしませんが、このJavaScriptがサーバと通信を行う技術をAjax(エイジャックス)と言います。

本章ではJavaScriptがブラウザ上で動作する言語(※)であり、上で述べたような役割を担っている言語であることを覚えておきましょう。
※ 近年では、JavaScriptが担う領域が広がりをみせているため、一概にJavaScriptをクライアントサイドの言語とは言い切れません。本記事で触れているJavaScriptは、あくまで「クライアントサイドの言語」としてのJavaScriptであることをお伝えしておきます。

また、サーバサイド言語を使用する場合、多くはサーバ環境に言語のインストールを行う必要があるのですが、JavaScriptはブラウザ上で動作する言語であることから「言語そのものがブラウザに実装されている」少々特殊な言語であることも覚えておきましょう。(そのためインストール作業は不要です)

まとめ

いかがでしたでしょうか?
WEB開発を始めようと思った際に、WEB上で検索をすると複数のプログラミング言語がヒットし、混乱してしまうこともあるかと思います。
しかし、WEB開発で使用するプログラミング言語の役割は、大きくサーバサイドかクライアントサイドのいずれに分類されることが、本記事を通してお分かりいただけたのではないかと思います。
混乱を招くのは、多くの場合サーバサイド言語の選択肢の多さにあるように思います。
サーバサイド言語の選択については、TECH DRIVEのメンバーでもある佐藤が執筆した「プログラミング言語と業界での使われ方の関係こんな感じで合ってます?私目線書いてみます。」 を合わせて読んでいただけると、より良い理解が得られるかと思います。

JavaScript Climbing

JavaScriptに特化したトレーニング「JavaScript Climbing」を行なっています。
this、クロージャ、Class等、中〜大規模のフロントエンドの開発にのぞむにあたり、必須となるスキル習得を現役のWEBエンジニアが徹底してサポートします。
2週間の無料体験期間がございますので、ご興味がある方は是非以下のリンクより詳細をご覧ください。

circlearound.co.jp

Ruby Climbing

週1からはじめられる「Ruby」でWEB開発の基礎が習得できる塾です。現役のプログラミング講師&Rubyエンジニアがプログラミング入門からフレームワーク(Sinatra/Ruby on Rails)を使用した本格的なWEB開発の学習までをしっかりとサポートします。

ruby climbing

個別トレーニング

短期間でぐっと成長したい方は弊社主催の個別トレーニングがおすすめです。 トレーニング内容は、受講者の方の課題/要望をお伺いした上で、フルオーダメイドで作成させていただきます。 詳細は以下のリンクよりご確認ください。(応募者多数の場合には時間を別途ご用意する予定です)。

WEBプログラミング個別トレーニング

TECH DRIVEについて

TECH DRIVEは「技術者の成長を加速させる」をキーワードに都内で活動をしているコミュニティです。
TwitterやFacebookにて技術ネタやイベント情報の発信を行っていますので、ご興味があれば、いいねやフォローをお願いいたします。