1. トップページ
  2. DXコラム
  3. 【コラム】人事のためのIT入門講座「ウェブページが表示される仕組み」と「習得にオススメの技術領域」

【コラム】人事のためのIT入門講座
「ウェブページが表示される仕組み」と「習得にオススメの技術領域」

本コラムでは、人事のご担当者さま向けに、ITリテラシー向上につながる情報をお届けしてまいります。人事業務の効率化や高度化だけでなく、デジタル人材の採用やデジタル教育の検討にご活用いただければ幸いです。

(1)何気なく閲覧しているウェブページ。その表示の仕組みをご存じでしょうか?

いまや、業務だけでなく私生活を含めても、ウェブページを見ない日はないのではないでしょうか。企業情報のページなど、誰に対しても同じ内容が表示される ウェブサイトもあれば、ECサイトのマイページやオススメ商品のように、閲覧者に応じた内容が表示されるウェブサイトもあります。

しかし、その仕組みはご存じでしょうか。意外と(?)その仕組みについてはご存じない方は少なくないようです。

そこで今回は、ウェブページが表示される仕組みについてご紹介いたします。

(2)ウェブページ表示の仕組み

ウェブページ表示に関わるシステム構成は、下図のようになります。以降では、この図を用いて、私たちがウェブブラウザに URL を入力して、会員ページにログインするときのデータのやりとりを説明していきます。

※以降では、説明をわかりやすくするために、実際とは異なる説明をしているところがあります。あらかじめご容赦ください。


  1. ユーザーが、ウェブブラウザに URL を入力。ログイン画面であれば、ユーザーIDとパスワードも併せて入力。

  2. ウェブブラウザは、URLを見てウェブサーバーにアクセス。

  3. ウェブサーバー上で動作するウェブアプリケーションは、入力されたユーザーIDに対応するパスワードを調べるため、データベースに問合せ。(データベースへの問合せは通常、「SQL」と呼ばれる言語が使われます。また、ウェブアプリケーションは、PHP、Java、Python などさまざまなプログラミング言語が使用されます)

  4. データベースは、入力されたユーザーIDに対応するパスワードをウェブアプリケーションに返す。

  5. ウェブアプリケーションは、入力されたパスワードと、データベースに保存されていたパスワードを比較し、一致していればログイン後のマイページの情報を、一致していなければ再度ログイン画面の情報をウェブブラウザに返す。(ウェブページの情報は通常、HTML、CSS、JavaScript といった言語で書かれた文字情報です)

  6. ウェブブラウザは、HTML、CSS、JavaScript といった文字情報を解釈して、グラフィカルな画面をユーザーに表示。

※最近のウェブサイトの中には、「ドラッグ&ドロップできる」「右クリックで独自のメニューを表示する」「無限スクロールできる」といった高機能なものもあります。これらは、「シングルページ・アプリケーション」と呼ばれており、 HTML、CSS、JavaScriptで作られています。

(3)利用者の方がよい成果物を作れる「ブラウザからの画面表示」

ここまでのウェブページ表示の仕組みの中で、最も理解しやすいのは、「ブラウザからどう見えるか」といった部分になります。システム開発の工程では、「要件定義」「画面設計」に当たります。ITへの理解そのものよりも、ビジネス・業務知見のほうが求められる内容になります。

つまり、開発者よりも利用者の視点の方が求められることになります。「こんな機能がほしい」「この画面はこうした方が入力の手間が少ない、出力が分かりやすい」といった要望は、業務をよく知っていなければ、出すことができません。

システムを0から開発する場合だけでなく、既存のクラウドサービスやパッケージソフトを導入する場合にも、自社の業務・自社の社員にマッチしているかを考える際に必要な知識になります。

(4)業務でデータ分析・加工をするなら知っておきたい「データベースへの問合せ方法」

データベースへのアクセス部分については、業務上、データの抽出・分析・加工を行う必要がある方は、必要な知識になります。

図でも示していますが、Excel からデータベースにつなぐこともあるため、データベースから直接データを取り出して、Excel で分析・加工したい場合はぜひ身につけておきたい内容になります。

Access であれば、内部的にデータベースも持っているため、やはりデータベース操作の知識はぜひ身につけておきたい内容になります。

また、AI(人工知能)の開発でも使われるプログラミング言語 Python であれば、 Excel よりも高速かつ複雑な加工もできるため、Python の知識と併せて保有しておくと、データ分析・加工がはかどります。

(5)企業のホームページを作成するなら知っておきたい
「ウェブページ表示言語HTML・CSS・JavaScript」

HTMLやCSSについては、Word と同じような感覚で、文章を書き、見出しや図表をつけて、リンクをつけて、色や大きさなどの「見た目」を変えるということを、特定の言語を使って実現しているにすぎません。

誰に対しても同じような内容のウェブページが作れるようになりますので、企業のホームページやブランドサイトを作る際にはぜひ身につけておきたい知識になります。

最近のホームページは JavaScript が使われているのが当たり前で、クリック時のアニメーションや、画像のスライド表示など、「動きのあるウェブページ」にすることで、企業イメージを向上させたり販促効果を高めたりしています。

企業ホームページなどを作成する場合には、JavaScript も併せて覚えておきたい知識になります。ただし、JavaScript はプログラミング言語の一種でもあるため、習得のハードルは少し高くなります。

(6)小規模なら作ってもよいが専門家任せがオススメの「ウェブアプリケーション」

ウェブアプリケーションは、ここまでの中で最も難しいところになります。プログラミングの知識もさることながら、「どのような機能が必要か」というビジネス・業務知見、HTML/CSS/JavaScriptなどのウェブページ表示言語、データベースへの負担・処理速度・データの整合性の観点でバランスの取れたデータベースへの問合せの仕方など、広範な知識が求められます。

簡易的なものであれば開発できるようになるのはオススメしますが、 ITの専門家でない限りは、マスターしようとするのはあまりオススメできません。専門家に任せるのが得策です。


いかがでしたでしょうか。貴社内で、どのようなスキルを持つ人材がどの程度必要か、どの部門の人にどういったITスキルがあるとよいか、今回の内容が参考になれば幸いです。

(7)関連サービスのご紹介




※本記事は2020年12月23日現在の情報です。

お問合せ

まずはお電話かメールにてお気軽にご相談ください

お電話でのお問合せ

03-5577-3203

PAGE TOP