前回のビデオでは､ ブラウザはHTTPSプロトコルを使って世界中のサーバーにリクエストを送り､ JavaScript､ HTML､
CSSファイルを受け取ってウェブサイトを表示することを学びましたが､ 今回のビデオでは､ ブラウザがJavaScript､ HTML､ CSSファイルを受け取り､ それを使ってウェブサイトを表示することを学びます｡
今すぐ
実際にどのように確認すればよいのでしょうか｡
さて､ 実際にデベロッパーを見に行くと､ これはGoogle Chromeを使用しています｡
そのため､ この部分はGoogle Chromeを使用することをお勧めします｡
開発者ツールに移動すると､ 小さなボックスが開き､ いくつかの情報が表示されます｡
さて､ ここで注目したいのは､ このネットワークタブです｡
そして､ このネットワークタブは､ サーバーから受け取る情報の種類を示すことになるのです｡
ここでリフレッシュすれば､ 気がつくはずです｡
ここにデータがあるんですか？
あとは､ フィルターがかかっていないことを確認したい｡
だから､ こっちは全部欲しいって言いたいんだよ｡
だから､ フィルターがないんです､ 全部｡
検索が行われることもなく､ またリフレッシュして
さて､ もっとたくさんのファイルを見ましたが､ これは威圧的に見えますね｡
今､ 学んだことについて考えてみよう｡
最初にHTMLファイルを取得することを知り､ それがたまたまこのファイルであった｡
こっちのタイプドキュメントと書いてある｡
そして､ ここをクリックすると､ これはHTML文書になります｡
つまり､ 更新ボタンを押したときのサーバーからの応答は､ 世界のどこかのサーバーに通信し､ そのサーバーがそのコンピュータにこれらのファイルを持っていることを記憶しています｡
そして､ ここに私たちのHTMLファイルがあります｡
スクロールしていけば
あれを見てください｡
ロマンスと皮肉と数学と言語のウェブコミックは､ こちらでご覧になれます｡
HTMLはWebサイトに表示されるテキストだと言ったのを覚えていますか？
さて､ これがサーバーが応答したHTMLで､ ブラウザはこれを読み込んでテキストを表示する方法を知っています｡
CSISはどうなんだ？
このCSISタブをクリックすると､ サーバーから送られてきたCSISファイルをすべて表示することができるんだ｡
そして､ ここでもまた､ 少し違って見えることがおわかりいただけると思います｡
HTMLとは異なる構文になっています｡
しかし､ ここでできることは､ 私が望むスタイルを実現することです｡
ここで､ 背景色を選択することができます｡
左の幅の位置を選ぶことができます｡
そして､ これによってWebサイトに求められるスタイリングが実現できるのです｡
そして､ JavaScriptに移動すると､ このウェブサイトが使用しているJavaScriptファイルが実際に表示されます｡
これで､ ここでJavaScriptを気にする必要はない｡
JavaScriptを使うと､ 今のところ気にする必要のない､ このウェブサイト上でのインタラクティブな操作が可能になります｡
さて､ ここで指摘しておきたいのは､ 画像やメディアなど､ 他にもいくつかあることです｡
そして､ 画像ですが､ 確かにこの中に使っている画像もあります｡
プレビューをクリックすると､ 画像を見ることができますね｡
しかし､ 結局のところ､ コンセプトは同じなのです｡
HTMLファイルを用意しました｡
私たちの場合は､ ちょうどこの辺りです｡
CSSを使わないでHTMLファイルを表示すると､ 私たちが持っているテキスト文字データだけが表示されるのがわかります｡
スタイリングであるCSS｡
そして､ このページをインタラクティブにするためのJavaScriptと､ いくつかの画像です｡
しかし､ 結局のところ､ これらはすべて､ サーバーから受け取った単なるテキストデータに過ぎないのです｡
つまり､ ウェブサイトを構築するためには､ HTMLファイル､ CSSファイル､ JavaScriptファイルの3つを作成する必要があるのです｡
実は､ インタラクティブ性を求めないのであれば､ JavaScriptファイルすら必要ない｡
CSSファイルさえも必要ないのです｡
スタイルが不要な場合は､ HTMLファイルを使うこともできます｡
では､ 次のビデオでは､ 最初のWebサイトを構築します｡
その中でお会いしましょう｡
バイバイ｡