[初心者][ホームページ作成] vol.1 Webの仕組みに関する基礎まとめ
Web系の知識も徐々に溜まってきたので連載を始めました😀
こんな人に向けて書いています
- 自分のWebサイト・ブログ・ポートフォリオなどを作ってみたい
- プログラミングを始めてみたい
- WordPressを始めたい/インストールしたもののいまいち良く分からない
- インターネットの基本的な仕組みを知りたい
- 興味はあるけど何から始めたら良いか分からない
それでは早速見ていきましょう。
インターネットとは
インターネットとは、全世界中の情報機器端末を互いに接続した、巨大なネットワークです。
全て語ろうとすると相当長くなりますが、Web製作を始める上では
- 世界規模のネットワーク
- パソコン・スマホ・タブレットなどの情報電子機器間を繋ぐ
- 利用には、ネットを繋ぐための環境が必要
ということを知っておけばとりあえず大丈夫です。
Webページ・Webサイト・ホームページの違い
結論から言うとWebサイトとホームページは同じ、Webページは違うものを指します。
具体的に解説します。
Webページ
Webページとはインターネット上に公開されている文書の1枚1枚を指します。
このサイトで言うと
- ホーム
- 留学のページ
- Web制作のページ
- プライバシーポリシーのページ
- お問い合わせのページ
など、ブラウザで1回に表示される各1ページのことを指します。
Webサイト
WebサイトとはWebページの集合から出来ています。
このサイトで言うと、https://yuhostyles.com/のサイト全体を指します。
ホームページ
ホームページはWebサイトと同じものです。
本来の意味では「ブラウザ/サイトを開いた時の最初のページ」になりますが、今日ではWebサイトの同義語です。
従って「ホームページ＝Webサイト」という認識で大丈夫です。
🌾ちなみにWebサイトという意味での「home page」は和製英語で、英語でWebサイトを指すときは「web site」一択になります。
Webページが表示される仕組み
Webページは「サーバー」と「クライアント」間のやりとりによって表示されます。
少し専門的な用語も出てきますが、ゆっくり行くので大丈夫です。
サーバーとクライアント
インターネットの世界において、
- 情報を提供する側＝サーバー
- 受け取る側＝クライアント
と言います。
これは英単語の
- Server：サービス(Service)をする人
- Client ：お客さん
から来ています。
具体的には以下です。
- サーバー＝莫大な情報を処理・提供してくれるプログラム(Apacheなど)
- クライアント＝ブラウザ（Chrome、Safari、Firefoxなど）
ブラウザ、例えばiPhoneで調べ物をする時に開くSafariですが、実はあれもクライアントの1種だったのです。
「サーバー」「クライアント」がそれぞれ何かわかったところで、次はWebページの表示のために、お互いがどんなやりとりをしているかを解説します。
サーバーとクライアント間のやりとり（通信）
これは簡単で、
- クライアントが表示したいものをサーバーにリクエストする＝リクエスト
- サーバーがそれに応える＝レスポンス
という風になっています。
具体的には以下の流れです。
- クライアントが見たいページのURLを入力、またはクリック
- それがサーバーに送られる（リクエスト）
- サーバーがリクエストを解析し、ブラウザで表示できる状態に処理する
- サーバーが処理したものをクライアントに送る（レスポンス）
私たちがiPhoneでSafariを開いて調べたいワードを入力し、見たいサイトをクリックしている裏ではこんなやりとりが起きています。
また、この時にサーバーとクライアントでは、「HTTP」という通信規約(プロトコル)を使って通信(やりとり)を行います。
これは通信におけるルールのようなものです。
URLで見たことがある「http://〜」というあれです。詳しくはまた次回以降の記事で解説しますね。
ブラウザとは
一応ブラウザについても説明します。
ブラウザとはWebページを閲覧＝ブラウズするためのソフトウェアです。
代表的なものはこの辺りです。
| ブラウザ | デバイス | 会社 |
| Chrome | PC,Mobile | |
| Safari | PC,Mobile | Apple |
| Internet Explorer | PC | Microsoft |
| Firefox | PC | Mozilla |
| Samsung Internet | Mobile | Samsung |
Webページを作る言語
Webページは、主に以下の3つの言語で構成されています。
- HTML
- CSS
- JavaScript
HTML
Webページの内容・論理構造に関わる部分です。
Webサイト全体の構造を示したり、サイト内の文章の部分です。
CSS
Webページの外見に関わる部分です。
サイトに色をつけたり、文字の種類や大きさを変えたり出来ます。
簡単なWebサイトであれば、HTMLとCSSで作ることが可能です。
JavaScript
Webページの処理・操作に関わる部分です。
サイトに動きを持たせることが出来るので、より利便性の高い、洗練されたサイトが作れます。
初心者におすすめな言語は?
初心者にも取り組みやすい意味で、まずはHTML/CSSを学ぶのがおすすめです。
それに、HTML/CSSの知識がある方が、JavaScriptを始めた時の理解もしやすいと思います。
検索エンジンとSEO
検索エンジン
検索エンジンとは、インターネット上の情報を検索するプログラムのことです。
検索エンジンを持つ代表的なサイトに、Google、Yahoo!、Bing等があります。
これらはクローラーを使って情報を検索しています。
クローラー
クローラーとは、Web上の文書を周期的に巡回し、解析して牽引情報を作成・データベース化するプログラムです。
ロボット型検索エンジンとも言います。
SEO
読み方は「エスイーオー」です。
SEOとは、検索エンジンを使って検索した際に、自分のWebページが上位に表示されるようにすることです。
クローラーにいかに効率よく巡回してもらうかも、SEOの1つのキーです。
名前の由来は、「Search Engine Optimization＝検索エンジン最適化」の頭文字を取ったものです。
最後に
以上！
今後、htmlやCSSなどのコンテンツを徐々に増やしていきます。
最後に軽くまとめます。
- インターネットは世界中の電子機器を繋ぐ
- Webページ＝Web上における文書の1枚
- Webページの集合＝Webサイト＝ホームページ
- Webページはクライアントがリクエストし、サーバーがレスポンスすることで表示される
- ブラウザ＝Webページを見るためのソフトウェア
- Webページを作る言語は主にHTML・CSS・JavaScriptの3つ
- 検索エンジン＝Web上の情報を検索する。情報を探すためにクローラーが巡回している。
- SEO＝検索エンジンで上位に表示させること
ピンとこない部分があったら各項目に戻ってもう一度読んでみてください。
質問も歓迎です。
それでは良いディベロッパーライフを😄