高校の”情報”の授業におけるマークアップ言語の闇

2015年11月11日

a1130_000078_m

昨日、公立高校の教諭(情報)となった友人と久々に喋ってたら、情報の授業の闇を感じたので簡単にまとめます。どっかで喋ってもいいなー、とか、むしろ情報教育学会に持っていく話題かなーとか、いろいろ悩んでいるところです。
 

15年遅れの「マークアップ言語」

高校で教えるマークアップ言語(html)は、構造とデザインの分離が行われていません。もっとわかりやすくいうと、cssを使わずに、未だに

<body bgcolor=red><font size=15>でっかい文字</font></body>

とかをやってます。
これをみて、「懐かしい」と感じた人は、15年前にホームページ制作とかをやったことがある方だと思います。私も書いてて懐かしいと思った。そうそう、昔、こんなコードを書いて、ホームページつくってた。
 
ただ、問題点は、これが「情報の教育」として高校生に2015年11月現在も教えられてることです。正直、その公立高校特有の問題だと思ったのですが、検定済み教科書でもhtmlの学習はこういう記述がされていて、最後1ページに「デザインを分離するためにcssという技術もある」みたいな記述がある程度。ちょっと、教育と称してこれはありえない。
「いい国作ろう鎌倉幕府」も、学説が変わったから2〜3年で「いいはこ作ろう鎌倉幕府」に変わったのに、htmlだけなぜ1998年で止まってるんだ・・・。
 
一応、非エンジニアでもわかるように、cssを使わない問題点をいいますと

  • htmlが文章構造の体をなさなくなる
  • webアクセシビリティに大変悪い
  • 世間では(少なくても仕事にしてるような人たちの中では)廃れたどころではなく、滅んだ技術

の3つが大きく上げられます。
htmlが文章構造、的にいうと、グローバルメニューの文章構造がわかりやすいです。これを文章構造を無視して書くと

<p>HOME | メニュー1 | メニュー2</p>

と書けなくもないです。けれど、文章構造を踏まえると

<ul>
<li>HOME</li>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>

と書くべきとなります。これは、メニューは文章構造上「リストから選択する」ものであるために、リスト構造で書いて、それとは別に見栄えはcssで整える必要があるからです。
Wordで、font-sizeをどれだけ大きくしても、見出しを選択しないと、見出し扱いされないのと一緒です。見栄えが同じでも、文章構造上は全く意味合いが異なります。
 
当然ながら、文章構造だけを書くべきところにデザインを記述するので、機械で読み込みにくくなる=音声読み上げソフトなどの対応が難しい=アクセシビリティに大変悪い、という、教育現場でアクセシビリティに悪いものを教えるという意味のわからない自体となっています。
「imgにはアクセシビリティ対応のためにaltを設定しましょう」とか教科書で書いてるのに、そもそもその技術の根本からアクセシビリティに悪いとか、どっからつっこんだらいいか分からない。
 
また、もう滅んだ技術なので、これを覚えたところで、社会にでて活かす場が全くない。今時、プリンタではなくタイプライターの使い方を教えてるようなものです。技術としてはあるけどさ・・・。
 
これが、文科省が2019年からプログラミングを盛り込んだ教育過程にするといっている「情報」の現場です。
 
 

なぜ、それが起きたのか

一口に「ありえない」というのは容易ですが、どうして放置されているかを考えようと思っております。ちょっと仮説ばかりで恐縮ですが

  • 高校生が文章構造とデザインというものを理解するのは難しすぎる(生徒が悪い)
  • 情報教員の技術キャッチアップが全く行われないため(教員が悪い)
  • 検定教科書が原因。さっさと改訂しろ(出版社が悪い)
  • 授業枠上、htmlにとれるのが5コマ程度なので、教える内容をいろいろ削りまくった結果(コマ数が足りないのが悪い)

と、4者それぞれが悪いということが考えることができます。
 
といっても、最初の「生徒が悪い」は論外ですね。最後に述べますが、小学生がhtml/cssを書いている事例があるので、もちろんそれがすべてとはいいませんが高校生の年齢的に相対性理論は理解できない!レベルのハイレベルなことではないです。
 
むしろそういう意味では、情報教員が技術キャッチアップできていない、という方が、根本的な問題に近しい気もします。その友人曰く、前任の教員も、副担当でついている教員もcssを理解していない状態らしいです。
そういう意味では、「情報」が、国語や数学と同じような立ち位置で教職として取り扱われること自体が難しいのかもしれません。数学の公式は20年経っても簡単には変わりませんが、プログラミングは今すごい勢いで変化しています。
にも関わらずに、数学の教員と同じように情報の教員が振る舞うのは、制度的に破綻してしまっているのかもしれないです。
 
そして、出版社も問題です。教員は基本的には教材に沿って教えるので、教材に載っていないと問題点として認識してても授業に反映させにくいですし。というか、出版社、font size=10 とか、改訂の時に議論にあがらないのでしょうか。
でも、ユーザである教員が理解できないものをだしたところで購入してもらえないし、苦肉の策なのかもしれません。「いいはこ作ろう鎌倉幕府」並に、世論として盛り上がらないと、今、主流がこうだから、と扱いにくいのかも。
 
最後の問題は、プリンタを教えるのは時間かかるからタイプライター教えますよ、という教育として本末転倒なので、ありえないパターンですね。どうせ、背景色を変えて、画像を中央寄せするぐらいしか授業ではしないわけですから、生徒が理解に必要な時間が倍になるとかそんなことはないですし。候補としてあげましたが、「生徒が悪い」並にセンスがない候補でした・・・。
 

CoderDojoにみる教育の可能性

いろいろ問題点とその要因を見てきたのですが、即座にフレームワークを変えることで対処できる問題ではないですね。まずはこれがありえないということを周知して、と少し長い道のりになりそうです。
といって、このまま夢のない結論で終わるのも何なので、CoderDojoの取り組みについて軽く触れます。
 
私が知っているのは、「CoderDojo西宮 / 梅田」なのですが、これがすごくいい取り組みなのです。
現職エンジニアが、小学生にプログラミングをボランティアで教える定期イベントなのですが、当然現職プログラマですので廃れた技術とか効率の悪い技術を「教育のために」教えることはしません。
子どもがつくりたいものをつくりたいようにサポートする形の場なので、子どもたちにとっては「勉強の場」ではなく「ものづくりの場」で、ノコギリを動かして木工作業をキャッキャとするように、和気あいあいとパソコンに向かって創作をはじめます。
1回の開催は2時間半程度なのですが、その中でhtml/cssは普通に覚えるし、ビジュアルプログラミング言語「Scratch」でコーディングをはじめた子どもがいるかと思えば、PHPでがりがりとwebアプリを作ったり、Jenkinsで継続的インテグレーションを行って、そこにいる大人たちを「俺たち負けてる・・・」と凹ませたりします。
 
ちなみに、すべてボランティアと寄付で運営されているので、ぜひこの取組が面白いと感じましたらご寄付をご検討いただければと思いますー。
  
「それは現職エンジニアがいるからできる」「そこにはスーパー小学生しかいない」と穿った見方もありますが、私はこれが情報教育の最先端であり、子どもたちの「学びたい」「作りたい」をどのようにサポートするかという部分と、教育課程上「学んでもらわないと困る」という部分をどうやって組み合わせるかの試行錯誤が、今後の教育現場に求められるところだと思っております。
 
ざくっとした概論ですが、何らかのご参考になりましたら。
それでは、また。

slackチームに参加下さい

ng-onsenui2.slack.com

OnsenUI2(Angular2)について知見を共有する場です。Angular2に限ってOnsenUI2を議論できる場がなかったのでつくりました。これから使い始めるという方はぜひご参加ください。
https://ng-onsenui2.herokuapp.com/

Ionic2.slack.com

日本語情報が少ないのでこちらで知見を共有できればと思います。お陰様で参加者100名を超えました。ありがとうございます。
https://ionic2-ja.herokuapp.com