Webエンジニアなら知っておきたい - Webアプリケーションの仕組み -

 

プログラミングをする前にWebの仕組みを知っておこう

 

世間では、システム開発において「プログラミング」という一作業だけが強調されていてコードだけ書いておけば良いといような雰囲気ですが、Web開発においてはただコードだけ書いていればよいとうことはほぼありません。

プログラミングを行うにはまずプログラムが動作する環境を整えなければいけないし、それらがどういう仕組みで動いているのかということも理解しておかなければなりません。

プログラマーやWebエンジニアと呼ばれる人たちは、はたから見ると黒い画面にひたすら文字をうちこんでいるだけにみえますが、実のところみなこのWebシステム（Webアプリケーション）のクライアントやサーバーの構造を想像して、意識しながらコードを書いています。

はたから見るとプログラマは二次元の世界と戦っているようで、プログラマの頭の中ではクライアントとサーバ間でどのようにデータがやりとりされているか、通信が行われているかというのを実にリアルに立体的にイメージしてコードを書いています。

 

これからプログラミングを学びたいという人も「プログラミングというのは、画面に向かってなにやら難しいそうな文字を打ち込むこと」という認識を改めましょう。

初心者のうちは、クライアントやサーバーという概念がなかなか理解しづらいですが、これがわかっていると自分は今どこのプログラムを書いているのか、自分はどういう作業をコンピュータに命令しているのかということを意識しながらコードを書いていけるようになります。

 

あらかじめ知っておきたい用語

さて、ここまででプログラムを書くには、Webアプリケーションの仕組みを理解してコードを書くことの重要性を説きましたので、実際にその仕組みについて語っていきたいと思います。

が、解説にあたり一般的に馴染みのない用語を前提知識として持っている必要があるので、事前に簡単に説明しておきます。

その用語というのが以下の三語です。Webアプリケーションの仕組みを理解するには大きくわけてこの三つの登場人物を覚えておけば全体の流れが理解できるので、この三つの言葉をしっかりと理解していきましょう。

• サーバー
• クライアント
• ブラウザ

 

サーバー | リクエストに対してなんらかの返答をするもの

 

サーバーというのは、ここ最近なんとなく聞く言葉ですが、実際のところどういったものをサーバーと呼ぶのでしょうか？

先に答えを書いておくと、 「リクエストに対してなんらかの返答をするもの」をサーバーと言います。

そして、それをWebアプリケーションの世界に限定すると 「HTTPリクエストに対して、HTMLファイルなどのレスポンスを返却するもの」 です。

物理的には、地方にでっかいコンピュータがしきつめられているデータセンターみたいなものを想像する方も多いかもしれませんが、それらデータセンターの仕事内容が上で紹介したものと考えていただければ大丈夫です。

 

クライアント | リクエストを投げるもの

 

クライアントは、現代のクライアント-サーバー型のWebアプリケーションのリクエストを投げる側です。

身近な具体例でいうと、Google Chrome やSafariなどのWebブラウザがそれにあたります。みなせんブラウザを開いたらなんらかのURLを打ち込んだりするかと思うのですが、一般的なブラウザではそのURLを打ち込みEnterを押した段階でリクエストがそのURLに対応したサーバに送信されませう。

ブラウザで言えばそのリクエストというのは「そのURLに対応したWebページをちょうだい」というものになり、サーバーがそれに応じたWebページを返却してくれるといような仕組みになっています。

 

ブラウザ | サーバーから返却されたHTMLを解析して表示

 

前段でも紹介しましたが、ブラウザがみなさんに一番身近なクライアントソフトです。

ブラウザの役割というのは、

URLに応じたHTTPリクエストをサーバーに送信し、サーバーから返却されたHTMLファイルを解析してユーザが見やすいように表示するというものです。

実際のWebページにはCSSなどWebページを装飾するコードもサーバーからの応答に含まれているのでそれらも含めてユーザの見やすい形に表示してあげるアプリケーションというのがブラウザになります。

 

言葉ではなく画像をイメージして覚えよう

 

ここまで、三つの用語を言葉で説明してきましたが、なかなか理解するのがしんどいですよすね。。

 

そこでこの上の図を見ていただけるとよりイメージがついて理解しやすいかと思います。

この図では、先に紹介したクライアントソフトであるブラウザがサーバーに対してリクエストを送り、HTMLファイルを返却する様子が描かれています。

今後のプログラムを書くときにこの図が頭に描けていると、画面に文字を打ち込む二次元的で単調なプログラミングからよりリアルで立体的なものをイメージしながら行うプログラミングに変わってくると思います。

また、図には、Ruby on Rails,JavaScript/JQuery,HTMLなどの言葉が書き込まれていますが、それぞれの言語がクライアントーサーバー間の通信のどこで動作するのかというをイメージできるするようにするために図に描きこませて頂きました。

 

例えば、JavaScriptもRubyも同じプログラミング言語ですが、使われる場所や果たす役割に違いがあり、JavaScriptは主にユーザの入力チェックを行ったり、ユーザのアクションに対して結果をリアルタイムに画面に反映するという目的で使われるクライアントよりの言語です。

対して、RubyはRuby on RailsなどのWebアプリケーションフレームワークに代表されるようにサーバ側で動作し、サーバで引き受けたリクエストを元に処理を行い処理結果をHTMLに変換して返答するという役割を受け持ちます。

ここまで理解できるとなんでWebシステム開発にはこれほどまでに多くの技術を学ぶ必要があるのかということがわかると思います。RubyもHTMLもJavaScriptもそれぞれ担当する役割や特性がちがいそれらが合わさることで多くのWebアプリケーションが構築されています。

 

全体像を意識しながら勉強をすすめよう

 

将来的にどういうエンジニアを目指すことになろうとここで話をした基本的なWebアプリケーションの仕組みがわかっていないと辛いでしょう。

また、プログラミングを勉強し始めたころはわからないことが多すぎて全体を見渡せなくなってしまうのもある程度仕方ないですが、そもそも自分がつくろうとしているものはどのようにして動いているのかということを理解しておくとその後の学習も捗るのではないでしょうか。

プログラミングの勉強を始めよう！となるとついつい「早くコードかかなきゃ！」みたいになりがちですが、まずは全体の仕組みというのを知っておくと自分が今Web開発においてどの部分をやっているのかというのを意識しながら勉強できるかと思います。

 

Webエンジニアはいちはやくコードの書き方を学ぶということを勉強の一つにはなりますが、こういった概念を理解していくということも非常に大事になってきます。

今回紹介したのはその中でも、かなり基本的で大事な部分を紹介したのでぜひ先の図をみながらWebアプリケーションというのはどういうようにデータを処理して、みなさんのもとにWebページというものを届けているのかということを語れるようになりましょう。