herohoroブログ

プログラミング習得、4年間を振り返る



🔄   2024-12-24

4年前、こんなにノーコードアプリやAIが便利になるなんて想像もしていませんでした。
作りたいことを作るために寝る間を惜しんで必死に勉強してきました。

いつの日か、趣味がプログラミングになり暇さえ見つけ次第VSCodeを開いていました。

プログラミングを始める前はちゃんとしたPCが手元になく、コロナ禍に配布された10万円の商品券(!?)でMac bookAir 2020のCore i5を買って、それをしばらく使いながらこのブログの改造をしていました。

改造していることがTwitter(X)上で伝わり、音声の方でのやりとりがでてきた頃さすがのMac bookAirも悲鳴をあげ、現役を引退することになりました。それからはMac BookAir M2を使っています。

PCを変えると、環境構築からやり直す必要があるのでそこでまた勉強になりました。DockerやHomebrewをいじったり、Voltaで管理したり、また新たな扉を開いた感覚です。

もう一度言います。

プログラミングを始める前はちゃんとしたPCが手元になかった…

🤗

さて、今回は4年間という節目を迎えて習得できたことを振り返ろうと思います。

プログラミング1年生

GitHub上では12月からcommitが始まっていますが、4月頃からPythonを3ヶ月ほどいじっていたことがありました。Signateの練習課題コンペでプログラミングの「プ」の字を学んでいたという感じです。

image block

プログラミングは暗記ではなく、調べるものだ

公式リファレンスというものがあって、それを見れば分かる。分からなければ詳しく解説しているサイトを探して参考にする。。。。。という流れを勉強会に参加しながら学んでいきました。

データー分析自体はふわっとしか理解できていませんが、調べたいデータに対して必要なメソットを調べて動くように組み合わせる訓練をたくさんすることができました。

その後、勉強会でも使っていたNotionでブログを持ちたくなってはじめたのがeasy-notion-blogでした。

当時、Notion blogは非公式APIを使って動かすものがほとんどでした。っというのも公式APIは数ヶ月前に登場したばかりでそれに対応したリポジトリがなかったのです。そんな中、日本人の方が開発しているNotion blogを見つけました。それがeasy-notion-blogです。

英語を読むのが苦手だったので日本語対応のREADMEはすごく助かりました。
ただ、なんとなくセットアップの過程をTwitter(X)に上げていたら、開発者のアルパカ先生から直接リプが来て驚いたのを覚えています。

それからというもの、お互いのブログの記事を読みながらTwitter(X)上で情報交換する関係になっていきました。使えば使うほど改造したい部分が出てきて「いつかこれをこんな感じに変えたい」といった野望をたくさんNotionにメモしていくのが習慣になりました。

プログラミング2年生

Notionに書き溜めたやりたいことを実現させるために、必要な知識を増やしていきました。

「なぜ理解できないのか?」

「どんな基礎が必要なのか?」

Udemyやアルパカ先生の記事にあった推薦図書を元に勉強したり、試しに作って失敗を繰り返したりしていきました。講座で扱われたことをすべて覚えようとはせず、自分にとって必要なことだけに集中して深堀っていきました。

作りたいことが明確にあったので、そのためのロードマップのようなものを設定していっていたような感覚です。

image block

同じeasy仲間も増えてきたのもこの年で、互いの改造を見合うのが楽しかったのを覚えています。12月ごろにNext.js13になり、その取り込み作業がかなり高度で数日かけてやりましたが、ブログの立ち上がりが遅く絶望していた時期でもあります。どうやったらパフォーマンスを上げられるのだろうか….?もっと裏の動きを知りたい….悔しい….。そんな感情です。

プログラミング3年生

年始にastro-notion-blogが登場し、easy-notion-blogの開発は終わってしまうという事件がありました。周りを見渡すと、astro-notion-blogに移行していてなんとも言えない心境ではありましたが、どうしても諦めきれずeasy-notion-blogを貫く決意を固めました。

easy-notion-blogを通して学びたいことがまだ残っていたし、Next.jsの進展にも興味があったのが大きいです。

プログラミングを始める前、技術の発展をこんなにも身近に体験できるだなんて考えもしていませんでした。アプリのアップデートはいつも深夜に自動でされていますが、その中身を見学したことはありません。easy-notion-blogは開発者のアルパカ先生が日々最新の技術を取り入れるためのアップデートをPushし続けていたので、わたしはそれを取り込みながらコードの差分を解読し、Next.js公式のドキュメントを見るのが好きでした。そこに面白みを感じていました。ですが、それがもう終わってしまったので、今度は自分でやるしかないんです。やるからには英語を読んで理解する力を上げる必要が出てきました。

実際やってみると、英語の語彙力の低さからくる混乱なのかプログラミングの知識の無さからくる混乱なのかを把握できず困りました。Notionに一旦公式ブログの記事を取り込み、そこにNotion AIを使ってわからない部分を追記してもらいながら学習してみることにしました。ここで気をつけたのは「なるべく自分の頭で推測する」ということです。全文和訳してしまえば確かに作業はしやすくなりますが、それではいつになっても英語を原文で読めるようにはなりません。最小限の補助に留め、次同じ言葉が出てきたらすぐ意味を思い出せるように努力しました。

はじめは苦しくって、悔しく、食欲も無くなる状態でしたが、それでもめげずに続け、少しずつ分かるようになっていきました。Notion AIによる補助はすっかり減り、Notionに取り込まなくても読めるようになったときは、とても嬉しかったです。

結局のところ、プログラミングの知識というより英語の語彙力の低さからくる文脈の補いが弱いということにも気づけました。今でも読みにくい文章に出会うときがあります。そのときはMigakuという拡張機能で文脈を補いながら解説してもらっています。ChatGPTのように出力結果に対して分からない部分を質問しながらでないと理解を深められないのではないかという心配は無く、1発で解決してくれる優れモノです。Notion AIはその点、足りないんですよね。だからだいぶ前に課金は辞めました。知識の習得過程で生じる癖によって合う合わないがあるのかもしれません。

また、違うテーマのNotion blog(Awesome)を使いだしたのもこの年です。

同じNext.js製なのに全然違うんです。コードを見て感動しました。関数のまとめ方、コンポネントのつなげ方、ファイル構造から全て違う。easyでは出てこなかった書き方も多々あり、いきなり改造することはできない状況でした。とにかくごだいさんが作ったコードを読む。読んでつながりを理解する。はじめはそこに集中することにしました。

この年にmosyaというプログラミング学習サービスをリリースされていて、チャベスさんに誘われてやってみることにしました。4月にリリースされて即購入w

今までおろそかにしていたHTML・CSS・JavaScriptの基礎から徹底的に叩き込めました。ブログでよく出てくる記事一覧のカード表示なんかも演習問題で扱われていて、キャッキャしながら夜な夜なやっていました。楽しかったです〜〜〜。

インプットが増えると、やっぱ何かを作りたくなってしまうようでTailwindとNext.jsで作られたmdxタイプのブログテーマをCloneして改造していました。APIを経由せず直にファイル上でデータを扱う感じが新しく感じ、シンプルで直感的だなと思うようになりました。

image block

ブログをはじめたキッカケがNotion blogだっただけに、時代を逆戻りしてる感は否めませんが、mdxで記事を管理することでAPIのruntime errorに見舞われず、差分はGitHub上で管理ができるので普通に便利だなと思ったんです。

便利と不便は紙一重….

わざわざホスティングサービスへ行ってbuildをしなくても差分を更新してくれるのがレンダリングの良さではあるんですが、実際ブログをやってみると気づいちゃうんですよね。差分って一度投稿を済ませてしまうとそんなやらない…って。過去の記事を掘り返して文章をブラッシュアップする….とかまで熱心ではないし、、、、基本、一度書いたら気持ちは終わってしまうんです。そう。この記事だってきっとそう。

自分にとって使いやすブログってどんな組み合わせなんだろう?

ここらへんから、自分の使い方に合う技術選定のような問いが連呼されるようになっていきました。

プログラミング4年生

mosyaからReact版もリリースされ、またmosya祭りが始まりました。

TypeScriptやNext.jsも扱われていて、もう感無量。ずっとなんとなくでやってた部分を徹底的に叩くことができました。特に苦手だと分かったのは、型です。型を関数の部分に記述するのですが、その書き方とpropsの書き方とがごっちゃになっていて、結局どのデータを引っ張ってきてるのかを明確に理解できずにいました。明確にできていないから改造する時にデータの動きがイメージできない。consoleで確認してもその内容がどのように挿入されているのがまではぼやけていました。その弱点がmosya Reactで気づくことができたので、意識的に型を勉強しました。今でも忘れる部分があるので、勉強中に取ったノートのスキャンデータをObsidianに入れて課題に対して役立ったスキャンデータをつなげながら管理しています。back linkを多く貼れるとノートがどのシーンで役立ったかを振り返ることもできて便利です。

mosyaやmosya Reactに出てくるコードは意外とAwesomeでも出てくるもので、同じ人が開発してると書き方の嗜好も覗けて面白いなと感じました。偶然ではあるものの、使いたいテーマを開発している人の作った教材を使って勉強するのが最も効果的だと思います。Awesome自体は開発はされておらず、使える状態のままストップしています。でも、そのおかげで自分でやりたいことを見つけて取り組める幅が広がりました。

image block

Awesomeは元々、notion版とmdx版とを切り替えて立ち上げるテーマになっています。Notionを使いたい人はNotion版にしてずっとNotion DBから記事をアップしていけば更新できるし、mdxを使いたい人はGitHub上でcommitすれば更新できます。

欲張りな私は、両方使えるように改造しちゃいました。日によってnotionで出したかったり、mdxでゆっくり確実に出したかったりして1つに絞れなかったのが原因です。改造はかなり大掛かりで、本元の関数のつなげ方を変える部分からやりましたが、なんとか動く状態にまでなりました。数日前、page送りのボタンの値を修正して、少しコンポネントを使い回せるように整えたところで完成した感じがあります。


まとめ

最後の1年はすごく自由に飛び回れた気がします。
それまでは、苦しかった。。。。

でも、メンテナンスを自分でやるようになってプログラミングがより楽しくなったのは確かです。
Next.jsのバージョンアップはだいたい月1くらいのペースで来るんですが、そのおかげもあって1ヶ月に1回はコードに触れる習慣を維持できています。

欲しいブログを自分の手で調整できるようになった今、以前のような「何が何でも習得したい🔥」という熱は無くなってしまいました。でも、ちょっと気になった部分を数時間で直せたりできるようになって努力は裏切らないなと思います。

現役エンジニアと関われる機会はそうそうなかったと思うし、たまたまNotionを使っていてたまたまそれをブログにしようとしていた人がいて、そしてブログに書く習慣があったから情報交換を非同期でできたんだろうなと思います。mosyaとの出会いもAwesomeがなかったらスルーしていたことだし、それをつないでくれたチャベスさんには本当感謝だなと💡

インターネットは不思議です。

学ぼうと強く思って行動し続ければ、実現できるキッカケが転がってる。


今後の取り組み

このブログは引き続きメンテナンスで学んだことをメインにプログラミングネタを扱います。

勉強ばかりではなく、もう少しプライベートを充実させたいなという反省から2025年以降はHEROというAwesomeを改造したブログで発信していく予定です。

読書と書くことはこれからも続けます。

でも手帳に書くことにも時間を割いていきたい。

少しアナログネタが多くなってきそうな気がしています。なぜ手帳なのかというと、手帳で日々の出来事を簡単にメモし、それを日記ノートに清書することで家庭内での会話が増えるからです。

年齢を重ねると、興味はいろいろ変化していくでしょうが、何に興味あるかというより、面白いと感じるまでに「どのように課題と向き合って、考え、習得してきたか?」という部分はプログラミングの習得過程と通づるものがあると思います。

ブログは別れても、扱っていることは同じ感覚です。過程は結果をすぐ出せるものではなく時間をかけながら積み上げていくものなので、今の時勢に合っていないのは重々承知。でも、そこに面白みを感じるから続けたいんです。

読んでもらうためではなく、書きたいものを書く。
書きながら習得への力を上げるのが目的。

自分の人生をよりよくするためにブログがある。

ブログがあるから、落ち着ける。

そんな気持ちの2024年の年末でした。来年はどんな1年になるのか、楽しみです♫


Xではたま〜にする更新のお知らせを行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/