ゼロから始めるWEBの基礎[これからITを目指す人へ]

2020/05/09

web

「未経験からIT業界へ転職したい」
「WEBの知識を勉強したい」

そんな方の応援ができればと思い、『ゼロシリーズ』を企画しました。

どうもー。WEBエンジニアのガッチ（@gatchsite）です。

WEB業界に未経験で飛びこみ、すでに10年以上の経験がある中年です笑。そんな10年の経験が少しでも役に立てたら嬉しいです！

この記事ではざっくりの概要をまとめています。まずWEBの仕組み全体をイメージし次のステップへ進める土台になればと思います。

記事の内容はこちら

そもそもWEBって何？

「ワールド・ワイド・ウェブ」の略のようです。サイトのURLでよく見かけていたwwwが「ワールド・ワイド・ウェブ」です。

インターネットそのものを指す言葉としても使われています。

WEB = インターネットで良いと思います。

では、その仕組みを見ていきましょう！

インターネットは、パソコンをネットワークでつなげた集まり

パソコンを無数のネットワーク（LANケーブルなど）でつなげ誰でも見れるようにしたものがインターネットです。

WEBの和訳は「クモの巣」でしてクモの糸が網の目のようにつながっている様と、パソコンが無数につながっている様が似ているためWEBと表現したのかと思います。

インターネット用に使われているパソコンは、専用に設計され高性能なパソコンを使用していて「サーバー」と呼ばれます。

実は、普段使用しているパソコンをいじってインターネットから誰でも見れる状態にすることもできちゃうんです！

ただ、パソコンの性能が高くないためパソコンが壊れてしまったり、セキュリティ面で不安んがあるためやらない方が良いです。

ここで覚えて欲しいことは、「インターネット = パソコンのあつまり」ということです。

WEBやITと聞くと難しく思うことはなく、シンプルということですね！

WEBサイトはサーバー（パソコン）のファイルを見てるだけ

WEBサイトの仕組みもとってもシンプルです。

サーバーに保存されたファイルを見てるだけ。本当にそれだけなんですね笑。

例えばサーバーに「hello world」と書いたファイルを保存しておいて、サーバーにアクセスすると「hello world」と文字が表示される。

たったこれだけです。

「え？本当に？？」って思うかもですが、インターネットが始まり出した（1990年代なのかな？）では文字を表示するくらいが限界でした。

そこからだんだん技術が進化し、文字の大きさや色を変えたり、背景色や影を付けたり、レイアウトを自由に決められるようになっていきました。

この進化も実は単純で、複数のファイルを見て「ルール」に従って表示を変更しているだけです。

この「ルール」は担当ごとに分かれていて「html」「css」「Javascript」の大きく分けて３種類があります。

webサイトに必要なファイル

ここではWEBサイトの基本となる「html」「css」「Javascript」の担当をまとめています。

htmlファイル

htmlファイルは、html(ハイパーテキスト・マークアップ・ランゲージ)と言う言語で書かれたファイルのことを指します。

主にサイトのタイトルや文章、必要なファイルなどを書き、最初に読み込まれる重要な役割があるファイルです。

もう１つの役割として、文章の構成や意味を定義（マークアップ）することがあげられます。

「定義する？」と分からなくなった場合は、読みやすい本を思い浮かべると分かりやすいかもしれません。

本には章・段落があり文章全体を分割し分かりやすくする工夫がされています。

同じようにWEBサイトでも全体を分かりやすくするため、どれが章のタイトルでどれが段落なのか定義する必要があります。

その役割をになっているのがhtmlファイルです。

cssファイル

cssファイルは、カスケーディング・スタイル・シートと言ってスタイルを定義するファイルです。

スタイルというのは文字の色だったり大きさ、文字位置やレイアウトなど見た目に関わること全てを示します。

「文字を少し大きくしたい！」「太字にしたい！」そんな時はcssファイルを変更することになるかと思います。

また役割としてスタイルを定義するため、スタイルシートと読んだりもします。

最近では機能が充実してきているため、cssだけでアニメーションを作ることも可能になってきました。

JavaScriptファイル

ジャバスクリプトと読みます。略して「js（ジェイエス）」と読んだりもします。

極端な話をすると、html、cssだけでサイトは作れますし、なんの問題もありません。

しかしWEBサイトはリッチコンテンツ（アニメーションや、読み込みを早くするための施策など）が一般的となりJavaScriptなしでは少し物足りなく感じてしまうかもしれません。

このリッチコンテンツを作るためには、JavaScriptファイルは必要不可欠になってきます。

なくてもサイトは作れますが、JavaScriptは必ずWEBサイト制作の大きな味方になってくれますので覚えておくことをおすすめします。

ゼロから始めるWEBの基礎のまとめ

インターネットの仕組みから、WEBサイトの仕組み、サイトで必要なファイルをまとめてきました。

インターネットはパソコンあつまり
WEBサイトはファイルをみてるだけ
WEB サイトには、「htmlファイル」「cssファイル」「JavaScriptファイル」が必要

細かな話をすると違うこともあるかもしれません。ただ、最初の段階ではこのイメージで良いと考えています。

「この部分が分からない。」「ここって違わない？！」など気になることがあれば気軽に連絡してください。

ではでは、ガッチ（@gatchsite）でした。