3月にリリースされてから毎日コツコツ取り組んだmosya react

最後の実践演習でコケてしまいましたが、それまでは毎日頑張れた∩^ω^∩

mosya同様、入門編・中級編・実践編の３ステップからなり、
レッスン数がボリューミーな上に重い 🫢

後半、筋肉痛になりながらもなんとか続けていきました。

レッスンを終えて、去年難しくて放置していたAwesomeの改造にチャレンジ。

タグ機能を追加することができました。

去年の夏にもAwesomeを改造したことがありましたが、あれ、３日がかりの大仕事だったんです 😅

https://herohoro.com/blog/awesome_description-authors

気合いでどうにかこうにか改造した…という感じが強く、気軽にまた改造しようとは思えない状態でした。(だから10ヶ月ぶり…)

今回、タグ機能を追加してる最中に感じたことは「視界がいい！なんか分かる！」という変化でした。前回も視界が良くなった感覚があったのですが、今回はそれ以上に良くなり、心穏やかな改造作業となりました。

この記事では、
mosya reactの学習がどう作用してブログの改造作業の視界を晴れやかにしたのかについて解説します。

Awesomoの改造をする時、ファイル同士のつながりを辿ってエラーの原因を探ることがよくありました。

ただ、残念なことにどう考えを絞り出そうにも探り方がわからず、手当たり次第試すしかなく、

数日(7H × 3日くらい)苦戦することがよくありました。今思えば、奇跡です。

• なぜ、探り方がわからないのか？
• なぜ、なかなかエラーを直せないのか？

mosyaの方で配列のレッスンを受け、はじめて基礎的な部分を理解できました。

それまでは雰囲気でやっていました。はい。すみません。

配列の調整をできるようになったことで、Notion DBプロパティのpeople形式のAuthorsの値を表示させられるようになりました。

でも、引数で渡されていく様子を具体的にイメージできずにいたんです。。。

なぜなのか？

これに気づけたのがmosya reactのレッスンでした。

mosya reactは入門編から体系的に必要な技術を学べる構成になっていて、嫌でも弱点らしき部分にぶつかることになるんです。

確かにはじめはスラスラ進めることができましたが、徐々に雲行きが怪しくなり….ちゃんと理解できていない事実に気付かされ、なぜ理解できていなかったのかについて自問自答するキッカケを与えてくれました。

演習問題をやるたびに発覚した弱点に意識を集中させて取り組むうちに自然と手が動くようになっていきました。そして、久しぶりにAwesomeの改造をしようと思い、ファイルを開いてみたところ、データのつながりや処理の様子を具体的に把握できたんです！！！

以降は、より具体的な自問自答の内容を紹介します。

何のためにmosya reactを学習するのかについてじっくり考えました。

もちろんブログを改造できるようにすることが大きな目標ではありますが、もう少し砕いて段階的に目標を設定することにしました。

直近の目標：

まずは触れた技術を必要な時に素早く引き出せないことには何も始まりません。

欲を言えば、技術と書き方をセットにして記憶することが理想かもしれませんが、習った技術を引き出すことに集中することにしました。

学習目標を意識すると、「どうやったら必要な時に引き出せるか？」という観点でレッスンを受けれるようになります。

実際に行ったやり方は以下です。

1. 解説を読んでなんとなく把握する
2. 気になる過去のレッスンが思い浮かんだらその解説を読み返す
3. 時間のある時になんとなく把握した状態のレッスンの演習問題をやってみる
4. できそうでできない
5. できないなら解説をもう一度読んで、どこを押さえればできるようになるかという意識でノートに書き出す
6. 書き出したノートを見ながら演習問題をやってみる
7. あと少しのところでお手上げになる
8. 解答のソースコードを見る
9. なぜ思いつかなかったのか...を整理する
   1. そもそも候補にすら挙げれなかった記述
   2. 解説で提示されたサンプルコードを運用しきれなかった
   3. 必要になっていた記述に関する過去のレッスンを思い出せなかった
   4. 過去のレッスンを思い出せはしたが、それをどう書けば課題に沿った形になるのかがイメージできなかった
10. 解答のソースコードで特に分かりにくさを感じた部分を中心にノートに書き出して整理する
    1. 変数の流れを理解するために色分けをする
    2. 瞬間的に理解できない箇所にはメモを加える
    3. 過去のノートで関連する内容があったらページ数を書き留めておく
11. 数日後、解答ノートのページを見ずに解説ノートのページのみで書けるかを確認する
    

引数で渡されていく様子を具体的にイメージできずにいた

学習前に感じていた課題

この原因は、「型定義」の甘さでした。

引数と型の部分の区別が明確に判断できておらず、

よく分からない部分＝型！？という感じのまま気にしないようにしていました。

気にしていなかったので、自分が型が苦手なんだという自覚はなく、違う部分に穴がある気がしていました。

型定義のレッスンを３周行い、型定義以降に出題されるコードに含まれる型に対しても「この記述はどういう意味の型なのか？」と確認を心がけるようにしました。

今だに完全ではありませんが、だいたいは瞬時に分かるようになってきています。

「学習したことを必要な時に引き出せなければ意味がない！！」

学習をしたことで掲げていた目標に対してどれくらい近づけたかを確認するため、

Awesomeのタグ機能を付ける試みをしてみました。

データの流れ、関数に渡されたデータと処理後のデータの様子を確実に把握でき、１日(5Hくらい)で作ることができた時には感動しました。

もちろんエラーは度々出ましたが、どこが怪しいのか、何をしたら解決できそうなのかがハッキリ見えたので、そこまで苦戦せずに済みました。

また、
ChatGPTに何を伝えればいいのかも明確だったので、欲しい答えをテンポよく得ることができたのも大きかったです。

では、「ハッキリ見えた」とは具体的にどういう状態なのでしょうか？

学習したことを生かせる状態について知りたくなり、認知科学の分野で有名な今井むつみ先生の「学びとは何か」という文献を参考に考察してみます。

行間を補えないと理解ができず記憶もできない。つまり、学習ができないということだ。

その専門分野での背景知識が足りていないと、表面的な理解はできても実のところ、何を言っているのかが分からない。

学習前に膨大な時間をかけないとブログの改造が思うように進められなかったのは、背景知識が足りず行間を補いながら理解できていないまま行なっていたことが原因だと言えます。

表面的な理解で留まっているので、記憶にも残りにくく、作業ログをひたすらNotionにコピペして試したことが重複しないようにしていました。ひらめく試みはことごとく的を外し、何度も何度もソースコードをたどりながら次の一手を絞り出し続ける…といった苦しい状態です。

分からない部分にはモヤがかかり、見える部分だけをかき集めてなんとかしてきました。

私にとって必要な「その専門分野での背景知識」を補えたのがmosya reactだったと言えます。

過去にreactの講座や公式のLearnをやったこともありますが、すぐに使えそうだと感じられる内容が少なく、「ただ受けただけ」になっていました。せっかく受けた講座の内容をなぜ私は活用できないのかの原因が分からず、開き直って分かることでできることをしてきましたが、今回は違いました。

熟達した人は、情報の選び方が上手く、新たな情報を既にある知識の中に取り込み、知識を進化させることができる。

mosyaやmosya reactは熟達したエンジニアであるごだいさんが開発したサービスなので、一貫して分かりやすいです。

余計な情報が一切なく、レッスンに対して必要な内容に絞って解説されています。
文章が読みやすいのはもちろんのこと、端的なんですよね。

端的であるということは、まずどこに注目して理解すればいいのかに意識を集中しやすくなるということです。

抑えるべきポイントを体系的に抑えていくだけではなく、確実に抑えた状態で次に進むためにレッスンごとの演習問題に取り組めます。解説を読んだ時は分かった気がしても、いざ演習となると全然書けなくなることもよくありました。演習問題がなかったら「分かったつもり」の知識が増えていたと思います。

また、実際に手を動かしてコードを書いた内容で課題の作品が出来上がると、とてもうれしいです。

問題文やヒントに従って書いたコードではありますが、「自分が作った！！」という感覚を体験でき、その体験から、本当に自分でも作ってみたくなることもありました。

作りたけど作れない悔しさを感じてきた経緯があるからこそ、こういった気持ちが強くなるのかもしれません。

レッスンの解説を読むとよくブログのコードを思い出し、「あの処理ってこうとも書けるのか？」とひらめいたり、似たような処理をしている部分がないか、GitHubを漁ったりもしていました。

全てのレッスンが関連付けられたわけではありませんが、身の回りのソースコードにも使われてるという事実を知れるだけでも、とてもわくわくしました。

この他にも「いつか使いたい技術」にたくさん出会えました。

今、目の前にあるブログのソースコードを進化させられる知識がそこにありました。

知りたいことにたくさん触れることができ、あれもこれもと思い出していくうちに、行間を補える背景知識を増やすことができたのかもしれません。

今回の記事を書く上で参考にした文献を紹介させてください。

読んだ内容を自分の言葉で書くことで理解の程度を自己認識できる

学習の取り組み方の中であえてノートに書き出す工程を経由していたのには理由があります。

書くことの課題は学習よりも理解。理解できれば学習はできている。

1. ある情報について何かを書けるくらい十分に考える

2. 他の文脈における意味も合わせて考える

自分の言葉で少し詳しく説明し、適切な疑問を抱ければもともと備わっていた知識をつなげられる

理解することは手持ちの知識に意味のあるかたちでつなげること。

<情報の深い意味を考える問い>

• この情報はどういう意味があるのか？
• 既存情報とどうつながっているのか？
• 既存情報とどこが異なりどこが類似しているのか？

「記憶力がよい」とは、長年の訓練によって自分の必要なことを上手に行うために記憶能力が卓越した人たちのこと

• もともとは意味のなかった情報に意味づける能力が高い人
• 必要な情報を見極めてそれを細かく観察する能力が高い人
• 目の前の情報をすでに頭に持ってるデータベースと関連づけて分類する能力が高い人
  

生きた知識の持ち主は、情報の選び方がとても上手く、既に持ってる知識の中に取り込んだ上で知識を進化させることに長けてる。

本音をもらしますと、mosya reactをやる前、ネガティブスパイラル中でした。

趣味でプログラミングを続けて、何になるんだろうか、、、、ブログを続ける意味はあるんだろうか、、、、そもそも今までやってきたことって無駄だったんじゃないかとか、、、、暗〜く、暗〜くしていたところ、mosya reactがリリースされ、ネガティブ思考の気分転換も兼ねてはじめてみました。

一度はじめると、楽しくって、毎日やる習慣にし、朝起きたらまずは今日やるレッスンの解説を読み、寝る前じっくり演習問題に取り組み、取り組んだ直後に学習日記を書き、就寝。。。。という生活を送るようになりました。

レッスンをやると刺激を受けるのか、reactの技術的な興味やNext.js製の自分のブログの関心が高まり、再びコードに触れるようになっていきました。

ブログは「楽しいから」やる。それでいいんじゃないかなと今は思えています。

今まで分かったような分かっていないような状態で放置していた部分を補えるキッカケになったのはmosya reactのおかげです。mosya同様、レッスンがどんどん増えていくので更新のお知らせが来るとテンションが上がりますし、今あるレッスンを全てやったら終わりではなく、日々進化している技術に追いつくために受講し続ける必要があるんだということがmosyaの雰囲気からして伝わってくるのがすごく好きです。

自分の作りたいように作りたいだけ楽しめる技術を補うために、今後もレッスンを受け続けたいです！！