日本語
メニュー

Web技術の基礎

HTTPのリクエストと応答、メソッドとステータスコード、ヘッダとキャッシュの制御、HTTP/2とHTTP/3、Cookieとセッション、JWT、OAuthとOpenID Connect、REST APIとURL・JSON、WebSocketとWebhook、DOMとCSS、イベントループ、同一オリジンポリシーとCORS、Service Worker、CDNと圧縮、Core Web Vitals、Webサーバとリバースプロキシ、SSR・CSR・SSGを3択問題で学べます。

10問練習するこの分野からランダムに10問・約5分 この分野を解くこの分野の問題をすべて、ランダムな順で出題します 苦手問題直近で間違えた問題だけを解き直します

Web技術の基礎の要点

ブラウザでURLを開くと、HTTPのリクエストがサーバに届き、返ってきたHTMLやCSS、JavaScriptをもとに、ブラウザが画面を組み立てます。ログインの状態を保つCookie、ほかのサービスと連携するAPI、表示を速くするキャッシュやCDNなど、Webのしくみは多くの技術の組み合わせでできています。

ここでは、HTTPのリクエストと応答の形、メソッドの安全性とべき等性、ステータスコード、ヘッダによるキャッシュの制御、HTTP/1.1・HTTP/2・HTTP/3の違いを学びます。続いて、Cookieとセッション、JWTによる状態の管理、OAuth 2.0とOpenID Connect、REST APIとURLの構造・パーセントエンコーディング・JSON、WebSocketとWebhookを扱います。ブラウザの側では、DOM、CSSのボックスモデルと詳細度、最初の表示までの処理の流れ、JavaScriptのイベントループ、同一オリジンポリシーとCORS、Service Worker、レスポンシブデザインを、配信の側では、ブラウザとCDNのキャッシュ、圧縮と転送時間の計算、Core Web Vitals、画像の形式、Webサーバとアプリケーションサーバ、リバースプロキシ、SSR・CSR・SSGを取り上げます。基本情報技術者試験・応用情報技術者試験のネットワークやWebシステムの分野の学習にも役立ちます。TCP/IPやDNS、TLSのしくみは「ネットワークの基礎」、XSSやCSRF、SQLインジェクションなどの攻撃と対策は「情報セキュリティの基礎」、負荷分散や冗長化の設計は「システム構成と信頼性設計」の分野で扱います。

Web技術の基礎の問題一覧（40問）
  1. HTTP/1.1のリクエストの最初の行(リクエスト行)に並ぶ要素の組み合わせとして、正しいものはどれか。
  2. HTTPのメソッドのうち、「安全」(サーバ上の資源の状態を変えることを意図しない)ではないが、「べき等」(同じリクエストを何回送っても、1回送ったときと同じ状態になる)であるものはどれか。
  3. HTTPのステータスコードと、その意味の組み合わせとして正しいものはどれか。
  4. 会員制のWebサイトで、ログインしている一般の会員が、管理者だけに許されたページを要求した。サーバは利用者がだれかを確認できているが、このページへのアクセスは許可しない。このとき返すステータスコードとして最も適切なものはどれか。
  5. Web APIが、応答の本文としてJSON形式のデータを返す。本文の形式を示すために応答に付けるヘッダとして、一般に使われるものはどれか。
  6. ブラウザが、前に受け取った画像を、そのときの応答に付いていたETagの値をIf-None-Matchヘッダに入れて、もう一度要求した。サーバ上の画像が変わっていないときの、サーバの応答として正しいものはどれか。
  7. HTTP/2とHTTP/3の説明として正しいものはどれか。
  8. RTTが40 msのWebサーバから、HTMLを1つと、そこから参照される画像を4つ、1つずつ順番に取得する。TCPの接続の確立に1往復、各リクエストと応答に1往復かかるとし、データの転送時間、サーバの処理時間、TLS、接続の切断は考えない。オブジェクトごとに新しいTCP接続を張る場合と、1つのTCP接続を使い回す持続的接続の場合とで、かかる時間の差はどれか。
  9. HTTPはステートレスなプロトコルである。このことと、Webサイトでログインした状態を保つ一般的な方法の説明として、正しいものはどれか。
  10. 上のヘッダで設定されたCookieについての説明として、正しいものはどれか。
  11. ブラウザのlocalStorageとCookieの違いとして、正しいものはどれか。
  12. ロードバランサの後ろに3台のアプリケーションサーバを置き、リクエストを順番に各サーバへ振り分けている(ラウンドロビン)。ログインした利用者のセッションの情報は、ログインを処理したサーバのメモリだけに保存している。起こりやすい問題と対策の組み合わせとして、適切なものはどれか。
  13. 署名を付けた一般的なJWT(JSON Web Token)の説明として、正しいものはどれか。
  14. 写真の印刷サービスのアプリが、利用者の許可を得て、別の会社の写真の保存サービスにある利用者の写真を読み出す。OAuth 2.0で、利用者に許可を求める画面を示し、利用者が許可するとアプリにアクセストークンを発行する役割はどれか。
  15. OAuth 2.0とOpenID Connectの関係の説明として、正しいものはどれか。
  16. RESTの考え方に沿ったWeb APIの設計として、適切なものはどれか。
  17. ブラウザで https://www.example.com:8443/docs/guide.html?lang=ja#install を開いた。このURLのうち、サーバへ送るリクエストには含まれず、ページを読み込んだ後にブラウザの中だけで使われる部分はどれか。
  18. URLのクエリに日本語の「あ」を入れるため、この文字をUTF-8で表したバイト列(E3 81 82)を、パーセントエンコーディングで表す。結果として正しいものはどれか。
  19. チャットのアプリで、新しいメッセージをサーバからブラウザへすぐに届けたい。WebSocketの説明として正しいものはどれか。
  20. オンライン決済のサービスで支払いが完了したことを、加盟店のサーバがすぐに知りたい。決済サービスが、あらかじめ登録された加盟店のURLへHTTPのPOSTで通知を送る方式(Webhook)の説明として、正しいものはどれか。
  21. ブラウザで使われるDOM(Document Object Model)の説明として、正しいものはどれか。
  22. 上のCSSを指定した要素の、左右のボーダーの外側の端から端までの幅はどれか。
  23. ほかにスタイルの指定はないものとする。上のHTMLで、「Hello」の文字の色はどれか。
  24. ブラウザが最初の画面を表示するまでの処理(クリティカルレンダリングパス)では、<head>の中に属性なしで書いた <script src="app.js"> があると、HTMLの解析がそこで止まる。この要素にdefer属性を付けたときの動作として、正しいものはどれか。
  25. 上のJavaScriptをブラウザで実行したとき、コンソールに表示される文字の順序として正しいものはどれか。
  26. ブラウザの同一オリジンポリシーで、https://www.example.com/app/index.html と同じオリジンとみなされるURLはどれか。
  27. https://app.example.com のページのJavaScriptが、fetch を使って https://api.example.net/orders へ、Content-Type: application/json の本文を付けたPOSTのリクエストを送ろうとしている。このときのCORSの動作として、正しいものはどれか。
  28. Service Workerの説明として、正しいものはどれか。
  29. スマートフォンにも対応するレスポンシブデザインのページで、<head>に <meta name="viewport" content="width=device-width, initial-scale=1"> を書く主な目的はどれか。
  30. 利用者ごとに内容が違うマイページの応答に、Cache-Control: private, max-age=60 を付けた。この指定の効果として正しいものはどれか。
  31. Webサーバが応答をgzipやBrotliで圧縮して送るとき、圧縮による転送量の削減が一般に最も小さいものはどれか。
  32. 1.5 MBのテキストのデータを、gzipで3分の1の大きさに圧縮して送る。帯域が10 Mbps、RTTが100 msで、データを送り始める前に、TCPの接続、TLSのハンドシェイク、HTTPのリクエストで合わせて3往復かかるとする。1 MB = 10^6 バイトとし、圧縮と展開の時間、ヘッダ、TCPの輻輳制御による待ちは無視する。データを受け取り終えるまでの時間に最も近いものはどれか。
  33. 1秒あたり2,000件のリクエストを受けるCDNで、キャッシュヒット率が90%から98%に上がった。ヒットしたときの応答時間は20 ms、ヒットしなかったときはオリジンサーバから取得して返すので200 msかかり、ヒットしなかったリクエストだけがオリジンサーバに届くとする。98%になった後の、オリジンサーバに届くリクエストの数と平均の応答時間の組み合わせはどれか。
  34. Webページの体験を表す指標であるCore Web Vitalsのうち、CLS(Cumulative Layout Shift)が表すものはどれか。
  35. Webページで使う画像の形式と、その一般的な使い方の組み合わせとして、適切なものはどれか。
  36. 3,000バイトの画像のデータをBase64で符号化して、HTMLの中に埋め込む。改行を入れないとき、符号化した後の文字数はどれか。
  37. Webシステムを、Webサーバ、アプリケーションサーバ、データベースサーバの3層で構成する。アプリケーションサーバが主に受け持つ処理として、適切なものはどれか。
  38. リバースプロキシの説明として、正しいものはどれか。
  39. CGIでは、Webサーバがリクエストを受けるたびにプログラムを新しいプロセスとして起動し、処理が終わるとプロセスは終了する。FastCGIやアプリケーションサーバの方式が、CGIと比べて多くのリクエストを効率よく処理できる主な理由はどれか。
  40. Webサイトのページを作る方式のうち、ビルドの段階ですべてのページのHTMLファイルをあらかじめ生成しておき、リクエストにはそのファイルをそのまま返す方式はどれか。

Web技術の基礎の参考書を探す PR

Amazonの検索結果へのリンクです。Amazonのアソシエイトとして、半導体教室は適格販売により収入を得ています。

コンピュータシステムのほかの分野