最近、ITやWebの話を見ていると、コード や HTML という言葉をよく見かけます。
でも最初は、
- コードって何？
- HTMLって何？
- パソコンの中だけで使う特別な言葉なの？
- 私は日本語で考えているのに、どうやってパソコンが動くの？
このあたりが、かなり分かりにくいと思います。
私自身も、最初は「コードとはPC内部の独自の言語みたいなものなのかな」と感じていました。
でも整理してみると、コードはもっとシンプルに考えられます。
今回は初心者向けに、
- コードとは何か
- HTMLとは何か
- 日本語で考えた内容が、どうやってPCの動作につながるのか
- CSSやJavaScriptとの違い
を、やさしく整理します。
コードとは何か
コードとは、ざっくり言うとコンピューターに「こう動いてください」と伝えるための指示文です。
難しく考えなくても、まずはこれで十分です。
たとえば、
- 文字を表示する
- ボタンを押したら反応する
- 画像を出す
- 計算する
こういった動きを、コンピューターに伝えるために書くのがコードです。
ひとことで言うと
コード ＝ コンピューターへの指示文
コードはPC内部だけの謎の言語なのか？
ここは初心者が混乱しやすい所です。
コードは、完全にパソコン内部だけで使う謎の言語というより、人間にもある程度読める形で書かれた、機械向けの指示文です。
つまり、私たちは日本語で考えた内容を、そのままPCに伝えるのではなく、コードという形にして伝えているわけです。
流れで言うと、こんなイメージです。
- 人間が日本語で考える
- その内容をコードで書く
- OSやブラウザ、プログラムがその意味を解釈する
- PCが実際に動く
なので、
私は日本語で考え、コードという「機械に通じる書き方」で伝え、OSやソフトがそれを解釈してPCを動かしている
こう考えるとかなり分かりやすいです。
ポイント
コードは「PC内部だけの謎の言語」ではなく、人間にも読める機械向けの指示文です。
HTMLとは何か
HTMLは、コードの中でもWebページの骨組みを作るためのものです。
たとえばWebページには、
- 見出し
- 本文
- 画像
- リンク
- ボタン
があります。
HTMLは、それらを
- これは見出しです
- これは本文です
- これは画像です
というふうに整理して、ページの土台を作ります。
ひとことで言うと
HTML ＝ Webページの骨組みを作るコード
CSSとJavaScriptは何が違うのか
HTMLの説明をすると、よく一緒に出てくるのが CSS と JavaScript です。
この3つを分けると、かなり分かりやすくなります。
HTML
Webページの骨組みを作る
CSS
色・大きさ・余白など、見た目を整える
JavaScript
ボタンを押した時の反応など、動きをつける
つまり、
- HTML ＝ 骨組み
- CSS ＝ 見た目
- JavaScript ＝ 動き
という役割の違いがあります。
家づくりでたとえると分かりやすい
この3つは、家づくりでたとえるととても分かりやすいです。
- HTML ＝ 骨組み
- CSS ＝ 外壁や色や見た目
- JavaScript ＝ ドアが開くなどの動きや反応
このたとえで考えると、HTMLだけではまだ見た目も動きも十分ではなく、CSSやJavaScriptが加わることで、使いやすいWebページになっていくと分かります。
家づくりのイメージ
HTML ＝ 骨組み
CSS ＝ 見た目・デザイン
JavaScript ＝ 動き・反応
初心者向けにひとことで整理すると
- コード ＝ コンピューターへの指示文全体
- HTML ＝ Webページの土台
- CSS ＝ 見た目
- JavaScript ＝ 動き
この4つを分けて覚えるだけでも、かなり頭が整理しやすくなります。
まとめ
コードとは、コンピューターに「こう動いてください」と伝えるための指示文です。
そしてHTMLは、その中でもWebページの骨組みを作るコードです。
さらに、CSSは見た目を整え、JavaScriptは動きをつけます。
最初は「コードってPC内部の謎の言語なのかな」と感じやすいですが、実際には、人間にもある程度読める機械向けの指示文と考えると分かりやすいです。
つまり、
- 人間が日本語で考える
- コードで機械向けに書く
- OSやブラウザなどがそれを解釈する
- PCが動く
という流れです。
最初は難しく感じても、
- コード ＝ 指示文
- HTML ＝ 骨組み
- CSS ＝ 見た目
- JavaScript ＝ 動き
こう分けて考えると、一気に理解しやすくなります。
コメント