書籍を通じて、Webの技術的発展と歴史的背景から全体像を把握する

書籍 「プロになるためのWeb技術入門」を読了して

この記事は書籍を読了した後に要点を掻い摘んで自分の理解を深めると共に知識を言語化するためと、自分と同じくWeb初学者を対象とした内容になっております。
詳しい内容を知りたい方は是非一度は書籍を読んで頂きたいと思います。
自分と同じプログラミング初学者の方はこちらを読んでWeb全体像を「なんとなく〜ある程度」頭に入れてから学習するとより理解が深まる(らしい*)です。

* らしいというのは怪しいといった意味合いではなく、自分もまた初学者であり、今後そういった日が来るという日に向けて学習をしています。
「今は色々学んで点を集めている最中だ。それがいつか線になる日が来る。」
自分の入会しているスクールの講師の方達が仰っている言葉です。
この言葉を忘れる事なく、日々学習中です。

書籍を通して理解を深める点

• Webの歴史的背景
• Web技術の発展
  この2点にフォーカスしてこの記事を書いていこうと思います。

スクールの授業や技術記事からの情報もありますが、書籍から抜粋している箇所は多くあります。書籍の内容を分かりやすく言語化することで理解を深めるのが目的としています。

Webアプリケーションとは何か

Webアプリケーションはその名の通り、Web上で動くアプリケーションです。
対して、Webで動かないアプリケーションと言うとデスクトップアプリケーションです。
これら2つの特徴を比べてみます。

• Webアプリケーション

  • Youtube, クックパッド, Gmailなど
  • アプリケーションをインストールする必要がない
  • ネットに繋いでいる状態でないと使用出来ない
  • 処理はサーバ上で行われる

• デスクトップアプリケーション

  • Word, Excel, Outlookなど
  • アプリケーションをインストールする必要が有る
  • ネットに繋ぐ必要がない
  • 処理は自身のコンピュータ上で行われる

ざっくり比較してみましたが、何となくイメージは掴めると思います。

Webの歴史的背景を理解しよう

何でもそうですが、今私達を支える技術は知らない所で勝手にできるものではなく、利便性や必要だから生まれるものです。Webの技術の発展にも同じ事が言えます。
Webの歴史的背景を理解することで、解決すべき課題があり、その課題をプログラミングを通して解決するという本質的な部分を何となく感じていきたいと思います。
※詳しい年代などは深堀しないのでざっくり要点を洗い出していきます。

• 1989年頃、欧州原子核研究機構(CERN)研修者達は実験結果や論文を電子メールやファイル転送といった技術でやり取りしていた

  • これは1:1でのやり取りは出来るが多くの人に共有する技術ではなかった

• これを全世界で共有しようという話になり、生まれたのが www (World-Wide Web)という考え方

  • 提案、発明したのが「ティム・バーナーズ = リー」博士

• HTMLという統一された形式で表現することを考える

  • 画期的だったのが「ハイパーテキスト」という仕組み
  • 文書間の参照を「ハイパーリンク」という形式で記述することで可能とした

• MosaicというWebブラウザが発明される

  • 従来は文字だけのページ、画像だけのページといった仕組みだったのが、このブラウザによって文字と画像などが混在するページの表現が可能になった
  • また、無料で誰にでも公開された

• さらに、1990年代後半から2000年代前半にかけて広く一般的に普及していく要因が以下

  • PCの性能向上と低価格化
  • ADSLや光ファイバーの普及

• これによって私達に馴染みがあるであろうInternetExplorerやFirefoxなどのWebブラウザが発展していく

そしてこの時期からWebブラウザの覇権争いの抗争が勃発していきます。
歴史的背景を紐解いて行くと面白いですよね。
気になる方は調べてみるのがおすすめです。

Webの仕組み

現在皆さんが使用しているブラウザ(例えばSafariやChromeなど)からどうやってWebページが表示されているかご存知ですか？

分かりやすく説明すると、
この記事のようなページは静的Webページと呼ばれ、

1. 自身のPC①からこの記事を保存しているPC②に「ページを下さい！」と言って
2. PC②が「いいよ！」と言った結果、
3. PC①に表示される　といった仕組みになっています。

そして自身のPC(表示するのはWebブラウザですが)(上記で言うPC①)は「クライアント」と呼ばれ、
ページを返してくれるPC(上記で言うPC②)は「サーバ」と呼ばれます。
上記の専門用語を使い説明すると、
クライアントからサーバにページを下さいと要求(リクエスト)を送り、サーバからページをどうぞと応答(レスポンス)を貰い、クライアント側にページが表示される　という事です。
ここで言うページが皆さんご存知の通り「HTML」に当たります。

Webページの違い

先程静的Webページと言いましたが、皆さんが使うショッピングサイトや動画配信サービスなどは対して動的Webページと呼ばれます。

※〜Webサイトや少々違った呼び方をされる時もありますが、静的か動的かという所が重要です
なにが違うのかという所を分かりやすく説明していきたいと思います。

静的Webページの場合

静的Webページとは、いつ見てもページの内容が変わらないページの事を指します。
クライアントがHTMLファイルをサーバにリクエストして受け取るHTMLファイルを見るという表現は、もう少し正確に言えば、「サーバからHTMLファイルをダウンロードしている」という解釈が正しい表現です。
どういう事かと言うと、ブラウザに表示されたWebページはデベロッパーツール(ブラウザの検証など)を用いると自身で文字や文字色を変更したり、画像を別のものに差し替えたりも出来ます。
そして変更した画面をリロード(更新)すると、最初に表示されたページが表示されます。
これは毎回、サーバに保存してあるHTMLファイルをダウンロードして、それがブラウザに表示されているから、という事なのです。

動的Webページの場合

対して動的Webページというのは、アクセスする度に変わるWebページの事を指します。
AmazonやYoutubeなどのページは毎回違うページが表示されないでしょうか？
静的Webページと違い、サーバにHTMLファイルが保存されているのではありません。
クライアントからのアクセスを受け、どういったページを良く見るのか、どういった物を買い物するのかなどの情報をサーバ側が受け取り、内部のプログラムがそれに合わせて毎回新しいHTMLファイルをその都度生成し、それがブラウザに表示されているのです。(分かりやすくざっくりと説明しています)

普段見ているWebページがどういった物かイメージは付いたでしょうか？
こういった背景やWebページへの理解を持って、最初に議題にあげたWebアプリケーションに戻りたいと思います。
Webアプリケーションは前述した通り、Twitter, Youtubeなどですよね。
これはお察しの通り、動的なコンテンツに当たります。(動的Webページと同じような意味合いです)
そしてここからは、現在のWebアプリケーションの技術までの発展の流れを追っていきたいと思います。
※なお技術そのものを深堀りしていくと記事が一本書けるレベルになってしまうのでここでは記述していきません。

Webアプリケーション技術の発展の流れ

従来の技術の限界

従来のWebサーバの役割とは、静的Webページで説明した通りです。
研究者のリソースの共有から始まった技術は一般へ広く普及しました。
個人や企業や自身の情報をWebページに載せていたとしましょう。
そのWebページはいつ見ても管理者が更新しない限り変わりません。
その事に、人々の関心や興味が失われ、閲覧者が減ってしまうという事が起きていきました。
それを回避するためには新たなコンテンツを生み出し、更新しなければいけません。
それを常に人的リソースで何とかしようとするのが大変だ　というのは想像に難くないと思います。

CGIという技術の誕生

そういった課題を解決するために誕生したのがCGIという技術です。

• アクセスした際にアクセス数が表示される

• アクセスした時刻によって表示される挨拶が変化する
  こういったちょっとした事から

• 取り扱っている商品の在庫状況が表示される

• 新商品が紹介される
  といった事がCGIという技術によって機械的に実現されました。

CGIの問題点

当初CGIは革新的な技術でした。
検索サイト、ショッピングサイト、掲示板システムといったWebアプリケーションがCGIの技術によって誕生しました。
これにより、Webは世界中の人々が利用する巨大なメディアとなったのです。

ただ、新たな問題が生じました。
開発言語の問題と性能の問題です。

• 1つは、利用されていたPerlという言語は大規模アプリケーションを開発するのに必須ともいえる、オブジェクト指向プログラミングを取り入れていなかった点
• 2つ目は、Webブラウザからリクエストが届く度にCGIを通してプロセスを起動していましたが、1日に数万、数十万というアクセスがされるサイトではプログラムの起動処理が多くなり、処理が追いつかなくなってしまった点です

Java / サーブレットの誕生

この問題を抱えていた所にJavaが登場しました。
JavaはWebアプリケーションの為に開発された言語ではありませんでした。
しかし、Webアプリケーションは当時企業におけるシステム開発でも主流となりつつありました。

• Javaはオブジェクト指向をフルサポートしており、大規模開発がしやすかった
• 当時広く使用されていたC言語によく似た文法だった
  こういった事からWebアプリケーションの開発言語として当時の開発者に受け入れられていきました。
  そして企業システム向けJavaの一部として「サーブレット」というWeb開発をサポートする為の技術が提供されるようになりました。

サーブレットの問題点

そんなサーブレットにも問題点が生じてきました。

Javaコードの中にHTMLを埋め込んでいるので、作業効率が悪い点と可読性が悪い点

• 作業効率が悪い
  HTMLファイルを自身で書いた人なら想像出来ると思いますが、現在の商用サイトのような見栄えのするWebページを作成するにはHTMLの知識とデザインセンスが必要とされます。このような仕事は「Webデザイン」と呼ばれるくらいでプログラミングの知識とは全く別のスキルが必要になります。
  大規模なサイトの場合、分担して作業を行います。その場合にWebデザイナによって誤ってHTMLの記述を変更してしまう事でプログラムが壊れてしまうというリスクがありました。
• 可読性が悪い
  Javaの出力命令を使ってHTMLの文字列を出力するという仕組みのため、プログラムが長くなったり、出力するHTMLをが複雑になると修正するべき箇所を見つける事すら困難になってしまう状況でした。

JSPの誕生

このような状況を少しでも改善するために考え出されたのがJSPという技術です。
仕組みは単純に発想を逆転したものです。
前述したように、サーブレットはJavaコードの中にHTMLを埋め込むという技術でした。
しかしJSPは、HTMLの中にJavaコードを埋め込むというものです。
これによってWebデザイナはHTMLを、開発者はJavaコードを、というように分担が出来るようになり、効率的に開発出来るようになったのです。

サーブレット / JSP の問題点

サーブレット、JSPの誕生でWebアプリケーションの開発はずいぶん楽になりました。
しかし、大規模アプリケーションの開発を毎回ゼロからこの技術で作ると莫大なコーディング量になり、費用や時間を多く費やすことになります。
また、大規模化した事で必然的に開発に携わる人も多くなります。開発者が独自にライブラリやクラスを作り後で結合しようとした時に上手くいかなくなるという事が起こり始めました。

Webアプリケーションフレームワークの時代へ

こういった問題点を解決し、大規模アプリケーションを効率よく開発するために「フレームワーク」が作られました。
従来から効率的に開発するための手段として再利用という考え方はあり、「ライブラリ」と言って、一度使ったプログラムは何度でもコピーして利用してきました。
このような考え方をさらに推し進められ、アプリケーションを開発しやすくするための土台として作られたのが「フレームワーク」です。

まとめ

ここまで読んで頂いた方は何となくの理解は得られたでしょうか？
自分はこのWeb技術の発展の背景を知る事で、フレームワークがコードを書くのが楽だから点だけで使われているのではなく、枠組みが出来ている事自体がチーム開発にとってメリットなんだという事が理解出来ました。
また、プログラミングは課題を解決する手段だ、と良く言われますが、まさに歴史的背景を紐解くとそれを物語っていました。

また、この記事でWebの全体像を把握した上でWebアプリケーションの根幹についても理解を深める記事を書いてますのでよろしければこちらも見て頂けると幸いです。

Webの全体像を把握した上でWebアプリケーションの根幹を理解する

参考書籍
プロになるためのWeb技術入門