みなさん、おはようございます！タカハシ(@ntakahashi0505)です。
こちらの記事は、タカハシが音声メディアVoicyの「スキルアップラジオ」にて放送した内容から、ピックアップしてお届けします！
今回のテーマは、今さら聞いてもいいIT用語 #24: 「HTML」です。
なお、以下で実際にお聴きいただくこともできます！
では、よろしくお願いいたします！
今さら聞いてもいいIT用語「HTML」
今日は、今さら聞いてもいいIT用語シリーズ第24回をお送りしていきます。
このシリーズは、今さら人には聞けない、でも知っておいた方が良い気がする、そんなIT用語を耳からこっそり学べるシリーズとなっています。
今日紹介するIT用語は、「HTML」になります。
みなさん普段使っているWebなんですが、こちらを支える非常に重要なIT用語になりますので、ぜひ耳からこっそり学んでいただければと思います。
Webで重要な役割をはたす「HTML」とは
今となってはなくてはならなくなりましたWebですが、僕らが見ているWebサイトを表現するために、重要な役割を果たすのがHTMLということになります。
HTMLというのは、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）、この略になります。
簡単に説明すると、Webページを作るときに使う言語、ということになります。
詳しく説明するのであれば、ハイパーテキストの部分とマークアップ・ランゲージ、日本語で言うとマークアップ言語になりますけど、この2つの部分に分けて考えると理解しやすいと思いますので、それぞれお伝えしていきたいと思います。
マークアップ言語とは
まず、後半のマークアップ・ランゲージ、「マークアップ言語」について見ていきたいと思います。
文書の役割を目印で表現
マークアップというのは、マーク、つまり目印をつけるということを表します。
Webページというのは1つの文書になるわけです。文書というのは文字の羅列のように見えますが、実はそういうわけではなくて、部分部分で役割、構造を持っています。
たとえば、あるウ記事であれば、記事のタイトルがありますよね。また、記事の中にはいくつかの見出しがあります。そして、各見出しの配下にそれぞれ文章があるのですが、その文章はいくつかの段落によって構成されています。
文の中で強調したいところに関して言うと、その単語や一文について太字にして強調しますよね。
つまり、文書の中でも、「ここからここまではこういう役割を持っていますよ」という、そういったことを表現する必要があります。それを「目印をつけて表現しよう」というのがマークアップ言語ということになります。
目印をどうやってつけるのか
WebページはHTMLで書かれているのですが、そこでのマークの付け方、そのルールは、「タグ」と呼ばれるもので囲むというものです。
たとえば、その記事のタイトルであれば、<>の中にtitleというアルファベットの文字列、<>の中に/titleと書かれた文字列、その2つのタグに囲まれたテキスト、これをタイトルとしましょう、このようなルールになっています。
また同様に、1番大きい見出しであれば、h1タグというのが用意されていて、それに挟まれた範囲をその大きい見出しとしましょう。
段落であれば、pタグと呼ばれるタグが用意されていて、その間を段落としましょう、とこのようにルールが決められているのです。
ハイパーテキストとは
では、ハイパーテキスト・マークアップ・ランゲージのもう1つの部分、「ハイパーテキスト」のところについて解説をしていきます。
テッド・ネルソン氏が提言
ハイパーテキストというのは、テキストを超えた文章と訳されます。これは、1965年にアメリカの学者テッド・ネルソンという方が提言した概念なのです。
ハイパーというのは「～を超える」という意味があるのですが、要は、ハイパーテキスト、どのようにテキストを超えたのかという話なんです。
テキストとテキストが繋がる
それは、テキストとテキストがインタラクティブに繋がる、そういった意味で、これまでのテキスト、文書を超えた概念なのです。
もうみなさんすでにイメージが湧いていると思うのですが、私達が開いたWebページ、「リンク」が貼ってあるところをクリックすると、別のWebページが開きますよね。
これまで紙の文書では実現できていなかった、文書と文書を繋ぐ、こういった概念がハイパーテキストであり、コンピューターが登場したことによってこのハイパーテキストを実現できるようになったということなのです。
そして、インターネットが登場したことによって、インターネット上の大量の文書同士が繋がり合うことができるようになったということになります。
ハイパーテキストを結びつける仕組み
なお、ハイパーテキストを結びつける仕組み、これを「ハイパーリンク」と言います。
また、言い換えるのであれば、「HTMLとはハイパーテキストを作成するための言語」と言うことができます。
ちなみに、文書と文書を繋ぐハイパーリンク、これを実現するのは、タグで言うと「aタグ」と呼ばれるものです。aはアンカーのaです。aタグの間にリンクしたいテキストを記述します。そしてリンク先の情報として「href」と呼ばれる属性にリンク先のURLを指定する、このような書き方になります。
WebページのHTMLを見てみよう
さて、HTMLを口頭で説明してきましたが、より理解するために、ぜひみなさん、今開いているWebページ、そのHTMLがどういう風に書かれているか、ご覧いただきたいと思います。
ブラウザとしてGoogle Chromeを使っているのであれば、右クリックをしてメニューの中から「ページのソースを表示」、もしくはショートカットキーCtrl + U、Macであればcommand + option + U、こちらでそのページのソースを見ることができます。ぜひ一度覗いてみていただければと思います。
テッド・ネルソン氏のエピソード
さて最後に、ハイパーテキストの創設者テッド・ネルソン氏の1つのエピソードを紹介します。
テッド・ネルソン氏の経歴
テッド・ネルソンさんは元々技術者ではなかったそうなんです。
何をされていたかというと、元々メディアの方で、ショービジネスとか出版業界とか、そういったお仕事をされていたそうです。世界初のロックミュージカルを手掛けたのもテッド・ネルソン氏と伝えられています。
「インタラクティブな動作」のイメージ
当初、ネルソン氏が「コンピューター画面がインタラクティブに動作する」、こういったものをみなさんに伝えていった時に、「誰もがなかなかそれをイメージできないでいた」という話なのです。
しかし、ネルソン氏にはそれがありありとイメージすることができました。というのも、「インタラクティブな文章というのは当時でも存在していた」と言っているんです。
たとえば「児童書」、本のページを切り離したり、新しく付け足したり、本の中にある時計の針をくるくると回したり、そういった本と読者が相互に作用し合う仕掛けというのはすでに存在していたと、そういったイメージがベースとなってコンピューター上でもインタラクティブに動作する、というイメージが湧くことができたということなんです。
自身の経験から新しい発想へ
このネルソン氏のエピソードは、非IT人材のみなさん、ノンプログラマーのみなさんにとってはとても重要な意味を持つものと僕は感じました。
元々メディア業界、他の業界の経験、知識、それらの蓄積があったからこそ、ネルソン氏にはハイパーテキストという新しい発想をありありと思い描くことができたわけです。
もちろん、ITに関する一定の知識、経験は必要だとは思うんですが、それを身につけることによって、あなたがこれまで蓄積してきたそれぞれの分野での知識、経験が大きく花開く可能性がある、そういったことを教えてくれます。
ノンプログラマーのみなさんがITやAIについて学ぶことの大きな大きな意義が、こういったところにあるんじゃないかなと思います。
まとめ
ということで、今日はVoicy「スキルアップラジオ」の放送から「今さら聞いてもいいIT用語 #24: 「HTML」」をお届けしました。
もし、「こんなIT用語も紹介してほしい」ということがありましたら、ぜひコメントなどで教えていただければと思います。
本当に非IT職のみなさん、それぞれの専門で深い経験や知識がおありだと思いますので、ぜひITとかAIとか、そういったものに触れてみていただければと思います。あなたならではの、あなたしか思いつかないそういった発想、アイディアが出てくる、そういったワクワクした未来に期待できるんじゃないかなと思います。
そして、身の回りにあんまりITとかAI学ぶ仲間がいない、そういった方はぜひ学習コミュニティ・ノンプロ研を訪れていただければと思います。楽しくワクワクしながら学ぶ仲間がたくさんいますので、ぜひその中で刺激を受けていただければと思います。
タカハシのVoicyの放送はこちらからお聴きいただけます。
チャンネルのフォロー、コメント、SNSでのシェアなどなど、楽しみにお待ちしております。
では、また。
