Web開発を始めたい人必見：「Web技術の基本」で学ぶ現代の必須スキル Chapter(1) 〜Web技術とは〜

はじめに

こんにちは！Naoと申します。普段は株式会社xincereでWebアプリケーションの開発をしています。主にReactやTypeScriptを使い、日々モダンな技術を活用した開発に取り組んでいます。
今回の記事では、書籍「この一冊で全部わかる Web技術の基本」をテーマに、その内容を深掘りしてご紹介します。エンジニアを目指す方やジュニアエンジニアはもちろん、Web技術に興味のある方にも役立つ内容を目指しました。最後には学んだ知識を振り返る理解度チェックテストもご用意しています。ぜひ楽しみながら挑戦してみてください！

前提

この記事は、書籍「この一冊で全部わかる Web技術の基本」を読んだ方向けに執筆しています。詳しい内容については書籍を実際に手に取って確認いただければ幸いです。

関連記事

• Chapter(1) 〜Web技術とは〜 ← 今回はここ
• Chapter(2) 〜Webとネットワーク技術〜

各内容へのリンク

• この書籍を読んだ理由
• 各単元のポイント解説
  • 1-01 【Webとは】
  • 1-02 【インターネットとWeb】
  • 1-03 【さまざまなWebの用途】
  • 1-04 【HTMLとWebブラウザ】
  • 1-05 【WebサーバーとHTTP】
  • 1-06 【Webページが表示される流れ】
  • 1-07 【静的ページと動的ページ】
  • 1-08 【動的ページの仕組み】
  • 1-09 【Webの標準化】
  • 1-10 【Webの設計思想】
• 章末問題 (Web技術とは)
• 終わりに
• その他

この書籍を読んだ理由

実務で開発を始めて約6ヶ月が経ちました。このタイミングで改めて「この一冊で全部わかる Web技術の基本」について記事を書こうと思った理由は、すでに学習済みの基礎知識を「知っているレベル」から「いつでも引き出せて、人に説明できるレベル」に昇華させたいと考えたからです。

皆さんは「学習の5段階レベル」という言葉をご存じでしょうか？もし知らない方は、こちらのWebページをご一読ください。
実務では、基礎知識や技術を調べながら使いこなすこと（レベル3: 意識的有能）で充分開発を進められると感じています。しかし、業務効率をさらに高めるためには、これらを「いつでも自然に引き出せる状態」（レベル4: 無意識的有能）にする必要があると考えるようになりました。

そのため、誰もが知っている基礎を改めてしっかり学び直すべく、この書籍を手に取りました。今回の記事が、私自身の学びの振り返りだけでなく、読者の皆さんにとっても有益なものになれば幸いです。

各単元のポイント解説

1-01 【Webとは】

1. Webとは何か？
2. Webは「WWW」と呼ばれるが、正式名称は何というか？
3. Web上の文章を構成している言語を何というか？
4. ハイパーリンクとは何か？

解答

1. インターネット上で行うことができる文書の公開・閲覧のためのシステム
2. World Wide Web (世界に広がるクモの巣という意味)
3. ハイパーテキスト
4. 1つのwebページの中に埋め込まれた、別のwebページへの参照のこと

ワンポイント解説

ハイパーテキストとハイパーリンクの違いは？
⇨ 例えば、あるウェブページに「犬の種類についてはこちら」と書かれていた場合：

• ハイパーテキスト: この文章全体や仕組み
• ハイパーリンク: 「こちら」という文字に埋め込まれたリンク

1-02 【インターネットとWeb】

1. 開発当初は企業や研究機関のみで利用され、各地のコンピュータ同士を繋げる目的に開発されたものは何か？
2. 世界中の実験者が文章を共有することを目的として開発され、後にインターネットで使えるシステムとして発表されたものは何か？

解答

1. インターネット
2. Web

ワンポイント解説

• それぞれの開発目的の違いに着目しよう！

1. インターネット
   ⇨ 世界中のコンピューターを繋げたい！
2. Web
   ⇨ 世界中の研究者で文書を共有したい！

1-03 【さまざまなWebの用途】

1. 1つのドメインにある複数のwebページの集まりのことを指して何というか？
2. コンピュータの機能とユーザーのやりとりを橋渡しする機能を何というか？
3. ソフトウェア同士のやりとりを橋渡しする機能を何というか？

解答

1. Webサイト
2. ユーザーインターフェース
3. アプリケーションプログラミングインターフェース(API)

ワンポイント解説

• ユーザーインターフェースとAPIの具体例を確認しよう！

ユーザーインターフェース

• メールの閲覧、編集等の操作(ユーザー)
• ハイパーテキストでメールを表示(webサーバー)
• メールの送信、結果を受け取る(メールサーバー)

※ webサーバーがユーザーとコンピューター機能の橋渡しをしている

アプリケーションプログラミングインターフェース(API)

• 地域情報を送信(天気予報アプリ)
• 地域情報から天気情報を返す(webサーバー)

※ やり取りそのものはソフトウェア同士で行われている

1-04 【HTMLとWebブラウザ】

1. ハイパーテキストを記述するための言語を何というか？
2. HTMLで文章に意味づけをするためのマークを何というか？
3. ハイパーテキストを人間が読みやすい形に変換する役割を持ったものはなにか？

解答

1. HTML(マークアップ言語)
2. タグ
3. Webブラウザ

ワンポイント解説

• 一般的に使われているwebブラウザにはどんなものがあるか確認しよう！

1. Internet Explorer (レガシーサポートが必要)
   • 1995年に初めてリリースされ、2022年に公式サポートが終了
   • Microsoft Edgeが後継ブラウザとして開発され、モダンな技術やセキュリティを提供
2. Firefox (プライバシーを重視)
   • トラッキング防止機能や広告ブロック機能など、ユーザーのプライバシー保護に力を入れている
   • Windows、macOS、Linuxだけでなく、AndroidやiOSにも対応
3. Chrome (スピードや最新技術を重視)
   • Googleが開発したブラウザで、ページの読み込みやJavaScriptの処理が高速
   • 最新のウェブ技術や規格を積極的にサポートし、他のブラウザの開発にも影響を与えている

1-05 【WebサーバーとHTTP】

1. Webページを閲覧する際にコンテンツを要求し、Webページを表示する役割を持ったものは何か？
2. webページを閲覧する際にコンテンツの要求を受け取り、ハイパーテキスト形式でコンテンツを返す役割を持ったものは何か？
3. コンテンツをやり取りするための手順とメッセージの書式を世界共通の仕様として、定めたものを何というか？

解答

1. Webブラウザ
2. Webサーバー
3. HTTP

ワンポイント解説

• HTTPのメリットを理解しよう！

HTTPのメリットとは？

「どの種類のwebブラウザでも、あらゆる種類のwebサーバーと同じ手順でやりとりができる！」

わかりやすく言い換えると・・・

たとえば、友達と手紙を書くときに、全員が同じルールで書くことを決めているとします。

1. 手紙の最初に「こんにちは！」と書く
2. その次に「用件を書く」
3. 最後に「さようなら！」と書く

こうすれば、誰が手紙を書いても、誰が読んでもやり取りがスムーズにできますよね。

インターネットも同じ仕組み！

• ブラウザ（たとえばChromeやSafari）は「手紙を書く人」みたいなもの
• サーバー（ウェブサイトを保存しているコンピュータ）は「手紙を受け取って返事をする人」

HTTPというルールは、「手紙の書き方」みたいなものです。このルールがあるおかげで、どのブラウザを使っても、どんなウェブサイトとでも問題なくやり取りできるのです！

1-06 【Webページが表示される流れ】

1. Webブラウザに対して、取得したいWebページを指定する際に利用するものをアルファベット3文字で何というか？
2. URLには「どのような(　A　)で」「どの(　B　)に対して」「なんの(　C　)を取得するか」といった情報が含まれている
3. HTTPのセキュリティを高めた手順をアルファベット5文字で何というか？

解答

1. URL
2. A 手順 / B Webサーバー / C コンテンツ
3. HTTPS

1-07 【静的ページと動的ページ】

1. 何度アクセスしても毎回同じものが表示されるWebページを何というか？
2. アクセスした時の状況に応じて異なる内容が表示されるWebページを何というか？
3. HTML/CSSのみで構成されたWebページは、静的ページと動的ページのどちらに分類されるか？

解答

1. 静的ページ
2. 動的ページ
3. 静的ページ

ワンポイント解説

• 下記のページは静的ページと動的ページのどちらに分類されるか考えてみよう！

1. ログインするユーザーごとに異なる内容を表示する会員サイト
2. 会社の概要、事業内容、連絡先などが掲載されたページ
3. ユーザーが書き込みを行うたびに増えていくような掲示板サイト
4. GoogleやYahooのような検索結果に応じて表示内容が変わるようなWebページ
5. 商品やキャンペーンの概要を伝えるための一時的なページ

解答

静的ページ

⇨ 2, 5

動的ページ

⇨ 1, 3, 4

1-08 【動的ページの仕組み】

1. WebサーバーがWebブラウザからの要求に応じてプログラムを起動させるための仕組みをを何というか？
2. CGIによって呼び出されるプログラムのことを何というか？
3. サーバーサイド・スクリプトは一般的に文字列の扱いに長けた言語で書かれることが多い。そのような言語を何というか？
4. HTMLに埋め込まれ、Webブラウザによって読み込まれる際に実行されるプログラムを何というか？
5. スクリプト言語と呼ばれる言語を5つ答えなさい
6. Webブラウザによって読み込まれる際に実行されるプログラムを書く際に主に利用される言語は何か？

解答

1. CGI
2. サーバーサイド・スクリプト
3. スクリプト言語
4. クライアントサイド・スクリプト
5. Perl、Ruby、Python、PHP、Javascriptなど
6. Javascript

ワンポイント解説

• フロントエンドエンジニア と バックエンドエンジニア について理解を深めよう！

フロントエンドエンジニア

フロントエンドエンジニアは、クライアントサイドスクリプトを使って、見た目や動きのある部分を作ります。
クライアントサイドというのは、あなたが使うスマホやパソコン（これを「クライアント」と呼びます）の中で動くプログラムのことです。

例えば：

• Webサイトのデザイン（色やボタンの形）
• ボタンを押したら画面が変わる動き

これらはすべて「クライアントサイドスクリプト」で作られています。
よく使われる言語はJavaScriptです。

---

バックエンドエンジニア

バックエンドエンジニアは、サーバーサイドスクリプトを使って、見えないけど大事な部分を作ります。
サーバーサイドというのは、インターネット上にある「サーバー」と呼ばれるコンピュータで動くプログラムのことです。

例えば：

• ログイン情報をチェックする仕組み
• 商品データを保存したり取り出したりする仕組み

これらはすべて「サーバーサイドスクリプト」で動いています。
よく使われる言語はPythonやRuby、Javaなどです。

1-09 【Webの標準化】

1. HTML/CSS/XML/XHTMLといったWebで用いられる技術は何という団体によって標準化されているか？
2. 上記の標準化とはどういうことか？
3. Web技術を適切に標準化しなかった場合、どういった問題が発生するか？

解答

1. W3C(World Wide Web Consortium)
2. しっかりとした規格を決めること
3. それぞれの技術に互換性がなくなり、どのWebブラウザでも同じようにWebページが表示される状態を実現できなくなってしまう

1-10 【Webの設計思想】

1. 「RESTの原則」を守って設計されたWebシステムのことを「(　A　)なシステム」という。(　A　)に入る適切なものは何か？
2. 「RESTの原則」は4つあるが、それは何か？
3. 情報を意味的に理解できる形でウェブ上に整理し、機械が効率的にデータを解釈・処理できるようにする次世代のウェブの概念や技術のことを何というか？

解答

1. RESTful
2. 「統一インターフェース」、「アドレス可能性」、「接続性」、「ステートレス性」
3. セマンティックWeb

ワンポイント解説

• 「RESTの原則」について理解を深めよう！

下記の4つは「RESTの原則」を説明しています。それぞれの説明は何を指しているでしょうか？

1. やりとりされる情報にはリンクを含めることができる
2. あらかじめ、定義・共有された方法(WebであればHTTP)で情報がやりとりされる
3. すべての情報が一意なURLの構文で示される
4. やりとりは1回ごとに完結し、前のやりとりの結果に影響を受けない

解答

1. 接続性
2. 統一インターフェース
3. アドレス可能性
4. ステートレス性

章末問題 (Web技術とは)

1 下記の問いに対して最も適切なものを答えなさい。 (2×9)

Q1 次のうち、Webの説明として正しいのはどれか？

1. インターネット上で行うことができる文書の公開・閲覧のためのシステム
2. コンピュータのハードウェアを管理するためのソフトウェア
3. データベースから情報を取得する技術

Q2 次のうち、WWWの正式名称として正しいのはどれか？

1. World Web Network
2. World Wide Web
3. Worldwide Wireless

Q3 次のうち、Web上の文章を構成している言語として正しいのはどれか？

1. プログラム言語
2. ハイパーテキスト
3. マークアップ言語

Q4 次のうち、ハイパーリンクの説明として正しいのはどれか？

1. Webページの中で文字を太字にする機能
2. インターネット接続を行うためのプロトコル
3. 1つのWebページの中に埋め込まれた、別のWebページへの参照のこと

Q5 ハイパーテキストを記述するための言語として正しいのはどれか？

1. CSS
2. JavaScript
3. HTML

Q6 HTMLで文章に意味づけをするためのマークを何というか？

1. タグ
2. クラス
3. セレクタ

Q7 ハイパーテキストを人間が読みやすい形に変換する役割を持ったものはなにか？

1. Webブラウザ
2. テキストエディタ
3. データベース

Q8 HTMLは一般的に何と呼ばれるか？

1. プログラミング言語
2. スクリプト言語
3. マークアップ言語

Q9 WebサーバーがWebブラウザからの要求に応じてプログラムを起動させるための仕組みをを何というか？

1. CGI
2. API
3. HTTP

2 下記の5つの説明として、最も正しいものをA〜Eの中から選びなさい。 (2×5)

1. コンピュータの機能とユーザーのやりとりを橋渡しする機能
2. 世界中の実験者が文章を共有することを目的として開発され、後にインターネットで使えるシステムとして発表されたもの
3. 1つのドメインにある複数のwebページの集まりのこと
4. ソフトウェア同士のやりとりを橋渡しする機能
5. 開発当初は企業や研究機関のみで利用され、各地のコンピュータ同士を繋げる目的に開発されたもの

A. インターネット
B. Web
C. Webサイト
D. ユーザーインターフェース
E. アプリケーションプログラミングインターフェース(API)

3 下記は一般的に使われることが多いWebブラウザの説明です。それぞれの説明が何のブラウザの説明をしているかを選択肢A〜Cの中から選びなさい。 (2×3)

1. モダンな技術やセキュリティを提供している「Microsoft Edge」が後継ブラウザとして開発された。
2. Googleが開発したブラウザで、ページの読み込みやJavaScriptの処理が高速である。
3. トラッキング防止機能や広告ブロック機能など、ユーザーのプライバシー保護に力を入れている。

(A) Internet Explorer / (B) Firefox / (C) Chrome

4 下記はWebページを閲覧する際に行われる処理です。それぞれの処理は「Webブラウザ」と「Webサーバー」のどちらが担当しているでしょうか？適切な方を答えなさい。 (2×3)

1. ユーザーが入力したURLに基づいてHTTPリクエストを送信する。
2. HTTPリクエストを受け取り、要求されたページのデータ（HTML、CSS、JavaScriptなど）を探し出して、レスポンスとして送信する。
3. 受け取ったHTMLを解析し、ページを構築する。同時に、CSSを適用して見た目を整え、JavaScriptを実行してページの動的な動きを追加する。

5 下記はHTTPについて説明しています。(　A　)〜(　D　)にあてはまる適切な語句を選択肢の中から選んで答えなさい。 (2×4)

HTTPとは、(　A　)をやり取りするための(　B　)とメッセージの書式を(　C　)の仕様として、定めたものです。HTTPと似たものにHTTPSがあります。これはHTTPの(　D　)を高めた手順のことです。

選択肢
手順 / パスワード / コンテンツ / 汎用性 / セキュリティ / 世界共通

6 下記は「RESTの原則」について説明しています。空欄に当てはまる語を答えなさい。 (3×5)

「RESTの原則」は(　A　)、(　B　)、(　C　)、(　D　)の4つから成り立っている。「RESTの原則」を守って設計されたWebシステムのことを(　E　)なシステムという。

7 下記は「Webの標準化」について説明しています。空欄に当てはまる語を答えなさい。 (3×3)

HTML/CSS/XML/XHTMLといったWebで用いられる技術は(　A　)という団体によって標準化されている。ここでいう標準化とは、「しっかりとした(　B　)を決めること」である。Web技術を適切に標準化しなかった場合、それぞれの技術に(　C　)がなくなり、どのWebブラウザでも同じようにWebページが表示される状態を実現できなくなってしまう。

8 下記は動的ページの仕組みを説明しています。空欄に当てはまる語を答えなさい。 (3×4)

WebサーバーはWebブラウザからの要求に応じてプログラムを呼び出します。この時に呼び出されるプログラムのことを(　A　)・スクリプトといいます。(　A　)・スクリプトは一般的に文字列の扱いに長けた言語で書かれることが多く、そのような言語を(　B　)言語といいます。また、HTMLに埋め込まれ、Webブラウザによって読み込まれる際に実行されるプログラムを(　C　)・スクリプトといいますが、一般的に(　D　)という言語が使われます。

9 下記の5つはWebページの説明です。動的ページに分類されるものをすべて答えなさい。 (4×1)

1. ユーザーが書き込みを行うたびに増えていくような掲示板サイト
2. 商品やキャンペーンの概要を伝えるための一時的なページ
3. ログインするユーザーごとに異なる内容を表示する会員サイト
4. 会社の概要、事業内容、連絡先などが掲載されたページ
5. GoogleやYahooのような検索結果に応じて表示内容が変わるようなWebページ

10 下記は「RESTの原則」に関する説明です。空欄に当てはまる語を答えなさい。 (3×4)

• やりとりされる情報には(　A　)を含めることができる
• あらかじめ、定義・共有された方法(WebであればHTTP)で(　B　)がやりとりされる
• すべての情報が(　C　)なURLの構文で示される
• やりとりは1回ごとに完結し、前のやりとりの結果に(　D　)を受けない

章末問題(解答)

1　配点(2×9)

1. 1
2. 2
3. 3
4. 3
5. 3
6. 1
7. 1
8. 3
9. 1

2　配点(2×5)

1. D
2. B
3. C
4. E
5. A

3　配点(2×3)

1. A
2. C
3. B

4　配点(2×3)

1. Webブラウザ
2. Webサーバー
3. Webブラウザ

5　配点(2×4)

A. コンテンツ
B. 手順
C. 世界共通
D. セキュリティ

6　配点(3×5)

※ A〜Dは順不同
A. 接続性
B. 統一インターフェース
C. アドレス可能性
D. ステートレス性
E. RESTful

7　配点(3×3)

A. W3C(World Wide Web Consortium)
B. 規格
C. 互換性

8　配点(3×4)

A. サーバーサイド
B. スクリプト
C. クライアントサイド
D. Javascript

9　配点(4×1)

1, 3, 5

10　配点(3×4)

A. リンク
B. 情報
C. 一意
D. 影響

終わりに

Chapter(2)以降についても今後記事を作成していきたいと思っています！(作成した際はこの記事にリンクを追加していきます。)
問題ですが、何度も挑戦して満点(100点)を取れるように頑張ってみてください！この記事が少しでも多くの方のお役に立てれば光栄です。

この記事が面白かった人は次の記事もぜひ読んでみてください！
Chapter(2) 〜Webとネットワーク技術〜

その他