はじめに

今回の記事は前回の続きです。前回の記事も読んで頂ければ幸いです。それではまとめていきます。

HTML、CSS、JavaScript

なにかと一緒にまとめられることが多いこちらの三つ。

プログラミングの参考書なんかでも三つ一緒に解説してあるところをよく見かけます。

実はこの三つは共通点があって、それは三つともフロントエンドで用いられる、という点です。

エンジニアの仕事は大きく分けて、ユーザーの目に触れるところを操作するフロントエンドエンジニアとユーザーの目に触れないところを操作するバックエンドエンジニアに分けられます。

以下に図解します。

このように、HTML、CSS、JavaScriptはユーザーの目に触れるところにかかわるものです。それでは各々について解説していきます。
HTMLは前回の記事でも取り扱いましたが、HyperText Markup Languageの略称で、webの文章であるハイパーテキストを記述する際に用いられるマークアップ言語のひとつです。

他のマークアップ言語として、XMLやXHTMLなどがあります。

CSSはCascadiong Style Sheetsの略称で、HTMLやXMLの体裁を整えるときに用いられる言語です。

元々、HTMLの体裁を整えるときにはfontなどのタグが用いられていましたが、文章の構造と体裁の記述が入り混じったものとなり記述が複雑になったためにCSSとして分割されるようになりました。

HTMLファイルとCSSファイルは必ずしも分ける必要はなく、HTMLファイルの中にCSSを直接書き込むことも可能ですが、複数のHTMLで同じ体裁を用いるためにはCSSを別ファイルとすることが望ましいです。

また、例えば何かのサイトをPCでもスマホでも閲覧するようにするために、スマホ用とPC用のHTMLを作成することはとても面倒くさいですよね。

その時にはPC用のCSSとスマホ用のCSSを作成することで、同一のHTMLファイルを使いまわすことができます。

JavaScriptはクライアントサイドスクリプトとして用いられることが多いです。

クライアントサイドスクリプトは、webブラウザ上で動くプログラミングであり、ブラウザへの処理とHTML、CSSの操作を主に行います。

JavaScriptは最近ではサーバーサイドスクリプトとして用いられることもあるようです。

DOM

DOMとはDocument Object Modelの略称で、HTMLやXMLを制御・参照するためのAPIです。

プログラムとHTML、XMLの橋渡しに用いられます。現在ではほとんどのWebブラウザがDOMを実装しており、クライアントサイドスクリプトやWebブラウザに実装された機能などからWebページの内容を読み取ったり編集したりすることが可能となっています。

JSON

JSONは構造化したデータを表すためのデータ記述言語の一種です。

JavaScript Object Notationの略称で、書式がJavaScriptに従ったものになっていますが、他の言語でも操作できます。

データ構造はpythonの辞書型に非常によく似たものとなっています。

データを木構造として表すことができ、その点ではXMLに似ていますが、特徴としてはタグなどを用いない非常にシンプルな構造であるため、データサイズがかなり小さいことが挙げられます。

また、JSONをJavaScriptで操作する際はDOMを用いることなくそのまま読み込むことができるため、クライアントサイドスクリプトとしてJavaScriptが用いられることが多いWebの世界においては選択されやすいデータ形式となっています。

Webアプリケーションの三層構造について

webブラウザで動作するアプリケーションをwebアプリケーションと呼びます。

webアプリケーションは三層構造になっていて、ユーザーとのやり取りを行うユーザーインターフェースである「プレゼンテーション層」、業務処理を行う「アプリケーション層」、データの処理や保管を行う「データ層」に分けられます。

プレゼンテーション層はwebブラウザとwebブラウザにより構成され、アプリケーション層はアプリケーションサーバーにより構成され、データ層はデータベースサーバー、つまりDBサーバーにより構成されています。

クライアントサイドスクリプトはプレゼンテーション層で、サーバーサイドスクリプトはアプリケーション層で動作します。

Web API

webブラウザはユーザーがデータを送信して、それに対してサーバーがデータを返送する、という仕組みで成り立っています。

これを応用して、Webを通じてユーザーではなくプログラムが直接サービスを利用するための窓口がWeb APIと呼ばれます。

クライアントであるプログラムがWeb APIを通じてサーバーにデータを送信し、それを受け取ったwebサーバーがデータを処理し、再びwebを通じてクライアントであるプログラムにデータを返送します。

クライアントはプログラムであるため、人が見やすいデータであるHTMLではなく、XMLやJSONのような構造化されたデータが返送されます。

終わりに

今回はここまでになります。お付き合い頂きありがとうございました。