XEROTTA

新入社員の学び / IT初級者 / 講座3

IT FOUNDATION / COURSE 03

ITシステムの全体像

ブラウザーから予約が保存されるまでの機器・OS・アプリ・DB・ネットワークの関係を、一枚の構成図で説明する。

アニメと具体例手順付き演習成果物とレビュー解説付き確認問題

まずは、図でつかもう

1 / 4

要求が進む基本の構成です。応答は逆向きに戻ります。静的なページなど、データベースを使わない構成もあります。

01 / IT FOUNDATION

この講座で、何をできるようにするか。

ブラウザーから予約が保存されるまでの機器・OS・アプリ・DB・ネットワークの関係を、一枚の構成図で説明する。

目安6時間。説明・調査・演習・成果物作成・レビューを含む学習計画です。本文を読むだけでこの時間の実習を完了したことにはなりません。進み方と経験に応じて調整します。

学習目標と確認ポイント詳しく見る
  • 層を分けて捉えるを説明し、役割付きの構成図を作る。
  • クライアントとサーバーを説明し、通信の方向が分かる図を作る。
  • 画面が表示されるまでを説明し、表示までの流れ図を作る。
  • データの持ち方を説明し、状態遷移のメモを作る。
  • 自社運用とクラウドを説明し、責任範囲の比較図を作る。
  • 構成図と調査の入口を説明し、レビュー済み構成図を作る。
開始前の準備

ブラウザーで本文・アニメ・問題を確認できます。実機演習は会社が用意した学習環境を使い、Python・Linux・Git・DB等の準備状況を確認してから進めます。

演習ファイルを先に準備する

Python・SQL・ログ・架空パケット表・テスト・APIのスターターと説明書を同梱しています。APIは認証・認可等を受講者が追加する未完成の学習用で、公開用完成品ではありません。

共通演習キットをダウンロード
ITシステムの全体像の学習内容を表した仕組みのイメージ図

02 / IT FOUNDATION

仕組みを理解し、手を動かして確かめる。

1. 層を分けて捉える2. クライアントとサーバー3. 画面が表示されるまで4. データの持ち方5. 自社運用とクラウド6. 構成図と調査の入口

層を分けて捉える

詳しく見る

学習ブロック 1 / 目安1時間(説明・調査・演習・記録・レビュー)

CPUやメモリなどのハードウェアの上でOSが資源を管理し、アプリが業務処理を行います。DBはデータの保存や検索などを担い、ネットワークが機器間の通信をつなぎます。各層は協力して動き、画面のエラーが必ず画面側の問題とは限りません。

具体例と実習手順

端末・OS・ブラウザー・通信・API・DBをカードにして配置し、役割を一文ずつ書く。

残す成果物:役割付きの構成図

前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。

クライアントとサーバー

詳しく見る

学習ブロック 2 / 目安1時間(説明・調査・演習・記録・レビュー)

クライアントは依頼する側、サーバーはサービスを提供する側という関係です。同じ機器が別の通信ではクライアントになることもあります。APIサーバーがDBへ問い合わせるときは、DBから見ればAPI側が依頼者です。

具体例と実習手順

画面→API、API→DBの2つの通信に、依頼と応答の矢印を両方描く。

残す成果物:通信の方向が分かる図

前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。

画面が表示されるまで

詳しく見る

学習ブロック 3 / 目安1時間(説明・調査・演習・記録・レビュー)

URLの解釈、名前解決、接続、TLS、HTTPの応答、HTMLやCSSなどの表示処理を区別します。キャッシュなどにより毎回同じ通信を繰り返すとは限りません。DNSでIPが分かっても、後続の接続やWeb処理の成功までは保証されません。

具体例と実習手順

Web表示までの処理を順番に並べ、各段階で起こり得る失敗を一つ書く。

残す成果物:表示までの流れ図

前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。

データの持ち方

詳しく見る

学習ブロック 4 / 目安1時間(説明・調査・演習・記録・レビュー)

画面の入力中データ、サーバー上の一時データ、DBへ確定したデータは別です。送信したつもりでも、検証エラーや通信失敗で保存されていない場合があります。利用者へ成功を表示する時点を、保存の結果と整合させます。

具体例と実習手順

予約入力・送信・検証・保存・完了表示の状態を分け、保存前の失敗時に表示すべき内容を書く。

残す成果物:状態遷移のメモ

前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。

自社運用とクラウド

詳しく見る

学習ブロック 5 / 目安1時間(説明・調査・演習・記録・レビュー)

機器を自社で持つか、仮想マシンや管理サービスを利用するかで担当範囲が変わります。クラウドへ配置しても、アプリの不具合やデータの扱いまで自動で適切になるわけではありません。提供範囲・可用性・復旧・費用を比較します。

具体例と実習手順

同じ予約システムを自社サーバーと管理サービスへ置く2案で、管理する人と作業を色分けする。

残す成果物:責任範囲の比較図

前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。

構成図と調査の入口

詳しく見る

学習ブロック 6 / 目安1時間(説明・調査・演習・記録・レビュー)

構成図には名前だけでなく、通信方向、役割、境界、外部サービス、保存先を示します。細部をすべて一枚へ詰めず、説明相手に必要な粒度を選びます。分からない接続は推測で描かず未確認と明示します。

具体例と実習手順

初めて見る人に構成図を説明してもらい、矢印や保存先が読み取れなかった点を修正する。

残す成果物:レビュー済み構成図

前提・操作・観察結果・理由・未確認を分けて残します。手順を他の人に説明し、同じ入力で同じ結果になるか確認してください。

03 / IT FOUNDATION

仕事のアニメ:ITシステムの全体像を考える。

新人・アオイさんと先輩・ミナトさんの会話で、「ITシステムの全体像」を学びます。最初の場面は「画面の予約ボタンが反応しません。すぐDBを直すべきですか?」。何を確かめ、どう対応するかを順に見ていきましょう。

反応しない場所を調べる1 / 6
アオイ

画面の予約ボタンが反応しません。すぐDBを直すべきですか?

学習ポイント:反応しない場所を調べる

約12秒ごとに場面が切り替わります。再生中も一時停止でき、「前へ」「次へ」で自分のペースで読めます。最終場面で停止します。

アニメの内容をまとめて文章で読む

1. 反応しない場所を調べる

アオイ:画面の予約ボタンが反応しません。すぐDBを直すべきですか?

学習ポイント:反応しない場所を調べる

2. 画面・通信・API・DB

ミナト:画面、通信、API、DBのどこまで進んだかを分けよう。

学習ポイント:画面・通信・API・DB

3. APIが依頼する場合

アオイ:APIからDBへ問い合わせるときは、APIが依頼者なのですね。

学習ポイント:APIが依頼する場合

4. クライアントとサーバー

ミナト:そう。クライアントとサーバーは通信の関係として捉える。

学習ポイント:クライアントとサーバー

5. クラウドでも残る責任

アオイ:クラウドに置いても、この関係と責任は残るのですね。

学習ポイント:クラウドでも残る責任

6. 構成図で調査を整理

ミナト:役割と矢印を描けば、調べる場所と未確認を整理できる。

学習ポイント:構成図で調査を整理

04 / IT FOUNDATION

演習を完成させ、成果物をレビューする。

演習1

Web表示の構成図にDNS・TLS・HTTPを別の段階として付ける。

  1. 対象・環境・入力データ・期待結果を記録する。
  2. 上の解説と各ブロックの実習手順を使って作業する。
  3. 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
  4. 成果物・再現手順・分かったこと・未確認を残してレビューする。

演習2

予約が保存されるまでの状態を5段階で説明する。

  1. 対象・環境・入力データ・期待結果を記録する。
  2. 上の解説と各ブロックの実習手順を使って作業する。
  3. 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
  4. 成果物・再現手順・分かったこと・未確認を残してレビューする。

演習3

自社運用とクラウドの2案を比較する。

  1. 対象・環境・入力データ・期待結果を記録する。
  2. 上の解説と各ブロックの実習手順を使って作業する。
  3. 結果を期待と比較し、違いがあれば条件を一つずつ確かめる。
  4. 成果物・再現手順・分かったこと・未確認を残してレビューする。
レビューで確かめること

正しい用語で説明できるか/入力と結果が対応しているか/正常だけでなく失敗する条件も扱ったか/他の人が再現できるか/残る課題を隠していないか。

05 / IT FOUNDATION

確認問題:答えより、理由を説明する。

全5問。選ぶと解説が表示されます。何度でも選び直せます。

回答済み 0 / 5問

06 / IT FOUNDATION

成果物を残し、理解と未確認を分ける。

架空データを使い、根拠と結果を自分の言葉でまとめます。回答とメモは自動保存・外部送信しません。残したい内容はコピーするか、成果物ファイルへ記入してください。

07 / IT FOUNDATION

説明・実装・記録を、一つの成果へつなげる。

ブラウザーから予約が保存されるまでの機器・OS・アプリ・DB・ネットワークの関係を、一枚の構成図で説明する。

  • 役割付きの構成図
  • 通信の方向が分かる図
  • 表示までの流れ図
  • 状態遷移のメモ
  • 責任範囲の比較図
  • レビュー済み構成図

08 / IT FOUNDATION

公式資料・確認先