CS50　ハーバード大学　コンピュータサイエンス講座　Week8　HTML,CSS,JavaScript　Shorts

たぬき

Shorts

今までになく盛りだくさんのShorts。
IP、TCP、HTTP、HTML、CSS、Javascript、DOM…やっぱ情報過多だ…。
頭パンクしそう…

Internet Primer(インターネット入門)


私たちが推奨する順序でこれらのビデオをご覧になっているのであれば、私たちはちょっとした文化の変化を迎えようとしています。
なぜなら、今からインターネットとウェブテクノロジーについて話し始めるからです。
これまで、私たちは本当に多くのC言語を実行してきました。
また、プログラムを実行するときはコマンドラインから実行していました。
これはユーザーが私たちが作成したプログラムと対話する方法とほぼ同じです。
プロンプトを表示するものを選択すると、ターミナルウィンドウで何かが起こり、完了します。
場合によっては、永続的なデータがその後も残る場合があります。
しかし、それだけです。
それはコマンドラインにあります。
これがユーザーが対話できる唯一の方法です。
この時点から、ユーザーが当社のウェブサイトを操作できるように移行を開始します。
従って、私たちはウェブサイトを作成することになりますが、ウェブサイトはCでは書かれておらず、PHPやヘルパー言語、HTML、CSSなどを含む他の様々なプログラミング言語で書かれています。
それでは、これらのことについて話し始めます。
ウェブプログラミング自体に入る前に、一歩下がって、コンピュータと人間がウェブ上でどのように対話するかについて話してみると良いでしょう。
従って、このビデオはまさにインターネットの入門書、基本ガイドです。
ここで注意していただきたいのは、CS50はネットワーククラスではないということです。
従って、ここで説明することはかなり高レベルの話です。
これら全てがどのように機能するかについての低レベルの詳細には立ち入りません。
そこに興味がある場合は、コンピュータネットワークのクラスを受講することを強くおすすめします。
そして、一般的な理解を明確にするためだけに、白い嘘の一つや二つつくことさえあるかもしれません。
以上のことを踏まえて、私たちがインターネットとどのように対話するかについて話しましょう。
これが私たちです。
You Internet
(´・ω・｀) ☁
私たちはインターネットにアクセスするのをとても楽しみにしています。
誰もが知っているように、そこには猫がたくさんいます。
(´・ω・｀) (=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)
このままインターネットにアクセスすればいいのでしょうか？
(´・ω・｀) →→→ (=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)
まあ、恐らくそうではありません。
例えばコンピュータのWi-Fiネットワークを変更すると、それがたまたまローカルWi-Fiの名前でない限り、インターネットという名前は表示されないことが直感的にわかります。
普段は家のようなところです。
あるいは仕事をしている場合は会社名かもしれません。
インターネットという選択肢は1つだけではありません。
従って、私たちがインターネットに接続したいときには、間に何かが存在します。
(´・ω・｀) →？→ (=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)
それらにはどのようなものがあるのでしょうか？
それについて話しましょう。
インターネットに接続するために必要ないくつかの重要なことについても説明します。

その最初のものはIPアドレスです。
この用語は聞いたことがあるでしょう。
IPアドレスは基本的に、ネットワーク上のコンピュータの一意の識別子です。
すべての家やオフィスにメールを送信できる固有のアドレスがあるのと同じです。
同様に、すべてのコンピュータがデータを受信または送信したい場合は、一意のアドレスが必要です。
これにより、情報が送信または受信されるときに、正しい場所から送信または受信されます。
先程も述べたように、このアドレス指定スキームはIPアドレス指定と呼ばれます。
IPはInternet Protocolの略です。これについては後ほど説明します。
さて、IPアドレッシングとはどのようなものでしょうか？
このスキームは基本的に、最初に実装されたときは、すべてのコンピュータに一意の32ビットアドレスを与えるものでした。
それはたくさんのアドレスです。40億ものアドレスです。
そして一般に、アドレスについて説明するためにCのポインタのコンテキストで以前に使用した16進数表記を使用する代わりに、通常もう少し人間に優しい方法でIPアドレスを表現し、4つのクラスターとして表現します。10進数で表現される8ビット。
なぜなら、プログラミングをしている場合を除いて、人間は16進数を頻繁に使うことがないからです。
しかし、インターネットを使用する人は必ずしもプログラマであるとは限りません。
そのため、トラブルシューティングのために誰かに電話する必要がある場合に、IPアドレスが何であるかを簡単に話しやすくするためにはより一般的な従来の10進数形式にする方が良いでしょう。
従って、IPアドレスはw.x.y.zのようになります。
これらの各文字は、0～255の範囲の負でない値を表します。8ビットの数値が256個の個別の値を保持できることを思い出してください。
これが範囲が0～255である理由です。
また、8ビットのクラスターが4つあり、合計は32ビットになります。
従って、IPアドレスは次のようになります。
123.45.67.89
これは一般的なデフォルトIPアドレスのようなものです。
それらはすべて0～255の範囲内にあるため、これは有効なIPアドレスです。
ここハーバード大学では、すべてのIPアドレスが140.247で始まります。
140.247.223.81
これは、この地理的エリアのIPアドレスが割り当てられた方法に過ぎません。
従って、これは、ここハーバード大学に存在する可能性のあるIPアドレスである可能性があります。
つまり、先ほども述べたように、すべてのIPアドレスが32ビットである場合、配布できるアドレスは約40億か、それを少し超える数になります。
しかし、問題があることがわかりますね？
現在の世界の人口は何人ですか？
まあ、70億人より上のどこかでしょう。
そして、少なくとも西側世界では、ほとんどの人がインターネット接続可能なデバイスを複数持っています。
まずここに1つあります。
そして、ポケットの中にもう１つあります。
そして、私のオフィスにもう１つあります。
ということで3つです。
そして、それは私が家に持っているものさえ数えていません。
それで、これはちょっとした問題ですよね？
私たちの人口は少なくとも70億人ですが、アドレスはわずか40億です。
そして、すべてのデバイスは一意に識別される必要があります。この問題に対処するためにプライベートIPアドレスと呼ばれるいくつかの回避策が開発されましたが、このビデオでは説明しません。
しかし基本的には、ウェブやインターネットがプライベートアドレスを持ち、それを多くの異なるコンピュータで共有されている1つのアドレスを介して送信することで、ユーザーが一意のアドレスを持っているように少し偽装することができます。
しかし、それは長期的な解決策ではありません。
その修正が永遠に続くわけではありません。
従って、これに対処する別の方法が必要です。
先ほども言いましたが、約40億ありました。
しかし、それだけでは十分ではありませんよね？
そこで、この問題に対処するために決定された方法は、より長いIPアドレスを作成することです。
32ビットの代わりに128ビットのアドレスを使用します。
40億の代わりに、3400億×10億という膨大な数のIPアドレスを表現できます。
そして、この新しいスキームは、一般的にIPv6と呼ばれています。
古いスキームはIPv4です。
この問題はかなり前から知られていたので、ちょっとした問題です。
これは、コンピュータやコンピューティングの文脈でよく見られます。
私たちは問題を予測するのが得意です。
しかし、私たちは彼らのことを知っていても、彼らに対処するのが苦手です。
従って、IPv6はしばらく前から存在しています。
そしてIPv4を段階的に廃止するために実際にこれらのIPv6を導入し始めたのはここ数年のことです。
しかし、いくつかの場所にはそれらが存在します。
これらは通常のIPアドレスと似ています。
s:t:u:v:w:x:y:z
しかし、それらははるかに長いです。
つまり、あなたのアドレスには8バイトのクラスターが4つある代わりに、16バイトのクラスターが8つあることになります。
そして、8×16は128です。
そして、これらをあまり一般的ではない16進数で表します。
16ビットの数値を持つということは、0～255の範囲ではなく、0～65535の範囲になることを意味するためです。
そのため、それらがたくさんくっついていると、読むのが非常に困難になります。
そのため、通常は便宜上16進数を使用します。
従って、典型的なIPv6アドレスは次のようになります。
1234:5678:90ab:cdef:fedc:ba09:8765:4321
これは確かに、これまでに見たIPv4アドレスよりもはるかに長いです。
ただし、これは有効なIPv6アドレスになります。
こちらもIPv6アドレスに関するものです。
2001:4860:4860:0:0:0:0:8844
これはたまたまGoogleのものです。
そして、そこにゼロがたくさんあることに注意してください。
場合によっては、これらのアドレスが非常に長くなることがあります。
また、IPv6はまだかなり初期段階にあるため、必要のない大きなゼロの塊が含まれる場合があります。
これも0がちょっと多いですよね。
従って0の束が多い場合は、次のようなIPv6アドレスでゼロが省略され、代わりに2つのコロンが使用されることがあります。
2001:4860:4860::8844
これでも問題ありません。
なぜなら、8つの異なるチャンクが存在するはずであることがわかっているからです。
したがって、暗黙的に、::の間は4つであることがわかります。
従って、このような0のセットが4つ存在し、それを埋める必要があることがわかります。
2001:4860:4860:0:0:0:0:8844
そのため、IPv6アドレスがここで見ているように8つの分割されたチャンクを持たないことがあります。
このように見えるかもしれません。
2001:4860:4860::8844
それは、二重コロンがある間に表示されないものはすべて0で区切られていることを意味します。
これで、IPアドレスについて少し詳しくなりました。
しかし、どうやってそれらを手に入れるのでしょうか？
欲しいものだけを選ぶことはできません。
そんなことをすると、同じIPアドレスを巡って誰かと争うことになるかもしれません。
あるいは、誰かが以前にそれを選択した可能性があります。
それを受け入れようとすると、ちょっとした問題に遭遇することになります。
従って、必要なIPアドレスを単に選択することはできません。
IPアドレスを取得する方法は、コンピュータとインターネットの間のどこかにあります。
そこには、DHCPサーバ、動的ホスト構成プロトコルサーバと呼ばれるものがあります。
膨大な量のテキストです。
しかし、実際に行うのはIPアドレスを割り当てるだけです。
DHCPサーバには、有効に割り当てることができるアドレスのリストがあります。
そして、それはあなたにその中から1つを与えます。必要なのはこれだけです。
DHCPが登場する前は、アドレスを割り当てるこのタスクはシステム管理者が担当していました。
従って、ネットワークに接続するときに、実際の人が手動でコンピュータとアドレスを割り当てる必要があります。
従って、DHCPはIPアドレスを与えるこのプロセスを一種の自動化します。
これは、ユーザーとインターネットの間のどこかで実行され、提供できるIPアドレスのバンクを持つ単なるプログラムです。
ネットワークに接続すると、それが提供されます。
それでは、この図をもう一度見てみましょう。
(´・ω・｀) →？→ (=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)
あなたとインターネットの間にはDHCPサーバがあります。
(´・ω・｀) →DHCPサーバ→(=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)
OK。それでいいのです。

さて、DNSについて話しましょう。
IPアドレスについて説明しました。
また、インターネット上のデバイスを一意に識別するには、一意のアドレスが必要であることもわかっています。
そして、必要に応じてそのアドレスにアクセスすることもできます。
しかし、ブラウザに192.168.1.0などと入力したことは恐らくないでしょう。
ブラウザに数字を入力する必要はありません。
通常、Google.comやcs50.harvard.eduなど、人間が判読できる名前を入力しますよね。
ただし、これらはIPアドレスではありません。DNS(ドメイン・ネーム・システム)と呼ばれるサービスです。
このサービスはIPアドレスを人間が理解できる単語やフレーズに変換します。
この単語やフレーズは4つの数字のセットや、まもなく8つの16進数のセットを覚えるよりもはるかに記憶に残ります。
それは本当に大変なことですよね？
携帯電話が普及する前のことを考えてみましょう。
あなたは友達の電話番号を暗記するしかありませんでした。
もう少ししたら大変になったかもしれません。
同様に、多数のウェブサイトにアクセスしたい場合、大量の数字を覚えたくはないでしょう。
単語はたくさん覚えた方が良いですが。
つまり、一連の数値を人間が読める名前にマッピング、つまり変換することにより、DNSがウェブのイエローページ(電話帳)になるのです。
そして、0.0.0.0から255.255.255.255までの巨大なリストであるかのように考えることができます。255.255.255.255は40億ものIPv4のすべての0～255までの全範囲です。
下の表の真ん中にあるのは実際に存在するIPアドレスです。
74.125.202.138にアクセスすると、明らかにそこにあるサイトに変換されるようです。
Host IPv4 Aress
info.host1.net 0.0.0.0
info.host2.net 0.0.0.1
...
io-in-f138.1e100.net 74.125.202.138
...
info.hostn-1.net 255.255.255.254
info.hostn.net 255.255.255.255
マッピングされているすべての名前が実際にそれが何であるかを明確にしているわけではありません。
従って、IPアドレスを所有している人がホストに実際には異なる名前を付ける場合があります。
例えば、真ん中のホストにアクセスした場合のIPアドレスは、実際には単なるGoogle.comです。
しかし、Googleには様々なサーバがたくさんあります。
そして、それらすべてをGoogle.comと呼ぶことはできません。
そのため、彼らはGoogle.comをそのIPアドレスに実際に接続されているサーバに変換するための独自の内部システムを持っています。
そして、io-in-f138.1e100.netをGoogle.comに翻訳するために、間に別のシステムが存在します。
しかし、それについては触れません。
同様に、IPv6についても、より大きなイエローページが作成される予定です。
そして同様に、その中間でも正当なIPv6のアドレスを見つけるのは困難でした。
しかし、Google用のものが見つかりました。
しかし、これはGoogleアイルランドのウェブサイトです。
しかし、そのIPv6アドレスにアクセスすると、ブラウザがIPv6対応であれば、Googleアイルランドのホームページが表示されます。
でも、これは完全な真実ではありませんよね？
このシステムは面倒そうですよね？調べなければならない項目が40億件もあるという膨大なリストがあるとしたら、それはかなりの量です。世界にイエローページはないですよね？
まだイエローページが届いているのであれば、私も先日受け取ったので、リサイクルしたところです。
しかし、イエローページが届けられたとしても、地球上に存在するすべての電話番号が記載された本を手に入れることはできませんね？
最も電話をかける可能性が高い市内の電話番号のリストが表示されるだけです。
そして、それが実際のDNSです。
考えてみれば、DNSはまさにローカルのイエローページです。
また、Google.comのような大規模なDNSサーバは実際にはローカルのすべてのイエローページまたはすべてのローカルDNSレコードのコピーを保持するライブラリに似ています。
つまり、世界中に1つのイエローページがないのと同じように、インターネットの完全なDNSを格納する1つのリポジトリ(貯蔵庫、保管場所。バージョン管理システムでは、ソースコードやディレクトリ構造のメタデータを格納するデータ構造のこと。)は実際には存在しません。
世の中にはローカルの小規模DNSがたくさん存在します。
そして、それらを１つにまとめたサービスもあります。
ただし、最も正確な情報を得るために、情報を更新する小規模なDNSに依存しています。
繰り返しになりますが、この例え話では、大規模な集約DNSシステムは、世界中のあらゆるイエローページのコピーを備えた図書館のようなものです。
彼ら自身はそれらの本を更新しません。
入荷する書籍に依存しているため、必要に応じて情報を更新できます。
つまり、DNSシステムは巨大なブロックではありません。非常に多くのサーバに分散されています。
これで、私たちとインターネットの間にDHCPサーバとDNSサーバが存在することがわかりました。
(´・ω・｀) →DHCPサーバ→DNSサーバ→(=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)

アクセスポイント
さて、私たちのアクセスポイントは何ですか？
アクセスポイントは実際に、インターネットに接続することでよく知られているものでしょう。
それは自宅や職場のネットワークなど、あなたが選択したネットワークです。
ここで私はこのビデオの目的のためにここでアクセスポイントの概念を一般化しています。
しかし、実際にはアクセスポイントにまとめられるものがたくさんあります。
ルータという概念があり、これは私たちが使用する一種の一般用語です。
しかし、アクセスポイントの一般的な概念とは別の、実際にはアクセスポイントと呼ばれるスイッチやものも存在します。
しかし、基本的にはIPv4で何が起こるかというと、プライベートアドレスという概念があると言いましたよね？
そして、40億台を超えるデバイスがインターネットに接続しようとしているため、すべてのマシンが一意のIPアドレスを持つのではなく、ルータにIPアドレスを割り当てるのです。
このアドレスは不足しています。例えば、自宅にあるルータやアクセスポイントです。
そして、ルータの仕事は、ある種の交通整理として機能し、そのルータに接続しているすべての人が同じIPアドレスを使用して外に出ることができるようにすることです。
それは理にかなっていますか？
つまり、自宅にいる全員がプライベートIPアドレスを持っています。そのプライベートアドレスを介して、インターネットに接続することはできず、インターネットから通信することもできません。
ルータ内のアドレスを介してのみ通信できます。
そして、ユーザーがルータに送信している情報を取得して正しい場所に送り、ルータに入ってくる情報をルータがユーザーに送信するのがルータの仕事です。
ここでいうルータとは、実際にはパブリックIPアドレスを持つデバイスのことです。
特に自宅のルータはほとんどの人にとって最も一般的な使用例です。
それはインターネットに接続されているデバイスです。
そしてルータに接続すると、ユーザーに代わって情報がルータを経由して流れます。
先ほども言いましたが、現代のホームネットワークでは、ルータ、スイッチ、アクセスポイントがすべて1つのデバイスにまとめられています。
モデムもバンドルされている場合があります。
通常、それは単にルータと呼ばれます。
しかし、実際にはそれらすべてが一緒になっているのです。
大規模ビジネスネットワーク、いわゆるワイドエリアネットワーク(WANS)では、実際にはこれらのデバイスが分離されています。
彼らにはスイッチやルータ、複数のアクセスポイントを持っています。
例えば大学ではいわゆるルータが取り付けられたようなものがキャンパスのあちこちに設置されているのを目にします。
これらはすべて、情報を渡すためにルータやスイッチなどに流入するアクセスポイントです。
これらのネットワークは非常に大規模であるため、1つのアクセスポイントではその広いエリアをカバーできないためです。
そして、これらの大規模ネットワーク、ビジネスネットワークなどはこれらを個別のデバイスに分割するため、必要に応じてネットワークを拡張することができます。
繰り返しますが、私たちとインターネットの間にはアクセスポイントがあります。
そして、それが私たちが繋がっているものなのです。
(´・ω・｀) →アクセスポイント→DHCPサーバ→DNSサーバ→(=ΦｴΦ=) (=ΦｴΦ=) (=ΦｴΦ=)
そして、そこを通じて、私たちはインターネットにアクセスすることができます。
このビデオの冒頭で述べたようにこれはネットワークに関するコースではありません。
従って、これがすべてではありません。
そして私はそれをちょっとごまかしてきました。
そしてもしかしたら、これらのことのいくつかについて、少し混乱させてしまったかもしれません。
でも大丈夫です。
ストーリー全体は必要ありません。
インターネットがどのように機能するかについて、基本的に少しだけ知っておくだけで十分です。
つまり、私たちが知っていることは、私たちの家にはこれらのプライベートネットワークがあるということです。
そしてルータに接続します。
そして、そのルータはインターネット全体に接続されています。
しかし、インターネット全体とは何でしょうか？
何度も言いますが、どういうことでしょうか？
そうですね。実際には、私の家、あなたの家、そして他のすべての家にある個々のネットワークがすべて相互に接続されているだけです。
それは相互接続されたネットワーク、つまりインターネットなのです。
従って、インターネットをこの巨大なクラウド、そこに存在するこの世のものとは思えないものとして考えるのではなく、実際にはこれらすべてのネットワークの間の接続にすぎません。
それでは行きましょう。
私たちはローカルネットワークを持っています。
そして、恐らくローカルネットワーク上でインターネットを使用しようとしているのは私たちだけではありません。
恐らく何人かが侵入しようとしているでしょう。
それに、世界に存在するネットワークは私たちだけではないですよね？
インターネットに接続しようとしている他のネットワークもあります。
しかし、繰り返しますが、インターネットは別個の存在ではありません。
これは、これらのネットワーク、これらの小さなネットワーク、ここでは青、紫、赤のネットワークが相互に通信できるようにする一連のルールにすぎません。
従って、それらすべてが繋がっているものは何もありません。
それらはすべて互いに繋がっているだけ、ですよね？
従って、これらのネットワークのどこかに私たちが実際に必要とするサービスが存在します。
つまり、青いネットワークにGoogleが存在しているのかもしれません。
そして、紫のネットワークにはFacebookが存在します。
そして、赤いネットワークには恐らく猫がたくさんいます。
従って、猫に関する情報を取得したい場合は、この一連のネットワークをたどって、必要な情報を取得するだけです。
ここでは、ネットワークをすべて相互に通信できるものとして表現しました。
そして、私たちはネットワークとのみ通信することができます。
しかし、ネットワークは私たちに話しかけることができません。
でも、それも違いますよね？
これはすべて双方向です。
情報はネットワークを介して行き来できます。
どうやってそうなるのでしょうか？
そうですね。インターネットは実際にはプロトコルのシステムです。
そして、次のビデオでそれらのプロトコルが何であるかについて話す予定です。
しかし、繰り返しになりますが、インターネットは別のものではありません。
これは、ネットワークの通信方法を定義する一連のルールです。
これらの小規模ネットワーク、私たちが慣れ親しんだローカルネットワーク、家の人々、学校の人々、職場の人々はすべてネットワークを共有します。
そして、これらのネットワークがどのように相互接続し、相互に通信するか、それが実際にインターネットのすべてです。
そこで、今後のビデオで、インターネットを構成するプロトコルのいくつかについてお話して、もう少し包括的な理解を深めていただければ幸いです。

IP


Internet Primerをご覧になった方のために、私はインターネットがプロトコルのシステムであることについて話して、少しクリフハンガーを残しました。
さて、実際にインターネットを構成する最初のプロトコルについて話しましょう。
興味深いことにそれはインターネット・プロトコルと呼ばれており、通常はIPと呼ばれます。
つまり、私が言ったようにインターネットは相互接続されたネットワークであり、実際にいくつかのネットワークが織り込まれ、何らかの形で相互に通信することに同意しているだけです。
これは何のことを言っているのでしょうか？
インターネットプロトコルは、情報がポイントAからポイントBにどのように送信されるかを決定します。
そしてこれは、「情報をポイントAからポイントBに移動する必要があるときにこのプロトコルに従うことに同意する」というインターネットのネットワークに参加する条件のようなものです。
Internet primerのビデオの最後で私はインターネットとは何なのかを示すこの画像を見せました。
そして、小規模なスケールでは、これは恐らくかなり正確です。

これは3つのネットワークが実際に相互に通信する方法である可能性があります。
しかし、それは少し誤解を招きます。
これが少し誤解を招く理由は、ここで便宜上ネットワークに番号を付けただけで他のすべてを取り除いてネットワークだけに焦点を当てると、

3つのネットワークすべてがお互いに繋がり、1つが2つに接続されています。
2つが3つと繋がっています。
そして3つが1つに繋がっています。
ここで接続について話すときは、物理的な有線接続のことを指します。
うちには無線があります。
しかし、データを大規模に無線で送信することは実際には非現実的です。
従って、ある時点で私たちは有線テクノロジー、つまり電話線、光ファイバー線、ポイントAとポイントBを物理的に接続する様々テクノロジーに依存することになります。
そして、このような小規模なネットワークではこれは正確かもしれません。
しかし、イメージが大きくなったので、6つの異なるネットワークがあると想像してみましょう。
それが本当であれば、すべてのネットワークが他のすべてのネットワークに接続できるように、このようなものが用意されています。

そして、見てみると、どのネットワークにも5つの矢印が接続されています。
従って、すべてが他のすべてのネットワークに接続されます。
ここにはネットワークが6つしかなく、どれだけの配線を使用する必要があるかはすでに検討済ですよね？
そして、インターネットは実際には6つよりはるかに多くのネットワークで構成されています。
特に、これらのネットワークの一部が海にまたがっていることを考えると、各ネットワークを他のネットワークにすべてに配線する余裕はありません。
アジアやヨーロッパのネットワークに接続しようとすると、海全体を横断する必要があります。
いつかはワイヤーを使用する必要がありますが、実際に使用するワイヤーの数は最小限に抑えたいと考えています。
100万本の電線を海を越えて送りたくはありません。
敷設するには1本あたり何百万ドルもかかるからです。
そして、あまりにも急速に、私たちはインターネットを利用する余裕がなくなってしまいます。
従って、すべてのネットワークが他のすべてのネットワークと通信するための別の方法を用意する必要があります。そうしないと、インターネットの一部がインターネットの他の部分から切断されてしまいます。
そして、それは私たちが望んでいることではありません。
しかし、それらをすべて一緒に接続することは望ましくありません。
ここでルータが再び活躍します。
ルータは次のように使用できます。
すべてのネットワークが他のすべてのネットワークに物理的に接続されているのではなく、これらの中間部分があり、ネットワークがいくつかのネットワークに接続されているこれらの中間部分に接続されているとしたら、どうなるでしょうか？
従って、1台を2、3、4、5、6台に接続する代わりに、1台がルータに接続し、そのルータがそれらのネットワークの1つまたは2つに接続するだけでなく、他のルータにも接続し、そのルータが他のネットワークに接続することもあります。
ルータの仕事は、ルーティングテーブルと呼ばれる情報が含まれており、特定のIPアドレスを見つけた場合にどこに行けばよいのかを指示するものです。
4で始まるIPアドレスが表示されたら、この方向に進み、12で始まるIPアドレスを見た場合は、この方向に進む、という具合です。
この例では、ネットワーク番号4またはネットワーク番号12に物理的に接続する必要はありません。私たちはどこに行きたいのかを大体知っているだけです。
考えてみると、これはCで話したときに話した再帰の概念に似ています。
行きたい場所に正確に直接結びつけるつもりはありません。
あなたが行きたい場所に一歩でも近づけるようにします。
そして、残りの問題の解決は他の人に任せます。
私は問題のこの小さな部分だけを解決し、残りはほかの人に任せるのです。
従って、ルーティング情報は実際には再帰に似ています。
それがよく理解できる概念であれば、その例え話が役に立つかもしれません。
それでは、このネットワーク例をもう一度見て、同じ6つのネットワーク(1から6)を使用すると仮定してみましょう。
従って、ネットワーク上のすべてのIPアドレスが1つのドットで始まるとしましょう。
そして、すべてのシステムがネットワーク1にどのように接続されるかを扱う別の処理があるとします。
私たちが関心を持っているのは、これらすべてのネットワークをインターネットに接続することだけです。
従って、ネットワーク1に接続されているすべてのデバイスには、1つのドットで始まり、その後に他の3つの数字が続くIPアドレスが割り当てられます。
これは、物事が実際に機能する方法を一般化したものです。
これよりもかなり正確です。
ただし、これにより、インターネットプロトコルが実際に何をしているのかについての一般的なアイデアが得られるはずです。
これが以前の図です。

これは持続可能ではないシステムでした。
6個ならこれでも大丈夫かもしれませんが、10、20、50に達すると、多くの配線を敷くことになります。
また、当社が保有するネットワークの数としては、50という数字はまだ氷山の一角にすぎません。
従って、このモデルは持続不可能です。
これに固執することはできません。
そこで、代わりにネットワーク間のすべてのワイヤーを取り除き、ルータを追加するこのモデルを採用しましょう。

これらの黄色のボックスはルータを表します。
そしれ彼らの仕事は、一般に情報を本来あるべき場所に近づけることです。
そして恐らく、これらはこれらのネットワークが持つ繋がりです。

恐らく、これらはルータに組み込まれているテーブルです。

例えば、ネットワーク1から始めると、基本的に1で始まらないアドレスを見つけたかどうかがわかります。それは、そこにある感嘆符や強打ではなく、1で始まらないアドレスを見た場合です。(!1)
１つはルータに渡すつもりです。
そして、そこからルータが決定を下すことができます。
ルータはそれを見つけたらネットワーク1に移動すると言っています。
それは、左上のボックスから左に向かう緑色の矢印です。
2が表示されたら、これは右上の紫色のネットワークに向かう矢印です。
2で始まるIPアドレスが表示されたら、2つのネットワークに移動します。
3、4、5または6が表示されたとしても、それは左上のルータから出ている赤い矢印です。
私は3、4、5または6には接続されていません。
しかし、私はそこにいる人、またはそこに少し近い人を知っています。
つまり、3、4、5または6で始まるIPアドレスを見つけるたびに、それをルータに送信するだけです。
そこでルータを本来の場所に少し近づけて、そのルータに問題を処理してもらいます。
ご覧のとおり、ここで一時停止してトレースしたい場合は、どこにいてもネットワーク内の他のすべてのポイントにアクセスできます。
6つのネットワークはすべて、他のすべてのネットワークに引き続き接続できます。
が、物理的には接続されなくなりました。
現在は中間ステップです。
もちろん、速度とのトレードオフがありますよね？
1台が6台に直接接続されていれば、途中で2つのルータを経由する必要はありません。
そのため、もう少し速く接続できるようになる可能性があります。
しかし、恐らくそのトレードオフには、それだけの価値があるのではないでしょうか？これらすべてのネットワークを物理的に接続するのに実際のコストが何ドルも何セントもかかるのであれば、多少の速度の低下は問題ないかもしれません。
私たちはそれを許容できます。
先ほどの例では、どのネットワークも相互に直接接続していません。
恐らくその例では、ネットワーク1と2が直接接続されるようにすることもできたでしょう。
それでいいでしょう。
一部のネットワークは他のネットワークに物理的に接続されています。
しかし、それらはすべて互いに繋がっているわけではありません。
この特定の例では、ポイントAからポイントBに通信を分散するためにルータに依存しています。
ここで話しているような小規模なネットワークでは、この構成は実際には単に直接接続するよりも非効率になる可能性があります。
しかし、大規模な場合には、システムをより適切に拡張することができます。全員を配線するのではなく、トラフィックを送信者から受信者に、つまりポイントAからポイントBに移動する役割を担う中間ルータを設置することで、ネットワークインフラストラクチャーのコストが大幅に削減されます。
それではこのインターネットプロトコルを使用して送信される情報の例を見てみましょう。

私は物理的にIP1.208.12.37に位置しているため、ネットワーク1のどこかに存在しているとします。
そして、あなたにメッセージを送りたいと思います。
そして、あなたは5.188.109.14のネットワーク5にいます。
IPアドレスは特に重要ではありませんが、この特定の例では、インターネットプロトコルの概要について話しています。
あなたはネットワーク5にいますが、私はネットワーク1にいます。
ご覧のとおり、私たちはお互いに全く接続されていません。
それでは始めます。
あなたにメッセージを送りたいとします。
そして、どういうわけか、そのメッセージをルータに伝えます。
実際にIPアドレスを持っているのはルータです。
そして、それがどこへ向かうべきかを見つめています。
他の5点のどこかに行きます。
そこで、ルータは情報を渡すためにルータテーブルを使い始めます。
5は1でないことがわかり、このルータに渡すと言われます。
それは1ではないので、ネットワーク1には移動しません。
そしてそれは2でもありません。
ネットワーク2にも移動しません。
それは5から始まります。このルータは「ネットワーク5には接続していません」と表示します。
それで、そのルータはそれを誰かに渡すつもりです。それは3、4、5、6が行く道を進みます。
そしてその先のルータに対処してもらいます。
もう少し目的地に近づけてみます。
大体そういう方向に進むはずだということはわかっています。
でも、あの人ならなんとかなるかもしれない。
そのルータは3と6にも接続していますが、その情報は5から始まるので、そちらには進みません。
それは4と5が進む方向に渡します。
そして、その先のルータは4と5に接続しているので、「はい。対処できます。」と5で始まるIPアドレスを取得します。
ネットワーク5に情報を渡すのです。
ネットワーク5はそちら側で何らかの作業を行い、メッセージを送信します。
そして今、ついに、インターネットプロトコルを使用して私からあなたにメッセージを送信することに成功しました。
繰り返しになりますが、何が起こっているかを説明する目的で非常に一般化しています。
しかし、これがほぼほぼインターネットプロトコルの仕組みです。
ルータは一般に送信先を知っており、途中で一歩ずつ送信し、宛先にどんどん近づいていき、最終的には1台のルータがネットワークやアドレスなど問題の場所に物理的に接続され、そこに送信されます。
一般に、本当に小さなメッセージを除いて、それを1つの大きなデータの塊として送信することはありません。
私があなたに電子メールを送信する場合、例えば非常に長い電子メールを送信するとしたら、そのメール全体をボールやパッケージなどにまとめてネットワークに送信することはできません。
まず第一に、ネットワーク上で情報を送信するにはコストがかかります。
それは合計されます。
そして、チャンクが大きくなるほど、すべてのステップを移動するのにより多くのコストがかかります。
高速道路を運転していて何らかの形で速度が落ちたときに巨大なトラックが現れ、道をふさぎ、幅が広いため、どちらの車線でも回避できなくなるようなものです。
それは後ろにいる他の全員の速度を低下させます。
しかし、もしすべて小さな車だったら移動できるかもしれません。
従って、システム内の1つの大きなブロックが他のブロックの速度を大幅に低下させる可能性はあります。
そこでIPはデータをパケットに分割します。
これには大量の電子メール、FTP転送、ファイル転送が対象になります。
あるいは、猫の写真が必要なので、ウェブブラウザにリクエストを送信している可能性もあります。
そして、そのリクエスト、電子メール、またはファイルを多くの部分に分割し、すべての部分を個別に送信します。
実際、IPは高速道路をたくさんの小型車で埋め尽くしており、何か問題が発生した場合に他の人の交通を抑制する可能性のある大型トラックの代わりに、すべてが移動できるようにしています。
これによるもう１つの副作用は何らかの致命的な障害が発生し、パケットがドロップされる場合です。
何かが失敗したため、メッセージを伝達できません。
ルータに入力されるものが多すぎる可能性もあります。
すべてを処理することができませんでした。
それで、文字通りそれを落とすのです。
それは一種のアナロジーですよね？
色々なことが起こっています。
情報をポイントAからポイントBに渡します。インターネット上には私たち2人だけではないため、大量のトラフィックを処理する必要があります。
そして、十分な手がなく、自分が何をしているのか理解できない場合は、何かを落としてしまう可能性があります。
従って、他のことができるようになります。
あまりにも多くのことが起こりすぎている。
メッセージを1つの巨大なブロックとして持っていて、それがドロップされた場合はメッセージを再度送信する必要があります。
そして今、再び渋滞を引き起こしている可能性があります。
そして、その巨大なブロックが再び投下される危険があります。
しかし、データがパケットに分割されており、そのうちの１つをドロップした場合、全体をもう一度送信するよりも、ドロップしたパケットだけをもう一度送信する方がはるかにコストが安くなります。
従って、IPはポイントAからポイントBに情報を取得し、ネットワークに過度の負担がかからないように情報を細かく分割する責任があります。

IPはコネクションレス型プロトコルとしても知られています。
送信者から受信者へ、またはその逆へのパスが必ずしも定義されているわけではありません。
さて、これまで説明したこの図の例では、実際にはすべてのネットワークにアクセスする方法は1つだけです。

従って、この図では実際にはポイントAからポイントBへの定義されたパスがあります。
しかし、この条件をルータテーブルに追加することにより、左側のルータに1つの変更を加えるだけでそれを変更できます。

ここで、左上のルータから4または5へのIPアドレスを処理する方法が実際には2つあることに注目してください。
左下のルータに行くことも、右のルータに行くこともできます。
複数のオプションがあります。
これは、ネットワークの応答性が向上するため、実際には良いことです。
例えば、GPSのようなものです。
高速道路を運転していて、突然GPSが前方に渋滞があることを警告してきた場合、できれば避けたいと思うでしょう。
そして、ルートを再計算することができます。
ルータネットワークにはパケットの送信先やデータの送信先に関する情報に加えて、ローカルネットワークの状態に関する一般的なパルスのよなものもあります。
このパスとこのパスで送信するとどうなりますか？
そして、ネットワーク上のトラフィックが多い状況を考慮すると、恐らく物事はより非効率な方法でルーティングされるでしょう。なぜなら通常の方法で行くと大量のトラフィックに巻き込まれるからです。
高速道路が渋滞している場合、代わりに脇道を通るかもしれませんが、通常ならもっと時間がかかるような、そんな脇道を実際に使う人はあまりいないはずです。
従って、パケットをそのようにルーティングできます。
大きなデータの塊のすべてのパケットが最初から最後まで同じパスをたどるわけではありません。
また、ルータテーブルで宛先について複数のオプションが可能であれば、ネットワークの応答性が大幅に向上します。
私たちは、邪魔にならないように移動するその一台のトラックに依存しているわけではありません。
次の出口で高速道路を降りて、別の道を進むことができます。
そして、インターネットプロトコルも同様のことを行います。
これがインターネットプロトコルの基本です。
しかし、対処すべき問題がもう１つあります。
それはパケットがドロップされた場合に何が起こるかということです。
そのパケットを再度送信しなければならない、ということはどのようにしてわかるのでしょうか？
まあ、インターネットプロトコルは配信を保証しません。
これに対処するために伝送制御プロトコル(TCP)と呼ばれる別のプロトコルに依存することになります。
次のビデオではTCPについて説明します。

TCP


このビデオでは伝送制御プロトコル(TCP)について説明します。
インターネットプロトコル(IP)に関するビデオをまだ視聴していない場合は、この2つは非常に相互関係があるため、このビデオを観る前に視聴することをおすすめします。
それで、インターネットプロトコルについて、もう一度簡単に要約すると、ネットワークを介して送信マシンから受信マシンに情報を移動するプロトコルです。
それではTCPとは何でしょうか？
送信マシンから受信マシンに移行するだけですべてが完了するわけではありません。
また、私たちのプログラム、例えばコンピュータが複数のプログラムを実行しており、それらのマシン上で複数のサービスが実行されていることもわかっています。
従って、特定のマシン上で特定のプログラムへのパケットや情報を取得したい場合はポイントAからポイントBへの情報の取得を可能にするIPだけでなく、より多くの情報が必要になります。
つまり、TCPは次のようになります。
これは受信側マシン上の正しいプログラム、または正しいサービスにパケットを送信するためのプロトコルと考えられます。
ご想像の通り、パケットがどこに送られるのか、そして、同時にそのパケットが何のためにあるのかを知ることが重要です。
そのため、伝送制御プロトコル(TCP)について話すとき、TCP/IPという文脈でよく耳にします。
これら2つのプロトコルは相互に関連しているため、基本的には1つのユニットとして扱われます。
ただし、これらは2つの別々のことを行う2つの別々のプロトコルです。
繰り返しになりますが、IPは、あるマシンから別のマシンに情報を伝達する役割を果たします。
そしてTCPはそれを正しいプログラム、または正しいサービスに到達させる責任があります。
そして、IPでは実行できない配信の保証という別の機能も実行します。
つまり、マシンのIPアドレスといわゆるポート番号を結びつけます。
ポート番号は、マシン上で特定のサービス、ユーティリティ、またはプログラムを識別する方法です。
IPアドレスとポート番号があれば、特定のマシン上で実行されている特定のサービスを一意に識別できます。
これが、TCPとIPが非常に頻繁に相互関係する理由です。
ポート番号と、あなたが話しているマシンが必要な場合、そのポート番号自体には実際は何の意味もありません。
例えば、どのマシンがこの特定のポートを使用しているか、などです。
TCPが行うもう１つのことは、前述したように、配信を保証することです。
従って、ポート番号の指定に加えて、インターネットプロトコル(IP)がデータを分割したパケット数も示します。
そして、たとえ送信時とは異なる順序でパケットを受信したとしても、受信側マシン上で再構築できるようにそれらのパケットを順序付けします。
これは、IPがコネクションレス型プロトコルであるため、異なるパケットがシステム内の異なるパスを通過する可能性があるために発生するものです。
これらのポート番号の一部は非常に一般的に使用されており、現在ではほぼすべてのコンピュータメーカーのすべてのコンピュータで標準化されています。
FTPと呼ばれるファイル転送プロトコルは、ご想像の通り、あるマシンから別のマシンにファイルを送信するために使用され、従来のようにポート21を使用します。
電子メール、SMTPはポート25を使用します。
Internet Primerで説明したドメイン・ネーム・システム(DNS)は、ポート53を使用します。
ウェブを閲覧する場合(HTTP)は例外的にポート80を使用することになります。
ポート443を使用して、安全にウェブを閲覧(HTTPS)することもできます。

では、このTCP/IPプロセスについて、両方のプロトコルを併用することで何が起こっているのでしょうか？
さて、それについて話しましょう。
プログラムがデータを送信する必要がある場合、TCPはデータをチャンクに分割し、それらのパケットをコンピュータのネットワークソフトウェアに通信します。
従って、データを取得し、どのポートに送信されるべきか、そのパケットが全体の中でどの順序であるかを示す情報をラップします。
パケットを1/10、2/10、3/10などにします。
IPは、TCPでラップされたデータチャンクを取得し、パケットの宛先に関する詳細情報をラップします。
これをパケットを囲むIP層と呼ぶこともあります。
つまり、それは入れ子人形の一種のようなものです。
真ん中にデータがあり、その上にTCPがあり、TCP内のデータがどこに送信されるのか、マシン上のどのポート、またはサービスに送信されるのかを指示します。
その周りにあるのがIP層です。
どのIPアドレス、どのマシンが実際にこれを取得しているのか。
これらすべての層でラッピングされたパケットはルータのシステムを介してインターネットプロトコルを通じて、ポイントAからポイントBに送信されます。
受信側のマシンまたはデバイスがそれを受信すると、IPが調べられます。
そう、これは私のIPアドレスだ、というように卵を割るようにしてIP層を取り外します。
次に、TCP層があることがわかり、「OK。これはポートx、またはポートyに送信されるようだ」と表示されます。
どうやらそれは15個中8番目のパケットのようです。
それは知っておくと良いでしょう。
従って、その情報を取得し、それがポートx宛てであり、パケット番号8であることがわかっているので、TCP層を外して、内部のデータを取得できます。
そしてデータを正しい方法で整理できるように準備できます。
そして、すべてのデータが受信されると、TCPはそれを適切なサービスに渡して「どうぞ」と言うことができます。「こちらが受け取ったデータです」
そのプロセスは次のようになります。
それでは、送信者から受信者にメールを送信してみましょう。
Email
SENDER RECEIVER
この電子メールは非常に小さいので、4つのパケットに分割するだけでよく、それらをA、B、C、Dと呼びます。
A B C D
SENDER RECEIVER
では、最初のパケットを移動したいとします。どうなるでしょうか？
さて、そのデータの塊、つまりパケットAの一部であるデータを取得し、それをTCP層でラップします。
覚えているかもしれませんが、電子メールはポート25経由で送信されます。
ここには、これから使用する4つのデータチャンクがあり、これがその最初のデータです。
従って、恐らくTCP層には「ポート25に行き、これが4つのパケットのうちの1番目のパケットである」という情報が含まれています。
TCP port 25 / 1 of 4
↑
DATA DATA
↑
パケット A
このあたりで、すべての情報がまとめられたので、それをどこに送信するか、どのマシン、どのIPアドレスがこのパケットを受信するかを指定します。
それはIP層の一部です。
IP Receiver IP
↑
TCP port 25 / 1 of 4
↑
DATA DATA
↑
パケット A

IP層には、何か問題が発生した場合の返送先アドレス、情報の送り先を知っているなど、他の情報も含まれています。
しかし、IP層はそのすべてを回避します。
その全体が1つの大きな単位としてバンドルされ、IP転送を通じて送信されます。
パケットA　→　Routing via IP
従って、インターネットプロトコルを使用して、ルータネットワーク経由でルーティングされます。
そして、受信者はそのすべてを受信します。

そして、それを解体する必要があります。
このデータの外側の層であるIP層を調べて、「はい。これは私のIPアドレスなので、破棄しても良いでしょう」と答えます。
ある意味、無視してもいいし、もう必要なくても更に1レベル深く見ることもできます。
これは、ポート25で受信することを目的としたデータであることがわかります。
これは明らかに4つのうちの最初の部分です。
従って、受信者はそれを念頭に置き、データを見て、それがどこに行くと思われるかを大まかに決めます。
さて、インターネットプロトコルによって、受信者が次に受信するパケットが2番目であるとは限りません。
実際、受信者が次に受け取るのは3番目のパケットである可能性があります。
これは、これらのパケットはネットワーク上のトラフィックが異なるため、異なるパスをたどったためです。
従って、再度構築する図については説明しませんが、3番目のパケットが移動し、IP層、TCP層などのすべての層が取り除かれ、データが適切な場所に配置されます。
次に、4番目のパケットを受信したとします。
これで、これ以上データを取得しないとしましょう。
どうなるでしょうか？
IPは私たちにとって何も役に立ちません。
しかし、TCPは役に立ちます。
TCPは、私が1of4、3of4、4of4を受信したことを知っています。これ以上データが得られません。
それで、問題が起きたことがわかるのです。
しかし、配信は保証できます。
2番目のパケットが欠落していることはわかっています。
そのため、TCPは逆方向にリクエストを行うことができるのです。
リクエストを送信側と同じ方法でバンドルし、IP経由で送信すると、途中で全員がパケットをドロップするというある種の無限ループが発生する可能性があることはわかっています。
その代わりに、TCPは「パケットが欠落しています」と言うだけで十分なのです。
送信者に情報を送り返す必要があります。
幸いなことに、送信者のIPアドレスは、送られてきたデータのIP層にバンドルされています。
それは封筒の返送先住所のようなものです。
そして、「2番目のパケットが足りないので再送信してもらえますか？」と伝えます。
送信者はその情報を受信したときに、電子メール全体を再送信する必要はありません。
欠落している部分を送信するだけでよいため、2番目のパケットだけを送信できます。
そして、それを取得すると、TCPは必要な4つのデータがすべて揃ったと理解します。
従って、これらを組み立てて、この情報ブロック全体をポート25に渡し、そこで電子メールとして解釈されます。
そして、このようにして、TCP/IPを使用して、送信者から受信者に電子メールを送信できるようになりました。
前述したように、途中で何か問題が発生した場合でも、TCPがそれに対処できます。
情報を返送するようリクエストすることができます。
そしてメッセージを再構築することができます。
そして、受信したすべてのパケットからメッセージを再構築すると、それらを整理して、適切なサービスに配信できます。
つまり、これがTCPです。
これにより、情報の配信が保証されます。
TCPはIPと頻繁に連携するため、これら2つのプロトコルは実際には連携しているということに注意してください。
これらは異なる動作をするため、ここでいくつかのビデオで説明しましたが、相互に関連しているため、通常は一緒に使用します。

HTTP


別のプロトコル、ハイパーテキスト転送プロトコル(HTTP)について話しましょう。
前回のビデオでIPとTCPについて説明しました。
これらは、ルータとマシンのネットワーク(インターネット)を介して、マシンからマシンへ、プログラムからプログラム、またはサービスからサービスへ情報がどのように移動するかを決定するプロトコルです。
でも、それが全体像ではありません。
通常、私たちが情報やプログラム自体を送信するとき、例えばTCPポート25経由の電子メールやポート80経由のウェブページリクエストなどでデータを受信するとき、通常は、今入力した内容を処理するためのルールシステムが存在します。
HTTPはまさにそのようなプロトコルの一例です。
HTTPは、これから説明する唯一のアプリケーション層プロトコルです。
しかし、これはインターネットを介して情報がどのように送信、および処理されるかを規定する別の一連のルールです。
特にHTTPはウェブページのリクエストを行う方法と、サーバ(ウェブページをホストするマシン)がその情報をクライアントに返す方法を正確に指定します。
従って、このプロトコルは、情報がポイントAからポイントBにどのように移動するかとは何の関係もありません。これは、次のようなルールの体系です。
基本的には、誰かがウェブページを操作するときと同様のウェブページを操作するための関与のルールです。彼らがあなたに手を振ったら、あなたは手を振り返すことになっています。それは一種の、従来の人間のプロトコルです。
HTTPプロトコルは、ウェブページをリクエストしたい場合は、フォーマットが次のようになっていることを確認するように指示するだけです。
例えば、ビジネスレターのフォーマットに似ています。
そして、応答も同様に、このプロトコルに従って返されます。
他にもアプリケーション層プロトコルがありますが、ビデオでは説明しません。
ただし、これらには、ファイル転送プロトコル、電子メールを送信するためのシンプルメール転送プロトコル、データ配布サービス、リモートデスクトッププロトコル、別のコンピュータからコンピュータにリモートアクセスする場合に使用されるRDP、よく知られているXMPPなどが含まれます。Jabberまたはチャットと同じなので、これはチャットサービスを使用するためのプロトコルです。
他にもたくさんあります。。
従って、サービスを使用するたびにサービスは非常に特殊な形式で情報が受信されること、つまり要求が受信されることを期待しており、同様に非常に特殊な形式で情報を返す必要があります。
それでは、インターネットと会話したいという私たちの例に戻りましょう。
私たちがcats.comに行きたいとします。
それで、cats.comとだけ話しているのであれば、「ねえ、あなたのホームページを見ても良いですか？」のようなことを言うかもしれません。
そしてcats.comは恐らく「はい、どうぞ」と答えるでしょう。
つまり、それは人間的な質問と答えのようなものです。
(´・ω・｀)　「ホームページ見せて」
(=ΦｴΦ=) 「どうぞ」
HTTPではどのように見えるのでしょうか？
まあ、実際にはこのようなものに非常に綺麗に翻訳されます。
(´・ω・｀) GET / HTTP/1.1　Host:cats.com
つまり、ここで私がやっているのはウェブページwww.cats.com/を要求することです。
現在では最後の/を省略するのが一般的ですが、それは単にcats.comのホームページを意味することになります。
ちなみに、あなたとの通信にはHTTPバージョン1.1を使用します。
それは「私はフランス語で話すつもりです」とか、「私は英語で話すつもりです」と言うのと似ています。
それは単なるプロトコルの形式です。
これも1.0ですが、現在はあまり使用されていません。
つまり、私はHTTP/1.1で話していて、www.cats.com/を希望しています。
それから、他の情報もあります。
それはあなたが誰であるかに関する情報であり、cats.comが送信先を知ることができるようになります。
しかし、これらはHTTPリクエストの最初にある2種類の重要な部分です。
手紙を書き始めるときに「拝啓、親愛なる…」と言うのと同じです。
それで、cats.comが「はい、どうぞ」というのであれば、どうぞ。
彼らはこう答えるでしょう。
(´・ω・｀) GET / HTTP/1.1　Host:cats.com
(=ΦｴΦ=) HTTP/1.1 200 OK Content-type: text/html
HTTP1.1を話します。リクエストは承認されました。200 OK。
あなたが受け取ろうとしているのは、HTMLとそれに続く追加情報です。
そしてリクエストの一番下にはHTML、マークアップ言語、cats.comのホームページのコンテンツがあります。
つまり、HTTP/1.1によるリクエストがHTTP/1.1経由で受け入れられたということです。
しかし、私たちのリクエストが必ずしも思った通りに進まないこともあります。
(´・ω・｀)　「ホームページ見せて」
(=ΦｴΦ=) 「ページはありません」
と言われたらどうしますか？
これは日常的に起こりうることです。
翻訳すると、次のようになります。
(´・ω・｀) GET /cats.html HTTP/1.1　Host:cats.com
リクエストはまったく同じに見えましたが、/スラッシュを取得する代わりにcats.htmlを取得している点が異なります。
つまり、このリクエスト全体が言いたいことは、www.cats.com/cats.htmlをください、ということです。
従って、ホストとその先頭行の中央部分は、私がどのページを求めているのかを正確に示しています。
しかし、この場合、cats.comは積極的に対応することはできないでしょう。
彼らは私たちが何について話しているのか知りません。
これは以前に見たことがあるかもしれません。
(´・ω・｀) GET /cats.html HTTP/1.1　Host:cats.com
(=ΦｴΦ=) HTTP/1.1 404 Not Found　Content-type: text/html
「あなたが求めているものは見つかりませんでした。ところで、HTMLをいくつかお返しします」
通常、そのHTMLは404ページのコンテンツです。
そしてcats.comの場合、恐らくバスケットに入った可愛い猫の隣に悲しい404の顔が置かれているでしょう。
探していたページが見つからないと悲しいからです。
これはプロトコル、つまりHTTPプロトコルリクエストがどのようなものであるかの基本のようなものです。
これらは、人間の慣習で何かを要求して、それを返してもらう、または手紙を書いて特定の形式での応答レターを期待するなど、同様のやり取りを行う方法に非常に似ています。
これは、HTTPがウェブページ、ハイパーテキスト転送にアクセスしたいすべてのデバイスを正規化していることとほとんど同じです。
従って、次のような行はHTTPリクエスト行と呼ばれます。
method request-target http-version
これは通常、HTTPリクエストの一部として、またはHTTPを要求している場合に最初に送信されるものです。
それは先程も言ったように、「拝啓、親愛なる…」と言っているようなものです。
http-versionは恐らく常にHTTP/1.1になるでしょう。
CS50の目的では、直接HTTPリクエストを行う場合は、恐らく常にGETメソッドを使用することになります。
ただし、POSTも別のオプションで存在しますが、ここでは説明しません。
そして、request-targetは、ホストのサーバ上のどのページを取得したいかを指定します。
先ほど述べたように、ホスト名は別の行であり、通常はリクエスト全体の2行目です。
これらを総合すると、ホスト名とrequest-targetは、探している特定のリソースを指定します。
先ほどの404の例ではwww.cats.comを再度要求していました。
cats.comがホストです。
request-targetではcats.htmlと言いました。
つまり、www.cats.com/cats.htmlにあるコンテンツ、またはリソースを求めていました。
そして、リソースが存在するかどうか、およびサーバがクライアントの要求に従ってリソースを配信できるかどうかに基づいて、様々なステータス・コードが返されます。
これらのステータス・コードの一部は、応答の一部であるため、見たことがあるはずです。
中には200 OKの人もいるかもしれませんが、かなり少数派でしょう。
恐らく、ページが200 OKと応答するのは見たことがないはずです。
目当てのページを取得できているのですから。
これは通常は明らかな404errorとは異なります。
通常は404と表示されます。
それではステータスコードのいくつかについて説明しましょう。
http-version status
繰り返しますが、サーバが応答すると、HTTPのバージョンが返されます。
HTTP/1.1 status
通常はHTTP/1.1です。
ステータスコードは何になるでしょうか？
まあ、成功するかもしれません。
200 OK
成功した場合はコード200とテキストOKが返されます。
これは有効なリクエストを行い、すべてが順調に進んだことを意味します。
すぐには気づかないものの、多少の失敗に終わることもあります。
それらはリダイレクトと呼ばれます。
ここに共通するものが2つあります。
301 Moved Permanently
これはページが新しい場所に移動したことを意味します。
そして、ほとんどのブラウザは自動的にリダイレクトします。
従って、本当に古いブラウザを使っていない限りは、301が実際に表示されることはないでしょう。
また、新しいページがどこにあるかも表示されます。
ほとんどのブラウザはユーザーが本当に行きたい場所はそこだと考えて、自動的にリダイレクトします。
302 Found
↑これが表示される場合もあります。
そして、実際にこれは今でも時々見かけるかもしれません。
一時的にページが移動する場合があります。
従って、別のものに変更するリクエストをブラウザが認識するたびに、ブラウザに永続的に変更するように指示するリクエストには組み込まれません。
302 Foundは、このページが一時的に別の場所に存在していることを示しています。
しかし、そこに永遠に住み続けるわけではありません。
恐らく最終的にはあなたが思っている場所に戻るでしょう。
クライアントエラーなども発生します。
401 Unauthorized
これはあなたも見たことがあるかもしれません。
恐らく200番台や300番台は見たことがないでしょう。
しかし、400番台はよく知っているはずです。
通常、401はページにアクセスしようとしているが、ログインしていないことを意味します。
職場のインターネットでFacebookのプロフィールか何かにアクセスしようとしたら、ログインしていないために401が返される可能性があります。これは恐らく、このリクエストを満たすことができる可能性があることを意味しますが、そのためにはまずログインが必要です。
逆に、403 Forbiddenが表示される場合もあります。
これはログインしているかどうかは関係ありません。
このリクエストは許可されていないのです。
リソースはサーバ上に存在します。
ただし、アクセスは許可されていません。
これは通常、様々な理由でサーバ上に存在する内部ファイルです。
外部からアクセスすることを意図していないため、禁止されています。
そして、最も有名なのが404 Not Foundです。
ファイルはサーバ上に存在しません。
あなたの要求にお応えしたいのですが、できません。
また、サーバエラーが発生することもあります。
最も一般的なのは500 Internal Server Errorですが、これでは実際に何が問題になったのかまったくわかりません。
しかし、あなたがリクエストを間違えたわけではありません。
サーバが何らかの理由でリクエストの配信に失敗しているのです。
さて、この話はここで終わらせても良いのですが、これから実際にやろうとしていることは、ブラウザを開いて、これらのステータスコードの一部を表示できない場合でもどのように表示できるかを説明することです。
一般的にはそれらを参照します。

いくつかの開発者ツールを見てみましょう。
さて、私はブラウザウィンドウにいます。
これらのHTTPリクエストについてもう少し詳しく学びたいと思います。
リクエストが実際にどのように実行されるかを確認するにはどうすれば良いでしょうか？
従って、最初にやることは開発者ツール(Developer tool)を開くことです。
開発者ツールはほとんどの最新のブラウザに組み込まれており、他の方法では見えないもの、つまりウェブリクエストの下で送信されている追加情報を確認できるようになります。
ここではGoogle chromeを使用しています。chromeで開発者ツールを開くには、F12を押すだけで横に開きます。
リクエストを入力したら、ズームインして、ここで何が起こっているかを確認します。
ここで、私がブラウザバーで行うことは、www.google.comにリクエストを行うことです。
恐らく誰もがこれまでにこのリクエストをしたことがあるでしょう。
Enterを押します。
さて、ここの開発者ツールで「ネットワーク」タブを選択しました。
そして、ここで多くのことに気づきます。
これらを見てください。200 OK、200 OK、これらのステータスコードのいくつかが表示されています。
なぜ302 Foundが表示されるのかわかりませんwこれを見ることになるとは思いませんでした。
でも、ここでは他の部分に注目してください。
私はGoogleのページに対して非常に単純なリクエストを行いました。
そして、私のリクエストを処理する過程でGoogleは私に代わって他にも多くのリクエストを行ったようです。
Googleのページに対してGETリクエストを行ったところ、200 OKが返されました。
もう１つの例で言うと、昔ながらのユーザーであれば、Facebookが常にFacebook.comにあったわけではないことをご存知かもしれません。
初期の頃はwww.thefacebook.comにありました。
彼らはかなり長い間Facebook.comにアクセスできなかったようです。
ここで私が期待しているのは、情報を入手することです。
そして、うまくいくかどうか見てみましょう。
ここで私が期待しているのは、facebookがthefacebook.comからfacebook.comに永久に移動した、という情報を入手することです。
従って、開発者ツールのリクエストの先頭近くでfacebookが完全に移転したという301通知を受け取ることを期待しています。
繰り返しになりますが、ブラウザ画面には301は表示されません。
そして、それは永久的な移動を意味します。
私のブラウザは最新のブラウザなので、恐らくfacebook.comにリダイレクトされるでしょう。
何が起こるか見てみましょう。
thefacebook.comにアクセスします。
開発者ツールの頂上を見てみましょう。
thefacebook.comにリクエストを送信したところ、301 Moved Permanently(このページは永久に移動された)という応答を受け取りました。
そして、ここの307は内部リダイレクトです。
そして、これが実際に私をもっと馴染みのあるwww.facebook.comに移した理由です。
これらの応答コードは、たとえ目に見えなくても依然として発生します。
401、403、404については様々な場所で目にしたことがあるはずなので、ここでは説明しません。
そして、500については、現在どのサーバがダウンしているかわからないので、500を取得できた人は幸運です。
しかし、これらのコードは存在しており、システム上で直接目にしなくても、アクセスする方法はあります。

HTML


私たちは振り返ってみると、Cの様々な側面について語るのに約35本のビデオを費やしたと思います。
それでも私たちはCのすべてをカバーしたわけではありませんが、言語の大部分を一般的な用途のためにカバーしたと言えるでしょう。
ここで、別の言語であるHTMLについて説明します。
たった1つのビデオでそれを取り上げます。
実際にはそれは習うより慣れるものになるでしょう。
ある言語の基礎を習得したので、他の言語の学習を始めるのは実は非常に簡単です。
ここで少し後退して、これらの言語の基本的な違いを説明したいと思います。
インターネット上には本当に素晴らしいリソースがたくさんあります。
インターネットは膨大な情報の宝庫であるため、これからそれらのリソースを紹介していきます。
従って、情報がビデオで取り上げられていないからといって、必ずしも損をするわけではありません。
必要なものはすべて入手でき、Cを理解することですでに構築された知識を利用して他の言語の学習曲線を実際にはるかに平坦にすることができます。
約束します。
それでは、すべてのウェブページにとって本当に基本的な1つの言語、HTMLについて話しましょう。
HTMLとは、ハイパーテキストマークアップ言語(Hypertext Markup Language)です。
HTMLは言語ではありますが、プログラミング言語ではありません。
HTMLには変数やロジック、関数などがありません。
HTMLではプログラミング自体を行うことはできません。
時々、人々が自分自身をHTMLプログラマだと表現しているのを耳にしますが、これは、正確ではありません。
私たちはHTMLプログラムを書く事ができません。
HTMLはテキストをマークアップするためにのみ使用される言語です。
それはマークアップ言語と呼ばれます。
※マークアップとは、文書構造（テキスト）が正しく認識できるよう、コンピュータに文書の要素に目印である「タグ」をつけて意味づけすること
そして、これが行うこと、つまりこのマークアップはHTMLでタグを使用し、これらのタグ、つまりこのマークアップはページの構造を意味的に定義し、タグの間に存在するプレーンテキストを様々な方法でブラウザに解釈させます。
恐らく、これは図で説明するのが最善でしょう。
<html>
<head>
<title>
hello,world
</title>
</head>
<body>
world,hello
</body>
</html>
これはHTMLプログラムではなく、非常に単純なHTMLページです。
すべてをhtmlタグで囲んでいるので、それがHTMLページであることがわかります。
htmlタグは<>山括弧の間にあります。
一番上に<html>があり、他の多くのHTMLと思われるものを実行した後、一番下には</html>があることに注目してください。
つまり、HTMLとそうでないものとの境界はそのようなものです。
従来、すべてのCプログラムを.c拡張子で記述したのと同じようにすべてのHTMLファイルは.html拡張子で終わります。
しかし、ここでは更に続きがあります。
ここにあるのはhtmlタグだけではありません。
どうやらheadタグと呼ばれるものがあるようです。
それは何でしょうか？
bodyによって区別するのが最善かもしれません。
bodyとはウェブページのコンテンツです。
そのため、headタグはブラウザウィンドウには表示されていないものの、ウェブページが正しく表示されるためには何らかの形で重要なものを定義している可能性があります。
例えば、headタグの中にtitleタグがあります。
つまり、タイトルがhello,worldであるということは、実際には、chrome、safari、firefoxなどのブラウザのタブに表示されるものになります。
どのブラウザを使用しても、それがタイトルとして表示されます。
また、タブが表示される前はブラウザウィンドウ全体に表示され、ブラウザウィンドウで一度に開くことができるページは１つだけです。
これが、タブまたはブラウザウィンドウバーに表示される私のページのタイトルhello,worldになります。
そして、私のウェブページのコンテンツはworld,helloになります。
それでは、このようなものがどうなるか見てみましょう。
これは非常に単純なHTMLページです。
ここでCS50 IDEを開き、少し拡大してみます。
hello.htmlを開きます。
IDEでできるのは、ページをプレビューすることだけです。
(ファイルを右クリックしてpreviewをクリック→ウェブページのプレビューが表示される)
ほら。
私のページのコンテンツはworld,helloだけですが、そこのheadタグには何も表示されません。
あくまでbodyの内容です。
他の部分が欠けています。
本当にこれだけの単純な、基本的なHTMLページです。
ここで、HTMLをわかりやすく整理するためにインデントしました。
が、実際にはインデントの必要はありません。
かなり醜い見た目にしても動作します。
<html> <head><title> hello,world</title></head> <body>world,hello</body></html>
これは先ほどと全く同じウェブページになります。
結局のところ、空白はデータです。
従って、送信者から受信者へ、サーバからクライアントへデータを送信する際にはデータにコストがかかります。
従って、多くのウェブコンテンツを提供している人にとって、空白を削除することは実際には良いアイデアです。
ただ、今まさにこの言語を学んでいて、うまく整理したいと考えている人にとっては悪い考えです。
インデントなどは、HTMLでは実際には重要ではありません。
重要なのは開始タグと終了タグを正しい順序で記述することだけです。
ただし、ここで何が起こったのかに注目してください。
マークアップは、作成した内容に関する追加情報を伝達する方法を提供します。
hello,worldの部分はタイトルとして解釈されました。
そして、world,helloの部分はコンテンツ、またはウェブページに表示されるべきものとして解釈されました。
これらの様々なタグは100以上あり、それらを見つけるための素晴らしいリソースがオンラインにたくさんあります。
このビデオではその中のいくつかの本当に基本的なことについて説明します。
すべてを話すのは膨大な情報量になるため、ここでは行いません。
ただし、もう１つできることは開発者ツールを開くことです。
HTTPに関するビデオを思い出してもらえれば、開発者ツールを開く方法について説明しました。
開発者ツールを開き、前回のネットワークタブを開く代わりに、要素(elements)タブを選択します。
ウェブページを読み込むと、そのウェブページを作成するHTMLが実際に表示されます。
従って、お気に入りのウェブサイトを見て、様々な部分をどのように構築しているかを確認することで、HTMLについて多くのことを学ぶことができます。
もしかしたらクールなパターンが見つかるかもしれません。
HTMLでどうやって作っているのでしょうか？
開発者ツールを開いてその要素の上にマウスを移動するだけでHTMLがどのように構成されているかを正確に確認できます。
従って、これはHTMLを学習するのに非常に良い方法です。
HTMLを学習すると同時に、開発者ツールで利用できるいくつかのオプションについて少し学ぶためにもこれを行うことを強くおすすめします。
これは学習に必ず役立ちます。

それでは、一般的なHTMLタグをいくつか見てみましょう。
そして、IDE内のいくつかのファイルを見て、これらのタグがどのようにレンダリングされるかを見てみましょう。
※レンダリング（rendering）は、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。 元となる情報には、物体の形状、物体を捉える視点、物体表面の質感（テクスチャマッピングに関する情報）、光源、シェーディングなどが含まれる。

ここで、テキストの見た目を調整するための非常に基本的なタグを3つ紹介します。
bタグ、iタグ、uタグがあります。

そして、それぞれが行うことは、それらの間のテキストを太字boldface、斜体italics、下線underlinedでレンダリングすることです。
<b>太字</b>
<i>斜体</i>
<u>下線</u>
それでは、IDEの実際のウェブページでどのように見えるか見てみましょう。
私のIDEにはbiu.htmlというファイルがあります。
開いてみます。
<html>
<body>
This text is <b>bold</b>, this text is <i>italic</i>,
and this text is <u>underlined</u>.
</body>
</html>
(プレビュー)
bタグ間のテキストは確かに太字になり、iタグ間のテキストは斜体に、uタグ間のテキストのは下線が引かれています。
これでテキストを少し派手に見せたり、特定の部分を強調する方法がわかりました。

ここで紹介するもう１つの一般的なタグは段落paragraphタグ<p>、ヘッダーheaderタグ<hX>です。
pタグはテキストを段落に分割します。
Enterを押してスペースを残すだけでは十分ではありません。
コンピュータは指示されたことだけを実行し、ほとんどの場合、空白を無視するからです。
従って、Enterを押すだけでコンピュータが新しい段落を開始したいのだと解釈することを期待することはできません。それぞれをpタグで囲むことにより、これは1つの段落であり、これは別の段落であると非常に明示的に示す必要があります。
また、hXタグにもこれらのオプションがあります。
hXタグには6つの異なるレベル1～6があり、ヘッダーは段階的に大きくなります。
ウェブページ上で動作しているpタグとhXタグを見てみましょう。
私のIDEにはph.htmlというファイルがあります。
開いてみます。
ここにはlorem ipsumやランダムなテキストをいくつか入れているので、ここでは多くのことが起こっています。
<html>
<body>
<h1>First level header</h1>
<p>
...
</p>
<p>
...
</p>
<h2>second level header</h2>
<p>
...
</p>

一番上にレベル1のヘッダータグであるh1があることに注意してください。
次に段落があります。これは単なるランダムなテキストの束です。
2つの段落の次に、レベル2のヘッダー、そしてまた新たな段落があります。
これをプレビューで見るとどうなるでしょうか？
(ヘッダーの数字が小さいほど大きな見出し→段落はわかりやすく分かれている)
ここでレベル1のヘッダーがレベル2のヘッダーよりもかなり大きいことに注意してください。
また、pタグを使用すると、内容を段落に分割できることに注目してください。
これらのpタグを削除して、実際に異なる段落になることを望んでいた部分にEnterやReturnを挿入した場合、それらはすべてくっついてしまい、上下にスペースがあるこのような適切な段落分離は行われません。
そして、pタグとhタグは、そのようにしてウェブページの一部に注意を引くために一般的に使用されるものです。
次に、ウェブページ上でリストを作成するために使用するタグをいくつか紹介します。
単なる箇条書きリストである、順序なしリストulと、番号付き順序有りリストol、それらいずれかの中にリスト項目liを示す方法のセットが必要です。
それではこのようなリストがどのように表示されるかを見てみましょう。
list.html
<html>
<body>
<ul>
<li>one</li>
<li>two</li>
</ul>
<ol start=3>
<li>three</li>
<li>four</li>
</ol>
</body>
</html>
順序なしリストulと番号付き順序付きリストolがあります。
olには、例えば3から始まるように属性を追加して開始点を設定できます。
デフォルトでは1から始まります。
リストのプレビューを見てみましょう
・one
・two
3.three
4.four
最初の2つの要素は順序なしリスト、または箇条書きリストです。
次の2つの要素は3から始まる番号付き順序付きリストです。
これが、HTMLを使用してリストを構築する方法です。

行と列の情報テーブルを作成して、情報を整理して表示することもできます。
これをHTMLで行うには、tableタグを使用します。
そして、tableタグの中に行trタグが存在します。
そして、列tdタグがtrタグの内側に入り、行内の列を指定します。
なぜcolumn(列)でtcでなく、tdと呼ばれるのでしょうか？
tdはtable dataの略です。
そこに情報を入れます。
つまり、tableタグの中に多数の行trタグがあります。
各行内にはその特定の行に含める列数分のtdタグがあります。
非常に単純なtableの例を見てみましょう。
table.html
<html>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
...
</tr>
</table>
<body>
</html>
(プレビューすると表になっている)
1234
5678
...
表にはなっていますが、あまりきれいではありませんね。
これについてはCSSについて説明するときに扱います。
テーブルを作成するために何をするのかというこのアイデアについてもう一度考えてみましょう。
もう少し良いフォーマットにしてみませんか？
4つの行があり、それぞれに4つの列があり、これは非常に単純な4×4の乗算表になります。

更にいくつかのタグについて説明します。
HTMLformの概念について話しましょう。
ウェブページのログインのコンテキストでこれを目にしたことがあるかもしれません。
<form></form>
<div></div>
<input name=X tpe=Y />
通常はユーザー名を入力します。
パスワードを入力すれば完了です。
それがformの始まりです。
divは一旦スキップします。
form内に適合するinputもあります。
これらは実際に入力している要素、チェックを入れているラジオボタン、チェックボックスをオンにしているものです。
これらはformの内部に配置されます。
formが適切にフォーマットされている場合、それらは基本的にformの各行を構成します。
divという概念がありますが、これは以前に行ったタグのような特定のカテゴリにはあまり当てはまりません。
これは、ページの任意の分割(division)の始まりを区切るようなものです。
視覚的な中断はありません。
ライン(線引き)はありません。
自動的には別のチャンクとして設定されません。
そうするには、そのようにスタイルを設定する必要があります。
これは、ウェブページにスペースが必要であることを示しているだけで、それをページのこの部分と呼ぶことにします。divの中に内容を入れることができます。
例を見てみましょう。
▼div.html
<html>
<body>
<div>
Arbitrary first division
</div>

	Here is a form:
	<div>
		<form>
			Text: <input name="a" type="text" />
			Password: <input name="b" type="password" />
			Radio: <input name="c" type="radio" />
			Checkbox: <input name="d" type="checkbox" />
			Submit: <input name="e" type="submit" />
		</form>
	</div>
</body>

</html>

先ほども言いましたが、divは任意のものであることに注意してください。
それは本当に何の意味もありません。
従って、ページの最初の部分は任意です。
そして、後で別のdivの代わりに<form>を作成します。
form内にはformのinputフィールドが多数あります。
Aという名前のフィールドがあります。
これは今のところ特に意味はありませんが、テキストを入力するフィールド、パスワードをフィールド、ラジオボタン、チェックボックス、送信ボタンがあります。
さて、これは実際にはどのようにレンダリングされるのでしょうか？

(textはそのまま文字を入力できる。passwordは文字を入力すると●●●となり、表示ボタンを押すこともできる。)
任意の最初の分割に注目してください。
ここには視覚的な分割はありません。
そして、フォームが完成しました。
特別なフォーマットは行っていません。
従って、このフォームは単なる1つの大きな情報行にすぎません。
フォームの書式を別にしていたら、1行ずつフォームを作成していたかもしれません。
でもスタイリングは一切しませんでした。
繰り返しますが、ここではCSSについては触れません。
HTMLについてのみ、説明します。
テキストフォームに文字を入力できます。
そして、パスワードにパスワードを入力できます。
そのフィールドタイプはパスワードであるため、文字は見えません。
ラジオボタンやチェックボックスはオンにすることができます。
または、フォームを送信することもできます。
何も設定していないので、送信を押してもページが更新されるだけです。
ただし、送信ボタンを別の動作に設定できるかもしれません。
それを使って何ができるかについては、今後のPHPのビデオで見ていきます。
ただし、これにより、ユーザーが対話して情報をウェブサイトに送信するために使用できる非常に単純なフォームを構築できます。
他のタグに進む前に、このinputタグをもう一度見てください。
タグの端が赤で強調表示されていることに注目してください。
<input name=X type=Y />
これまでに見た他のタグには、開始タグと終了タグがありました。
しかし、inputタグはそうではありません。
inputタグの間にテキストは入りません。
私たちが伝えようとしている情報はすべて、そのinputの属性の一部として結合されています。
入力名がXであることに注意してください。
type=Y。
本当に、必要な情報はこれだけです。
これを自己終了タグといいます。
すべての情報がタグとその属性内に含まれているため、開始と終了は必要ありません。
従って、完全に自己完結型のタグがある場合、タグは左側の<と右側の/>で自動的に開閉することに注意してください。

画像タグを備えた別のものもあります。
画像について話す前に、ハイパーリンクについて話す必要があります。
ウェブページをインタラクティブにして移動させたい場合は通常は青いリンクのいずれかをクリックできると便利です。
これは実際にウェブページにハイパーリンクを構築する方法です。
そして興味深いことに、リンクという別のHTMLタグがありますが、これはハイパーリンクではありません。
<a href=X>,</a>
ここでのaはアンカーを表し、これがハイパーリンクを示す方法です。
これはウェブページをXに移動することを意味します。
そして、開始の<a>タグと終了の</a>タグの間のすべてが私たちがよく知っているリンクのように見える下線付きの青いテキストになります。
その下にはimgタグがあります。
<img src=X .../>
これはXにある画像を表示するための自己終了タグです。
そこにある...で幅・高さ・その他の属性を指定することで、その画像を変更できる場合があります。
ここの一番下に、終了タグのない非常に興味深いタグがあります。
<!DOCTYPE html>
つまり、HTMLは1990年代初頭からウェブページを構築するために存在しており、それ以来何度か改訂されてきました。
最近ではHTML5と呼ばれる改訂が行われ、現在ではそれが事実上のHTML標準となっています。
私たちのウェブページがHTML5を使用して書かれていることを示すため、次のように始めます。
省略することもできますが、それは基本的にHTML5タグである新しいタグを使用できないことを意味します。
従って、HTML5を使用している場合は、最初にこのタグから始めます。
また、これまでに説明したタグはすべてHTML5タグではありません。
ただし、これはHTML5タグが存在することを示します。
まず最初に<!DOCTYPE html>タグがあり、その下に<html>タグがあり、そこから始まります。

最後のタグはコメントタグですが、これも少し他と異なります。
<!--,-->
-ダッシュで始まりますが、閉じ括弧はありません。
これら2つの要素の間にコメントを書きます。
IDEでimg、コメント、リンクを見てみましょう。
いくつかのコメントがあることに注意してください。

<html>
<body>
<div>
<!-- Here is a picture of Rick Astley -->
<img src="rick.jpg" />
</div>
<div>
<!-- Here is an internal link to another page -->
<a href="hello.html">To hello.html</a>

		<!-- Here is an external link -->
		To <a href="https://cs50.harvard.edu">CS50's website
	</div>
</body>

</html>

従って、Cや他のプログラミング言語と同様にHTMLはマークアップ言語というだけで、コメントを含めることができます。
それで、どうやらこのdivタグ、この任意の部門の間のどこかにReck Astleyの画像を配置するつもりのようです。
どうやらそのファイルはrick.jpgというファイルのようです。
それは現在のディレクトリ内に存在するファイルです。
そのため、内部リンクを貼ることができます。
ここで、11行目のhrefがhello.htmlであることに注意してください。
これは、現在のディレクトリに存在するhello.htmlを参照しているだけです。
また、現在のディレクトリ内のファイルについて話しているのではないことを示すために、httpsを指定するだけで、外部リンクを設定することもできます。
私が話しているのは、インターネット上のどこかに存在するファイルで、HTTPプロトコルを使用してリクエストする必要があります。
それでは、このページがどのように見えているのか確認してみましょう。
トップにはリック・アストリーがいます。
そして、その下にリンクがありますね。
hello.htmlへのリンクがあります。
それをクリックすると、お馴染みのこのページに移動します。
外部からCS50のウェブサイトにアクセスすることもできます。
ここで説明するHTMLに関する最後のルールはHTMLが適切な形式である必要があるということです。
Cでは様々な構文についてたくさん話しました。
HTMLでは、構文はタグを中心に展開します。
開いたタグは閉じる必要があります。
実際、開いたタグはすべて逆の順序で閉じる必要があります。
従って、太字b・斜体i・下線uタグを開いて、特定のテキストに対して3つすべてをじっこうする場合は、逆の順序でそれらを閉じる必要があります。
この種のカプセル化により、HTMLが美しく整理された状態に保たれます。
ただし、Cとは異なり、HTMLが構文エラーによって機能しなくなることはありません。
HTMLは適切に形成されていない可能性がありますが、それでも機能します。
したがって、これらのエラーは、ある意味すり抜けていく可能性があります。
それは警戒する必要があります。
特にHTMLファイルが大きくなるにつれて、いつタグを開いたのか、いつタグを閉じたのかを追跡するのは非常に困難な作業になる可能性があります。
ウェブページを見て、HTMLが正しく形成されているかどうかを確認するために使用できるオンライン検証ツールもあります。HTMLを使った作業やHTMLの作成を始めるときに、これらを必ず見て、使用し始める必要があります。
そうすることで、HTMLを適切な方法と適切なスタイルで整理し、将来的に問題を引き起こす可能性のある構文エラーを予防することができるのです。

CSS


それでは、もう１つの言語について話しましょう。
今回はCSSについてお話します。
Cascading Style Sheetsの略であるCSSも、ウェブサイトを構築するときに使用するもう１つの言語です。
このように考えてみてください。
HTMLがページに配置するコンテンツを整理するために使用されるものだとすると、CSSはウェブサイトの外観やウェブサイトと対話するユーザーエクスペリエンスをカスタマイズするために使用されるツールです。
HTMLと同様、CSSはプログラミング言語ではありません。
それにはロジックや変数、フロー関連の機能はありません。
それはスタイリング言語です。
その構文は非常に単純で、特定のHTML要素を持つページの要素をどのように変更する必要があるかを説明するだけです。
そのため、まだHTMLのビデオを見ていない場合、またはHTMLにあまり詳しくない場合は、最初にHTMLについての説明を参照することをお勧めします。
なぜなら、このCSSの説明はHTMLの知識に依存するからです。
これが非常に単純なCSSスタイルシートです。
body
{
background-color: blue;
}
これまでにCSSを使用してプログラミングをしたことがない場合でもこのスタイルシートが何をするのか正確に理解できるでしょう。
これをウェブページの本文、HTMLのbodyタグ間のすべてに適用すると、そのページの背景色が青に設定されます。
非常にシンプルなスタイルシートです。
CSSは非常に人間に優しい言語です。
従って、これまでに使用したことがない場合でも、恐らくそれが何をしようとしているのか推測できるでしょう。
実際、このスタイルシートが何らかの方法で埋め込まれたページをロードすると、ページの背景色は標準の白ではなく青になります。
では、スタイルシートはどのように作成すればいいのでしょうか？
まず、セレクターを特定する必要があります。
先ほどの例では、セレクタはbodyでした。
次に{}中括弧があり、そのセレクタのスタイルシートの定義を記述します。
中括弧の間には、キーと値のペアのリストがあるだけです。
以前の値のペアは、background-color: blue;でした。
今後は更に多くのことを実行できるようになります。
そのタグやセレクタ本体に複数の内容を適用することができます。
それぞれはセミコロンで区切られており、それぞれをCSS宣言と呼びます。
特定のタグに適用するすべてのスタイル設定が完了したら、}中括弧でスタイルシートを終了するだけで、その特定のセレクタのスタイルシートの定義が完了します。

一般的なCSSプロパティにはどのようなものがあるでしょうか？
そうですね。何かの周りにborder境界線を引きたいかもしれません。
つまり、borderがキーとなり、値はスタイル、色、幅になります。
border:style color width
styleは実線、点線、破線、稜線つまり波線になります。
colorは青、黒、緑にしたいと思うかもしれません。
widthを1、2、または10ピクセルにすることも可能です。
これらすべてを指定できます。
ページの背景色を特定の方法で設定したい場合があります。
background-color: [keyword | #<6-digit hex>]
bodyの背景を青に設定できることはすでに確認しました。
次に、キーワードを使用できるため、CSSにはblue、green、blackなど、私たちが知っている非常に単純な色が組み込まれています。
ただし、任意の16進数の色を指定することもできます。
色は0～255の3つの16進数(hex number)、rgb、つまり赤・緑・青のコンポーネントのセットによって識別できることを思い出してください。
キーワードを使う代わりに#と6桁の16進数を使用することで任意の色を指定できます。これにより6桁の色が得られます。
通常、ページのテキストとなる前景色もあります。
こちらもキーワードや6桁の16進数を使用して設定することができます。
color: [keyword | #<6-digit hex>]
従って、上で特定の背景色に対してページのテキストに任意の色を指定できます

フォントやページ上でのテキストのレンダリング方法を変更したり処理したりすることもできます。
フォントサイズを変更することができます。
font-size : [absolute size | relative size]
xx-large、large、medium、small、xx-smallなどのキーワードを使用できます。
fixed points、10pt、12pt…なども使用できます。
パーセント値、80%、20%なども使用できます。
100%がデフォルトのフォントサイズで、通常は11ptか12ptになります。
あるいは、最新のフォントサイズに基づいて設定することもできます。
何かを書いたばかりで、文字を小さくする必要があることはわかっていても、正確にどのサイズにするかがわからない場合はフォントサイズを小さくするだけで済みます。
そして、そのすぐ上にあるフォントサイズに基づいて設定されます。
従って、フォントサイズを指定するには様々な方法があります。

希望のfont-familyを指定することもできます。
font-family: [font name | generic name]
特定の名前(font name)がある場合はCSSで非常に具体的なフォントを定義してページに埋め込む方法があります。
一般的な名前(generic name)も使用できます。
CSSで事前に定義されたウェブ・セーフ・フォントが多数あります。
過去20年間にMicrosoft officeを使用してきたユーザーであれば、Times New Roman、Arial、Couner New、Georgia、Tahoma、Verdanaなどのウェブ・セーフ・フォントの多くをすでにご存知でしょう。
これらはすべてウェブ・セーフ・フォントとみなされます。
実際、それらが生まれた理由の一部はウェブを作成するために使用されることでした。
すべてのページが、様々なセリフを持つこのデフォルトのフォント・セットにアクセスできました。
このフォントのすべてについてはここでは触れませんが、これらは通常、フォントを別途定義しなくてもCSSでアクセスできます。

最後に、テキストを整列できます。
text-align: [left | right | center | justyfy]
デフォルトでは左揃えですが、右揃えにしたり、中央揃えにしたり、両方の余白に収まるように両端揃えしたりすることができます。
つまり、これらはすべてテキストの外観とページ上での表示方法を変更するために使用できるオプションです。

セレクタはタグのみである必要はありません。
以前にbodyセレクタについて説明しましたが、タグセレクタはまさにそれと同じように見えます。
タグに名前を付けて、そのタグのスタイルシートを定義します。
h2
{
font-family: times;
color: #fefefe;
}
ただし、IDセレクタと呼ばれるものを実行することもできます。
#unique
{
border: 4px dotted blue;
text-align: right;
}
ここではHTMLタグを使用せず、この場合は#uniqueまたはhash uniqueを使用していることに注意してください。
HTMLに関するビデオを思い出していただければ、タグに属性を持たせる方法について説明しました。
そして、ほぼすべてのHTMLタグに適用される属性の1つです。
これについては説明しませんでしたが、IDタグと呼ばれるものです。
従って、この特定のCSSは指定した非常に具体的なIDを持つHTMLタグにのみ適用されます。
コードのどこかHTMLファイルのどこかにタグがあり、そのタグの属性としてIDが一意であると指定した場合、この特定のスタイルシートは一意のIDを持つタグの間にのみ適用されます。
クラスセレクタと呼ばれるものもあります。
.students
{
background-color: yellow;
opacity: 0.7;
}
ID属性に加えて、HTMLタグにクラス属性を追加することもできます。
クラス属性を使用すると、複数のタグに適用できます。
従って、似たようなことがいくつかある場合はタグを開いて、何とか、何とか、class=studentsと言いたいかもしれません。
そして、この特定のスタイルシートは、classが学生であるすべてのタグに適用されます。
この場合、背景色を黄色に設定し、不透明度を0.7に設定します。これは説明しませんでしたが、この場合は何かの透明度を表すタグであり、70%に設定しています。

スタイルシートを記述するには2つのオプションがあります。
スタイルシートをstyleタグの間に配置することで、HTMLに直接記述することができます。
そして、これらのstyleタグはウェブページのheadタグの中に入れられます。
より好ましい方法は、別の.cssファイルを作成し、リンクタグを使用してそれをドキュメントにリンクすることです。
ビデオでHTMLを思い出していただければ、<link>タグはハイパーリンクとは異なります。
linkタグは個別のファイルを取り込む方法です。
これは、ウェブプログラミングの#includeに相当するものに似ています。
それでは、table.htmlを見てみましょう。
HTMLのビデオを思い出していただけると思いますが、非常に単純な表の例を示しましたが、非常に見苦しく見えました。
CSSを使用して、それを改善したり、実際に表のように見せたり、表ではないものにしたりする方法があるかもしれません。
行と列の間に実際の分割はなく、単にくっついているだけです。
それではCS50 IDEで、CSSがどのようにして以前に作ったものを微調整し、より良いものにするかを見てみましょう。
table.htmlは、基本的に倍数の内容を定義するだけでした。

▼table.html
<html>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
</tr>
</table>
<body>
</html>

これは4×4の乗算表であるはずです。
とても簡単です。
そして、それはかなりよく整理されているように見えると思います。
しかし、実際にこのページをプレビューしてみると、ちょっと見苦しいことがわかりますよね？

明らかに、ここには行と列があります。
ある種の分離があります。
しかり、それは意味のある分離ではありません。
実際のところ、ここではあまり多くの情報は得られません。
また、水平方向、または垂直方向の規則に関して行と列の間に分離はありません。
恐らく、これはもっと見栄え良くすることができます。
それでは試してみましょう。
ここにtable2.htmlというファイルがあります。
ページの本文はほとんど同じです。
しかし、上の方を少し変えました。
▼table2.html
<html>
<head>
<style>
table
{
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
</tr>
<tr>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
</tr>
</table>
<body>
</html>

今回は、埋め込みstyleタグを使用していることに注意してください。
styleタグを開いて、その中にCSSスタイルシートを定義しています。
tableというスタイルシートがあります。
それが私のタグセレクタです。
IDまたはクラスセレクタを使用する場合は.や#を使用しません。
このstyleはすべてのtableタグに適用されます。
どうやら、table内に幅1ピクセルの青い実線の境界線borderを引きたいようです。
それは恐らく状況を解決する可能性があるように思えますよね？
状況はかなり良くなるでしょう。
文体的には、ここにスタイルシートを埋め込んだだけです。
どのようなものか、見てみましょう。
table2.htmlをプレビューしてみます。

そうですね。これはまさに私たちが求めていたものに近いです。
このスタイルがテーブルに適用されるだろうと言いました。
テーブルの周囲に1ピクセル幅の実線の境界線が表示されています。
実際には表のセルになっているわけではありません。
一応、CSSは機能しました。
tableにはスタイルシートが適用されています。
しかし、私たちが本当に望んでいたものは完全には実現できませんでした。
どうすればやりたいことを実現できるでしょうか？
さて、これのもう１つのバージョン、table3.htmlを見てみましょう。
また、先ほどとほぼ同じです。
ただし、今回は直接埋め込まれたスタイルシートを使用する代わりにlinkタグを使用してスタイルシートにリンクすることに注意してください。
<html>
<head>
<link href="tables.css" rel="stylesheet" />
</head>
...(以下、同文)

つまり、このコードはtables.cssというスタイルシートにリンクしているようです。
このrel="stylesheet"というのは、このファイルはこのコードとどういう関係なのか、ということです。私がページに使用しているスタイルシートということです。
従って、ここでCSSを使用して何をしているのかを本当に確認したい場合は、そのtables.cssというファイルも開く必要があります。

▼tables.css
table
{
border: 5px solid red;
}

tr
{
height: 50px;
}

td
{
/*Lots being applied here! */

background-color: black;
color: white;
font-size: 22pt;
font-family: georgia;
text-align: center;
width: 50px;

}

どうやら、ここではいくつかのことが起きているようです。
テーブルの周囲に幅5ピクセルの実線の枠線を引きたいようです。
table
{
border: 5px solid red;
}
これがどのように見えるかはtable2.htmlで確認できました。

各行で、行の高さを50ピクセルに指定したいようです。
tr
{
height: 50px;
}
各行について、それがtrタグの機能であることを思い出してください。
最後にこんなコメントがあります。
これがCSSでコメントを書く方法です。
td
{
/*Lots being applied here! */

これはブロックコメント構文のスラッシュスター/*とよく似ています。
短いインラインコメントの場合、ここではこの特定の形式を使用する必要があります。
tdタグでは色んなことが行われています。

background-color: black;
color: white;
font-size: 22pt;
font-family: georgia;
text-align: center;
width: 50px;

}

tdタグ、つまりテーブルデータを思い出してください。
これは実際には行内の単なる列であり、どうやらテーブル内の各データに対して、背景色を黒、文字の色を白、前景色を設定したいと考えています。これがこのページのテキストになります。
フォントサイズは22ポイントが必要で、フォントファミリはgeorgiaにする必要があります。
従って、デフォルトのフォントは使用しません。
ここでは、これまでに見たウェブ・セーフ・フォントの１つであるgeorgiaを指定します。
テキストをボックスの中央に揃えたいのですが、左揃えや右揃えにはしたくありません。
また、列の幅も50ピクセルにしたいと考えています。
これがどのように見えるかを確認して、改善されるかどうか見てみましょう。

かなり良くなりましたよね？
これは実際、表になっています。
テーブルの周りに赤い枠線がありますが、各行の高さが50ピクセルで、各列の幅も50ピクセルです。
各列のデータの背景は黒です。
白い線が入っているのはそのためです。
これらすべてのセルの間にあるスペースはそれ自体が境界線ではありません。
セルを埋めているだけで、実際には表の境界線が作成されます。明らかに最初から存在していたもので、ただ細かっただけです。
今ではそれが見えるようになりました。
これは、非常にシンプルなスタイルシートです。
今のこの表は、ただごちゃ混ぜになっているのではなく、4×4の掛け算表に似ています。すべてが行と列であることは明らかです。
ここではCSSでできることのほんの表面をなぞっただけです。
幸いなことにCSSドキュメントは非常に簡単です。
その属性のいくつかをかなり頻繁に使用することになります。
逆に、それらすべてを使用しないものもいくつかあります。
それでもOKです。
ただし、世の中にはたくさんのドキュメントがあることを知っておいてください。
従って、そのすべてをカバーできなかったとしても、あなたが一人で取り残されることはありません。
しかし、CSSは試してみると本当に楽しいです。
ウェブページで実際に試してみて、ウェブページを訪問する際のユーザーエクスペリエンスを向上させるためにウェブページの外観と操作性をどのように調整できるかを確認することを強くお勧めします。

JavaScript


CS50の終わり近くでいくつかの新たなプログラミング言語を紹介しますが、コースの前半でCについて説明したほど深くはカバーできません。
ここでの目標は、これらの言語が何をするのかを完全に説明することではなく、基礎を十分に説明し、すでに知っていることとの類似点を十分に示して、知識を具体化できるようにすることです。
そして、これらから取り上げるもう１つの言語はJavaScriptです。
これまで説明してきた他の言語と同様、Cの構文から派生した最新のプログラミング言語です。
従って、Cに慣れていれば、JavaScriptをすぐに習得できるでしょう。
pythonと同じくらい長く存在しています。それから数年後の1990年代半ばに発明されました。
さて、他のビデオで説明したHTMLとCSSだけでなく、JavaScriptについて本当に重要なのは、これら3つの言語がオンラインの意味の中核となるユーザーエクスペリエンスをほぼ構成しているということです。
従って、JavaScript、HTML、CSSの使い方と操作方法を理解すると、これら3つの言語で優れたユーザーエクスペリエンスを作成できるため、ユーザーが楽しく訪問できるウェブサイトを実際に作成できるようになります。
JavaScriptを書くのはとても簡単です。
ファイル拡張子が.jsのファイルを開いて、すぐにJavaScriptでの書き込みを始められます。
PHPのような言語に慣れている場合は括弧、疑問符、PHPなどの区切り文字でコードをバインドする必要があることをご存知でしょう。
JavaScriptでは、それを行う必要はありません。
文字通り、JavaScriptファイルにコードを書き始めるだけですが、これは非常に素晴らしいことです。
また、HTMLタグでそれを伝えることになるため、ウェブサイトはファイルがJavaScriptであることを認識します。
例えばJavaScriptタイプのスクリプトがあり、ファイル拡張子が.jsのファイルであるとします。
とても簡単です。サーバ側、つまりウェブサイトをホストする側で実行されるpythonとは異なり、JavaScriptアプリケーションはウェブサイトにアクセスしているときに自分のマシン上でクライアント側で実行されます。
HTMLにJavaScriptを含めるのは非常に簡単です。
CSSをstyleタグとともに含める場合と同様に、<script>タグの間にJavaScriptを埋め込むことができます。
従って、オープンスクリプトタグを使用して、文字通りHTML内で直接JavaScriptを書き始めることができます。これは、ある意味素晴らしいことです。
ただし、linkタグがあるCSSと同様にJavaScriptを別のファイルに記述し、scriptタグのsource属性を使用して接続することもできます。
CS50では、そして恐らくより一般的には、これが間違いなく推奨される方法です。特にウェブサイトの別のページで使用される可能性のあるJavaScriptファイルがある場合、またはそのコンテンツが使用される可能性がある場合に当てはまります。
すべてのページのscriptタグの間にJavaScriptを記述する必要はありません。
毎回、外部ファイルを参照してリンクできるようにしたいと考えています。
それでは、JavaScriptで使用する可能性のある基本のいくつかを簡単に説明しましょう。

変数
変数はpythonの変数に非常に似ており、Cの変数にも非常に似ています。
型指定子は必要ありません。
ローカル変数が必要な場合は、先頭にvarキーワードを付けます。
従って、パイソンでは次のようなことを言うとします。
x = 44
JavaScriptではこのようなことはしません。
最後に;セミコロンを付けると、実際にはグローバル変数が作成されてしまうからです。
これは、次のようにします。
var x = 44;
これにより、JavaScriptでxというローカル変数が作成され、その変数に値44が格納されます。

条件文
Cのお馴染みのお気に入りはすべて使用できます。
if
else if
else
switch
これらはすべてCから引き継がれているため、詳しくは説明しません。
しかし、これらはすべてJavaScriptで使用するためにここに用意されており、ほぼ同じように動作します。

ループ
Cでよく知られているwhileループ、do whileループ、forループなども引き続き使用できます。ただし、他にもいくつかのバリエーションはありますが、これらについては後ほど説明します。

関数
現在、JavaScriptの関数はすべてfunctionキーワードで導入されています。
関数名とパラメータを記述し、Cで行うのと同じように{}中括弧で関数を定義します。
ただし、Cではもちろんfunctionキーワードを使用しませんでした。
ただし、JavaScriptには落とし穴もあります。
それは、関数が匿名になる可能性があるということです。
つまり、名前を付ける必要がないこともあるのです。
さて、関数に名前が無い場合、どうやって関数を呼び出すことができるのかと自問しているかもしれません。
それについては後ほど説明し、ここで、HTML要素へのバインディングについて説明するときに特に意味することについて説明します。
これについてはドキュメント・オブジェクト・モデル(DOM)に関するビデオで説明します。
が、匿名関数については後ほど説明します。
特定の状況でそれらがどのように役立つかがわかります。
そして、これらのコンテキストは実際にJavaScriptプログラミングでかなり具体化されます。

配列
JavaScriptはCやpythonと同様、pythonのリストに似ています。
配列を持ち、配列を宣言できます。
とても簡単です。
var nums = [1,2,3,4,5];
例えば、var numsはローカル配列を作成します。
そして[]角括弧を使用して、配列に入れたいすべての値をカンマで区切ったリストを作成します。
種類を混ぜることもできます。
Cのように、すべての要素を整数、浮動小数点数、文字列で統一する必要はありません。
様々な型を混在させることができます。
var mixed = [1,true,3.333,'five'];

オブジェクト
JavaScriptには、いくつかの異なる動作を行う機能があります。
そのため、最初に学ぶ言語としては少し難しいかもしれません。
なぜなら、aは自分自身に多数のルールを設定し、その後、それらを破るからです。
非常に柔軟性がありますが、第一言語としては少し柔軟性が高すぎるかもしれません。
ただし、オブジェクト指向プログラミング言語として動作できます。
オブジェクト指向という言語は以前に聞いたことがあるかもしれません。
が、そうでない場合は、ここで簡単な短期集中コースを提供してみます。
オブジェクトは、Cでよく知られている構造体と精神的に非常に似ています。
Cでは、構造体は様々なフィールドやメンバーを持つことができます。
オブジェクト指向プログラミングでよく見かけるプロパティの別の呼び方はフィールドやメンバーです。
ただし、これらのプロパティ、フィールド、またはメンバーはCと同様に、単独で自立することはできません。
例えば、次のような車の構造体を定義するとします。
struct car
{
int year;
char model[10];
}
struct car、その中には2つの異なるフィールドまたはメンバーがあります。
int yearとchar model[10]、または使用できる10文字の文字列は車のモデルを保存します。
このようなことができます。Herbieという名前のstruct car型の変数を宣言します。
struct car herbie;
herbie.year = 1963;
herbie.model = "Beetle";
これは有効なCです。しかし、Cでは決してこれを言うことはできません。
↓
year = 1963;
model = "Beetle";
yearやmodelはstruct carであることが何を意味するかにとって非常に重要であるため、そうは言えません。
これらはstruct carとは切り離せません。
私たちは常にそれらのものを特定のstruct carに関連付けなければなりません。
だからこそ、先ほどのような記述ではダメなのです。

オブジェクトには、フィールド、メンバー、プロパティの他にメソッドと呼ばれるものもあります。
これはCの構造体に、その構造体にのみ適用できる関数があるようなものです。
つまり、構造体のみを渡す必要がある関数があるようなものです。
しかし、構造体の{}中括弧内で関数を定義することはできません。
それがオブジェクト指向プログラミングです。
そこが違います。
ただし、プロパティと同様に、メソッドも単独では存在しません。
これは、抽象的に存在するだけの関数とは異なります。
これは、この場合、オブジェクトのコンテキスト内でのみ存在する関数です。
従って、Cでこれを行う場合、function(object);、ここでobjectは呼び出される関数へのパラメータです。←これはオブジェクト指向のスタイルではありません。
オブジェクト指向とは、オブジェクトがすべての中心にあり、代わりにオブジェクトの一部であるこの関数を呼び出すことを意味します。
object.function();
これは、オブジェクト指向プログラミングが非常に基本的な形式でどのように見えるかです。つまり、オブジェクトに関連付けられている関数があり、それらの関数を次のように呼び出します。
オブジェクトを指定して、何らかの関数が必要である、と指定します。
このように、オブジェクトに対して実行します。
オブジェクトのフィールドとメソッドは、pythonでよく知られている辞書の概念と精神的によく似ています。
従って、例えば次のようなものにすることができます。
var herbie = {year : 1963, model: 'Beetle'};
var herbieと宣言を始め、{}中括弧の中にキーと値のペアのカンマ区切りのリストを入れます。
これはJavaScriptでオブジェクトを作成し、それにすぐにいくつかのプロパティを与えることで同じことを行う方法に似ています。

さて、ループに戻りましょう。
前に述べたようにJavaScriptでは使用できる新しいループがいくつかあります。
このオブジェクトができたので、そのオブジェクトのすべてのキーと値のペアをどのように反復処理すればよいでしょうか？
あるいは実際、配列のすべての要素を反復処理したい場合、for、while、do-whileを使用する以外にどのようにすればよいでしょうか？
pythonでは、リスト内のキーに対して次のようなものを確認し、そこから下にあるすべてのポイントでキーを使用するコードを作成します。これは、リストのi番目の要素の代わりです。
for key in list:
# use key in here as a stand-in for list[i]
JavaScriptではそれ↑を行うことはできませんが、オブジェクトのvar keyに対してかなり似たようなことができます。
for (var key in object)
{
//use object[key] in here
}
{}中括弧の間でオブジェクトの[]角括弧キーを使用して、オブジェクトのkey番目の要素、またはオブジェクトのkeyと値のペア、セット内のkey番目のkeyを参照できます。
また、オブジェクトのvar keyにも少し異なるバリエーションがあり、object[key]を使用する代わりに、すべてのkeyにわたって反復する方法もあります。
for (var key of object)
{
//use key in here
}
先ほどの例とは対照的に、すべての値にわたって反復して参照できるようになりました。
これは値全体で反復されます。
従って、for var key in、またはfor var key ofを使用して、キーと値のペアの両側をカバーできます。
これら2つの異なるタイプのループを使用する配列の例を次に示します。

var wkArray = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'];
ここには、月、火、水、木、金、土、日曜日の7つの要素を含む週の配列があります。
そして、4つの変数の曜日配列を使用したいと考えています。
for(var day in wkArray)
{
console.log(day);
}
そして、for inループを使用して、.logをコンソールしたいと考えています。
console.logは、printfに相当するJavaScriptの関数です。
最新のブラウザの開発者ツールを使用してアクセスできます。
これを印刷したらどうなるのでしょうか？
すべてのキーのリストが出力されます。
この配列には実際にはキーは無く、インデックスが多数あります。配列には0～6の7つの要素があり、どの要素について話しているのかをログに記録しているため、これは0、1、2、3、4、5、6を出力します。
代わりに曜日を出力したい場合はfor ofループを使用し、月～日曜日をコンソールに出力します。
for(var day of wkArray)
{
console.log(day);
}
情報を連結したい場合はどうすればいいでしょうか？
console.log(wkArray[day] + ' is day number '
+(day + 1) + ' of the week!');
異なる文字列を結び付けることができることを覚えていてください。
pythonならそれができますし、JavaScriptでも同様に実行できます。
+プラスを使用してそれを行います。
連結された多数の異なる文字列を.logでconsole出力したい場合は単に+プラスを使用するだけです。
でも、ここでちょっとした落とし穴があります。
+プラスを使用している場合、それは2つの異なる意味を持ちます。
文字列を連結したいのですが、恐らくここで加算もしたいと思います。
JavaScriptに週の配列を記述し、それを反復するループを作成し、これをconsoleの.logに記録するとどうなるかを見てみることを強くお勧めします。
予想していなかったことが起きるかもしれません。
JavaScriptは最善の推測を行っており、dayと1はどちらも文字列であると仮定していますが、実際にやりたいのは、文字通りそれらを加算することです。なぜなら、これらは数値だからです。
しかし、幸いなことにJavaScriptではparseIntと呼ばれる関数を使用することでこの問題を回避できます。
(day + 1)　→　(parseInt(day) +1

console.log(wkArray[day] + ' is day number '
+(parseInt(day)) + 1) + ' of the week!');
さて、これで私たちが期待しているものが得られます。
一方、これは私たちが期待していなかったものをもたらすでしょう。
console.log(wkArray[day] + ' is day number '
+(day + 1) + ' of the week!');
しかし、それは、繰り返しになりますが、同じ演算子を使用して2つの異なることを意味しており、言語は時々最善の推測を行う必要があるということです。
従って、最近の言語でデータ型の指定があまり要求されないことは必ずしも良いことではありません。
ここでデータ型を指定できれば、意図を明確にすることができるでしょう。
しかし、ここではJavaScriptを使用して、型を指定しないことで非常に役立つと考えています。
そして、それは私たちが何をしたいのかについて最善の推測をします。
が、時には間違った推測をします。
しかし、実際に推測が間違っていた場合にそれを回避する方法を提供します。
従って、配列は実際にはオブジェクトの特殊なケースです。
そして実際、JavaScriptではすべてがオブジェクトの特殊なケースです。
x、任意の変数、var x = 44…これは、たまたま1つのプロパティを持つオブジェクトです。
配列は多数のプロパティと、それらに適用できるいくつかのメソッドを持つオブジェクトです。
従って、sizeメソッド、pop、push、shiftを呼び出すことができます。
array.size()
array.pop()
array.push(x)
array.shift()
それらの様々なものが何であるかについては、皆さんに調べていただくことにします。
ただし、これらは基本的に配列の意味がしっかりと組み込まれた関数であるため、最初に作成しなくても呼び出すだけで十分だと言えます。
もう１つの優れた点は、マップと呼ばれる別のメソッドです。
map()
これを使用すると、基本的に配列のすべての要素に関数を適用できます。
特にこれは匿名関数を使用するための優れた例です。

それでは、匿名関数の使用方法と、それがなぜ役立つのかを見てみましょう。
ここにnumsという配列があります。
var nums = [1,2,3,4,5];
ここには5つの要素1～5があります。
ここで私がやりたいことは、これらの要素に何らかの関数をマッピングすることです。
nums = nums.map(function(num){
return num * 2;
});
numsに対して何かをしたいということです。
それをnumsに再割り当てします。
mapには関数が含まれます。これは、配列の全ての要素に適用したい関数です。
私に出来ることの1つは、この関数を別の場所に書いて、名前を付けることです。
ここで何が起こるかというと、全ての値が2倍になります。
doublenumbersという関数を書いたとします。
それを使えば要素を2倍にすることができるでしょう。
ただし、ここで関数キーワードを使用し、パラメータのリスト(この場合はnum)を指定していますが、その関数に名前を指定していないことに注意してください。
なぜ関数に名前を付けないのでしょうか？
さて、私はここでこのマッピングを行っているだけです。
後でこの数字を再び2倍にする必要はありません。このコンテキスト以外では二度と使用するつもりがないのに、なぜわざわざ名前空間を乱雑にし、何らかの名前を付ける必要があるのでしょうか？
この場合、名前を付けずに関数を実際に使用でき、やりたいことを実行できるのはある意味便利です。
つまり、マップの括弧内で私が行っているのは最初の行の開き括弧だけであり、その閉じ括弧は実際には3行目にあります。
nums = nums.map(function(num){
return num * 2;
});
そして、括弧の間ではマップするパラメータを指定しており、文字通りそこに関数全体を定義しています。
このコードを実行すると、numsはどうなるでしょうか？
まあ、恐らく推測できると思いますが、numsのすべての要素が2倍になるだけです。
var nums = [2,4,6,8,10];

さて、JavaScriptについてもう１つ簡単に触れておきたいのは、イベントの概念です。
イベントはJavaScript上のHTMLと連携するものであり、ユーザーがウェブページ上で何かを行うことに対する応答です。
例えば、ボタンをクリックしたとします。
例えば、ユーザーが更新を押した後、ページの読み込みが完了している可能性があります。
ページの一部などにカーソルを合わせます。
それら、すべてがイベントなのです。
JavaScriptはイベントハンドラーと呼ばれるものをサポートしています。
これはイベントが発生したときに実行されるJavaScriptコードです。
そのため、サイトのページは非常にインタラクティブなものになります。
例えば、inputboxに「パスワードを入力してください」というメッセージをポップアップ表示するイベントハンドラーを作成できます。
これは完全に何も書かれていない空のフィールドです。
入力を開始すると入力を開始したためにこのボックスがポップアップします。これはページ上のイベントです。
そして、JavaScriptのイベントハンドラーを有効にする何かを行うように指示されます。
HTMLの多くの要素は、属性としてイベントをサポートしています。
ここでは、本当に基本的なHTMLの例をいくつか示します。
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<button onclick="">Button 1</button>
<button onclick="">Button 2</button>
</body>
</html>
headとbodyがあり、body内にはボタンが2つあります。
そして、この属性はonclickと呼ばれます。
基本的にonclickはイベントハンドラーの定義です。
ボタンをクリックしたときに何かが起こるようにしたいと思います。
現時点では何もありませんが、ボタンのいずれかをクリックすると、引用符で囲まれた関数が呼び出されるように、そこに何かを入れることができます。
例えば、イベントオブジェクトを作成し、これら2つのボタンがクリックされたかを示す非常に汎用的なイベントハンドラーをJavaScriptで作成できます。
それは次のように見えるかもしれません。
<html>
<head>
<title>Event Handlers</title>
</head>
<body>
<button onclick="alertName(event)">Button 1</button>
<button onclick="alertName(event)">Button 2</button>
</body>
</html>
ボタンをクリックするとalertName(event)が実行されます。
これを行うと基本的にHTMLが設定され、ボタン1またはボタン2のいずれかがクリックされるとalertName関数が呼び出され、イベントが渡されます。
イベントは、ページには基本的に今起こったことに関するすべての情報が含まれています。
そして、その情報から更に多くの情報を抽出することができます。
例えば、ここではalertName関数がどのように見えるかを示します。
function alertName(event)
{
var trigger = event.srcElement;
alert('You clicked on ' + trigger.innerHTML);
}
ここではイベントパラメータも受け入れていることに注目してください。
それで、私は何をしているのでしょうか？
triggerという新しいJavaScriptローカル変数を取得し、そのイベントのソース要素を要求しています。
これが私に伝えていることは、「このイベントをトリガーした、操作されたページ上の要素は何なのか」、ということです。
別の言い方をすると、どの要素がこの関数に効果的に渡されたのかを示します。
繰り返しますが、これは自動的に生成されるためです。
ページは私たちがどのボタンに触れたかを知っているので、基本的にここで何が起こっているのかというと、そのボタン(2つのうちのどちらか)がこの関数に渡されます。
次に、ドキュメント・オブジェクト・モデル(DOM)について説明するときに、これについてもう少し詳しく説明します。
トリガーのinnerHTMLにアクセスして、どのボタンがクリックされたかを確認できます。
さて、innerHTMLとは何でしょうか？
ここで少しスライドを数枚戻してみましょう。
innerHTMLは、buttonタグの間にあるものです。
この場合、Button1はinnerHTMLであり、Button2もinnerHTMLです。
これらのボタンをクリックすると何が起こるかというと、私がたまたまButton1をクリックしたとすると「You clicked on Button1」、または、たまたまButton2をクリックした場合は「You clicked on Button2」というアラートが表示されます。

繰り返しますが、ここではJavaScriptの表面をなぞっているだけですが、できることのいくつかを理解してもらい、先に進み、ドキュメントを見て、非常に幅広い内容を確認できるようにしたいと思いました。
CS50で学んだ基本原則のいくつかを適用するだけで様々なことができるようになり、知識が飛躍的に広がります。

DOM


JavaScriptに関するビデオでオブジェクトの概念を紹介しました。
このビデオでは、ウェブページ上のデータとコンテンツを操作するために使用できる、ドキュメント・オブジェクトと呼ばれる非常に特殊なオブジェクトについて話したいと思います。
さて、JavaScriptのビデオでの説明からオブジェクトには基本的に2つの異なるものが含まれていることを思い出したかもしれません。
これらにはプロパティ、またはデータと呼ばれるものが含まれています。
そしてそれらには、それらのオブジェクトだけに適用される関数であるメソッドが含まれています。
しかし、私たちがあまり詳しく説明しなかったのは、これらのオブジェクト、その中に何を入れることができるかということは、実際には非常に柔軟であるということです。
それらを使って様々なことができます。
そこにデータを入れるだけではありません。
他のオブジェクトや配列を中に入れることもできます。
そして、その大きなオブジェクトの中に入れたオブジェクトには、他のオブジェクトも含まれている可能性があります。
従って、単一のJavaScriptオブジェクト内にオブジェクトのこの入れ子構造を作成することができます。
これについて考えてみると、Cとツリーについての議論を思い出してみると、内部に1つのオブジェクトがあるツリー構造が作成されるようなものです。
それらの中に別のものがある、その中に他のものがある、というように。
JavaScriptの非常に特殊なオブジェクトの1つは、ドキュメント・オブジェクトと呼ばれます。
これは基本的に1つのウェブページのコンテンツ全体を1つのJavaScriptオブジェクトに編成するオブジェクトです。
ドキュメント・オブジェクトのメソッドとプロパティがわかれば、JavaScriptでそれらを変更できます。
様々なプロパティを値に割り当てることができます。
オブジェクトのメソッドを呼び出して、これらのプロパティの一部を変更すると、HTMLやその基礎となるpythonを編集する代わりに、JavaScriptのみを使用してウェブサイトのコンテンツや外観を操作できるようになります。
ここでは非常に単純なHTMLウェブサイトの例を示します。

<html>
<head>
<title>Hello,world</title>
</head>
<body>
<h2>Here's my page</h2>
<p>World,hello</p>
<a href="test.html">Link</a>
</body>
</html>

ここでは実際には何も起こっていません。
ただし、ご覧のとおり、htmlタグがあります。
その中にheadタグとbodyタグがあります。
headの中にはHello,worldというタイトルがあります。
bodyの中にはいくつかの異なるタグがあります。
h2、つまり第2レベルのヘッダータグ、段落タグ、およびリンクがあります。
そして、これらすべては実際にJavaScriptでドキュメント・オブジェクトとして表現できます。
実際には、これらすべてを階層的に配置することができます。
インデントで行っていることと似ています。
明らかに、1レベル更にインデントされたものは、別のレベルの中にネストされ、HTMLの別の部分の中にネストされます。
例えば、先ほど見た単純なウェブページのツリー構造は次の通りです。

ドキュメントがあり、その中にhtmlがあります。
そしてそれは、私たちが持っているhtmlタグによって表現されています。
ご覧のとおり、その中にあるものはすべてその下にネストされています。
html内には、1つ下のレベルに2つの主要なものがあります。
headとbodyです。
headに注目してみましょう。
headの中にはtitleがあります。
そして、titleの中には"hello,world"というテキストがあります。
また、オブジェクトまたはツリーの全く別のセグメントであるbodyにも注目することができます。
bodyの内部にはh2、p、およびaタグの3つの個別の部分がそれぞれ含まれています。
そして、これらすべては一種のツリーで表すことができ、HTMLのセクションにもマップされます。
従って、ドキュメント・オブジェクトには、他のオブジェクトと同様にプロパティがあります。
そして、それにもいくつかメソッドがあります。
また、これについてはすぐに説明しますが、ドキュメント・オブジェクト内を移動する方法を知っていれば、先頭から始めてページの必要なセクションまでドリルダウンすることができます。
サイトの外観を変更します。
それでは実際にIDEにアクセスして、ブラウザでドキュメントオブジェクトを自分で確認する方法を見てみましょう。
IDEを使用しているのでこれが先ほどスライドに表示されているHTMLと全く同じであることをすぐにお見せします。
ブラウザでこのページを開いてみます。
開発者ツールも開いてみましょう。
chromeではCtrl+Shift+Jを、MacではCommand+Shift+Jを使用してこれを行うことができます。
これによりJavaScriptコンソールが開きます。
JavaScriptのビデオで、例えばconsole.logを使用してページを閲覧しているときに、情報をコンソールに出力できることを思い出してください。
コンソールを使って他にもできることはあります。
コマンドを入力して何かを実行させることもできます。
それで、今回私がやろうとしていることは少し違うことです。
console.logと入力する代わりに、console.dirと入力します。
console.dirが行うことは基本的に私のページのコンテンツをディレクトリ構造で整理しようとすることです。
これは基本的にオブジェクトを記述する派手な方法です。
従って、オブジェクトの中に何が入っているかをある程度見ることができます。
そして、どのオブジェクトを見たいのでしょうか？
さて、ドキュメント・オブジェクトを見たいのでconsole.dir(document)とします。
ここでEnterを押すと、undefined未定義が得られたことがわかります。
しかし、その上にこのような#記号のついたdocumentが表示されています。
つまり、JavaScriptコンソールがドキュメント・オブジェクトを返します。
これを開けると、中にはたくさんの物が入っています。
そして、その多くについてここで話すつもりはありません。
このドキュメント・オブジェクト内で物事がどのようにネストされているかを示したいだけです。
というわけで、これ(#document)をパカッと開けてみます。
ここにはたくさんのものがあります。
しかし、私が本当に調べたいのはChildren(子)なので、ドキュメント・オブジェクトのChildrenプロパティだけを見てみましょう。
それが１つあることがわかります。
それを開けると、何が見えるでしょうか？
ドキュメント・オブジェクトの内部にはhtmlと呼ばれる子が１つあります。これについては数スライド前の図を思い出して頂けると思います。
これを開くと、更にChildrenが含まれていることがわかります。実際には、そのうち2つはheadとbodyです。
これを続けていくと、headの中に更にtitleタグが見つかるはずです。
それを開けて、そこに何が入っているかを見ることができました。
bodyの内部にはh2、p、aの3つの子があることがわかります。
それらはすべて、この大きなドキュメント・オブジェクト内にネストされています。
そして、JavaScriptを使用して、このオブジェクトを実際に操作することができます。
それを実現する方法について少し説明しましょう。

DOM Properties
繰り返しますが、ドキュメント・オブジェクトはコンソールで確認してわかったように、かなり大きいです。
そこにはたくさんのものが入っています。
作業を開始するときにすべてが実際に必要になるわけではないため、すべてを説明するつもりはありません。
ただし、ドキュメント・オブジェクトを操作するときに使用する可能性のあるいくつかの大きなプロパティといくつかのメソッドについては説明したいと思います。

例えば、そのうちの1つは一連のタグの中にhtmlを保持するinnerHTMLです。
例えば、titleタグのinnerHTMLはそのセクションに入るとすると、"hello,world"などページの実際のタイトルが何であれ、私が呼んだものとなります。
これはドキュメント・オブジェクト全体内のtitleタグ、titleノード、またはtitleオブジェクトのinnerHTMLです。

同様に、nodeNameは説明したばかりのノードのタイトル、または説明したばかりのオブジェクトのセクションになります。
HTMLとCSSに関するビデオで、特定のHTML要素にオプションのID属性を指定できたことを思い出してください。
通常、これをCSSのコンテキストで使用し、例えば、HTML内の1つの特定のノード、または1つの特定のタグのセットを特定のスタイルでスタイル設定します。
IDを指定すると、そのスタイルをページのどのセクションに適用するかをCSSが認識できるようになります。
従って、このプロパティを使用すると、その特定のノードのIDが何であるかを把握できるようになります。

parentNodeは1レベル上のノードへの参照です。
titleノードを見ている場合、そのparentノードはheadです。
これはtitleがツリー構造のheadの内側にネストされているためです。
childNodesはその逆です。それは、今いる場所から下がったところにあるものです。
従って、例としてbodyノードを使用し、ツリーのそのセクションに一種のネストを作成した場合、bodyノードのchildNodesはh2、p、aになります。
これらは、その領域の3つのchildNodesになります。

attributes、HTML要素の属性の配列です。
ここでの良い例はimgタグです。
JavaScriptを使用してドキュメント・オブジェクト内をナビゲートしているときに、imgタグに到達し、そのタグがどのような属性を持っているかを知りたい場合、imgの属性には、例えばソースが含まれていること思い出してください。
ソースファイルとは何でしょうか？
あるいは、高さと幅のオプションのパラメータも指定した可能性があります。
これらはドキュメント・オブジェクトの特定のノードに関連付けられたすべての属性になります。

次に、styleを設定します。
これはページの外観と雰囲気を実際にスタイル設定できるもう１つの方法です。
そして、この後実際に、このstyleプロパティを操作して、何かを変更する例を見ていきます。
ただし、これはページの特定のセクション、または部分のCSSスタイルに似ています。
これらは最も一般的なプロパティの一部です。

DOM Methods

よく見かける4つのmethodもあります。
他にもたくさんありますが、ここではドキュメント・オブジェクトの操作を開始する際に使用できる4つのものを紹介します。

getElementById(id)
ここではメソッドについて話しているので、これらはすべてオプションでパラメータを受け取ることができる関数であることに注意してください。
この場合、特定のIDを持つ要素を探しています。
それがそこに渡されるパラメータです。
従って、CSSを使用して特定の要素をスタイル設定し、その要素にオプションのID属性を指定した場合、このメソッドはドキュメント・オブジェクト全体をナビゲートして、ツリーの更に下位のノードの1つ、または更にそのオブジェクト内にネストされている特定のノードを見つけます。
ページのそのセクションを見つけて、その時点から下のMオブジェクトを返します。

getElementsByTagName(tag)
getElementsであることに注意してください。
これにより、例えば、Bタグを使用している私のすべてのインスタンスが検索される可能性があります。
従って、サイト内の太字(Bタグ)でタグ付けされたセクションすべての配列が得られます。

appendChild(node)
appendChildを使用すると、基本的に、現在いる場所の下に追加のノードを追加できるため、ノードの数を拡張できます。
ウェブサイトの本文部分に新しい要素をその場で追加したい場合があります。
恐らく、このメソッドを使用する前には存在しなかった新しい段落pタグやh3などを追加できます。

removeChild(node)
removeChildはその逆です。
HTMLのその部分、つまりノード全体をドキュメント・オブジェクトから削除することにより、ページのセクションが削除されます。

ここで、プログラマーにとって非常に心を痛める原因となることが1つあることを指摘しておきたいと思います。私も心痛める一人です。
getElementByIdを使用する場合は、Idのdが小文字であることに注意してください。
通常、識別にIDという用語を使用する場合、大文字のIと大文字のDを使用します。
ここで、大文字のI、大文字のDを何度誤って入力したかわかりません。
そして、それによってJavaScriptエラーが発生します。
これをよく知られている一般的な問題として特に指摘しておきます。

ドキュメント・オブジェクトはその中にネストされた多数のオブジェクトを含む1つの大きなものであるため、先頭から始めれば、これらのプロパティとメソッドを使用して、ドキュメント・オブジェクト内の他の領域に進む方法を見つけることができます。

jQuery
さて、これらの用語、プロパティ名、メソッド名の一部が非常に長いことに気づいたかもしれません。
その都度入力するのは大変なことです。
そこで、多くのドキュメント・オブジェクト操作を伴うプロジェクトに取り組んでいる場合、jQueryと呼ばれるJavaScriptライブラリを使用することが実際に非常に一般的です。
jQueryはかなり人気があります。
恐らく、現在使用されている中で最も人気のあるJavaScriptライブラリです。
もう10年ほど前から存在しています。
オープンソースのライブラリです。
そして、それは多くのことを行います。
しかし、それが特にうまく機能することの1つは、いわゆるクライアント側スクリプト、つまり、サイトの外観に影響を与えるためにコンピュータ上の内容を変更するコードを記述する作業を簡素化することです。
ドキュメント・オブジェクトの操作は、非常に優れた機能の１つです。
また、AJAXクエリも実行します。これについては、AJAXに関する別のビデオで説明します。
例えば、これの生のJavaScriptバージョンで行っていることは、ページの1つのセクションを変更することです。
document.getElementById('colorDiv').style.backgroundColor = 'green'
IDがcolorDivであるページの要素を見つけています。
従って、ドキュメントの先頭から始めます。
ドキュメント・オブジェクト全体、その下にネストされたノードすべてを調べて、colorDivと呼ばれるページのセクションを見つけます。
そして、そこに移動して、そのノードのstyleプロパティのbackgroundColorプロパティを緑に設定します。
基本的に、ここで行われていることは、ページの1つのセクションの背景色を緑に変更していることだけです。
純粋なJavaScriptでこれを行うには、入力する量が膨大です。
jQueryでは、トレードオフとして入力する内容が少なくなり、内容が短くなります。
コード行が短くなります。
しかし、それは少し奇妙に見えるでしょう。
$('#colorDiv').css('background-color', 'green');
これはjQuery構文を使用して、先ほどと全く同じことを実行します。
ドル$記号はjQueryの省略形です。
そして、私のページのcolorDivというセクションを探すことになります。
それがjQuery構文です。
そして、そのノードのCSS背景色を緑に変更します。
繰り返しますが、これは少し奇妙です。
しかし、これは同じことをより簡単に行う方法です。
従って、クライアント側のスクリプトを見るときには、長いJavaScriptバージョンとは対照的に、これをよく目にします。
ここで私がやりたいのは、IDEに戻ってその方法を少し説明することです。
JavaScriptとjQueryを使用して、ドキュメント・オブジェクトを実際に操作して、ウェブページのドキュメントのセクションの色を変更する方法の例をいくつか示します。
ここに、様々なボタンがたくさんある非常に単純なウェブページがあります。
このビデオを確認するときにこの例をダウンロードできます。
上部にChange my color!というセクションがあります。

ページのそのセクションの背景色を変更してみます。
それを4つの異なる方法で行うつもりです。
JavaScriptで書かれた背景色用の個別の関数があります。
背景色を変更する関数が１つだけなので、デザインが少し改善されるかもしれません。
イベントハンドラー(JavaScriptのビデオの最後を思い出してください)について少し話しました。
そのため、これはイベントハンドラーの実際の動作を見る別の機会になります。
そして、生のJavaScriptコードの代わりにjQueryを使用して全く同じことを行う例の１つです。
それでは、このサイトのコードがどのようなものかを見てみましょう。
私のIDEでこのタブを開きます。

///////////////以下、ダグが言うようにはコードをダウンロードできず、情報不足になってしまっています。具体的には4つの方法の内の一番下(jQueryのやつ)だけが上手くいきません。もしかして、これって、jQueryをライブラリとして取り込んだりしないといけないやつ…？/////////////////////////////

▼test.html
<html>
<head>
<!-- Four different ways of changing colors -->
<!-- (a) Five separate color changing functions -->
<script src="five.js" type="text/javascript"></script>
<!-- (b) one general color -changing Function -->
<script src="general.js" type="text/javascript"></script>
<!-- (c) an event handler method -->
<script src="event.js" type="text/javascript"></script>
<!-- (d) Using jQuery only -->
<script src="jquerycolor.js" type="text/javascript"></script>

<!-- CSS to format my div nicely -->
<link href="css/div.css" rel="stylesheet" />
</head>
<body>
<div id="colorDiv">Change my color!</div>
<h3>Individual Functions for Background Color</h3>
<div>
<button onclick="turnPurple();">Purple</button>
<button onclick="turnGreen();">Green</button>
<button onclick="turnOrange();">Orange</button>
<button onclick="turnRed();">Red</button>
<button onclick="turnBlue();">Blue</button>
</div>
<h3>One Single Function for Background Color</h3>
<div>
<button onclick="changeColor('purple');">Purple</button>
<button onclick="changeColor('green');">Green</button>
<button onclick="changeColor('orange');">Orange</button>
<button onclick="changeColor('red');">Red</button>
<button onclick="changeColor('blue');">Blue</button>
</div>
<div>
<h3>Event Handler for Background Color</h3>
<button onclick="changeColorEvent(event);">Purple</button>
<button onclick="changeColorEvent(event);">Green</button>
<button onclick="changeColorEvent(event);">Orange</button>
<button onclick="changeColorEvent(event);">Red</button>
<button onclick="changeColorEvent(event);">Blue</button>
</div>
<div>
<h3>Using jQuery</h3>
<button class="jQButton">Purple</button>
<button class="jQButton">Green</button>
<button class="jQButton">Orange</button>
<button class="jQButton">Red</button>
<button class="jQButton">Blue</button>
</div>
</body>
</html>

▼five.js
function turnPurple()
{
document.getElementById('colorDiv').style.backgroundColor ='purple';
}
function turnGreen()
{
document.getElementById('colorDiv').style.backgroundColor ='green';
}
function turnOrange()
{
document.getElementById('colorDiv').style.backgroundColor ='orange';
}
function turnRed()
{
document.getElementById('colorDiv').style.backgroundColor ='red';
}
function turnBlue()
{
document.getElementById('colorDiv').style.backgroundColor ='blue';
}

▼general.js
function changeColor(color)
{
document.getElementById('colorDiv').style.backgroundColor = color;
}

▼event.js
function changeColorEvent(event)
{
var triggerObject = event.srcElement;
document.getElementById('colorDiv').style.backgroundColor = triggerObject.innerHTML.tolowerCase();
}
▼jquerycolor.js
$(document).ready(function(){
$('.jQButton').click(function(){
$('#colorDiv').css('background-color',this.innerHTML.tolowerCase());
});
});

ご覧のとおり、ページの先頭でいくつかの異なるJavaScriptスクリプトをロードしているため、基本的にはいくつかのJavaScriptファイルのポンド・インクルードを行っています。
そして、これから行う4つの異なるタイプの色操作ごとに1つのファイルがあります。
これは、特にうまく設計されたHTMLではありませんが、ある程度の仕事は完了します。
背景色のボタン、パラメータとして、色を渡すボタン、イベントハンドラーのボタン、およびjQueryボタンのセットを含むセクションが1つあります。
そして、それらはすべて少しずつ異なって見えます。
それでは、個々の色の例を見てみましょう。
これには特に意味はありません。
紫に変える、緑に変える、オレンジ、赤、青に変える、という5つの異なる関数を書いたのがわかりましたね。
そして、純粋なJavaScriptを使用して背景色を変更しようとしている要素であるcolorDivのIDによって要素を取得するだけです。
そして、説明したようにスタイルのbackgroundColor属性を紫、緑、オレンジ、赤、青に設定します。
それが最も明らかだと思います。
次に、一種の汎用的なものを用意し、代わりに色をパラメータとして渡します。
そこで、HTMLを少し振り返ってみて、その関数にパラメータとして紫、緑、オレンジ、赤、青の色を渡していることを思い出してください。
そして、汎用のものでは、パラメータとして渡したものを何でも言っていて、代わりにcolorDivのbackgroundColorをその色に設定します。
次にイベントハンドラーをオンにします。
思い出してください。イベントハンドラー1を見ると、その行は5つすべてで全く同じに見えます。
ただし、イベントハンドラーに関する説明で覚えているかもしれません。
イベントハンドラーの仕組みは、ボタンをクリックした時です。
例えばイベントハンドラーは、何がトリガーされたのかに関する情報を取得します。
従って、例えば、どのボタンをクリックしたのかがわかります。
これらすべてのボタンについて、少しの間、もう一度HTMLにジャンプします。
これらのボタンにはすべて紫、緑、オレンジ、赤、青という異なるタイトルがあり、そこにある大文字は実際にボタンに表示される単語です。
従って、私はそれらすべてを区別する方法を持っています。
結局のところ、色の変更を機能させるには大文字の色名を渡すことができません。
小文字で渡す必要があります。そこで代わりにドキュメントのcolorDivのbackgroundColorを最初に呼び出されるイベントをトリガーしたオブジェクトに設定します。
そのinnerHTMLを見ていきます。ここでinnerHTMLプロパティが出てきます。
ここで私がやろうとしているのは、その文字列全体、つまり大文字のPを小文字のpに変換することです。
つまり、ここで何が起きるかというと、ボタンをクリックしたとき、例えば紫色のボタンをクリックしたときに大文字のPの紫がすべて小文字の紫に変わるということです。
そして、その単語purpleがbackgroundColorに設定している色になります。
繰り返しますが、私がやっていることはボタンをクリックすることです。
そのボタンにはタイトルがあります。
私はそのボタンのタイトル、つまりbuttonタグ間のinnerHTMLプロパティを取得して、すべて小文字にしています。
そして、それがbackgroundColorに割り当てることができる色になります。
このビデオに従っている場合は、自分でこれをいじってみて他の色に設定して同様に変更できるかどうかを確認することもできます。
そして、これのjQueryバージョンがあります。
ここでもう一度HTMLを見てみましょう。
これでは少し違って見えることに注意してください。
今回はonclick属性を指定しません。
jQueryボタンという新しいクラスを作成しています。
しかし、呼び出される関数は無いようです。
これはjQueryで起こっていることの一種の副作用です。
jQueryの仕組みの１つは、次のようなことができるということです。
これには匿名関数が使用されます。
JavaScriptには匿名関数という概念があることを思い出してください。名前の無い関数を使用することができます。
ここで何が起こっているのかというと、ドキュメント・オブジェクトが完全にロードされるか準備が完了すると、ページは次の関数を実行します。
これは、ページ上に表示されるクラスjqボタンのインスタンスをすべて検索するつもりだということです。
これらのボタンのいずれかがクリックされると、この別の匿名関数を実行します。
この関数は基本的に最後の例で見たことを実行します。
ボタンのテキスト全体を小文字に変換します。
ただし、ここではJavaScript構文の代わりにjQuery構文を使用して実行します。
繰り返しになりますが、ここで起こっているのはドキュメントであり、ページは完全に読み込まれています。
ページが完全に読み込まれると、次の関数がページに適用されます。
すべてのjQueryボタンには、この追加属性であるonclick属性が与えられ、ボタンをクリックすると、ボタンのテキストに基づいて色が割り当てられます。
jQuery自体については今回は詳しく説明しません。
まさに自宅でできる練習ですね。
ただし、ここで表示されているこのバージョンはjQueryスタイルで記述されていることを除けば、純粋なJavaScriptについて先ほど確認したイベントハンドラーのバージョンと全く同じです。
実際にページにアクセスすると、これら4つすべてが実際に機能します。
ここでは紫、ここでは緑と、ボタンをクリックできます。
これらはすべて全く同じことを行います。
これはいくつかの異なるテクニックを使って、それを実行しているだけです。
この例を使用して、JavaScriptでの関数の使用、JavaScriptでのイベントの使用、そしてjQueryの知識を深めて頂ければ幸いです。
このビデオで説明している内容以外にjQueryについてより詳しく知りたい場合は
下記リンクからjQueryドキュメントを参照して下さい。
https://api.jquery.com
ここは、jQueryを使用して実行できる興味深いことについて学ぶのに最適な場所です。
これについてはAJAXに関するビデオでもう少し詳しく説明します。

この記事が気に入ったらサポートをしてみませんか？