勉強するには手書きノートが一番。というわけではない

プログラミングを勉強しているそこらへんのサラリーマン（非IT系）です。

HTML、CSS、Ruby＋Railsと2ヶ月半ほどやってきて、今日からReactを触り始めました。
飽き性か？欲張りか？と言われたら、正直たぶんそうです。

でも、Ruby極めてサーバーサイドだけやるZE！！と道を絞り切るのも時期尚早、ということで手広くいろいろ触ってみてます。

久しぶりの「新概念」

これまで学習してきたことと向き合い方

さて、HTML・CSS・Rubyは最初の2週間ぐらいで詰め込んで、その後はそれらを組み合わせたり拡張させながら簡単なアプリ実装などの課題をこなしていました。
途中でJavaScriptもちょっと出てきましたが、見本通りに書けば出来ていたので完全に把握するよりも仕上げを優先して課題だけ仕上げちゃいました。
つまり、JSはほとんど素通りしています。

ちょっとフロントエンド苦手

これまで2ヶ月、ほとんどの時間はRubyを書いて過ごしていたと思います。
そんなわけで、個人的にはフロントエンドが結構苦手です。

しかし、作りたいものを作るとき、フロント無しというわけにもいきません。カオナシになってしまいます。

というわけで、生のJSに苦手意識がある僕はReactに興味を持ったというわけです。生レバーはダメでも串焼きならイケる的な感じで。

久しぶりの「全くわからん」を飲み込む体験

社会人になってから新しいこと覚えるときって、「自分の役割・役職・担当だから理解できて当然の、新しいこと」を覚えることが多いと思うんです。
例えば営業職なら、トークやマナーに磨きをかけるとか、事務職ならExcelのショートカットをちょっと覚えるとか。
そういう「学び」は、比較的ローコスト・ハイリターンなのでみんなやっていますね。

しかし、僕が今直面しているのは全然知らないJavaScriptのライブラリ。
新しい概念が無数に出てきます。
プログラミングの勉強というのはたぶん数学に似ていて、「概念A」を理解したら、その概念Aを使って説明される概念Bが出てくるわけです。

つまり、理解が浅いままだと複利効果（？）が逆に働き、徐々に理解度が死にます。

• 概念A・・・理解度70％

• 概念B・・・Aの理解度70％ * Bの理解度50％  = 35%

• 概念C・・・Bの理解度35% * Cの理解度10％ = 3.5%

はい。
新しく3つのことを覚えるだけで、加速度的に「なんもわからん」状態になりました。

たぶん大人も子どもも勉強わからん。となるメカニズムって、こういう面がありそうですよね。
つまり、いかにA→Bを100％近く理解しながら次に手を出すか？ということが効率に直結してきます。

たくさんやらなきゃ！への解

全体攻撃の罠

覚えることが多いとき、焦ってしまって「早く全範囲を網羅したい」という気持ちになります。（僕は）
イメージ的には、RPGで敵がいっぱい出てきたことに慌ててしまって戦士キャラに全体魔法を使わせるような感覚です。
つまり、「1体ずつ倒した方が結果的に早くない？」と思いつつも、「全体攻撃しなきゃ！」という葛藤です。

とりあえず、この自分の葛藤を黙らせるために、僕がやっているのは
まずペンを持つことです。

地道だけが道

結局、仮に10行のコードをコピペして次に進んでも、待っているのは3％しか理解していない自分です。コピペなんかして進んだ気になるのは、全く進まなくて絶望しているのと同じです。つまり0です。

それならば、目指すべきは0よりマシの成果です。1でも勝ちです。
だから、10行のコードを1文字1文字、小豆を箸でつまむように書いていきます。
そうすると、コピペしていた時に見落としていた記述に気づきます。
たとえば、「class」は小文字だけどその後の「Index」はアッパーキャメルケースだなとか、クラス継承のためのextends React.ComponentはComponentsじゃないとか。

そうして細部を書いていると、だんだんと「さっきconstで定義した定数が、こっちで呼び出されているのだな」とか、「ここで書いたカッコはどこで閉じるんだっけな」とか、タイピングやコピペでは見えてこない「流れ」が見えてきます。

タイピングよりもノイズが少ない

この「手書きコード」のいいところは、タイピングで「丸写し」するときに比べて、進んでいることを実感できるところです。

タイピングで「丸写し」もやってみたんですが、全然頭に入らないんですよね。たぶん文字とキーを追うのに必死で「流れ」が見えるところまで行けてないからです。

例えば、タイピングで「Quote」って打つ必要が生じた時に、無意識・ノールック・ノーミスで打てる人は、タイピングで写経しても良いと思います。僕はちょっとまだ無理です。
「シフト押しながら、Qは左上のここ…あ、W打っちゃった…一回消して…もう一回…よいしょ…」
みたいになってしまいます。
でも手書きなら、「えーと、アルファベットのdってどう書くんだっけ…」みたいなことがない限りはほぼノーストレスで「書いている中身」に集中できます。
このストレスの無さが、中身の理解を助けている実感があります。

ずっとスライム狩るわけにもいかない

さて、この手書きコーディングによる写経コードリーディング、当然ですが永遠にコレやってるわけにはいきません。なんでかというと、1歩ずつ進むのが最適なのはある一定のラインまでだからです。
永遠に「最初の街」の前でスライムを狩り続けるのが最適ではないのです。

ゲームが進めば新しい魔法使いが仲間になったり、新しい武器を手に入れたりするでしょう。可能な限り、そういった新しいソリューションは早めに手にいれるべきであるという視点も大切です。

具体・抽象の往復

僕は「虫の目鷹の目往復」が良い、と思っています。

例としては「Reactのコードではimportとexportを書いてファイルを読み込む」のように地味で具体的な事柄を勉強するフェーズと、
「Reactではコンポーネントを記述した小さいファイルをモジュールバンドラーがたくさんまとめ、トランスパイラが変換することでブラウザが読める形のJavaScriptにする」「仮想DOMの仕組みを使うことでレンダリングが速いらしい」
というような、大局の理解を進めるフェーズを持たせるのが良いと感じます。
そして、「コンポーネント」「モジュールバンドラー」「トランスパイラ」などのキーワードから連なり、芋蔓式にさまざまな情報・知識がくっついてきます。
大枠があって細部があって、という構造を把握しながら、地道に進めるのが一番の近道です。

結論・まとめ

まとめると、僕の「知らん概念」への取り組み方は以下。

1. ミクロを理解するため、1文字1文字を噛み締めるように読む・書く

2. 大局を理解するため、デジタルノートなども活用しながら「おおまかな説明を自分で出来るか」を考えながらフレームを理解する

3. 各フレームを理解するための細部について、理解を埋めていく

これまでHTML、CSS、Ruby、あとRailsについても実は同じ作戦で覚えてきていて、久しぶりにReactの学習で同じ手法をとってみたところ順調に進めることができるようになってきたので、「新規技術を取り入れるムーブ」として再現性高いな。と感じたので書きました。

今日はここまで。最後までお読みいただきありがとうございました。