Webアプリケーションの構造

Webアプリケーションはどんな構造で開発されているのでしょうか？

ソフトウェア開発を経験した人にとっては当たり前のお話だと思いますが、現場経験が無い人にとってはなかなか判りにくいものです。

自分もWebアプリケーション開発のマネジメントはやったことがありますが、実際にプロジェクトの内側に入って開発したことが無いので、長いこと基本的なことが判っていませんでした。

そこで今日はWebアプリケーションを開発言語の視点で整理してみたいと思います。

Webアプリケーションの基本構造

　Webアプリケーションで一番単純なものは動きの無いホームページですね。これはHTMLだけで開発ができます。

しかしちょっとデザイン面で凝った作りをしたかったり、統一感を出したい場合はCSSというものを利用する必要があります。

また、他のアプリケーションの情報を活用したり、データベースと連携したりして動きがあるページを作りたい場合はJavaScript等の別のプログラミング言語を利用しないと難しいです。

基本はこの「3つの組合せ技」で構築することが多い様です。

ただ、JavaScriptの代わりにPHPやPython等で開発することもありますし、もっと複雑な大規模システムだとフロントエンド側とは別に、ビジネスロジックやデータベース処理をバックエンド側に配置して3階層構造にすることがあります。

しかし、今日はそこまでは踏み込まず、フロントエンド側=Webアプリケーションの画面コントロール側の３つの組合せ技について触れてみたいと思います。

この3つの組合せ技のそれぞれの役割分担は以下の様なイメージです。

①HTMLファイル　⇒Webページの基本構造を定義する
②HTML文中で＜スタイルシートを指定＞　⇒CSSファイル（文字書式、色、ページ装飾等を定義する）
③HTML文中で＜スクリプトファイルを指定＞　⇒JavaScriptプログラムファイル（画面の動作をコントロールする）

では、この3つの基本的な機能についてみていきます。

HTMLの基本

HTMLのページは要素定義の集合体であり、１つ１つの要素は単純に以下の様なタグを使った書式になっています。

具体的には

これの記述により、ページの本体の第１階層に「これは第１階層の大見出しです」というテキスト文章を表示せよ、という意味になります。

この様なタグとタグを囲む「内容」部分の記述により「入れ子構造」によって、Webページのコンテンツを表示させるのです。

HTML5のコンテンツモデル
HTMLには多くのタグが存在しますが、大きくは以下の７つのカテゴリーに分類されます。

1.フロー（配置場所が未設定）ヘッダー、メイン、フッター、段落、リスト等多くを網羅
2.ヘッディング（見出し）h1～h6の６階層しかない
3.フレージング（インライン）文字装飾、強調、小文字、改行、等
4.インタラクティヴ（対話型）メニュー、詳細、インプットのアクション
5.エンベデッド（メディアの組込み）画像や動画、音声等マルチメディアを扱える
6.セクショニング（文書構造化）
7.メタデータ（文書情報）HTML文書全体に関する情報を設定する。文書名、スクリプト呼び込み、URL位置等

HTMLの基本構造

とても単純な例で説明すると以下の様に、htmlタグが外側にあり、その中にheadタグとbodyタグが配置されている、というものです。

CSSの基本構造

CSSは「Casukading Style Sheets」の略で、Webアプリケーションのページ文字書式、色、装飾等のレイアウトやスタイルを定義する記述です。

HTMLの中でCSSファイルのリンク（ファイ名）が指定されることでその機能が動作します。

記述の構造は以下のイメージです。

セレクタ{
プロパティ1:値;
プロパティ2:値;
プロパティ3:値;
プロパティX:値;
}

セレクタ=どの要素の
プロパティ=何を
値=どのようにする

という形式で様々な定義が可能となっています。例えば以下のイメージです。

これは

HTMLの中の
・body要素に含まれるテキストの
・フォントサイズ を 30ピクセルに
・行間を 1.5倍に
設定する
という意味になります。

なお、セレクタは影響されるスコープ（適用範囲）を示しておりセレクタの詳細度＝適用される優先順は以下の通りです。
スタイル属性(HTML全体)→#IDセレクタ→クラスセレクタ→タイプセレクタ→ユニバーサルセレクタ
（一般スタイルより個別スタイルが優先）

JavaScriptの基本

JavaScriptの基本文法から説明するのは不可能なので、手続き型言語とは大きく違う特徴的な構文を取り上げます。

let 変数名 = new クラス名()

この変数を定義することで、クラス(=設計図)がメモリにロード(=インスタンスが生成)され、利用できるようになります。

これがオブジェクト指向型言語の大きな特徴で、必要なプログラム(=オブジェクト)を必要な時にメモリに呼び込む、というものです。

クラスの中には「プロパティ」と呼ばれる「定数」的なものと、「メソッド」と呼ばれる「処理」的なものが定義されており、この構文によりそれらを利用できるようになります。

ここでの”new”関数を「コンストラクタ」と呼びます。コンストラクタという言葉を覚える必要はありますが、その機能についてはさほど気にしなくても良いです。クラスを使えるようにするためのおまじないだと覚えておけば良いです。

重要なのは、ここで定義した「変数」が「オブジェクト名」となって、クラスに含まれる「プロパティ」と「メソッド」を以下の様に指定して利用できるようになることです。

オブジェクト名.プロパティ
オブジェクト名.メソッド(引数)

組み込みオブジェクト

JavaScriptには最初からブラウザに組み込まれていてすぐに使える「組み込みオブジェクト」というものがあります。

文字列オブジェクト、日付オブジェクト、数学オブジェクト、等はCやCOBOL等の手続き型言語の「関数」的なものなので判り易いと思います。使い方としてはEXCEL関数の様なイメージですね。

その違いは、関数は主に「処理」の共通化をしますが、オブジェクトは「定数/変数」も共通化して使えるようになります。

さらに、特徴的なのはWindowsオブジェクトです。

ブラウザでのユーザーアクションやブラウザの状態、ブラウザへの要求をコントロールできるオブジェクトがあります。

Windowsオブジェクトはたくさんの内部オブジェクトを束ねる役割を持っており巨大な親オブジェクトでもあります。

ブラウザ内のコンテンツHTML文書を表すdocumentオブジェクト、ブラウザの情報を表すnavigaterオブジェクト、HTML文書のアドレスを表すlocationオブジェクト、
ブラウザの閲覧履歴を表すhistoryオブジェクト、ウィンドウに関連ずけられたscreenオブジェクト、等があります。

利用する時には構文規則から言えば、
windows.location.reload(); 　//現在のページを再読み込みする
の様に書くのが正しいのですが、いちいちwindowsは書かなくても省略しても良いことになっています。

JavaScriptはこれらの最初から備わっている組込みオブジェクトを活用して、ユーザー操作に合わせてインタラクティブな動的なWebアプリケーションを作りこむことができるようになっているのです。

さらにJavaScriptライブラリやフレームワークとして、jQuery、React.js、Node.js、Vue.js、Angular.js等が提供されており、開発生産性や品質向上にも大きく貢献しています。

※オブジェクト指向については別の投稿がありますのでそちらも参照ください。

オブジェクト指向の壁 – IT業界カウンセリング雑談 (taworks.jp)

以上です。