Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH

LeeDDHH/illustrated-web-technology-s-structure.md Secret

Last active July 22, 2021 23:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeeDDHH/72a9463564d360b6189f1b5a0b318b7d to your computer and use it in GitHub Desktop.
Save LeeDDHH/72a9463564d360b6189f1b5a0b318b7d to your computer and use it in GitHub Desktop.
Download ZIP
図解まるわかりWeb技術のしくみ
Raw
illustrated-web-technology-s-structure.md

Web技術のしくみ

  • Web技術に関する基本的な地磁気を身に着けたい
  • WebサイトやWebアプリケーションなどを始めたいと考えている
  • クラウドも含めて用語や技術、動向などを確認したい
  • Webを活用したビジネスを検討している

Web技術の基本

Webシステムの構造

  • デバイス（ブラウザ）、インターネット、Webサーバーが基本の構成

  • Webサイト

    • 文書情報を中心としたWebページで構成される集合体

  • Webアプリ

    • 動的なしくみを指す
    • Webサーバーに加えて、アプリケーションサーバー（APIサーバー）、データベースサーバー（DBサーバー）などが加わる

  • Webシステム

    • webサイトとWebアプリに加えて、APIなどで個別のサービスを提供するなど、やや複雑で規模の大きい仕組み
    • 外部システムとの連携、自動での情報取得、IoTデバイスの利用など

Webページを閲覧する

  • ユーザーに向けた専用アプリの存在
    • アプリを立ち上げるとすぐにURLからアクセスできるようになっている
    • 別のサーバーなどと自動的に特定のデータをやりとりするような使い方もできるようになっている

URLとは?

  • スキーム名、FQDN（Fully Qualified Domain Name）（ホスト名とドメイン名の組み合わせ）、パス名で表す

    • スキーム名　：　https://
    • FQDN　：　www.example.com
    • パス名　：　/about

  • ドメイン名とは？

    • インターネットの世界の中で一意の名前
    • 対になるグローバルIPアドレスを持っている

  • 主なドメイン名

    • ドメイン名は、主にgTLDと国ごとに割り当てられた[cc(country code)TLD]](https://www.nic.ad.jp/ja/basics/terms/ccTLD.html)などがある
    • gTLDの例
      • .com　：　誰もが登録できる商業組織向け
      • .net　：　誰もが登録できるネットワーク用
      • .org　：　団体、協会などの法人で使われることが多い
      • .edu .gov　：　教育や政府機関など組織としての要件が必要
      • .boz .info .name .pro　：　誰でも登録できるビジネス用、個人用、士業向けなどの特性がある
    • JPドメインのccTLDの例
      • .co.jp　：　会社法人のスタンダード
      • .or.jp .ac.jp .go.jp　：　財団、社団、学校法人、政府機関

Webサーバーの外見と中身

  • Linuxが増えている理由
    • Windows serverには多くの機能が実装されていて、必要な機能を比較的簡単に設定できるが、メンテナンスを含めてそれなりの費用がかかることがある
    • Linuxの場合、Windowsより少しむずかしくなるが、必要な機能だけを追加していくので、ディスクの節約や安定性の向上に加えて、コストも安価に抑えられる

ブラウザとは別の存在

  • APIとは?
    • 異なるソフトウェアがやりとりをする際のインタフェースの仕様を意味する言葉

webサイトの規模

  • Webサイトの規模を測る数値として総ページがある

    • 小規模　：　100ページ以内
    • 中規模　：　100~1000ページ以下
    • 大規模　：　1000ページを超える
    • 超大規模　：　10000ページを超える

  • ページ数のカウントの例

    • Googleの site: コマンド
    • site:example.com

Web独自のしくみ

Web技術の移り変わり

  • 広がる利用領域

    • 以前の情報システムは SoR（System of Record：記録のシステム）
      • 利用する組織での管理を中心としていた
    • 現在は、 SoE(System of Engagement：つながるシステム)
      • さまざまな組織や個人のつながりも視野に入れたシステムを目指す取り組みが増えている
    • 閲覧中心であったWebサイトから、さまざまな情報を収集して活用するWebアプリやシステムへの変化

  • 変わる開発スタイル

    • 独自性や専用性を重視するしくみから、汎用性や可用性を習字する仕組みに変化
    • ゼロベースで開発する時代から、開発基盤やフレームワークを利用する、さらに、すでに存在するサービスやAPIも利用する
    • プログラミングにこだわらず、コードをできるだけ書かないローコードやノンコードによる開発のスタイル
    • 情報をっ活用することを目指すと、さまざまな情報やシステムとのつながりが重視され、それらの実現がさらなるつながりを生み出す好循環となって市場は拡大していく

Webサイトの表と裏

  • 見た目が重要なシステム
    • ユーザーが得られる満足する体験を設計するUXデザインを目指すことが多い
    • デザインや画面の動線が重要視されるようになり、見た目が重要になってきている
    • web開発では見た目と機能を両輪として進めていく特徴がある
    • 業務システムでは、設計通りの機能の実現が重視される

変化しないページと変化するページ

  • 静的ページと動的ページ

    • 静的ページ
      • 記述された文書の表示が主体となる固定的な動きのないページ
    • 動的ページ
      • ユーザーからの入力やユーザーの状況に応じて、出力する内容が動的に変化するWebページ

  • 動的ページの例

    • 検索エンジン、掲示板、SNS、アンケート、オンラインショッピング

Webサイトの裏側

  • HTTPリクエスト

    • HTTPでは、一意のURLを相手として指定して通信する
    • 1回ごとに相手とのやり取りを完結させる ステートレス という特徴がある
    • HTTPメッセージの中で、HTTPリクエストとレスポンスが実行される
      • これが、1対1の関係でステートレス性が担保される
    • HTTPリクエストに使うHTTPメソッド
      • GET、POST、PUT、CONNECTなどがある
    • ブラウザからWebサーバーにどのようなリクエストを送るのか
      • HTTPプロトコール > HTTPメッセージ > HTTPリクエスト > GET、POSTのようなHTTPメソッド

  • HTTPレスポンス

    • リクエストを送った相手側のWebサーバーの情報や、リクエストがどのように処理されたかどうかを示すステータスコードが含まれる

プログラムの起動

  • 動的ページでは、 データの入力 > 処理の実行 > 結果の出力・表示 となる

    • これらの一連のプロセスのゲートウェイでもあり、トリガーとなる仕組みは、CGI(Common Gateway Interface)と呼ばれる
    • ブラウザ側で入力されたデータを送る際に、WebサーバーにあるCGIプログラムを同時に呼び出す
      • HTMLファイルなどに起動するCGIのファイル名をあらかじめ入れておく
      • CGIプログラムが起点となって処理を実行し、結果の出力も行う

  • CGIの使われ方

    • 静的ページが多数はだった時代に、動的なページを実現するための取り組みの中で生まれてきたしくみ
    • しかし、CGIでは1回1回別のプログラムの起動やファイルのオープンやクローズなどを必要とするため、多数のユーザーを相手にする大規模なWebサイトの処理には向かないこともある
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment