プログラミング、なんとなくコツがつかめた気がする瞬間っていつ来るの？～その2～

前回の記事のつづきです。

前回記事では、プログラミング学習の最初のターニングポイントは、メンタルモデルの形成にあるという話を書きました。プログラミングにおけるメンタルモデルの形成とは、簡単にいえば「プログラムコード」と「実行結果」の両者を（自分なりに納得感を持って）結び付けられる解釈をあたまのなかにつくることを指します。

じゃあ「どんな学び方をしたら効果的にメンタルモデルが形成できるの？メンタルモデルがアップデートされていくの？」が今回の話題です。あくまで個人的な経験に基づきますが「調べる」「試す」「考える」という3つを各自に適したバランスとスピードで繰り返すことが重要だと思っています。

調べる

「調べる」とは、ウェブの入門記事や初心者向けの解説本を読んだり、動画や先生の解説を聞いて学ぶことです。また「やりたいこと」や「疑問」や「問題（エラーなど）」がでてきたときに、そのヒントとなる情報をウェブや生成AIから探して解決することも「調べる」の範疇になると思います。

賛否が分かれると思いますが、少なくとも僕は、初心者のうちに（オリジナルアプリ開発前の段階で）MDN Web Docs や React、Next.js の公式リファレンスなどで「調べる」のは、あまりお勧めしません。これは中学生が大学生向けの教科書で学ぶような難しさがあるからです。

生成AIは「調べる」ときに超便利ですが、「体系的な学びができる」「思わぬ知識の獲得ができる」という意味では書籍やウェブ記事が有用です。20％～30％程度でも良いので、生成AI以外のメディアも併用して学ぶことお勧めします。

なお、JavaScript/TypeScript、React、Next.jsに関するウェブ記事や動画を探すときは、過去3年ぐらいまで（できれば過去1年ぐらい）で絞り込みすることが大事です（とにかく日々、状況が変化しているので古いものは参考にならないことが多いです）。JavaScript/TypeScript関連では「モダン」をキーワードにいれることをお勧めします。

試す

「試す」とは、実際にプログラムを「記述して」「実行して」「結果を確認すること」です。本を読んだり、動画を見て理解したつもりになっていても、実際にコードを打ち込んでみると「？？？」と手が止まることがほとんどです。解説を読んだり聞いたりして分かったという気分になっても、面倒がらずに実際に手を動かすことがとても重要です（語学や楽器、スポーツと一緒ですね！）。短めのコードであれば、コピペをせずにあえて打ち込んでみるのもお勧めです。

そして「試す」のなかでは、好奇心と探求心を持って「もし、こうしたら？」の発想で積極的に実験してみることが大切です。様々な角度から「この部分をこう書き換えたらどうなるだろう？」という発想をもって、結果を予想して、実際に確かめてみると、予想と実際の動作の違いから新しい発見が生まれたり、より深い理解につながっていくことが多いです。

（例）

例えば、次のようなサンプルコードが与えられたとき…

const getNameAndAge = (person) => {
  return person.name + 'は' + person.age + '歳です'
}
const person = { name: '太郎', age: 20 }
console.log(getNameAndAge(person))

好奇心と探求心（＋遊び心）を持って、以下のようなこと「試す」とよいと思います。

• 1行目のgetNameAndAge をGetNameAndAge に変更するとどうなるのかな？変更したら、どの部分を一緒に変更しないとダメなのかな？

• 1行目のpersonをuserに書き換えたとき、それにあわせて3行目のpersonを書き換えないとエラーだよね？

• 1行目から3行目を改行せずに書けるかな？1行目の途中で改行するとどうなるかな？1行目のイコールの前後のスペースを削除したらどうなるのかな？

• 2行目でperson.nemeのように、あえてスペルミスするとどうなるかな？

• 4行目でnameとageの順番を変えるとどうなるかな？

• 「太郎は'20歳'です」のように、出力文字列にシングルクォーテーションを含めたいときはどうするのかな？出力を途中で改行するためには、どうしたらいいかな？

• 「太郎は20歳で、所持金は3000円です」のように出力したいときはどうするのかな？

考える

「考える」とは「記述したプログラムから、なぜ、そのような実行結果が得られるのか？ 」について、自分なりの解釈をつくっていくことに相当します。

見本となるコードや、生成AIが出力したコードをVSCodeに貼付けて「なんでか分からないけど、期待する結果が得られている」といった状態を出発地点として、「プログラムコード」と「実行結果」を結び付けるための（自分なりに腹に落ちる）解釈を頭のなかにつくっていくことが「考える」のプロセスになります。ただし、100％の理解を目指すと前に進めなくなるので注意してください。

現状で取り組んでいる範囲のなかで不都合や不整合がなく、自分のなかで納得感があれば、裏側で小人が活躍しているというメンタルモデルでもよいのかと思います（ただし、どこかの段階で、そのモデルには限界はくるので、そのときに再構築すればOK！）。

当該部分について、2時間前の自分と比較して理解が進んと思えるのなら（とりあえず）OK！とする姿勢も大切です。実際、先に進むことで解決する問題も多くあります。

コードのなかで「分かる部分」と「分からない部分」を切り分け、「何が分からないのか」を明確にしておくことも重要だったりします。そうすることで、無意識に脳内で情報が整理され、思いがけない時（トイレ、お風呂、通勤時間）に理解のアイデアが浮かぶことがあります。

「記述したプログラムから、なぜ、そのような実行結果が得られるのか？」を「考える」ための具体的な方法ですが、例えば以下のようなものをお勧めします（「調べる」や「試す」とも関連します）。

• 「なんで、この行が必要なんだろう」を説明できない場合は、その行をコメントアウトしてプログラムを実行してみる。その結果を参考に、プログラムコードと実行結果の関係についての理解を深める。予想に反して「実は不要な処理だった」なんてこともあります。

  • 逆に、必要性が分かっている（つもりの）文があるときは、あえて、その文をコメントアウトして、どんなエラーが発生するのかを予測し試してみるのも大切です。

• 「なんで、この順番に書いてあるんだろう」と疑問を持って、順番を入れ替えてみる。実は、一定の範囲で順番の入れ替え可能なケースもあります。

• 「ここをこう書き換えたら、結果がこう変わるはずだよね」という頭のなかのメンタルモデルの正当性を試してみる。逆に「（私のメンタルモデルが正しいなら）ここをこう書き換えたら、動かなくなっちゃうハズだよね」も実際に試してみるのもありですね。

まとめ

以上の「調べる」「試す」「考える」をバランスよく繰り返していくなかで「あ、なんとなくコツがつかめてきたかも！」という瞬間が訪れます。その瞬間を過ぎると、バラバラだった理解が急につながりだして「線」になることも多く、そんなときの「わかった！」という感覚は、本当にワクワクする楽しい瞬間になります！！

ただ、その後に気づくのです。「あ、これが噂のダニング＝クルーガー効果の最初のピークだったんだ😇」と。まあ、それでも成長の一歩ですから、前に進むしかないですよね！