インターネットとブラウザ ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #02」【ゲスト寄稿】

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

3765063_808346c194_z

Image by Flickr

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第2回目のテーマは「インターネットとブラウザ」です。

前回は導入テーマとして「起業家がプログラミングを学ぶべき3つの理由」という記事をお送りしました。2回目以降では、より具体的に、Webアプリケーションが動く仕組みや、プログラミングを学び始めるまでの前提知識について解説を始めます。

本連載は、エンジニアバックグラウンドがない「まったくの初心者」を対象としており、10回の記事を通して、最初の一歩を踏み出すためのきっかけとなることを目的としています。(※そのため一部説明を簡略化しているところがあります)

Web25周年の2014年 ─ 今年は、Webのスキルを学び始めるには最適なタイミング?

今から25年前の1989年3月、欧州原子核研究機構(CERN)の計算機科学者「ティム・バーナーズ=リー」は、World Wide Web(WWW)を草案しました。2014年は、Web業界にとって「Web25周年」の記念すべき年として、様々なイベントが催されたり、企画サイトまで立ち上がっています。

Web_at_25__Celebrating_the_25th_Anniversary_of_the_Invention_of_the_Web

Web at 25: Celebrating the 25th Anniversary of the Invention of the Web

世界が注目する節目の年である2014年に、Webのスキルについて学び始めるというのは、自分の背中を押してくれる一つの要素になるでしょう。

ティム・バーナーズ=リーを中心とする研究チームは、1989年にWWWの草案した時点で、すでにHTTPやURI(URL)、ハイパーリンクの概念について設計をしていました。彼の設計思想が、今でもWebを支える技術の基礎になっています。

サー・ティモシー・ジョン・バーナーズ=リーは、イギリスの計算機科学者。ロバート・カイリューとともに、World Wide Webを考案し、ハイパーテキストシステムを実装・開発した人物である。URL、HTTP、HTML の最初の設計は彼によるもの。

インターネットとWebの登場により、情報流通に革命が起こり、私たちの生活は大きく変わりました。この記事では改めて、インターネットとブラウザで、裏側でどのような処理が発生しているかについて、振り返ってみましょう。

インターネットの仕組みを知る

私たちは日常的に、インターネットのブラウザ(Chrome、Firefox、InternetExplorer、Safariなど)を使って、Webに掲載されている情報を閲覧しています。インターネットを通して得られる情報は、一体どこに存在しているのでしょうか?

それを知るには、「クライアント」と「サーバー」、そして「リクエスト」「レスポンス」という概念について、理解しておく必要があります。

サーバーとは、英語で「供給する」という意味です。クライアントは「顧客」を意味しています。私たちが手に持っているデバイス(PC/スマートフォン)のWebブラウザが、クライアントに相当します。

e05f87a35ab812c310e0c4baabc7137a

サーバーに対して、クライアントは「この情報を取得したい」というメッセージを送ります(リクエスト)。そしてサーバーでは、クライアントのリクエスト(要望)に応じて処理をおこない、その結果を返します(レスポンス)。

例えばGoogleのトップページにアクセスするとき、ブラウザに入力されたURL「Googleのトップページの情報を取得する」というリクエストが送られ、Googleのサーバーでは「Webページが記述されているHTML文書」を、レスポンスとして返してきます。ブラウザは、受け取ったレスポンス結果を解析して表示するためのソフトウェアです。

※ Webページを記述するHTMLは、構造化言語(マークアップ言語)と呼ばれており、次回の記事にて解説します。

ここまでの流れを、箇条書きで整理してみます。

  1. ユーザーが、ブラウザ上にURLを入力する
  2. ブラウザ(クライアント)が、HTTPリクエストをサーバーに送る
  3. サーバーがリクエストを解析して処理を行う
  4. サーバーが処理結果のレスポンスをブラウザへ返信する
  5. ブラウザが受け取ったレスポンスを解析して、表示する

Webサイト1ページにアクセスするだけでも、上記のような手順が踏まれているのです。サーバーとクライアント、それをつなぐリクエスト・レスポンス、この考え方が、Webアプリケーションを開発する上で、もっとも基本的な考え方になります。

プログラミング言語における、 クライアントサイド処理とサーバーサイド処理

サーバー側のプログラムが処理を行い、結果をレスポンスとして返してクライアントに表示させる ─ これが一般的なクライアントとサーバーの構成ですが、最近ではスマートフォンアプリなど、「クライアントサイド」と「サーバーサイド」を柔軟に連携させるアプリケーションも増えてきました。

サーバーサイド・スクリプト

サーバサイド・スクリプトは、その名の通りサーバー上で処理を行うスクリプト言語です。Webサーバからブラウザ(クライアント)に送信される時点で、一定の必要な処理を完了させており、HTMLやjsonといったデータ形式として、レスポンスが返ってきます。主なサーバーサイドスクリプトに、以下のようなものがあります。

  • Perl
  • PHP
  • Python
  • Ruby

クライアントサイド・スクリプト

一方で、クライアントサイド・スクリプトは、サーバー上ではなく、Webブラウザやスマートフォンアプリなど、クライアント側で動作するスクリプトです。有名なものとして、JavaScriptが挙げられます。

例えば、「来年の誕生日までの日数を表示する」という処理を書こうと思ったとき、ちょっとした計算が必要なため、HTMLだけでは実現できません。ただ、この簡単な処理のために、わざわざサーバーを用意して結果を返すような仕組みを作る必要もありません。そこでJavaScriptで数行のコードを書くことで、インターネットに接続していない状態でも上記のような簡単な計算などの処理が実現できます。

スマートフォンアプリが流行(開発したいというニーズも急増)している昨今では、iOSクライアントエンジニア(Objective-C)/サーバーサイドエンジニア(Ruby on Rails)、といったように、業務の現場でもクライアント側とサーバー側で、それぞれ専属のエンジニアが担当することが増えています。

時代の変化とともに、新しい技術が登場するだけでなく、「より高速に処理するためには、どの処理をサーバー側に持たせて、クライアントでは何を処理するのか?そもそも並行して処理できないのか?」など、アプリケーションの設計そのものが、これまで以上に重要になっています。 Webサービスを提供する起業家・技術者がカバーするべき知識は、日々、増え続けています。

次回以降の記事について

この連載では今後、PHP、Rubyなどのスクリプト言語と、データベース(MySQL)を用いたWebアプリケーションの実装などを紹介していきますが、その中で「REST」「CRUD」「API」「リクエストパラメーター」といった、サーバー通信などに深く関係するような用語が出てきます。その都度、言葉の意味や仕組みについて解説はしますが、関連する用語として、事前に調べてみても良いでしょう。

次回は、Webページを作成する構造化言語である「HTML」について解説します。

※文中の図はTechAcademy(テックアカデミー)提供、同サービスを運営するキラメックスでは新たな人材も募集中。

BRIDGE Members

BRIDGEでは会員制度の「Members」を運営しています。登録いただくと会員限定の記事が毎月3本まで読めるほか、Discordの招待リンクをお送りしています。登録は無料で、有料会員の方は会員限定記事が全て読めるようになります(初回登録時1週間無料)。
  • 会員限定記事・毎月3本
  • コミュニティDiscord招待
無料メンバー登録