【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-9.Webの標準化」を読んで
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-9.Webの標準化」を読んで
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章9節についての要約、自分なりの知識の整理という2点を述べていきます。
Webの標準化とは
開発者のための機能拡張の規格を決めること
W3C標準とは
W3C（World Wide Web Consortium）という団体が決めた「どのWebブラウザでも同じようにWebページが表示される」状態が実現するために必要な基準
W3C標準に準拠しているサイトが多い（絶対守らなければいけないものでもないが、概ね守った方がいい）
2.知識の整理
- W3C標準を準拠することのメリットとは？
開発者がたくさんいれば、統制をとるためにそれなりの基準が必要になってくるということはなんとなくわかりました。
我流で進めるのもきっと限界がありますもんね。
基本的にチーム開発なので、ひとつ基準があるだけで助かることも多いです。
きっとわたしたちが「日本語を正しく使いましょう！」というように、Webサイトにも「正しい文法、わかりやすい構造にしましょう」というルールがあるという意味で受け取りました。（解釈が大雑把すぎる？）
この基準を守ることでどんないいことがあるのか知りたくなったので、メリットについて具体的にまとめていきます。
W3C標準に準拠することのメリット
ひとつずつ見ていきます。
1.SEOに強くなる
Yahoo!などの検索エンジンでもW3C標準の規格を守ったサイト作成がなされています。
そのため、W3C標準を守れば必然的に検索上位になります。
理由としては、文書（HTML）とデザイン（CSS）が分離し文書構造が簡素化することで、検索エンジンが理解しやすくなるからです。
せっかく作ったサイト、たくさんアクセスしてほしいですよね。
そのためには、W3C標準に則ってサイトを作成することが必須ではないでしょうか。
2.アクセシビリティの向上
ユーザーの利便性
アクセシビリティを向上させることで、ブラウザの種類に左右されず、さまざまな端末からアクセスできます。
また、視覚障がいを持った方が利用する音声ブラウザへの対応もカバーできるため、使う人や手段を選ばず、誰でも使いやすいサイトにつながります。
そして、文書構造が簡潔になることで、データの通信量やサイトの表示スピードも速くなります。
3.メンテナンスの効率化
ファイルを文書（HTML）とデザイン（CSS）に分離することで、メンテナンス作業もブロック単位になり、作業がより効率的に進みます。
デザイン変更のみの場合はCSSの修正というように、メンテナンスの箇所が明確になり、対応がしやすいです。
3.おまけ
コーディングをするとき、当たり前にファイルを分離して作成してきました。
修正がしやすいというメリットはなんとなく感じていましたが、こういった作成後の段階であるサイト運用や保守の段階までメリットがあるとは知りませんでした。
約半年間Webのコーディングの知識を身につけてきて、必要でとりあえずやっていた工程にもきちんと理由があったことを知れてよかったです。
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
Web標準とは何か ～ W3C準拠
Webサイト作成に欠かせない要素！W3Cとは？準拠するメリットを紹介
Webコーディングの共通ルール！？「Web標準」とは
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-8.動的ページの仕組み」を読んで
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-8.動的ページの仕組み」を読んで
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章8節についての要約、自分なりの知識の整理という2点を述べていきます。
1.要約
CGI（Common Gateway Interface）
…WebサーバーがWebブラウザからの要求に応じてプログラムを起動させるためのしくみ
サーバーサイド・スクリプト
…CGIから呼び出されるプログラム
主にPerl,Ruby,Python,PHP,JavaScript,Java,C,C++
クライアントサイド・スクリプト
…HTMLに埋め込まれ、Webブラウザによって飲み込まれる際に実行されるプログラム
主にHTML,CSS,JavaScript
2.知識の整理
- サーバーサイド・スクリプトがあると何ができるの？
クライアント・スクリプトについてはWebでいうフロントエンドの部分なので、学習してなんとなくの雰囲気は掴めた気がします。（あくまでなんとなく。。。）
それもあってか、サーバーサイド・スクリプトがあるとどんなことができるのか、イマイチわかっていません。
イメージとしてはユーザーからは見えない部分の開発をしている、はちゃめちゃにすっごい難しそうな分野、という感じです。（語彙力w）
せめて何が行われているかくらいは知りたいので、少し調べてみました。
サーバーサイドと似た言葉にバックエンドがありますが、これは主にWeb領域に特化した言い方です。
※厳密な違いはないようですが、多分Web領域のフロントエンドと対比している言い方のようです。以下サーバーサイドに統一します。
サーバーサイド・スクリプトはユーザーからは直接見えないWebサーバーやデータベース側の処理や設計、開発を行うためのプログラムのこと。
主にサーバーの構築、データベースの構築、システムの開発と運用を行う。
・サーバーの構築
Webサーバーに関する知識
ミドルウエアやOSのアップデートに関する知識
ネットワーク環境の構築スキル などが必要
・データベースの構築
Oracle、MySQL、MSSQLなどの代表的なデータベースソフトに関する知識
データウェアハウスやデータマート、データマイニングなど、データの利活用に関する知識
データベースへの攻撃やセキュアコーディングに関する知識 などが必要
・システムの開発と運用
PHP、Python、Java、Ruby、GO、JavaScriptなどのサーバーサイドのプログラム言語の知識
Ruby on Rails、Djangoなどのフレームワークに関する知識
監視・障害対応などの運用に関する知識 などが必要
例えば、買い物や動画を見るとき、会員登録が必要なサイトだと情報を入力しますよね。
そのユーザーから見えるフロント部分を整えるのがフロントエンド、その裏側の情報管理や表示の処理を行うのがサーバーサイドという解釈になります。
こう見ると、なんだかサーバーサイドってそのコンテンツを支える大黒柱に見えてきました。
サーバーサイドについては具体的に学習したことがないので、表面的なことしかわかりません。
しかし、ユーザーのさまざまな情報が集まり、それが守られているからこそサービスを継続していけます。
サーバーサイドはユーザーの安全や情報を守る、その根幹を担う場所だと思います。
フロントエンドはユーザーに直接触れる部分であるからこそ、いかにユーザーにとって見やすく、扱いやすく、保守しやすいか、加えて実装する側のことも考えないといけません。
もしかしたら、こういった想いはサーバーエンドにも共通する部分があるのかなとふと考えました。
両者ともまた違った難しさがありますよね。
どちらの領域もすごく緻密でリスペクトすべき仕事だと思いました。
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
バックエンド機能要件定義
フロントエンドとは？バックエンドとの違いって何だろう
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-7.静的ページと動的ページ」より両者のメリットデメリット
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-7.静的ページと動的ページ」より両者のメリットデメリット
「この一冊で全部わかる Web技術の基本」の第1章7節についての要約、自分なりの知識の整理という2点を述べていきます。
1.要約
静的ページ
…何度アクセスされても毎回同じものが表示されるWebページ
HTMLファイルのみで構成
例）企業、団体の紹介サイト、情報提供サイト
制作者が更新しない限り変化なし
動的ページ
…アクセスした時の状況に応じて異なる内容が表示されるWebページ
例）Google、Yahoo!みたいな検索サイト、書き込みが増えていくような掲示板サイト、ログインするユーザーごとに表示される情報が違う会員サイト
サーバーとブラウザのやりとりから考えると
静的は同じコンテンツの送り合い
動的はブラウザからサーバーへの要求次第でコンテンツが変わる
2.知識の整理
わたしは「静的ページのみじゃ見た目も機能も物足りなくなったから動的ページが生まれて、どんどん動的ページが主流になってきている」という解釈でいたのですが、どうやら半分合っていて半分違うようです。
というのも、主に更新や個人に合わせた表示の機能が必要なものとそうでないものが
あるからなんですね。
こういうのは後から台頭してきたものに巻き込まれた元祖が結局なくなっていく...という現象が起こりがちな気がします。
ですが、今回は違いました。
併せて、それぞれのメリットとデメリットについて知りたくなったので調べてみました。
動的ページの方がサーバーやデータベースとのやりとりに負荷がかかりますね。
それだけコストもかかり、セキュリティ対策にも気をつけなければいけないということです。
直感ですが、動的ページの方が見た目の動きでも機能の面から見ていて楽しいものが多い気がします。
しかし、ある程度のリスクは避けられません。
したがって、作成する側は本当にそのコンテンツには動的な機能が必要なのかを考える必要があるのではないでしょうか。
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
静的ページと動的ページの違いとメリット・デメリット
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-6.Webページが表示される流れ」でわかった壮大さ
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-6.Webページが表示される流れ」でわかった壮大さ
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章6節についての要約、自分なりの知識の整理という2点を述べていきます。
1.要約
URL（Uniform Resouse Locator）
①取得したいWebページをWebブラウザに指定する
②URLからWebブラウザが解釈して表示
③そのほか必要な画像などが表示
URLからは、どんなやりとりの手順で、どのWebサーバーに、何のコンテンツを取りに行くかがわかる
Webブラウザは指定されたURLから、指定されたやりとりの手順で、Webサーバーからコンテンツ（HTMLファイルなど）を受け取る
これを繰り返し、必要なすべてのファイルが揃えばWebページが完成！
2.知識の整理
「Webページが表示されるために必要なサーバーにはWebサーバーとDNSサーバーがある」と目にし、正直ちんぷんかんぷんになってしまったので図解して整理します！
- Webページが表示されるしくみ
まず、Webページの表示のざっくりとした流れです。
ブラウザにURLを入力することで、ブラウザからHTTPリクエストがWebサーバーに、WebサーバーからはHTTPレスポンスを送ります。
ちなみに、サーバーとは該当するコンテンツのサービスを起動しているコンピュータのことを指します。
YouTubeにはYouTube専門のWebサーバーが存在しています。
このサーバーはコンピュータで一律に管理されていますが、メンテナンス等を担当している組織や部署ももちろん存在していますよ！
とはいえ、まだざっくりですね。詳しく見てみましょう。
次に、HTTPレスポンスの詳細についてです。
ブラウザで検索することで、DNS（Domain Name System）サーバーにドメインが送られます。
おっと！ここで、新たなサーバーのDNSサーバーが登場しました！
（カタカナ、アルファベットたくさんですよね！！！！笑）
DNSサーバーとは、世界中のドメインとアドレスの対応関係を管理しているものです。
（えっでもどうして必要？Webサーバーじゃダメなんですか！？）
このサーバーが必要な理由は、システム上、コンピュータ（サーバー）とブラウザで住所の表示方法が異なっているためです。
コンピュータは数値を管理しやすいです。
たしかに映画やドラマでハッキングのシーンを見ると画面上に数値の羅列がたくさん。。。
一方、ブラウザは文字表示になっています。
人間は一部のつよつよな方を除いては、数値の羅列を見てもあたまポカーーーン。ですよね。
人間でも読めるようにブラウザでの表示は文字になっているそうです。
まとめるとドメイン、IPアドレスともにインターネット上の住所という前提は変わりません。
違いは媒体と表示方法です。
人がブラウザで見やすいように読める文字にしているのがドメイン（例：YouTube.comなど）
パソコン側が管理しやすいように数値にしているのがIPアドレス（例：111.111.111.11など）
と考えるのがいいと思います。
（ていうか、DNSサーバーってめっちゃくっちゃ個人情報の塊じゃないですか。）
（なんかちょっとどきどきしちゃいますね。）
お！次はWebサーバーとブラウザのやりとりに戻ってきました〜〜
ここではWebサーバーの出番です！
ブラウザは先ほどDNSサーバーから受け取ったIPアドレスをWebサーバーに送信します。
もう少しでWebページが見られそう！ソワソワ。
そして、WebサーバーからはWebページの構成に必要なファイルが送信されます。
これで完成！Webページが表示されました！おめでとう！！！！
.......ん？いきなりHTMLとCSSが登場？どういうこと？どこでプログラムが構成されている？？なぬ！？？
ということで、もう少し、次で最後です！
実は、上図の⑥の段階の前に、Webサーバー内で少し動きがあるんです。
Webサーバーは先ほど取得したIPアドレスをデータベース宛に送ります。
データベースとは、さまざまな情報が保管されている倉庫のようなものです。
ここでは、プログラミング（ここではRuby,Python,Java,PHPが代表的）をする際に必要な情報が処理されます。
- あなたへのおすすめ
YouTubeって登録しているとトップページに「あなたへのおすすめ」が出てきます。
あれって閲覧履歴からどんなものが好きか分析されているんですよね。
YouTubeやAmazonは個人に合わせて情報を表示する機能があるため、データベースから個人のデータを持ってきてカスタマイズ（プログラミング）する必要があります。
その後、プログラミングを経て完成したファイルはWebサーバー、ブラウザへと送られます。
ようやく完成です！
Webページが表示されました！！！！！！！
あの数秒の間にこんなにも壮大な処理が行われているなんて！！！笑
作った人天才すぎません！？
かっこいい（単純）
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
Webページはどうやって表示されてるの？
「HTTPリクエスト」と「HTTPレスポンス」
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-5.WebサーバーとHTTP」からわかった最近の傾向
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-5.WebサーバーとHTTP」からわかった最近の傾向
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章5節についての要約、自分なりの知識の整理という2点を述べていきます。
1.要約
Webサーバー
...Webブラウザから要求を受け取り、ネットワークを経由してWebブラウザに送信するためのもの
Apache（アパッチ）,IIS（アイアイエス）が有名
HTTP（Hyper Text Transfer Protocol）
...世界共通のハイパーテキストのやりとりの手順
どのWebブラウザやWebサーバーでも同じ手順でやりとりが可能
2.知識の整理
（※ここから大文字と小文字が混在して出てきます。
ここではひとつの解釈として、大文字「HTTP/HTTPS」は通信そのもの、小文字「http/https」はURLを扱っているときに用いています。
正確に合っているかわかりませんが、この定義で書いていきます。）
この節を読んで、
- HTTPとHTTPS（Hyper Text Transfer Protocol Secure）の違い
- httpって今どこいった？
の2点が知りたくなったので調べてみました。
- HTTPとHTTPS（Hyper Text Transfer Protocol Secure）の違い
※用語の簡単な解説
ポート番号...コンピューターがプログラムを識別するための番号のこと
SSL（Secure Sockets Layer）...HTTPS特有の暗号化通信のしくみのこと
上図と表から、2つの大きな違いは通信が暗号化されているかいないかということがわかりました。
とはいえ、今やhttpsから始まるサイトが主流になってきたように思います。
3節で触れたブラウザ画面の検索バーを見ても、鍵つき表示がほとんどになってきました。
- httpって今どこいった？
まあたくさん探したら見つかるよね〜〜〜という好奇心から、個人情報の入力が求められないような情報を調べてみました。
httpはさすがにあるでしょ〜〜〜〜！
（※わたしはプリン固め派です。高級感のある感じが好きです。）
ない！
全部httpsからはじまっていますね。
画像は3ページまでしかありませんが、このあと10ページまで広げて見ました。
httpsのものは96件（全100件中）で、httpの4件はすべて個人ブログでした。
思い返してみると、Wi-Fiが無料でいろんなところで使えるようになったり、タブレットやスマートフォンが急速に普及してきたり、通信を使って情報を得る機会が増えました。
そうなると、情報漏洩のリスクが高まるので、運用する側も対策をかけて公開していくのは当然の動きですよね。
httpsのサイトが増えているの、納得しました。
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
HTTPとHTTPSの違い
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-4.HTMLとWebブラウザ」で分かったWebどうしのつながり
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-4.HTMLとWebブラウザ」で分かったWebどうしのつながり
「イラスト図解式 この一冊で全部わかる Web技術の基本」の第1章4節についての要約、自分なりの知識の整理という2点を述べていきます。
1.「1-4.HTMLとWebブラウザ」の要約
・HTML（Hyper Text Markup Language）とは
ハイパーテキストを記述する用の言語
タグというマーク（<>）を用いて意味をつけ表現する
マークアップ言語とも呼ばれる
・Webブラウザ（browse...閲覧）とは
HTMLをWebページにして表示するもの
ハイパーテキストを人間が読めるように表示するプログラム
有名なものに以下3つ
・Internet Explorer（Microsoft）
・Firefox（Mozilla Fandation）
・Chrome（Google）
2.知識の整理
この節を読んで気になったことが2つありました。
これらについて深掘りしてみたので1つずつ述べていきます。
- ハイパーテキストって何？
ハイパーテキスト。英語にすると「hypertext」
「hyper」は超える、「text」は文書という意味です。
「え？超える文書？超えるって何を？？？？？？」
混乱してしまいました（笑）
調べてみると、
ハイパーテキストは、ほかのテキストへのリンクを含むテキストであり、小説のように単一で線形の流れのものとは対照的なものです。
この用語は、テッド・ネルソンによって 1965年に造られました。引用：
つまり、世界のWebサイトやWebページはリンクがあるから繋がっていられて、このおかげでいろんなサイトやページに飛べる、ということですね。
確かに、今のLPやコーポレートサイトって複数のリンクで構成されていることがほとんどだなと思います。
ちなみにここでいうリンクの正式名称は「ハイパーリンク」と言います。
ハイパーリンクはウェブページやデータ項目をお互いに接続します。HTML では<a>要素が、ウェブページのある場所 (テキスト文字や画像のようなもの) から、その他のウェブページ (や同じページでも) のどこかの場所へのハイパーリンクを定義します。
引用：
確かにページからページに超えていますよね。
英語の直訳は間違っていなかったようです。（わ〜い！やった〜！）
- マークアップがあればマークダウンもあるの？
〇〇アップ、〇〇ダウンという言葉って、どちらか片方だけで存在しているイメージが湧かないんですよね。
いつも2人で1つみたいな。。笑
そこで調べてみたら、マークダウン、なんとありました！
マークダウンとは、タグを使わず、改行や記号を使ってテキストに構造を与えるという「文章の書き方・解釈のルール」
引用：
マークダウン、2004年生まれなんですね。。
今は2021年なのでピッチピチの17歳。。（若い！）
（マイナビクリエイター,2016）
マークダウンはHTMLと比べて簡略化しているように感じました。
記号のみで意味を示せるなんて、秘密の暗号でやりとりしているみたいでなんだかかっこいいです。（単純！）
マークダウンは、ルールがシンプルでわかりやすいのと動作が軽いのがメリットだなと思います。
コンピューター側も読解しやすそうです。
一方、HTML記述が染みついている人には、覚えるのが少し大変かもしれません。
そのほか、「マークダウンは具体的にどこで使っているんだ？」と気になって調べましたが、使用するタイミングは人によってさまざまでした。
それでも、わたしが調べた限りではGitHubのReadMeで使っている方が多い印象でした。
（ReadMeとは、GitHubで自分の開発物を公開する際に記述するものです。使い方やツールの概要を載せることが多いため、いわゆる説明書です。）
わたし自身もまだ活用したことがないのであくまでも推測ですが、きっとシンプルに端的に書きたいときに使うのかなと感じています。
▽マークダウンの具体例を詳しく知りたい方はこちら
▽マークダウンの概要を詳しく知りたい方はこちら
日本語Markdownユーザー会という団体があるのを初めて知りました。笑
普段何をやっているのか気になります。
最後まで見ていただき、ありがとうございました！
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
MDN Web Docs 用語集: ウェブ関連用語の定義
マークアップとは - Markupの意味と基本知識
Markdown記法 サンプル集
Markdownとは
【イラスト図解式 この一冊で全部わかる Web技術の基本】「1-3.さまざまなWebの用途」でわかったWebの多機能っぷり
【イラスト図解式 この一冊で全部わかる Web技術の基本】
「1-3.さまざまなWebの用途」でわかったWebの多機能っぷり
1.要約
・ドメイン（domain...領域、区域）
…インターネット上の住所
・Webサイト
…１つのドメインにある複数のWebページのまとまり
・UI（User Interface）（Interface…つなぐこと、接地面）
…コンピュータの機能とユーザーのやりとりの橋渡しをする機能
（例:メール一覧、編集画面）
・プログラム用API（API…Application Programming Interface）
…ソフトウェア同士のやりとりの橋渡しをする機能
2.知識の整理
こういった用語は自分の言葉で説明できる、イメージができてこそ本当に理解したと言えると思います！（でもそれがすごくむずかしい。）
そこで、特にパッと説明が浮かばなかったものをまとめていきます。
・ドメインについて
ドメインは3種類あります！
（※ドメインについてはChapter2で触れるので詳細は割愛します。）
ここで、わたしが大好きなスタジオジブリのトップページを見てみます！
ブラウザはChromeです。
URL表示はドメインからになっていますね。
ちなみに、鍵付きの表示なのでこのプロトコルはhttpsであることがわかります。
（※http,httpsについてはChapter3に詳細がありましたのでそこでまた触れます。）
次に、トップページからサブページに移動してみました。
お！少し違う！
これから、このページが「最新情報のディレクトリの中に入っている013473のファイルを表示している」ことがわかりました。
ディレクトリはファイルを格納する容れ物のことです。
・APIについて
本書での「プログラム用API」は「プログラムで使うAPI」ということはなんとなくわかりました。
しかし、肝心のAPI自体がよくわからないので深掘りしてみます。
「APIとは機能にお仕事を依頼するための窓口とそのやりとりをするためのルール」
（引用：「分かりそう」で「わからない」でも「分かった」気になれるIT用語辞典）
ん〜〜さっきよりはしっくりきている気はするけど、もう少し具体的に！
ユーザーちゃんは今日の青森県の天気予報を知るためにアプリで調べました。
つまり、APIとは
・サーバーがユーザーから送信された地域情報を受け取るために必要な窓口
・サーバーからユーザーに天気情報を送信するために必要な窓口
という解釈になるかと思います。
（ちょっとくどい？？？）
APIはユーザーが特定の方法でアクセスしたら、特定の情報を教えてくれる機能を持っているんですね。
それが使われるのがWebなのか、プログラムなのかという話なのかなと思いました。
3.思ったこと
お仕事で使う用語は、実務で触れて何回も聞いて自分でも使って、というように時間をかけて覚えていくイメージがありました。
確かに間違ってはいないですが、ITやWebのように最低限の前提知識が求められる業界、なおかつ技術革新のスピードが速いところでは、業界に入るまでにそれなりの習得が必要だと思います。
初めて触れる用語が多いので、こういった普段使っているものや好きなもの、馴染みのあるものからイメージして入ると取っ付きやすいです。
具体例がないとイメージしづらいですし、何より自分のものになりません。
つくるための技術ももちろん必要です。
でも、つくるときに絶対に必要な会話の中で置いていかれないように、用語を身につけることも必要だなと今回感じました！
（ある意味語学の習得に近いものを感じているので、なんだか楽しくやれそうです）
【出典】
イラスト図解式 この一冊で全部わかるWeb技術の基本
意外と簡単！URLとドメインの違いって？
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
