お客さま先の情シス若手向けにまとめました。
現在、多くの方がスマホやパソコンでたくさんのWebアプリを利用しています。
社内業務を外出先でもできるようにといった要望があり、Webアプリを制作したいという部署もあります。
そこでWebアプリがどのように作られているのか、Webアプリはどのような処理で実行されているのかを
まとめてみました。
——————————————–
Webアプリ(Webアプリケーション)とは
——————————————–
Webアプリ(Webアプリケーション)とはGoogle ChromeやMicrosoft Edgeなどのインターネットブラウザ上で
操作して利用するアプリです。このWebアプリはブラウザで操作しますが、実際にはWebサーバーで動作しています。
Webサーバーで動作しているシステムをWebブラウザによって閲覧・操作するアプリケーションがWebアプリです。
●Webアプリの事例を紹介
例えば、YouTubeもWebアプリの1つです。YouTubeが動作するサーバーに対して、投稿者が動画をアップ
ロードし、その動画に紐づくタイトルや概要を設定します。
視聴者は、YouTube上で気になる動画を検索すると、動画のサムネイルとタイトルが表示されるので任意の
動画を選択します。
この動画を選択したタイミングで、YouTubeのサーバーへ動画のリクエストが送信されます。
サーバーはそれに適した動画を再生し、ブラウザで表示されるように処理を返す仕組みです。
この一連の流れによって、視聴者は動画を閲覧することができます。
——————————————–
スマホ用アプリ(ネイティブアプリ)との違い
——————————————–
Webアプリとスマホ用のアプリ(ネイティブアプリ)の違いという観点で説明していきます。
Webアプリの場合、アプリを実行しようとする場合はどのような流れで実行しているのか。
最初に、そのアプリが実行できるページ、つまりインターネット上の専用サイトにアクセスする必要があります。
つまり、Webアプリケーションはインターネットにアクセスするためのネットワーク通信が必要です。
先に挙げたYouTubeもネット環境がなければ利用できません。
では、ネイティブアプリの場合はどうでしょうか。ネイティブアプリの例として挙げられるのは、スマホに
純正で搭載されている電卓アプリです。この電卓アプリはネットワーク通信を必要とせず、インターネットに
アクセスする必要がありません。
つまり、Webアプリケーションとネイティブアプリの違いとは、「インターネットへアクセスする必要があるかないか」
といえます。例に挙げたYouTubeの場合、その動画はYouTubeの動画サーバーに保存されていると書きました。
このことから、自身の端末からYouTubeの動画サーバーにたどり着く必要があるからインターネットへアクセスする
必要があると考えることができます。
ネイティブアプリ、先ほどの例でいうと純正の電卓アプリは端末内にデータが保存されています。
つまり、自身の端末からどこかにアクセスする必要がないので、インターネットへのアクセスが必要ないのです。
もちろん、ネイティブアプリでも、インターネット上で処理を行なうべき機能が存在しています。しかし端末内に
プログラムが保存されているので、一部の機能はオフラインでも利用可能です。これに対してWebアプリは、
インターネット環境が実質必須となっているケースが多いです。
——————————————–
Webアプリの仕組み
——————————————–
ここまでは、Webアプリについて例に出しながら解説しました。この章では、具体的に処理の流れなどを踏まえて、
Webアプリケーションがどういった順番で起動するまでに至っているのかについて解説します。
先ほどまでの例を利用して、「パソコンでChromeを利用して、YouTubeの動画を再生する」時の具体的な流れを
考えてみましょう。
1. ChromeがYouTubeサーバーにリクエストを送る
2. YouTubeサーバー側でリクエストの内容に応じて処理を実行する
3. YouTubeサーバーが適したHTMLを作成してブラウザに返す
4. ChromeでHTMLが表示、つまりWebアプリが実行される
●1.ChromeがYouTubeサーバーにリクエストを送る
ChromeにてYouTubeのページにアクセスすると、ブラウザ(Chrome)がYouTubeのサーバーにリクエストを
送ります。
●2.YouTubeサーバー側でリクエストの内容に応じて処理を実行する
YouTubeはGoogleアカウントに紐付いて、登録しているチャンネルや視聴履歴、おすすめの動画などを
保存しています。どのようなアカウントにログインしているのかなどの情報が含まれたリクエストを
サーバーが受信すると、サーバー側でさまざまな処理を実行し、上述したおすすめの動画などを抽出します。
●3.YouTubeサーバーが適したHTMLを作成してブラウザに返す
WebページはすべてHTMLで構成されています。YouTubeのトップページもまたHTMLで構成されて
いるため、YouTubeサーバーは先ほどの登録しているチャンネル、視聴履歴、おすすめの動画などへの
リンクが含まれたHTMLを作成します。
HTMLが作成できれば、その情報をChromeに返します。
●4.ChromeでHTMLが表示、つまりWebアプリが実行される
HTMLを受け取ったChromeは、画面にそのHTMLを表示させます。これによってYouTubeという
Webアプリケーションが実行されます。
——————————————–
Webアプリの開発に必要な開発言語
——————————————–
Webアプリケーションの実行までに、Chromeでの処理とサーバーでの処理、サーバー内のデータベースでの
処理が実行されています。これらは基本的にすべて異なる言語でコードが記述されているため、1つの言語を
理解しただけではWebアプリケーションは開発できません。ここでは、Webアプリケーション開発までに必要となる
開発言語をご紹介します。
●ブラウザ表示に必要な言語
ブラウザ上でWebアプリケーションを表示させる場合、HTMLをはじめとしたブラウザ表示にかかわる言語が
必要となります。このブラウザ表示にかかわる言語とその特徴は以下の通りです。
HTML ：ブラウザに、文字や画像を表示させるための言語です。
CSS ：HTMLによって表示されている文字や画像に、装飾を加えるための言語です。
PHP ：動的Webページを作成するために使われる言語です。
JavaScript ：HTMLによって表示されている文字や画像など、ブラウザに動きを加えるための言語です。
●サーバー処理に必要な言語
ブラウザに表示させるためには、サーバーからそもそもユーザーにどのような情報を送信するのかという
処理が必要となります。サーバー側で処理を実行するのに用いられる言語とその特徴は、以下の通りです。
Java ：世界的にも有名なサーバー処理用言語で、動作速度が早いことや動作環境の影響を受けない特徴が
あります。
JavaScript ：Webページに動きを加えるだけでなく、サーバーの処理にもJavaScriptが使われています。
Python ：サーバー処理、AIなどの機械学習アルゴリズムなどを組み込むことができる言語です。
●データベース処理に必要な言語
今回、YouTubeを例にWebアプリケーションについて説明しているので、データベースについても簡単に
解説します。まず、YouTubeはGoogleのアカウントと紐付いています。
つまり、GoogleのアカウントとYouTubeの情報がデータベース内に保存されており、視聴履歴に基づいて
随時更新されるという処理がサーバーで実行されているのがポイントです。このデータベースに保存されている
データの保存や取得、更新や削除を行う際、基本的にSQLという言語が利用されています。
——————————————–
Webアプリ開発の流れ
——————————————–
では、実際にどのような流れでWebアプリが作成されているのかについて説明します。
●アプリの仕様を決定する
Webアプリだけに限った話ではありませんが、アプリ開発では最初にアプリケーションの仕様を決めます。
Webアプリにおいては、ブラウザにはどんな画面が表示されて、ブラウザ上での操作によって最終的にユーザーが
どのような結果が得られるのか、といった細かなレイアウトから処理の内容までを構想します。
●プログラミング言語を決定する
仕様が決まれば、次はどのような言語でコードを記述するか選びます。先ほど紹介したように、ブラウザ、
サーバー、データベースにはそれぞれ多種多様な言語が用いられています。その中でも、これから開発しようと
しているアプリケーションにはどの言語が適しているのかを考えて、言語を選定します。
●フレームワークの決定とコーディングの開始
言語が決まれば、どんなフレームワークを利用するのかを考えます。ここでいうフレームワークとは、
プログラミング界隈では一般的に工程ごとの雛形という意味で使われます。プログラムとは、
いくつかの処理、つまりいくつかのプログラムの部品から構成されています。
例えば、「入力された文字を表示する」「アップロードされた画像の容量を計算する」など、どんな
アプリケーションにも利用できるようなプログラムの部品こそがフレームワークです。
つまり、「この開発のこの部分にはこのフレームワークを使おう」のように適切なフレームワークを
選択することによって、開発が円滑に進みやすくなります。仕様をはじめ、言語やフレームワークが
決定すればコーディングがスタートします。
晴れてアプリ開発ができれば、デバッグをして不具合の検証を行ない、問題なければ納品して開発が
完了する流れです。
ここまで概要を書いてきましたが、下記の理由で、自社でWebアプリを開発するのは難しいと考えます。
・さまざまな言語の理解が必要
・言語同士の連携に関する理解が必要
・サーバーやインターネットに関する知識が必要
・各プログラミング言語のフレームワークに関する知識が必要
よって、システム開発に外注(アウトソーシング)することになってしまう、ということを認識してもらいたいと
思います。
以上です。
入会申込
ログイン
