ウェブの閲覧

このモジュールのこの時点では、少なくとも 2 つのウェブブラウザーをコンピューターにインストールしておく必要があります。この記事では、ブラウザーの使用についてもう少し詳しく説明し、ウェブブラウザーの作業方法、操作する一般的なアイテムの一部の違い、情報検索方法について見ていきます。

メモ: 端末に既定でインストールされているブラウザー以外に何も持っていない場合は、いくつか取得してください。最新のウェブブラウザーのインストールを参照してください。

前提条件: コンピューターのオペレーティングシステムに慣れていること。
学習成果:
  • ウェブブラウザーの基本的な操作
  • ウェブブラウザー、ウェブサイト、検索エンジンの違い。
  • 情報の検索。

ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違い

この章では、ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンなど、ウェブ関連のさまざまな概念について説明します。これらの用語は、ウェブ初心者によく混同されたり、誤って使用されたりすることが多いものです。それぞれの意味をしっかりと理解しておきましょう。

あらゆる分野の知識と同様に、ウェブにも多くの専門用語があります。すべてを一気に押し付けるつもりはありませんのでご心配なく(興味をお持ちなら用語集があります)。しかし、最初に理解しておく必要がある基本的な用語がいくつかあり、これは読む際に常に聞く表現です。これらは互いに関連するものの、異なる役割を持つため、混同しやすいものです。実際、ニュースやその他の場所でこれらの用語が誤って使用されているのを時々見かけるので、これらをまとめて理解しましょう。

これらの用語と技術の詳細に関して詳しく説明しますが、これらを簡単に定義することが良いスタートるになるでしょう。

ウェブページ

Firefox や Google Chrome、Opera、Microsoft Edge、Apple Safari などのウェブブラウザーで表示可能な文書です。これらはよく単に「ページ」とも呼ばれることもあります。

ウェブサイト

グループ化され、通常はさまざまな方法で一緒に接続されたウェブページの集まりです。よく「ウェブサイト」または単に「サイト」と呼ばれます。

ウェブサーバー

インターネット上でウェブサイトをホスティングするコンピューターです。

検索エンジン

他のウェブページを見つけるのに役立つウェブサービスで、 Google、Bing、Yahoo、DuckDuckGo などがあります。検索エンジンは通常、ウェブブラウザーから (例えば、Firefox、Chrome などのアドレスバーで直接検索エンジンによる検索を実行することができる)、またはウェブページ (例えば bing.comduckduckgo.com) を介してアクセスされます。

公立図書館に簡単に例えてみましょう。図書館に行ったときに一般的に行うことは次の通りです。

  1. 検索インデックスを探して、読みたい書籍のタイトルを探します。
  2. その書籍のカタログ番号をメモします。
  3. 書籍が収蔵されている特定の書架へ行き、カタログ番号を見つけて、本を入手します。

ウェブサーバーと図書館を比較してみましょう。

  • 図書館はウェブサーバーのようなものです。いくつかの書架があり、複数のウェブサイトをホスティングしているウェブサーバーに似ています。
  • 図書館の様々な書架(科学、数学、歴史など)はウェブサイトのようなものです。それぞれの書架は個々のウェブサイトのようなものです(同じ本が複数の書架にあることはありません)。
  • それぞれの書架にある書籍はウェブページのようなものです。1 つのウェブサイトに複数のウェブページがあることがあります。たとえば、科学の書架(ウェブサイト)には、熱、音、熱力学、静力学などに関する書籍があります(ウェブページ)。ウェブページはそれぞれ固有の場所 (URL) で見つかります。
  • 検索インデックスは検索エンジンのようなものです。それぞれの書籍は図書館内にカタログ番号で特定できる独自の場所にあります(同じ場所に 2 冊の本を保管することはできません)。

ウェブページ

ウェブページブラウザーで表示できる簡単な文書です。文書は HTML 言語で書かれています (他の記事で詳しく説明しています)。ウェブページには、次のような様々な種類のリソースを埋め込むことができます。

  • スタイル情報 — ページの見た目の制御
  • スクリプト — ページへのインタラクティブ機能を追加
  • メディア — 画像、音楽、動画など

メモ: ブラウザーは PDF ファイルや画像などのような他の文書も表示できますが、ウェブページという用語は、特に HTML 文書を指します。それ以外の場合、単に文書(またはドキュメント)という用語を使用します。

ウェブ上で利用可能なすべてのウェブページには、固有のアドレスを使用して到達できます。アドレスをブラウザーのアドレスバーに入力するだけで、そのページにアクセスすることができます。

ブラウザーのアドレスバーにあるウェブページのアドレスの例

試してみる

ブラウザーであなたの好きなウェブサイトを読み込んでみてください。

ウェブサイト

ウェブサイトはリンクされたウェブページ (および関連するリソース) の集合で、固有のドメイン名を共有しています。指定されたウェブサイトの各ウェブページは明示的なリンク — 多くの場合はクリック可能なテキストの部分の形 — を提供しており、ユーザーがウェブサイトのあるページから他のページに移動することができます。

ウェブサイトにアクセスするために、ブラウザーのアドレスバーにドメイン名を入力すると、ブラウザーはウェブサイトのメインウェブページ、またはホームページ (略して「ホーム」と呼ばれる) を表示します。

ブラウザーのアドレスバーにあるウェブサイトのドメイン名の例

試してみる

あなたの好きなウェブサイトのメニュー項目やリンクをいくつかクリックし、様々なページを表示してみてください。

メモ: ウェブサイトのなかには、単一のウェブページで構成され、必要に応じて新しいコンテンツで動的に更新されるSPA という形態をとるものもあります。

ウェブサーバー

ウェブサーバーは、 1 つ以上のウェブサイトをホスティングするコンピューターです。「ホスティング」はすべてのウェブページや補助的なファイルをコンピューター上で利用できるようにするという意味です。ウェブサーバーは、任意のユーザーのリクエストに応じて、ホスティング中のウェブサイトから任意のウェブページをユーザーのブラウザーに送信します。

ウェブサイトウェブサーバーを混同しないようにしてください。例えば、誰かが「私のウェブサイトから応答がありません」と言うのを聞いた場合、実際にはウェブサーバーが応答していないのであり、その結果としてウェブサイトが利用できないのです。もっと重要なことは、ウェブサーバーは複数のウェブサイトをホスティングできるため、ウェブサーバーという言葉はウェブサイトを特定するために使用することはできず、大きな混乱を招く可能性があります。先に挙げた例で、「私のウェブサイトから応答がありません」と言った場合、そのウェブサーバー上のウェブサイトがすべて利用できないことになります。

検索エンジン

検索エンジンはよくウェブに関する誤解のもとになります。検索エンジンは特殊な種類のウェブサイトで、ユーザーが他のウェブサイトを見つけるのを助けるものです。

Google, Bing, Yandex, DuckDuckGo など、たくさんあります。一般的なものもあれば、特定のトピックについて専門化されたものもあります。好きなものを使いましょう。

多くのウェブの初心者は、検索エンジンとブラウザーを混同しています。明確にしましょう。ブラウザーはソフトウェアの一つで、ウェブページを受け取り表示するものです。検索エンジンはウェブサイトであり、人々が他のウェブサイトからウェブページを探すのを手助けします。この混乱は、ブラウザーを起動したとき、ブラウザーが検索エンジンのホームページを表示しているために発生します。これは、ブラウザーで最初にやりたいことが表示させるウェブページであることが明らかであるため、よく分かります。インフラ (ブラウザーなど) とサービス (検索エンジンなど) を混同しないでください。この区別はかなり役立ちますが、専門家によっては曖昧に話すこともあるので、心配しないでください。

こちらは、 Firefox のインスタンスが既定のスタートアップページとして Google 検索ボックスを表示している様子です。

Firefoxのナイトリー版でカスタマイズしたGoogleページを既定で表示した例

試してみる

検索エンジンを用いて、次の検索を行ってみてください。

  • 検索エンジンのホームページにアクセスし、検索したい単語を入力してみてください。
  • ブラウザーのアドレスバーに検索したい単語を入力してみてください。

ウェブはどのように動作するか: 基本事項

世界中のほとんどの地域で、ウェブは食器、自転車、車、歯ブラシと同じくらい日常生活に欠かせないツールになっています。信じられないかもしれませんが、毎日あなたがウェブサイトやスマートフォンのアプリをどのくらい頻繁に使うか考えてみてください。あなたが直接ウェブブラウザーにウェブアドレスを入力していなくても、あなたが使っているアプリはバックグラウンドでウェブの技術を用いてデータを取得し、表示していることがあるのです。

ウェブサイトにアクセスすると、あなたの最初の動作(例えば、ブラウザーにウェブアドレスを入力してEnter/Returnキーを押すこと)から、処理の結果が表示される(例えば、ウェブブラウザーにウェブサイトが表示される)までの間に、様々な処理が行われます。

  1. ウェブブラウザーは、アクセスしたいリソース(ウェブページ、データ、画像、ビデオなど)を、それが保存されているウェブサーバーに要求します。このような要求(および応答)は、HTTP (Hypertext Transfer Protocol) と呼ばれる技術を使用して行われます。HTTPでは、何が起こるかを記述するために動詞的な言語 (GETなど) を使用します。
  2. 要求が成功すると、ウェブサーバーは要求されたリソースを含むHTTP応答をウェブブラウザーに返します。
  3. 場合によっては、要求されたリソースがさらにHTTP要求を発行し、結果として応答が増えることがあります。例えば:
    1. ウェブサイトが読み込まれると、最初にサイトのホームページのメインインデックスHTMLファイルが要求されます。
    2. ブラウザーがそのファイルを受信すると、解析を開始し、そして追加のリクエストを行うための指示が見つかることがあります。上記で説明したように、これらは画像、スタイル情報、スクリプトなどを埋め込むファイルに関連している場合があります。
  4. すべてのリソースが要求されると、ウェブブラウザーは必要に応じてそれらを解析してレンダリングし、結果をユーザーに表示します。

ウェブの仕組みに関するこの説明は非常に簡略化されたものですが、現時点ではこれだけで充分です。ウェブページがウェブブラウザーによって要求され、レンダリングされる仕組みについては、後ほどウェブ標準モジュールで詳しく説明します。

今の段階では、ウェブブラウザーを開いて、上記の手順を考えながら、お気に入りのサイトをいくつか読み込んでみてください。

情報を検索する

ウェブ開発者は、覚えられない構文から特定の問題の解決策まで、情報の検索に多くの時間を費やすことになります。そのため、ウェブを効果的に検索する方法を学ぶことをお勧めします。

特定のウェブ技術に関する一般的な情報を探している場合は、MDN 検索ボックスにその名前を入力してください。たとえば、検索ボックスにbox modelfetch()またはvideo elementと入力して、何が表示されるか確認してください。必要な情報が見つからない場合は、検索範囲を広げて、検索エンジンで検索語句を試してください。

Javascriptでフィボナッチ数列を生成する方法その数が素数であるかどうかをJavaScriptで判定する方法など、特定の問題の解決法を探している場合は、プログラミングに関する問題解決に特化したコミュニティであるStackOverflowなどのウェブサイトで検索することをお勧めします。 繰り返しになりますが、特定のサイトで役立つ回答が得られなかった場合は、一般的な検索エンジンを使用してみてください。

試してみる

上記で示したようにいくつかの検索を試してみてください:

  • まず、上記に挙げた正確な用語を検索してみてください。
  • 次に、あなた自身の興味のあるトピックを検索してみてください。より具体的な単語やより曖昧な単語など、さまざまな関連用語を使用して、最も効果的な検索結果を探してみてください。
  • さらに試してみるには 検索のコツ を参照してください。

AIの活用

AIが生成した検索結果は、情報を受け取るための非常に一般的な方法です。AIは基本的にはとても強力な検索能力を発揮します。バックグラウンドで大量の検索を実行し、その結果を一つのわかりやすい回答にまとめます。一般的な選択肢としてはChatGPTGoogle Gemini、 そして Microsoft Copilotがあり、チャット形式で直接アクセスするか、AIを利用したアプリ内ヘルプや自動化システムを介してアクセスします。

コーディングを学習するときも、AIのチャットプロンプトはさまざまな方法で役立ちます:

  • 上記のような従来の検索を行うことができます。
  • あなたのコードが上手く機能しない場合は、このコードに含まれる問題点は何ですか?という質問とコードをプロンプトに添付することで、コード内のバグを見つけることができます。
  • コードブロックの最適化されたバージョンを生成することができます。正常に動作するコードを作成したが、それをより効率的に実行したい時や、より拡張性のある安定した方法を見つけたい場合に役立ちます。
  • コード内のバグの場所を知りたいだけでなく、それをデバッグするためにどのような戦略を使用するかについてのアドバイスが必要な場合などにも活用することができます。

試してみる

いくつかのAIツールを使用して検索を試してみてください。

AI使用への警鐘

実際のところ、AIはとても多くのことができるため、なぜプログラミングを学ぶ必要があるのかと疑問に思うかもしれません。

しかし、待ってください!以下のことが重要です:あなたは依然として、高いレベルで何をしようとしているのか、コードが何をしているのか、そしてどこでどのコードを使うべきかを理解する必要があります。そうでなければ、実際の問題を解決しようとする時に、あまり役に立てないでしょう。つまり、プログラミングを学ぶ必要はやはりあるのです。AIは答えをより早く見つけるのに役立つ優れたツールになり得ますが、尋ねられた質問をただAIプロンプトに入力するだけでは、何がどのように機能しているのか理解できません。

さらに:

  • AIツールは自信に満ちた権威ある口調で回答を提示しますが、誤解を招く場合や、完全に間違っている場合も少なくありません。AIツールが犯すエラーの中には、非常に微妙なものもあります。AIツールには本来の知能はなく、基本的には高度なパターンマッチングツールです。AIツールは他のソースから回答を編集するため、正しい情報だけでなく間違った情報も収集します。2つの正しいソースを組み合わせても、不正確な回答が作成されることがあります。
  • 新しい情報が利用できなかったり、古くて一般的なドキュメントに偏った回答になる可能性があるため、「JavaScriptでhogehogeを行う方法」といった質問に対して、時代遅れの手順が提供されることがあります。

そのため、AIが提供する回答を慎重に確認し、何でも疑問を持たずに信じ込まないようにする必要があります。

学習している段階では、AIであれ従来の検索エンジンであれ、答えを探す前に自分で問題を解決しようと時間をかけてください。そうすることで、より優れた開発者になれます。

検索のコツ

  • 上記の例で示したように、検索語句には使用している言語を含めるべきです。単にフィボナッチ数列を出力する方法と入力すると、Python、C++、Java、Rubyなど、さまざまな言語での解決策が表示されてしまいます。JavaScriptを学ぼうとしているときには、あまり役立ちません!

  • 役立つ回答を見つけたら、後で再び見つけられるようにブックマークするか、どこかにコピーを保存しておきましょう。同じ問題に何度も遭遇することに驚くはずです。

  • コードが特定のエラーメッセージを返す場合は、そのエラーを検索エンジンやAIプロンプトに入力してみてください。他の人々も過去に同じエラーに直面し、解決策をどこかに公開している可能性が高いです。

  • 可能な限り、MDNやStackOverflowのような推奨サイトを利用しましょう。

  • 検索エンジンには、単純な検索語句以上の結果を得られる高度な検索テクニックが多くあります。ant fish cheeseのような単純な検索語句を入力すると、それらの単語の任意の組み合わせを含む結果が返されます。しかし、ほとんどの検索エンジンは以下のような形式をサポートしています:

    • "ant fish cheese"(引用符付き)と入力すると、その正確なフレーズを含む結果のみが返されます。
    • "ant cheese" -fishは、antcheeseを含むが、fishを含まない結果を返します。
    • ant OR cheeseは、両方ではなく、どちらか一方の用語を含む結果のみを返します。私たちのテストでは、これはGoogleでのみ効果的に機能するようでした。
    • intitle:cheeseは、ページのメインタイトルにcheeseが含まれる結果のみを返します。

    メモ: さまざまな検索エンジンで使用できる技術は他にもたくさんあります。他にどのような技術があるか探してみてください。参考になるリソースとして Google 検索の結果を絞り込む, How to use advanced syntax on DuckDuckGo Search, and 高度な検索オプションなどがあります。