はじめに
Web開発をしていると、
- URLを開くと何が起きているのか？
- APIって何なのか？
- Reactのstateやコンストラクタって何？
といったことを見返せるように
この記事では、Webの基礎をすべてつなげて記載しております。
全体フロー
Webの仕組みは文章だけだと分かりづらいので、
まずは全体の流れを図で整理します。
① ユーザーがURLを入力
https://example.com
↓
② DNSに問い合わせ
「example.comのIP教えて」
↓
③ IPアドレス取得
11.111.111.311
↓
④ サーバーにリクエスト送信（HTTP/HTTPS）
GET /index.html
↓
⑤ サーバーで処理
- ルーティング
- 必要ならDBアクセス
↓
⑥ DBからデータ取得
- ユーザー情報
- 商品情報 など
↓
⑦ サーバーがレスポンス生成
- HTML or JSON
↓
⑧ ブラウザが受け取る
↓
⑨ HTML解析（DOM生成）
↓
⑩ CSS適用（見た目）
↓
⑪ JavaScript実行
- Reactなどが動く
↓
⑫ 画面に表示
① URLを入力すると何が起きるのか？
例えば👇
https://example.com
この1行の裏では、多くの処理が動いています。
② IPアドレスとは（インターネットの住所）
インターネット上のコンピュータにはすべて住所があります。
222.222.2.2
👉 これがIPアドレスです
③ DNSとは（名前 → 住所に変換）
example.com
↓
DNS
↓
11.111.111.11
👉 ドメインをIPアドレスに変換してくれる仕組み
④ HTTPとHTTPS（通信のルール）
HTTP
- 通信内容がそのまま見える
HTTPS
- 暗号化されて安全
👉 今はほぼHTTPSが使われています
⑤ リクエストとレスポンス
ブラウザはサーバーに「お願い」をしています。
GET /users
👉 ユーザー一覧ちょうだい
レスポンス👇
[
{ "name": "田中" },
{ "name": "佐藤" }
]
⑥ HTTPメソッド
| メソッド | 役割 |
|---|---|
| GET | データ取得 |
| POST | 作成 |
| PUT | 更新 |
| DELETE | 削除 |
⑦ ステータスコード
| コード | 意味 |
|---|---|
| 200 | 成功 |
| 404 | 見つからない |
| 500 | サーバーエラー |
⑧ クッキーとセッション（ログインの仕組み）
クッキー
- ブラウザに保存される情報
セッション
- サーバー側で管理されるログイン状態
⑨ キャッシュ（表示を速くする仕組み）
👉 同じデータを何回も取りに行かない
⑩ フロントエンドとバックエンド
| 種類 | 役割 |
|---|---|
| フロントエンド | 画面表示 |
| バックエンド | データ処理 |
⑪ APIとは
👉 フロントとバックエンドをつなぐ窓口
フロント
↓ API
バックエンド
⑫ 非同期処理
同期
- 順番に処理
非同期
- 待たずに次に進む
fetch('/users')
👉 API通信は基本非同期
⑬ CORS
👉 別ドメインへの通信制限
⑭ ブラウザの役割
ブラウザは実は色々やっています👇
- HTMLを解析
- CSSを適用
- JavaScriptを実行
⑮ DOMとは
👉 HTMLをツリー構造にしたもの
⑯ Reactとは
React は、画面を作るためのライブラリです。
⑰ コンポーネント
👉 UIの部品
⑱ stateとは
const [count, setCount] = useState(0);
👉 状態が変わると画面も変わる
⑲ propsとは
👉 親から子へデータを渡す
⑳ コンストラクタとは
👉 最初に1回だけ実行される初期化処理
class User {
constructor(name) {
this.name = name;
}
}
㉑ Reactでのコンストラクタ（昔）
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
}
㉒ 現在の主流（Hooks）
const [count, setCount] = useState(0);
👉 コンストラクタ不要
🔄 Reactアプリの場合（SPAの流れ）
① URLアクセス
↓
② HTML取得（ほぼ空）
↓
③ JavaScript（React）読み込み
↓
④ React起動
↓
⑤ APIリクエスト
↓
⑥ サーバー処理
↓
⑦ JSONレスポンス
↓
⑧ state更新
↓
⑨ 再レンダリング
↓
⑩ 画面更新
まとめ
- IPアドレス = インターネットの住所
- DNS = 名前 → 住所変換
- HTTP = 通信ルール
- API = データの窓口
- state = 画面の状態
- コンストラクタ = 初期設定
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！