2019/8/28/

HTML・CSSはプログラミング言語に対して下位に当たるのか?

皆さんこんにちは。今日の記事のきっかけになったツイートはこちらです。

思ったよりも即座に反響がありましたので、私が思う所を記事にしてみようと思いました。

Webプログラミングをやるには、最も基本となるHTMLとCSS

プログラミング初心者の方は、まずHTMLとCSSを勉強している事が多いと思います。HTMLとCSSはブラウザ上でものを表示する上で唯一無二であり、JavaScriptは、ブラウザ側でリアルタイムにHTMLやCSSの構造を変更しているだけに過ぎません。

PHPなど、バックエンドで使われるプログラムは、サーバー側で実行され、実行結果がだけがブラウザに転送されます。

つまり、どのようなWeb系のプログラミング言語を使おうが、最終的にはHTMLとCSSになっているのです。そういった意味でWeb系のプログラム言語はすべて、最終的にはHTMLとCSSに変換されます。

HTML・CSSはプログラミング言語か?

次にこちらの方からのご指摘ですが、

確かに世間的にはHTMLやCSSコーディングを下に見ることもあり、コーダーがプログラマーに対して下位として考えている方も少なからずいらっしゃいます。「”プログラミング言語”でもないHTMLが出来るぐらいで…」という気持ちもあるのかもしれません。

しかし果たして、本当にプログラミング言語の下位にHTMLとCSSは当たるのでしょうか?

HTMLはプログラミング言語ですか?

こちらの記事(特に五十嵐さんの回答)によると、プログラミング言語の定義は「チューリング完全」であればプログラミング言語であり、そうでなければプログラミング言語ではないという判断になるそうです。

結論から言うと、HTML単体ではプログラミング言語とはなり得ないが、HTMLとCSSによってチューリング完全であることが証明されているそうです。(もう難しすぎるので記事をリンク先の記事を読んでください笑

HTML・CSSは本当に簡単なものか?

さて、果たしてHTMLとCSSは本当に言われるほど簡単なものだと言えるでしょうか?少なからず私が考えるHTMLとCSSの難しさは次のようなポイントだと考えています。

  1. ブラウザのレンダリングエンジン毎にCSSの解釈の差があり表示崩れが発生する(JavaScriptも同様にブラウザごとの差異がある)
  2. 実はコーディングが間違っていてもブラウザが空気を読んで、コードを修正している場合がある(これが原因で他のブラウザでは問題となる表示崩れを見逃してしまう場合がある)
  3. 文章(日本語)を理解して、正しいマークアップ(意味づけ)をしてあげる必要性(これが綺麗に出来ていなければ内部対策SEO的に不利になる)がある
  4. 表示される画面サイズが非常に多岐にわたっており、どのような環境下でも問題なく表示させなければならない(対応する幅が広がる)
  5. 上記に関連して、画面のトレンドが常に変わる(最近だと3:4ディスプレイ→横長、HD、フルHD、4K、スマートフォンの登場によるレスポンシブ対応など)

これらほぼすべての環境下で問題なくコンテンツを表示させる必要があります(勿論トレンドやシェアの問題で対応を切る場合もあります)。

最近では優秀なデバッガーやシミュレーションツールなどの登場で、一昔より前と比べて確認&修正作業は楽になり、標準化も進んだことによって随分とやりやすくなりました。しかしながら、対応の幅の広さについては未だ非常に広いものがあります。

「これぐらいのズレがあってもいっか」そう思っている経験者の方、いらっしゃいませんか?デザインを完璧にHTMLとCSSで表現するって結構大変な作業だと思います。

エラーが出てこない難しさがある、これがHTMLとCSSのハマりポイント

そして最後に”これ”がプログラムと違って最も難しいと思うのが、プログラムと違って、間違っていてもエラーが出てこない。という点です。

プログラムやサーバーでは、書き方などが間違っていた場合、エラーメッセージとして大体の問題の原因のあたりを付けてくれますが、HTMLとCSSに限って言えばエラーとして確認可能なものは構文だけです。(人間的に見て)間違ったデザイン崩れが発生していたとしても、HTMLとCSSの構文的には間違いがなく記述され、ただしく処理された結果、表示が崩れているという現象は、問題の原因特定が難しくなるばかりでなく、慣れた経験者にとっても解決が難しい作業になるでしょう。

数多くの進化をしてきたHTMLとCSS

何かと槍玉に上がる事があるHTMLとCSSでしたが、Webの進化とともに、中身も進歩してきました。

これまでは、各ブラウザが独自に機能を拡張してきましたが、W3Cと言う機関が登場し、Webの標準化も進んでいます。これは日本の慶応大学も仕様策定に関わっており、今後も快適なWeb開発環境の一躍を担っているのです。

また、最初のテキストだけで表現されていたWebサイトから現代のマルチメディアを前提としたWebサイトまで、今日まで様々な進化を遂げてきました。特にHTML5は文章のマークアップが前提であったHTMLから、Webを前提(ビデオや文章には無い「ヘッダー」「フッター」「サイドバー」等の概念をマークアップ可能)とした言語へと進化し、私達のより快適なWeb環境をサポートしてくれています。

CSS3はこれまで難解なJavaScriptを使ってしか表現出来なかったインタラクティブなデザインやアニメーションを非常に簡単な記述で表現可能になりました。

デバッグツールを上手く使いこなして作っていきましょう

「人間的に見たら間違っているんだけど、コンピュータ的に見たら正しく表現されていて解決が難しい」HTMLとCSSですが、世の中で言われている程、簡単ではありません。最近ではデバッグツール等便利なツールがありますので、デバッグツールと上手く付き合ってより問題の修正を素早く出来るようにトレーニングしていきましょう。

ビギナー向けデバッグツールで効率的に開発しよう (1/4)

デザイン通りに表現出来るよう心がけよう

いかがでしたか?

HTMLとCSSの工程は、デザイナーが作ってきたデザインを完璧に再現し、検索エンジンに正しく情報を理解させることにあります。簡単なようで難しいHTMLとCSSですが、フロントエンドエンジニアを目指す人以外も、ある程度様になるようコーディングが出来るようにしておいた方がより仕事の幅が広がると思います。まずは基本の「キ」を着実に出来るようにしておきましょう!