TENTOで学ぶプログラミング言語⑨ HTML
もっとも身近な言語
HTML(HyperText Markup Language)は、ウェブページを形づくるために必須の言語です。ブラウザを使って見るページにHTMLを使っていないページはないし、スマホアプリなどにも多く活用されています。「もっとも接することの多い言語はHTMLである」と言っても言い過ぎにはならないでしょう。
たいへん重要な言語ですから、TENTO教務のリーダー、倉本大資先生に語ってもらうことにしました。
「語るのはいいんですけど……どうして私なんですか」
倉本先生はScratchの第一人者として知られ、著書もすくなくありません。それがなぜHTML? 適任はほかにいるじゃないの、とはもっともなご指摘です。
先生は、子どものときにBASICを習得して、プログラミング言語を知ったあと、インターネットを知ってHTMLを学ぶという体験をなさいましたよね。
「そうですね。小中学生のころにはBASICをやっていました」
この体験、とても貴重なものなんです。まず、今はまるっきりゼロのところにHTMLがやってくるという体験をすることができない。まるで空気みたいに、HTMLがあるのが当たり前になってしまっているからです。人は意識せずに、スマホとかでHTMLでつくられたページを見ています。それが「ない」状態は望んでも体験できないんです。
「あー、なるほど」
さらに、インターネットが……HTMLがやってきたとき、ある程度知識があって、それがどういうものか認識できた人は少なかったと思います。そのときすでに基礎素養があった先生はかなり特殊な例ではないかと思うのです。
「うーん」
ということで、まずは「出会いの衝撃」について語っていただきたいと思います。
悩ましき古い記憶
「HTMLは文字を大きくしたり色をつけたり加工が容易ですから、いろいろいじったりはしました。グラフィックみたいなものを描いてみたこともあります。それとはすこし時期がずれますが、自分でホームページつくって公開していたこともありますね。……黒歴史ですけど(笑)」
「もっとも、あまりハマることはできなかったんです。ご指摘のとおり、HTMLが出てきたころ、私はBASICでゲームをつくったりしていました。@を勇者にして、#をかさねて道をつくったり(笑)。そういうのが楽しいなと思っていたんですが、HTMLはあまりそっちには向いていないんです。JavaScript(ウェブページでアニメーションを表現したりする)もそれなりに使っていましたが、それでゲームをつくろうとは考えなかったですね」
「その後社会人になりまして、ウェブページをつくるための言語(HTML、CSS、JavaScript)をそれぞれきちんと学ぶ機会を得ました。とはいえ、熱中してやるという感じではありませんでした」
言語の性格上、あまり好きになれなかったということでしょうか?
「というよりも、HTMLの仕様が古いものとは変わっていたことが大きいような気がします。今は装飾的要素はCSS(スタイルシート)で記述して、HTMLは骨組みだけ、というように、役割がハッキリわけられていますが、以前はそうじゃありませんでした。CSSが確立していなくて、HTMLでページの装飾的な部分も表現していたんです。そのときの記憶があるものですから、ついつい古いやり方でやりたくなっちゃって。<table>ですべてを表現してしまったりとか、<font>使いたくなったりとか。もちろん知識では今はそんなことはしないと知っているんですが、古い記憶がノイズとして現れるんですね。まさに亡霊のように(笑)」
「今、フロントエンドエンジニアと呼ばれるような人がやってるようなことは、コードも読めるしそれなりに知識もあるからわかるんだけど、自分じゃやりません。記憶とごっちゃになって、悩ましいので(笑)」
HTMLは学ぶべきか?
TENTOの子たちも「自分のホームページをつくりたい」と考えてHTMLを学ぶ子が多いと聞きました。
「そうですね。<h>を使って文字列を見出しっぽくするとか、大きさに変化をつけるとか、そういうところから学んでいきます」
WordPressみたいなツールを使えば、ブログの運営は容易ですよね。デザインも豊富だし、カスタマイズもできて、コード(HTML)の知識がなくても運営することができます。また、STUDIOのように、ノーコードでページのレイアウトをしてくれるツールも多くあります。HTMLを使ってイチからページをつくっている人は、現在では少数派になっているのでは?
「そうかもしれませんね。ただ、だから学ぶ意味はまったくないのかというと、まったくそんなことはないように思うんですよ」
「たとえば、ウェブの文章は文節にわけられているのがふつうですよね。HTMLの知識があれば、ああこれは文章を<p>で囲っているんだなとか、<h>タグで大きく見せているんだなとか、わかるんです。WordPressに内蔵のエディタで編集作業をおこなっていても、じっさいには手打ちで<p>や<h>などのタグをつけるのと同じことをしてるんですよ。これは現実に役に立つ場面も多いんです。WordPressをいじったことがある人はご理解いただけると思うのですが、じっさいにコードに手を入れることができるなら、そうでないやり方ではひどく手間がかかるようなことが瞬時に解決してしまったりします。そういう効能は確実にありますし、なにより自分が今なにをしているのか理解できるのが大きいですよね」
「ウェブページにはさまざまな入り口があります。デザインから入る人もいれば、機能に注目する人もいるでしょう。コンテンツを次々に生み出していって、ページを充実させたいという人もあるでしょう。それぞれの関わり方があると思いますが、『今、なにをしてるのか』『それはどういう意味があるのか』を知っておく必要はあるのではないでしょうか。近年はChatGPTみたいなツールが発達して、『カッコいいページつくって』と言えばそうコーディングしてくれますが、それとて自分なりの手直しが必要になります。そのときは結局、コードをいじっていくしかありません。そういう知識って、じっさいに手でタグを打っていって、HTMLでファイルをつくっていくことでしか身につかないんです。ウェブページをめぐる状況は今後、変わっていくかもしれませんが、HTMLを知り理解する能力の重要性が失われることはたぶん、ありません。すごく大事な知識なんだよ、とは声を大にして伝えたいですね」