6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年8月22日 Web技術の基本(P12~19)

Webとは

最新のニュースや自分の調べたい事などの文書を探せたり、SNSによって自分の発信を世界中の人に公開できる。こういった文書の公開・閲覧のためのシステムをWebと呼ぶ。

Web上の文章はハイパーテキストと呼ばれる言語で構成されている ハイパーテキストハイパーリンクで蜘蛛の巣のように繋がっている ハイパーテキストハイパーリンクを埋め込むことができ、1つのWebページを複数のWebページと関連づけることができる。他のWebページに簡単にアクセスすることができ流ようになる。

ハイパーリンクハイパーリンクは参照先の識別情報や所在情報などを特定の記法で記述したもので、コンピュータシステムによって参照先を容易に呼び出したり照会したりできるようになっている。 「テキストを超える」という意味から"hyper-"(~を超えた) "text"(文書)と名付けられた。

ハイパーテキストハイパーリンクを埋め込める文書のこと

WWW(ワールド・ワイド・ウェブ)

Webの正式名称は、Word Wide Web(世界に広がる蜘蛛の巣)という。

インターネットとWeb

インターネットとWebはそれぞれ別の目的で開発されてきた。

  • インターネット 各地のコンピュータ同士をネットワークで繋げたい
  • Web -世界中の実験者と文書を共有したい

文書の閲覧

1つのドメイン(https://example.com)にある複数のWebページの集まりをWebサイトと呼ぶ。Webページ同士はハイパーリンクによって繋がっている。

UI(ユーザーインターフェース)

コンピューターの機能とユーザーのやりとり(操作や閲覧など)の橋渡しをする機能。

API(アプリケーションプログラミングインターフェース)

ソフトウェア同士のやりとりの橋渡しをする機能。例えば、天気予報アプリだと、アプリが送信した地域情報をプログラム用APIの役割を持つWebサーバーが受け取り、Webサーバーは受け取った地域情報に対応する天気予報のデータをアプリに返すというような使い方である。

  • アニキはHRI(Human Relationship Interface)
  • 一言で言えば橋渡し

表示プログラムWebブラウザ

ハイパーテキストを、人間が読みやすいように作り変えてくれるものが、Webブラウザ

HTML

ハイパーテキストを記述するための言語の事。

Webブラウザ

ハイパーテキストは文章にタグで意味付けしたものであり、人間がそのまま読むには適していなく、ハイパーテキストを解釈して、人間が読みやすいように作り変えて表示してくれるのがWebブラウザと呼ばれるプログラムである。

プロトコル

プロトコル(英:protocol)とは、お約束事のこと。 ただし、多くの場合は「通信する上でのお約束事」を意味する「通信プロトコル」の省略表現です。 IT関連で「プロトコル」と出てきたら「通信する上でのお約束事」

DOM

DOMは「Document Object Model」の略。 「ドキュメントを物として扱うモデル」。プログラムからHTMLやXMLを自由に操作するための仕組み。

例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。

DOMの特徴

  • ツリー構造とも呼ばれる階層構造を取る
  • それぞれノードという言葉で説明される
  • WEBページとJavaScriptなどのプログラミング言語とを繋ぐ

参照

世界初のWebサイト http://info.cern.ch/

OAuth https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be

API https://qiita.com/NagaokaKenichi/items/df4c8455ab527aeacf02

APIとは? https://data.wingarc.com/what-is-api-16084

RESTful APIとは何なのか https://qiita.com/NagaokaKenichi/items/0647c30ef596cedf4bf2

DOM https://eng-entrance.com/what-is-dom

Webサイトの表示速度をさらに高速化!「HTTP/3」とは? https://ssl.sakura.ad.jp/column/http3/