HTML5のすすめ

HTML5というコンピューター言語がプログラミング教育でも注目されています。元々HTMLはウェブサイトを表現するための言語でプログラミング的なことは行えなかったのですが、バージョン5からはJavaScriptというプログラミング言語との連携が密になり、また、CSS3という装飾技術を組み合わせることでスマホやタブレットなどサイズが異なるデバイスに対して柔軟に表示が行えるようになっているため教育現場での採用が増えています。

HTML5のサンプル1

簡単なタグによる見出しと本文の表現と画像表示

HTML5ではタグという記述方法を用いて見出しや本文、画像などを表現します。以下にサンプルを示します。
※Resultのタブを押すと結果が表示されます。

Resultの部分を選択するとHTMLに対応した表示内容が出力されます。

サンプルの中で使われている代表的なタグ

  • htmlタグ
  • bodyタグ
  • h1~h6タグ
  • pタグ
  • imgタグ

htmlタグやbodyタグはHTML文章全体やコンテンツ全体を囲むためのタグです。h1~h6は見出しを表すタグでh1が一番大きい大見出しになります。pタグは文章のパラグラフ(段落)を表すタグでimgは画像を表示するためのタグです。

HTML5でできること

  • Webサイトの制作
  • Webサービスの開発
  • スマホアプリの開発

Webサイトの制作

HTMLはWebサイトの制作において事実上の標準を確立した言語です。そのためWebで何かしたい人にとってHTML5は知っていて損のない技術です。HTML5を学べばWebサイトの作成や運用で役立てることができます。制作者はもちろんのこと企画やマーケティング担当の場合でもHTML5でできることは知っておくべきです。そうすれば制作や企画の話がスムーズになったり他のメンバーからの信頼を得やすくなります。

Webサービスの開発

Webサービスの表示や操作に関わるユーザーインタフェースはHTML5で作りますので、何かWebサービスを作りたい人はHTML5を学ぶ必要があります。また、最近ではサーバーサイド側のプログラミングでJavaScriptを使うことも可能です。

スマホアプリの開発

最近ではHTML5でスマホアプリ開発を行うケースが増えています。HTML5は画面サイズやOSが異なった環境に対してコンテンツを配信することを得意としているため、モバイル開発に向いています。具体的にはHTML5でコンテンツを作ってCSS3でスマホやタブレット用に見た目を整えます。そしてJavaScriptでプログラミングを行うことでモバイル向けのアプリを作成できます。HTML5によるアプリ開発はワンソースで複数OSに対応できるのがメリットです。

なおHTML5で作成したプログラムをアプリとして動かすためにはアプリ化ツールが必要です。アプリ化のツールとしてはCordovaやMonacaという製品がよく利用されており、Cordovaはオープンソース製品のためセットアップさえすれば無料で利用できます。

また、Monacaは商用サービスですがセットアップ不要でアプリ開発を行え、無料プランも用意されています。なおMonacaはCordovaによる開発をクラウドで行えるようにした製品のため、作れるアプリには殆ど違いがありません。

HTML5を学ぶメリット

HTML5をプログラミング教育で採用するメリットは『テキスト型』のプログラミングの中では表示に強くて『楽しい』からです。HTMLでは簡単な記述で画面上に写真やイラストを表示できますし、CSSを書けば文字のサイズや色なども変更できるため少ない授業時間でも達成感を得やすくなっています。このメリットはプログラミングを既に習得した人にとっては一見たいしたことのないように思えるかもしれません、しかし初心者にとってはコードの記述によってコンピューターの表示内容を操作できることはとても重要です。

ヴィジュアルプログラミング系の言語では表示が得意なものが多いですが『テキスト型』言語の中ではHTML5がお勧めです。なお、他のテキスト型言語で表示に強いものとしては『Processing(プロセッシング)』があげられます、こちらの言語もプログラミング入門用大学などで利用されています。テキスト型言語のスムーズな学習のために、『JavaScript』と『Processing』と『Java』とを3つ組み合わせて教えている学校もあります。

HTML5を学ぶのに必要なコスト

HTMLとCSSとJavaScriptで3つの言語に分かれているため役割分担が行われており学習は比較的容易です。それぞれ最低限のことだけを学んでおき、必要になってから追加で機能を学んでいくスタイルをとることができます。

学習リソース

私が関わった入門書で『Monacaで学ぶはじめてのプログラミング』という本があり、HTML5でプログラミングを始めたい初心者にはお勧めです。

この本は初心者の学習を想定して執筆段階で中学校に協力して頂き、実際に授業で実証実験をしたうえで出版しています。分かりやすい大きな文字とカラーのイラスト、それと適切なボリュームでの章立てを行うことで入門者が挫折しないように工夫してあります。またMonacaの利用を前提としているため環境のセットアップなどでつまずく心配がありません。

なお初心者のプログラミングに特化した分、HTMLやCSSは最低限しか扱っていません。より表現をリッチにしたい場合には別の本やWeb上のリソースを当たる必要があります。またJavaScriptによるプログラミングの基礎をもっと学びたい場合も、別の本に進む必要があります。

補足

コンピューター言語とプログラミング言語の違い

我々人間が普段話している言語は『自然言語』と呼ばれており、その対義語が『コンピューター言語』です。コンピューターで処理しやすい、あるいは人間の課題をコンピューターに伝えやすい構造や文法を持つ言語として意図的に作った言語がコンピューター言語です。

HTMLはコンピューター言語

HTMLはコンピューター上で文章の構造や表組み・箇条書きや画像などの情報を表現するための言語なのでコンピューター言語です。しかし、コンピューターを活用してプログラムを実行できるものではないためプログラミング言語ではありません。プログラミング言語と呼ぶためには、コンピューターの計算能力を活用して何か役に立つようなプログラムを記述できる必要があります。

JavaSCriptはプログラミング言語

コンピューター言語の中でも『プログラミング』を目的として作られた言語が『プログラミング言語』です。Webの世界には当初『HTML』だけが存在しました、そしてプログラムを記述してWeb上に動きや機能を付けるためにJavaScriptという言語が後から発明されました。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です