今回の記事は初心者のためのWebアプリの仕組みについて解説を行っていきます。Webアプリを構成する、3つの言語であるhtml,css,javascriptに関してできるだけ簡単に、かつはっきりと伝えることができれば幸いです。
Webアプリとは？
まずはWebアプリとは何かという問題があるのではないでしょうか。WebアプリとはIT業界に属さない、またプログラマーじゃないという方も非常にお世話になっているものです。
例えばメールをやり取りするときは皆さん何を使用していますか？「gmail」を利用している方も多いのではないでしょうか。
それから時間のある時や、料理をしている時何気なくつけている「YouTube」はどうでしょう？
もちろんご存知ですよね？こういった日々の日常の中で利用されています。これでWebアプリが身近なものと感じてもらえたと思いますので次にiPhoneアプリ、Androidアプリなどとの違いをご紹介します。
まず大前提として、Webアプリと上記のアプリの違いはブラウザを使用しているかどうかです。ブラウザって何？って方もいると思いますのでその説明も行います。有名どころでいうと「Google Chrome」「safari」「Microsoft Edge」Linux系でいうと「Firefox」などでしょうか。圧倒的に有名なものとしてはやはり「Google Chrome」「safari」でしょうか。このブラウザというものを使ってみることができるものがWebページです。Webページ自体はインターネット上に配置されているので、ブラウザはインターネット上のWebページを見るために使用されているということです。
この方のサイトの図が分かりやすかったので載せておきます。こんな仕組みです。
一方、iPhoneアプリ、Androidアプリはどうかというとこのブラウザを使用せずインストールしたアプリ内で表示を完結させます。
まとめると、厳密には少し違いますが、初学者は「WebアプリはWebブラウザを利用してみることができるアプリ」という認識で概ねOkです。
では次はWebアプリがどのように構成されているかについて説明していきます。
Webアプリの構成について
Webアプリを構成している要素としては大きく分けて3つと考えています。「Webサーバ」「フロントエンド」「バックエンド」がその3つの要素です。大量のはてな が浮かんでいる方もいると思いますので順番に説明していきます。
Webサーバ
Webサーバはインターネット上に配置されているサーバでWebページを表示するためのファイルや画像などを蓄えているデータベースのようなもの。
このWebサーバに自身のPCのWebブラウザからアクセスし、ページの返答をもらうことでWebページを見ることができています。
フロントエンド
フロントエンドとは簡単に説明するとWebページの見た目部分と考えてください。主に使用される言語としては「html」「css」「javascript」です。フロントエンドをメインに扱っているプログラマーをフロントエンドエンジニアなんて言い方をしたりもします。
この記事を参考に説明していくとこのページ自体はWordPlessというツールで記載しているのでかなり簡単に記事をかくことができているのですが、一昔前はhtmlを直接書いてWebページの見た目を整えていました。
では一度それがどのようなものなのか覗いてみましょう。googleの検索ページを例に挙げてみます。
上記のように非常に洗練された google検索画面は実は右図のようなコードで構成されています。このコードの塊がインターネット上のWebサーバ(後述)に配置されており、Webブラウザを通してみると左のような画面が表示されれうという仕組みになっております。この「googleのロゴの配色」、「検索エリア」、「検索ボタン」などの表示全てはこのフロントエンドと呼ばれる部分に属しています。
フロントエンドについてある程度理解できたでしょうか？ではこれを踏まえてバックエンドの説明を行っていきます。
バックエンド
先程のgoogle検索を例に説明していきます。例えば、googleの検索画面で何かの画像を検索するとします。その場合はどのように表示するのでしょうか。ページに画像を表示することに関してはフロントエンド側で表示を行うということはわかってきたと思いますが、その画像自体はどこにあるのでしょうか。google検索画面上のコードに埋め込まれている？そんなことはありません。
画像自体はインターネット上のWebサーバ上に保管されており、その保管されている画像を引っ張ってきて、表示を行います。
ではその引っ張り手はどちらに？
先程出てきたフロントエンド側のもの（「jabvascript」は特殊なのであくまでもフロントエンドとしての働きをする「javascript」に限定(*後述)）は画面の表示のみなので画面外に影響を及ぼすことはできません。
要はその担い手が「バックエンド」になります。最近の流行としては「php」「python」「javascript（実はnode.jsという環境ではバックエンドとしても機能(*後述)）」、一昔前は「java」です。主にデータベースとの連携などでは確実に使用されてきます。バックエンドをメインに扱っているプログラマーをバックエンドエンジニアなんて言い方をしたりもします。
ここまでの内容をまとめると、WebアプリとはWebブラウザを通してインターネット上のWebサーバに配置されているファイル(html,css,javascript)の表示（フロントエンド側）を見ることができる。そのアプリ内でデータなどのページ表示にはない箇所（バックエンド側）を操作することでアプリ内の操作を行う。
だんだん仕組みがわかってきましたね。ここまでがWebアプリの簡単な仕組み日てのご紹介です。
javascript補足
先程からjavascriptのみ異様な動きを見せていたと思われますが、その通りです。インターネットの発達からWeb技術の発展はどんどん進んでおり、それに伴ってjavascriptの発達、広がりに拍車をかけています。
先程述べてようにjavascriptは「フロントエンド」でも「バックエンド」でも機能します。二つを分けて説明していきます。
「フロントエンド」側のjavascriptの機能としてはhtmlのタグ情報の操作とAjax通信を担っております。簡単にいうとhtmlの表示に関する部分でメニューを開いた際の「ザーッ」と流れるようなアニメーションをつけたり、現在みているページの文字をクリックした状態でドラッグさせると色が変わったように枠ができます。こういったWebページの動きのある部分がhtmlタグ操作です。もう一つがAjax通信ですが要は別ページとの通信です。これ以上難しいことはやめましょう笑。
javascriptのバックエンド的な説明としては、先程も述べたようなデータのやり取りなのでそこまで難しいことはありません。
javascriptのさらに詳細な説明に関しては別記事で載せますのでそちらをご参照ください。
まとめ
以上のことを踏まえてサイド仕組みを説明しておきます。
Webアプリとは？
Webブラウザを通して、インターネット上にWebサーバに保存されたフロントエンド側の「html」「css」「javascript」ファイルの表示を見つつ、データ関連のやり取りはバックエンド側の各言語が操作することで機能している、インターネット上のアプリケーションです。
以上でWebアプリの仕組みについては終了です。フロントエンド側は少ないですが、バックエンド系の言語では「Python/Django」「javascript/TypeScript」、iPhone関連では「swift」の解説記事を多数記載しているので興味を持っていただければ幸いです。ぜひ見てみてください。
コメント
[…] 初心者用Webアプリの仕組み解説〜 html, css, javascript の働き 〜 […]