プログラミングの上達のコツと、お絵描きの上達のコツ 〜オモチャの15パズルをスケッチ〜

プログラム自学案内の17回目です。今回は、いままで紹介した基本技を使ってどこまでのことができるか、応用例のサンプルをお見せします。

これまでの記事はこちら。

前回の課題の解答例

これまで16回にわたって、HTML, CSS, JavaScriptの基本技を案内してきました。実は、前回までで、だいたい基本的なところは案内し終わったのではないか、と思っています。

前回の記事の課題の解答例を示します。 こちらです。

JSをクリックしてコードを確かめてください。もちろん、あくまでこれは解答例です。このとおりに書かなければいけないわけではありません。

ここまでの基本技でできることの例：15パズル

さて、これまで案内したJavaScriptの基本技を使うと、どれくらいのことができるのでしょうか。

じつは、相当何でもできます。

次の応用例を「Run Pen」で動かしてください。駄菓子屋だとか、ファミレスのレジ前なんかによくおいてある、「15パズル」と呼ばれるオモチャを再現したものです。

なぜ、こんなことが出来るのでしょう？ 「HTML」「CSS」「JS」のタブをそれぞれクリックしてみて、中のコードを読んでみてください。

ほとんど、これまで案内した基本技だけで、動いていることが分かると思います。 とはいえ、コードにさっと目をとおしただけでは、納得がいかない部分もあるはずです。

ぜひコードをコピペし、読者自身の手元において、書き換えたり、書き足したり、デバッガを使って動かしたり、分からないコードはググったりして、コードの一行一行の意味、納得いくまで理解してみてください。しんどいかもしれませんが、いい頭の体操になると思います。

一方で、「なんか納得いかないけど、このコードをコピペすれば、15パズルが動くのね」と簡単に考えてしまうのは、あまりよくありません。なぜなら、このコードを、自分の力で組み立てられるようにならないと、プログラミングが出来るようになった、とは言えないからです。

ためしに、「JavaScript 15パズル」でググってください。いくつかコードの例がみつかりますが、百人百様、この記事で載せた私のコードとはどれも、似ても似つかぬコードです。こういう似ても似つかぬコードでも、同じ目的を達成できてしまうところに、プログラミングの面白さがあります。

ここまでの記事を読んでも、15パズルは作れない

では。ここまでの16回の連載を読んだ方なら、上のサンプルのオモチャを自分で組み立てることができるのでしょうか？

記事を読んだだけでは出来るわけがない、というのが答えだと思います。ちなみに私もこのコードは一から考えたので、全部で100行くらいのこのコードを書くのに、何時間も時間をかけてしまいました。

連載の初回にも述べたとおり、プログラミングは、教えることも、教わることもできないものなのです。

お絵描きのたとえ

プログラミングが「学校で教えることも、教わることもできない」という点、お絵描きに似ていると、最近思うようになりました。お絵描きも、学校で教えたり、学校で教わったりすることはできません。

小学校の図工の授業で教わるのはなんでしょうか？

学校の先生が教えるのは、クレヨンの持ち方、絵の具の溶き方、絵筆の洗い方、線の引き方、定規の使い方などでしかありません。絵の描きかたそのものは、先生は教えようがなく、生徒自身が勝手にやるわけです。

小学校で受けてた図工の教育は全く同じなのに、なぜ絵が上手な人と、絵が下手な人がいるか。理由はきっと、学校には絵のかき方を教えられないからです。

そしていつの間にか、絵を描くのが好きなひと、資質のある人が、繰返し好きな絵をかきまくって、上達している。絵を描けない私から見ると信じられないような上手な絵を描くようになる。人から絵を教わったわけでもないのにです。

出来るようになるためには

ではプログラミングについて、できるようになるために、何をすればいいのでしょうか。考え方は絵と多分同じです。

上の15パズルよりも小さいもので良いので、自分みずからで作りたいもののアイデアを出して、そのアイデアを一部でもいいので、コードにしてみて、動かしてみる。これの繰り返しに、時間をかけるしかない、のではないでしょうか。

この自学案内の一連の連載は、基本技を案内することで、このアイデアの思いつきを促す、という方法で、読者の助けになることを目指したものでしかありません。

作りたいものを持つこと

つまり、プログラミングで作りたいものが思いつく人なら、すぐに上達すると言われるわけです。

言い方を変えれば、作りたいものだけ作れるようになれば良い、とも言えます。なんでもかんでも作れるようにならなくても良いし、最初から上手でなくても良いのです。

画家やイラストレーターにも、風景の絵が上手い人、美少女の絵が上手い人、メカの絵が上手い人、といろいろ得意分野があるものです。こういう絵の上手い人たちはきっと、描く対象が好きだからこそ、絵も上手になっているのでしょう。

模写はしても、トレースはしないこと

模範となるコードを読み込んで、それをコピペしたり参考にして、プログラミングをすることも、悪い事ではないとされています。

一方、プログラミングの上達を願って、模範となるコードをただタイプして書き写すことを「写経」といいますが、これには私はあまり感心しません。

また、お絵描きにたとえて恐縮ですが、模範となるコードを読み込むことが
好きな絵をマネて模写することならば、写経はただ、トレーシングペーパーで絵をなぞるようなことでしかないからです。トレーシングペーパーで絵をなぞることは、お絵描きとは似て非なる、全く別の行為です。下絵を何億回なぞっても、きっと、絵は描けるようにはなりません。

プログラミングスクールや、学習サイトのカリキュラムにそって学習すると、どうしても、模範となるコードの理解よりも、カリキュラムの進捗を優先させたくなるのが人情。すると、学習が模写ではなく、トレースに近い行為になりがちなので、注意してください。

批評にさらされること

さらにその先、上級者向けに言えることですが、自分の作ったものが人の目に晒されることで、上手になります。

美大の予備校なんかも、講師が受講生の絵を講評することで、受講生の上達を助けるようなことをしているらしいですね。

そして、私が本職の方むけに書いた転職案内の記事で指摘しているとおり、仕事についてしまえばイヤでも自分が書いたものが批評（レビュー）に晒され、飛躍的に腕は上がります。

優秀な先輩エンジニアや、尊敬に値する顧客による、前向きで的確なレビューは技術力や洞察力などの基礎体力を飛躍的に伸ばす機会になります。これは自己学習では決して得られない成長機会です。

もしITで食っていきたい方であれば、自分に満足いくまで学歴を積んだあとは、現時点で入れる会社で良いので、まずはITの世界に入ってしまうことをお薦めします。会社の吟味はあとからでも構いません、なぜなら、会社に入らないと腕は上がらず、腕さえ上げてしまえば、ITの世界では、いくらでも会社を変えることができるからです。そしてそもそも、会社選びに本当に必要な視点は、この世界の中に入らないと分からないものです。

まとめと次回予告

今回の記事では、これまで紹介した技術の応用例をお見せしました。
そのついでに、ちょっと説教臭い、例え話オジサンになってしまいました。

次回からは上級編。Node.jsの世界に入ります。