はじめに

株式会社シンシアでは、実務未経験のエンジニアの方や学生エンジニアインターンを採用し一緒に働いています。

この記事は

• これからWebエンジニアとして働こうとしている人
• Webエンジニアになったけど、Webの基礎的なことが身についていないのでは？
• サイトが不具合で表示されないが、どうやって調査するかわからない

という人向けに書いたものです。ぜひ読んで見ていただけると嬉しいです。

"Web"に付いて学ぶ目的

"プログラミングできればいいじゃん"、"フレームワーク扱えればいいじゃん"と思う方もいると思います。

でも、そんな方に聞きますが、"運営しているサイトが落ちている（or エラーが出ている）時、あなたはどういう順番でなにを確認しますか？"

この質問に即答できるなら、この記事は読まなくていいのでそっと閉じましょう。

これに即答できないあなたは最後までしっかり読んで、いいねもストックもいらないので（本当は欲しい）、ちゃんと覚えて学んで、実践で使えるようになってから閉じてください。

全体像を把握しましょう（絵で）

Webブラウザでは、URLを打ち込んでから、データをWebサーバーにリクエストして、サーバーから返ってくるデータ（HTMLやCSSなど）を表示しています。

※ 動画参照：

実際に、URLからサーバーにたどり着くためにはDNSサーバーが必要になります。

DNSサーバーの役割

人間にとって覚えやすいドメイン名（例: sample.com）を、コンピュータが通信に使うIPアドレス（例: 198.11.11.11）に変換するのがDNSサーバーの役割です。

※ 動画参照：

※ IPアドレスを特定するにはdigコマンドなども使えます。

Webサイトが映らないと気がついたときには、まずDNSの設定など確かめましょう。
ドメイン名とIPがきっちり紐づいていない可能性があります。

紐づけがはっきりしている場合、サーバーを特定したところで、サーバーの中について勉強しましょう。

サーバーの3層構造

Webサーバーに到達すると、3つの層があります。

• プレゼンテーション層
• • Webブラウザ上に画面を表示する役割
• アプリケーション層
• • Webシステムの動的処理する役割
• データベース層
• • 処理された情報を保管/管理する役割

※ 参考動画：

次はURLの詳細について、問題を詳細に特定できるようにしていきましょう。

URLの詳細

URLには主に

• ドメイン・サブドメイン
• パスパラメータ
• クエリパラメータ

があります。これらの情報を使って、コードの原因箇所を特定します。

※ 参照動画：

HTTPリクエストとHTTPレスポンスについて

• HTTPリクエスト
• • クライアント（Webブラウザ等）がサーバーに対して情報を要求するために送信するメッセージです。
• HTTPレスポンス
• • サーバーは、クライアントからのリクエストに対してHTTPレスポンスを返します。

※ 参照動画：

GETとPOSTの違いについて

GETとPOST通信だけ覚えましょう。下記のような特徴だけ、ひとまず覚えましょう。

GETには下記のような特徴があります。

• データはURLに含まれる（クエリパラメータとして）
• リクエストボディがない
• サーバーの状態を変更しない（安全性がある）
• URLの長さに制限がある（通常2,000〜8,000文字程度）
• 読み込み専用の操作に使用される

POSTには下記のような特徴があります。

• リクエストボディにデータを含む（フォームデータやJSON、ファイルなど）
• サーバーの状態を変更することがある（データの作成や更新）
• クエリパラメータ以外にも大容量データを送信可能
• 認証や機密データの送信に使用されることが多い（ログイン、データ登録など）
• URLの長さ制限に影響を受けない（データはボディで送信されるため）

※ 参照動画：

最後に

この記事では、Webエンジニアとして知っておきたい基礎的な知識をわかりやすく解説しています。Webサイトがどうやって動いているのかや、サイトがうまく表示されないときに何をチェックすればいいかを、具体的な例や図を使って説明しています。

• 最短でエンジニア転職で使う量のWebの知識をつけたい方はこちら

• さらにエンジニア力を上げたい方はこちら

• 第一線のエンジニアとして戦い方はこちら

その他

シンシアでは、エンジニア転職のサポートをしています。Webの技術に加え、エンジニア転職を成功させたい方はこちらの記事もご参照ください。