Web アプリの仕組み

Web アプリの仕組み

Web アプリは基本的に Web ブラウザで動作するアプリです。Web ブラウザは HTML の表示と Javascript の実行ができます。Web アプリは、HTML と Javascript を組み合わせて動作するアプリです。この記事では Web アプリの仕組みを簡単に解説します。

Web アプリに必要な情報は Web サーバーが提供

Web アプリに必要な情報は Web サーバーが提供します。Web サーバーの URL（リンク）を Web ブラウザで指定して、Web サーバーから HTML の情報を取得します。通常の Web ページの場合は、HTML で書かれたページの情報を取得しますが、Web アプリの場合は Javascript などのファイルも取得できます。必要な情報は HTML の情報の中に書き込んで置きます。あとは、読み込んだ Javascript のプログラムを実行してアプリの機能を実現しています。

Web ブラウザと Web サーバーの関係はシンプルで、Web サーバーは Web ブラウザが要求する HTML の情報を提供するだけです。Web ブラウザが必要な情報は全て HTML の中に含まれているので、HTML の情報を読み込む過程で、Web ブラウザが必要な情報を要求します。

従って、Web アプリの実行の流れは、

1. web ブラウザが必要な URL を要求

2. Web サーバーが指定された URL の HTML を返信

3. Web ブラウザが HTML を読み込む

4. 読み込みの過程で HTML に含まれる必要な情報（画像や CSS、Javascript のプログラム）を要求

5. Web サーバーは要求された情報を提供

（必要な場合は）Javascript のプログラムの実行

という手順で処理されます。これは、通常の Web ページの表示でもほぼ同じです。

シンプルな Web ページや Web アプリの場合は、予め HTML の記述を書いたファイルを Web サーバーに保存しておいて、そのファイルを指定して提供します。

少し複雑な Web アプリの場合は、Web サーバー側で HTML の情報を作って送る場合があります。この場合は、HTML を記述したファイルはなくても良くて、Web サーバー側で HTML ファイルの中身に相当する情報を作って提供します。これが、サーバー側レンダリングと呼ばれる方法です。Web ブラウザは、HTML の情報であればそれが、ファイルでも、Web サーバー側のプログラムで作った物でも、表示・読み込みが可能になります。

どのように HTML を作るかは幾つが方法がありますが、Web サーバーと Web ブラウザのやりとりはシンプルです。

Web ブラウザで実行できる Javascript のプログラム

もともとは、Web ブラウザは HTML で書かれた中身を表示するだけでしたが、Web ブラウザでプログラムを動かせるようにして、もっといろいろなサービスを提供するために Javascript が開発されました。現状では Web ブラウザ上で実行できるプログラムは Javascript という事になります。

この Javascript はブラウザ上の HTML の記述を変更することができます。この機能を利用したのが、フロントエンドのフレームワークを利用したアプリです。一旦の Javascript にどのように Web ブラウザで表示させるかを記述したプログラムを読み込むと、Web サーバーにアクセスしないで、Web ブラウザの表示を変えることができます。

ネットワークを介してページを読み込む必要がないので、画面の切り替えなどを高速で行うことも可能になるため、この方法でアプリを作る場合もたくさんあります。React、Vue、Angular と言ったフロントエンドのフレームワークはこのようなアプリを作るのに適しています。

処理を Web ブラウザ側で行うので、Web サーバーにアクセスが集中しても、一旦必要なファイルを Web ブラウザに読み込んでしまえば Web サーバー側で処理することはないので、Web サーバーの負荷は必要最小限ですみます。

一方で、Web ブラウザ側で行う処理が中心になるので、Web ブラウザを動かす端末（PC やスマホ）の負荷は高くなる欠点があります。最近の Web ページはいろいろな Javascript のプログラムを動かす場合が多いので、Web ブラウザで複数のタブで多くのページを開くと、Web ブラウザが利用するメモリの容量が非常に大きくなるのはこのためです。

Web ブラウザで動かすプログラムの最大の欠点

フロントエンドで動かす Web アプリの場合、端末（PC やスマホ）のメモリを沢山使うという欠点以外にさらに大きな問題点があります。それは、Web ブラウザに取り込む情報は、HTML、CSS、画像データ、Javascript のプログラム全てが Web ブラウザにダウンロードされます。従って、これらの情報は基本的に Web ブラウザで全て見ることもできますし、Web ブラウザと同じような仕組みを使えば基本的に誰でもダウンロード可能です。

従って、Web ブラウザでどのようなプログラムがどのような処理をしているかは、簡単に見ることができます。一応プログラミングの知識がなければ簡単には見られないわけですが、仕組みを知っている人は、簡単に見ることが可能です。従って、見られては困る処理を行う場合は、セキュリティ上、Web ブラウザで実行しない方が安全です。この場合は、そうした処理を行うプログラムは Web サーバー側で行って、必要な結果のみを Web ブラウザに伝える形で提供します。

Web サーバー側で行う処理は、実行はサーバーで行うので、仕組みさえあれば、プログラミング言語の選択には自由度があります。良く利用されるのは、PHP、Javascript、Java、Python などがあります。この他にも利用できる言語は沢山あります。日本などでは、Ruby もその一つです。

バックエンドで行う処理の代表的なものは、データベースのアクセスやお金の決済などは良く利用される処理です。

バックエンドで処理した結果をどのように Web ブラウザで表示させるかは、大きく分けて２つの方法があります。

＊　バックエンドで HTML を作って Web ブラウザに渡す（Web ブラウザは HTML を表示するだけ）

＊　処理したデータだけを渡して Web ブラウザの Javascript で表示のための処理を行う（REST API はこの方法です）

多くのアプリケーションでは、データに応じてこの２つのやり方を組み合わせて使う場合が多くなっています。

Web ブラウザと Web サーバーの処理を上手く組み合わせる！

使い易い Web アプリは、Web ブラウザで行う処理と、Web サーバーで行う処理を上手く分けて、使い分けることで利用者が使いやすいように設計されています。どちらも、長所と短所があるので、それらのバランスを考慮して処理する場所を選ぶのが良い設計です。

バックエンドで全ての処理を行う設計にすると、Web ブラウザで Javascript の実行を許可していない場合でもアプリ（サービス）が利用可能になります。しかし、現状では、かなりの Web サイトが Javascript を利用しているので、Javascript の実行が許可されていないケースはかなり少なくなっています。従って、上手く Web ブラウザ側で処理を受け持つことができると、よりスムーズにデータのやり取りが行えるようになるので便利です。

Javascript を使えない場合は、Web ブラウザと Web サーバーでやり取りするデータは、基本的には HTML で、あとは HTML で記述されている必要なファイルです。しかし、Javascript が利用できる場合は、REST API でデータのみを受け取ることもできるので、複雑な処理やデータのやり取りを行う場合は便利です。

まとめ

Web アプリの仕組み自体は非常にシンプルで、Web サーバーから HTML で書かれた必要な情報を Web ブラウザが受け取って事項するというシンプルな仕組みの上に成り立っています。しかし、実際の処理を Web ブラウザで行うか、Web サーバーで行うかを見極めて工夫することで完成した Web アプリの使い勝手は大きく変わってきます。

Web アプリの仕組みをよく理解した上で、フロントエンド（Web ブラウザ）とバックエンド（Web サーバー）の処理を上手く使いこなせると、使い勝手も、性能も、セキュリティも優れたアプリを実現できます。複雑な Web アプリも、シンプルな Web アプリも使っている「仕組み」はシンプルです。

単にプログラムの書き方を学習するだけでなく、どのような処理をどこで動かすと良いのかを学ぶと Web 開発のスキルアップに繋がります！