タグ: JavaScript

今年に入って何度かエントリーしていたプログラミングスクール「256times」が、本日をもって全カリキュラムを終了しました。

ドットインストールのプログラミングスクール「256times」参加します ? カイ士伝
https://bloggingfrom.tv/wp/2019/01/16/15950

256timesを受講して二週間が経ちました – カイ士伝
https://bloggingfrom.tv/wp/2019/02/03/16018

トータルで約3カ月のカリキュラムでしたが、残念ながら私はカリキュラム終了直前で脱退することとなり、予定されていた最後のイベントには参加しておりません。そんな人もいないかと思いますが「私のプレゼン見にイベント参加したのに」なんて物好きな人がいらっしゃったとしたらこの場を借りてお詫び申し上げます。

とはいえ256timesでのプログラミング学習についてはすべて完了しており、残すは「イベントでのプレゼンテーション」「これまでの学習を踏まえてイベント参加者に共有できるアウトプット」というのが最後の課題でした。

元々はイベントに向けて準備もしていたので、予定していたプレゼン内容はこのブログに代えさせていただきつつ、アウトプットとして準備していた「プログラミング解説本」についても執筆中のお試し部分をこのエントリーで無料公開することで、イベントに参加できないながらも最後の課題を自分なりに達成したいと思います。

解説本のダウンロードはエントリーの最後に用意していますが、なぜ今回のアウトプットが解説本に至ったのかも含め、今回の256timesを振り返りたいと思いますので、少々長くなりますがお付き合いください。

256timesで得たもの

256timesへの参加を表明したブログでも書いていますが、プログラミングはずっと身につけたいと思いはあり、ドットインストールのような学習サイトを利用したり、書籍を買ってみたりしたもののなかなか続かず。思えばドットインストールもサービス開始とほぼ同時にユーザー登録していた1期生なのですが、それからもう7年以上経つというのにほとんどプログラミングは身につかないまま現在に至っていました。

256timesに参加する前の自分のスキルはこんな感じ。ほぼほぼ何もわからない初心者同然です。

• HTML: タグは部分的に読み書きできるが、Webサイトを自分で作れるほどではない
• CSS: 読んでだいたい内容はわかるが自分で書けないのでその場その場で検索してなんとかする
• JavaScript: 書籍や学習サイトで学習するも序盤で挫折。「配列」とか「代入」という存在をなんとなく知る程度

こんなプログラミングのど素人が256timesを通じて、下記の画像くらいのJavaScriptは自分で書けるようになりました。プログラミングできる人にとっては本当に初歩の初歩レベルかと思いますが、個人的にはライザップもブルワーカーもびっくりの成長っぷりです。

これまでの自習では身につかなかったのに256timesではなぜここまでできるようになったのか。個人的にこれのおかげだな、というポイントは以下の通りです。

圧倒的締切

256timesは基本的に2週間ごとに課題が提出され、期限内に目標を達成しないと脱落となります。勉強が本分の学生時代ならいざ知らず、仕事に趣味にとついつい時間を消費してしまう社会人にとって、明確な締切が設定されている効果は絶大。もちろん、そんな締切がなくても自分できちんと学習していける人もいるのですが、そんなタイプだったら苦労はしていないというか、ドットインストール登録してから今までの間にきっともうプログラミングが身についていただろうね……。

圧倒的基礎練

今回もっともありがたく、これが無かったらきっとプログラミングが身につかずに終わってしまったのでは無いかと思うくらい感謝しているのがこの基礎練。要は問題集みたいなもので、最低限のHTMLとCSSだけが与えられて「このような動作をJavaScriptで実現しなさい」という問題を80問近く解きました。内容も本当にシンプルなものからある程度JavaScriptを理解していないと解けないような問題まで幅広く、ほぼゼロのところから自分の手を動かしてプログラミングを動作させる、という場数をこなせたことが今回の成果につながっていると実感しています。

圧倒的サポート

そしてこの基礎練を支えてくれた両輪の存在が運営のサポート。この基礎練は参加メンバー10人、それぞれが70〜80問近くの基礎練を提出し、運営が中身を見てOKかNGかを判断するという仕組みだったのですが、初歩レベルとはいえ数百以上のプログラムに目を通し、正しいプログラミングまで導くという作業はとてもハードなものです。2週間という短いサイクル（80問を2週間で解いたわけではありませんが）の中、参加者それぞれが思い思いの時間に提出する課題にほぼ24時間体制で毎日回答してくれる徹底したサポート体制がなければ、基礎練をクリアすることも内容を身につけることもできなかったでしょう。

少なくともプログラミングに関するカリキュラムはすべて終え、JavaScriptについては基本的なところを理解して自分でも書けるようになったことで、書店で書籍をパラパラ読んでも書いてある内容が把握でき、基本的な仕組みがわかったことで知らない知識についてもある程度理解できるようになりました。

今まではプログラミングの学習に取り組んでも内容が理解できないために身につかず、それで結局途中で終わってしまう、というのが続いていたのですが、256timesを通じて基本的な知識を得たことで、ここから先JavaScriptはもちろん、他のプログラミング言語についても理解するだけの土台を得られたと思いますし、そのための場を提供してくれた256timesに対しては改めて深い感謝の意をこの場で表明させていただきます。

プログラムを身につけたことで感じたこと

256timesのおかげでプログラミングが身につく一方、当初は「アプリケーションを作りたい」という目的設定に向けて進んでいたものの、プログラミングを学習していく中で新たに別のモチベーションが生まれ始めました。それがタイトルにもつながる「初心者にとってのプログラミング学習」、プログラミングを学習するための初心者のハードルの高さをなんとか解決できないのか、ということです。

これは以前に話題になったnoteの記事なのですが。

文系でプログラマーになったけど色々失敗して３年半で会社を辞めた話｜denkigai｜note
https://note.mu/denkigai/n/nafff6bd87802

全体的に自分のような文系にとって身につまされる話も多い中、もっとも共感したのが下記の部分です。少し長くなりますが中略入れつつ以下引用します。

自転車に乗れるようになってだいぶ経つ人間は、「自転車に乗れない」ということがもはやどういう状態なのかわからない。「今から自転車に乗れなくなってください」とお願いをされても実現できない（乗ったまま体を動かさずに倒れることはできる。それは「乗れる」人間だからできる技であり、「乗れない」人間はなんとかペダルを動かそうとしているうちにいつの間にか倒れている）。

自転車に乗れない人間も、自分には何が足りないのか理解できない。「乗れる」というのがどういうことなのか全く分かっていない。だから何を質問すれば良いのかがわからない。

（中略）

そういう意味で、熟練のエンジニアと素人の間には深く暗い川が横たわっている。此岸から彼岸に至るとき、もとの人間ではなくなっている。三途の川を挟んでの意思疎通はできない。だから熟練のエンジニアが素人を教えることはほとんど不可能だと思う。三輪車に乗っている人は補助輪つき自転車に乗る人に教えを請うべきだし、補助輪付きの人は補助輪を外して転びまくっている人に質問すべきである。

（中略）

※ 近年の幼児たちはSTRIDERというペダルのない二輪車を使って自転車に乗る練習をしている。足で地面を蹴って進むタイプの二輪車で、単に楽しいことに加え平衡感覚を養う効果がある。STRIDERに慣れると補助輪無しでいきなり自転車に乗れるようになるらしい。今流行っているプログラミング学習支援サービスはあくまで補助輪付き自転車に近いと思う。プログラミング教育におけるSTRIDERは、まだ登場していない。

初心者なりに学習サイトや書籍をいくつか試しては挫折する……、という経験を繰り返していた自分にとってこの内容、特に「プログラミング教育におけるSTRIDERは、まだ登場していない」という部分は激しく膝を打つほど共感するものでした。

今回256timesを通じてJavaScriptを学ぶ中で、世間一般的なプログラム学習とは違うアプローチがあるのではないか、もう少し初心者の立場から初心者に向けた解説ができないものだろうか、そんな思いがどんどん高まり、「初心者の立場から初心者に向けてプログラミングの解説本を書いてみよう！」という決意に至った、というわけです。

プログラム解説本、コミケで売るってよ

とはいえ256timesで学んだとおり、締め切りがないときちんとアウトプットが出せないと強く自覚している自分のようなタイプにとっては、解説本についても明確な締め切りが必要。ということで、思い切って「プログラミングの解説本を今年中にコミケで出す！」という宣言をすることにしました。

とはいえコミケは出したいといって出せるものではないので、早くても冬コミ、受からなかったらコミティアかな、もしくは電書で売るかな……、などと遠い目をしていたところに「うちのブース、空いてますよ」と春日の横ばりに共同ブース出展の提案をいただき、今年の夏コミで販売できる機会をいただいてしまいました。

コミケの出展詳細は期日が近づいたらまた改めて発表する予定。もちろん実際には締め切り間に合わず落としてしまう可能性も残しつつ、せっかくいただいた機会は最大限活用しよう、ということで、夏コミでの販売に向けて有言実行できるよう進めていきたいと思います。

どんな本なのか

内容そのものは末尾のリンクからダウンロードしていただくとして、この解説本を書くためのコンセプトをここでご紹介しておきます。

console.logは後回し

ほとんどすべてと言っていいほどJavaScriptの解説書はconsole.logから始まります。もちろんconsole.logはとても重要ですし、自分も256timesのカリキュラムの中でconsole.log先生には大変お世話になりました。

なんですが、初心者にとってconsole.logでプログラムが動いても全然楽しいとは思えないんですよね。console.logの中でやるのも足し算引き算のような「それくらいは理解できるよ……」というものだったり。

一方、今回の256timesで「これは楽しい！」と思えたのがDOM。自分が組んだプログラムがconsole.logの中ではなく実際のブラウザで動作するのはとても楽しい体験で「はじめからこれをやりたかった！」と痛烈に思いました。

そんなわけで今回の書籍はDOMをテーマにして、JavaScriptがどんなことができて、どういう仕組みなのかを学べることをコンセプトにしています。もちろんconsole.logも大事な機能なのでしっかりフォローしますが、それは基本的な仕組みを覚えてから学ぶという順番でもいいのかなと。

用語も後回し

プログラミング学習でつまづいたもう1つのポイントが用語の多さ。初心者にとって新しい知識に加えてそれぞれを知らない名前で呼ぶのは結構疲れるものです……。スポーツ初心者にとって、専門用語満載で教えられても理解に時間がかかる……、みたいなものでしょうか。

そのため今回の書籍では専門用語はできるだけ使わず、一通り終わったタイミングで正しい用語を解説する、という流れにする予定。テニスを教える時に「ロブという相手の頭の上を超える高い球を打つ技」という知識から入るより、「相手の頭の上を超えるよう高く打ってみよう。そう、それがロブという技だよ」というように、体験してから名前を覚える流れのほうが伝わりやすいのでは、という考えです。

文字の間違いは無視

解説の通り入力したのになぜかプログラムが動作しない、延々と原因を探っていたら大文字と小文字が違っていた……、なんていう経験は初心者だけでなく現役プログラマーでも同じ体験をしているのではないでしょうか。

正しく動くプログラミングのためには、こうした間違いを探し出せすことも確かに重要なのですが、初心者にとってその時間はモチベーションを大きく下げますし、ただの間違い探しでしかない作業を初心者に課すのはとても非効率だな……、と思います。

しかも最近ではプログラミング用のエディタが機能充実していて、正しい表記を補完してくれたり、カギ括弧も自動で入力したり足りないところを教えてくれたりという機能が用意されています。こういう機能があるにもかかわらず「手で書けないと意味が無い」というのは、プログラマーとしては必要な能力でありつつ、初心者にとってはちょっと度の過ぎる体育会系だな、というのを元体育会系としても感じたことから、今回の書籍ではこれらについては割愛します。

具体的にはカギ括弧を正しく書くという説明はしませんし、コードも基本的にコピペで済むか、本当に最低限の単語を入れ替えるだけで動作する、という流れにする予定。コピペして該当箇所だけ書き換える、という作業も積み重ねればちゃんと身につくはず、それよりもまずは仕組みを理解してプログラミングを楽しむことに重点を置くという方針です。

書籍以外の知識を使わない

過去の経験として、書籍の解説を読みつつ最後に問題を解こうとするとどうやっても解けず、答えを見ると「ここでは説明してなかったこういう機能を使います」という解説を目の当たりにして「そんなんわかるわけ無駄な時間返せや！」と本を投げ捨てたことがあります。学生の頃に受けた模試で知らない範囲が出された、みたいな体験も近いでしょうか。

初心者ながらプログラミングで必要な能力は「知らないコードの書き方を調べる力」「知っているコードを正しく組み立てる力」の大きく2つかなと思っているのですが、前者は実践に出れば出るほど重要になる能力ではありつつ、後者の能力が備わっていない初心者にとって、「知らない知識を正しく探す」というのも結構な負荷になります。

なので今回の書籍では「自分で調べてなんとかしましょう」という要素は一切排除、「すべてはこの本の中に書いてあるからコードの組み立てに力を注ごう」という立て付けにしています。過保護かもしれないのですが、せっかく学習意欲のある初心者に対して、その意欲をいたずらに下げるようなハードルはできるだけ排除していきたいのですよね。

執筆中の解説本アルファ版を無料公開

えらく長い前置きになりましたが、現在執筆中の解説本、前書きと第1章、そして環境準備のための第0章までを以下のサイトで公開しました。

ここからダウンロード

まだ執筆中ということもあり、ここで公開した内容が実際の書籍では変わる可能性もありますが、上記で長々と説明してきたコンセプトで書く本はどんなものなのか、という体験はしていただけるかと思います。

なお、ダウンロードには金額入力しなければいけないのですが、あくまでアルファ版で反応を見たいだけであり、下手に金額入っても面倒なので、編に気を遣わず「0円」のままダウンロードしていただける方が本人としてはとてもありがたいです。読んだ上で気に入ったら、きっと夏には出るであろう本番を購入していただければ十分ですので。

余談ながら今回ダウンロード用のサイトをいくつか考えている中で「そういやgumroadってどうなってるんだろ」という興味本位からgumroad使ってみたのですが、gumroadをパクじゃなかったインスパイアして生まれ、その後史上最速でバイアウトされた「ameroad」も現在いまサービスちゃんと運営されているのですよね。

ameroad【アメロード】-デジタルフリマ-Twitterでデータ売ろう【電子書籍もゲームも音楽も写真もイラストも】
http://ameroad.net/

せっかくなのでameroad使ってみようかなと思ったのですが、なんというかこう、配信されている作品を見ていたら少々悲しくなってしまいまして、結果としてgumroadを使うことにしました……。ameroad、いまこそ面白い存在になりそうなので、配信コンテンツとかもうちょいいろいろ整備してもらえるといいかなあ……。

本題に戻ると、本書は執筆途中でもあり、さらにはあくまで初心者が書くものなので説明として正しくない可能性もありますし、正式な用語を使わず例えを多用することで間違った理解をしてしまう可能性はもちろんありますが、個人的には正しい知識はあとからでも修正できる、それよりもなによりもせっかく持ったプログラミングへの興味や情熱を失うことなく、楽しみながら基本的な知識を身につけることが大事、というコンセプトに基づいた実験的なアプローチとして、温かく見守っていただければ幸いです。

前述で紹介した「プログラミング教育におけるSTRIDER」という考えには深く共感しつつ、多少知識として間違いがあろうとも興味を持ってもらい、学習のための入り口に立てるような解説本でありたい、というコンセプトを踏まえて、日本史における「お〜い!竜馬」や「日出処の天子」、バスケにおける「黒子のバスケ」、グルメにおける「美味しんぼ」のような立ち位置になれるような書籍を目指して参りますので、どうぞよろしくお願いいたします。