小学生にhtmlを教えるために考えたこと

小学生、というか息子たちからhtmlを教えてほしいと言われて教えている。すでに教え始めてから2か月くらいが経過している。いまではわが子もYoutubeの共有から埋め込みコードをコピーしてきてはhtml内に貼りこんで喜んでいる。

手元に持ってこれた！！

なんというか、素直でとてもよい。もちろんダウンロードしているわけではなくプレーヤーが手元のhtml内に表示されるので再生することができる、ということなのではあるが、それだけでも楽しいらしく、自分用のプレイリストのようなものをつくって同時に再生したり時間を少しずらして再生してケタケタと笑い転げていた。

小学生にhtml？

2020年に必修化されることになったコンピュータプログラミングだが、おそらく小学生にはScratchを教えてくれるのだと思う。けっこうすごいものをつくっている子供もたくさんいるし、大人たちも本気になってプログラミングに興じている。あれは非常に面白い。お父さんお母さんもスマホのゲームばかりしてないで、たまには自分がつくるほうに回ってみるのも面白いものだと思うのだが。

さて、一方でおそらく中学生に教えてくれるであろうhtmlである。小学生、しかもまだようやく日本語を鉛筆で書くのができるようになった頃合いにも関わらず、htmlを教えるのは思っていたよりハードルが高い。なにしろ、英語が母国語でないので自分が書いている意味を理解できるようになるまでには英語の授業を受けるくらいの年頃になるのではないかと思う。さらに深刻なのがキーボードによるタイピングだ。小学校の授業にパソコンの時間があるそうなのだが、そこで教えてもらうことができる時間内ではとてもタイピングまでは到達できない。さらに大学生でもいまはフリック入力するほうが速いくらいなので、いまの小学生は間違いなくフリック入力のほうが速い。とはいえ、フリックだけで入力できるほどhtmlは生易しくはない。

とにかく厳しいのが角かっこの存在だ。テキスト向けのブラウザしかなかった時代に、テキスト中で「ここが大事なところ、ボールド！」などと目立たせようとすれば、こうしたちょっと変わった記号を入れて囲むしかなかったのだと思う。いまとなっては入力しづらいものでしかないため、静的サイトジェネレータなんてものがあるのだと思うが。しかしそうしたものを英語どころか日本語も学習途中である小学生に「rubyでこの…」などと言っても時間の無駄である。

息子に教えるときには、率直に角かっこで囲むのだと話をした。すると、意外にも率直に入力していくではないか。もちろんタイピングは両方の人差し指で、だが。

htmlを教えて気づいたこと

わたしもアホなほうなので、以前にサラリーマンだったころに後輩などに教えていたような内容を非常にゆっくりとひとつずつかみ砕いて教えようとした。しかし、これでは子供には合わない。なぜなら、できるようになることが１つずつで全然面白くないからだ。そう、おもしろくないものは悪としか言いようがない。興味を急速に失っていき、集中力も維持できないため余計に時間がかかる。大事なことは、楽しいということだ。

以前にわたしの電子書籍でいただいていたレビューを思い出した。Windowsでプログラミング入門しようというものだったのだけど、黒い画面ばかりでつらいだけだったという内容だった。たしかにつらい内容ではあった。ほぼなにもインストールしない標準のWindowsだけで延々とプログラミングをしていくというものだったので、書籍の前半にはコマンドプロンプトしか登場してこないものだった。言語は比較的やさしいものではあったけど…まぁ楽しくないよね。

さらに失敗したことは、身のまわりにあるhtmlを見せようとしてミニファイされたものを見せてしまったことだ。もはや呪文ですらない、呪い？怨念？のようなものがずらーーーっとならんださまは、息子から完全に集中力を失わせてしまった。これもほんとうにアホだった。

一方で、予想外の大きなリアクションをもらったのがhtmlがなんの略語なのかという説明だった。ほんとうに余談として話をしたのだけど、呪文のようなものが一気にリアルの世界へやってきたような感触を味わったようだった。どうしてそれが誕生したのか、どうしてそれが普及してきたのか、なにがハイパーなのか。そこで失われていた集中力はやや回復してきたのだ。

さらにはhtmlの文法としては誤っている状態であっても、h1でデカい文字がブラウザに表示されることや文字の色を変えたことも新しいおもちゃを手に入れたという感じだった。何が妥当か、なんて子供にはまったく関係がなかった。正しいも間違っているもなかった。まずは興味を持たなければ、そのあとの世界には足を踏み入れることはできないということだ。

さらに思っていること

小学生がhtmlを学習するために最適なテキストエディタが存在しないということがわかった。いま息子にはSublimeを使わせているが、メニューを日本語化していても文字が小さいうえ、半角や全角もまだ理解しきっていないのでブラウザで見たときにうまく表示されないことが多くて困っていた。もちろん文字の大きさはエディタの設定で変更することができるが、ふつうの過程でテキストエディタをダウンロードしてきてインストールしたり英語のメニューを日本語化してもらうのは学習に入るまでのコストが大きすぎると感じた。

なにかよいエディタがないものか… などと思って、またしょうもないエディタをつくりはじめた。今回はmonaco-editorをベースにしている。というのも、htmlはハイライトできたりしたほうが学習しやすそうだと考えたためだ。

f:id:m0t0k1m0t0k1:20170303114614j:plain