37個あったVanilla JSの課題を全て完走しました！
こんにちは。はるです。
所属している「もりけん塾」でJavaScriptのハンズオン課題 に取り組み、長らくレビューをいただいてきましたが、2023年12月 ついに課題を完走をすることができました！！
（今までのアウトプットは、こちらです。）
私にとってこの課題の完走はとても大きな節目なので、記録を残しておきたいと思います。
どんな課題？
現役フロントエンドエンジニアとして第一線で活躍されている もりけんさん(@terrace_tec)が作成した Web制作者が Vanilla JavaScriptを習得するための37の課題です。
DOM操作の基礎や非同期処理、Web制作で使用する機能など、課題を通じてJavaScriptの基礎を学んでいくことができます。
現に課題を始めたときは「const ? let? var?」の状態でした。わからないことが出てきたらその都度調べて実践しながらJavaScriptを覚えていくことができました。
拙い図ですが、最終的に下記のサイトマップのようなコンテンツを作り上げることができました！
制作物
機能は一部ですが動画を撮りました。
学んだこと
この課題を通じて学んだことは本っっ当にたくさんあります。
JavaScriptの基礎
まず、DOMの基本操作から、Promise（独学だったら自分には無理だったw）、IntersectionObseverをはじめとするVanilla JavaScriptの基礎をとことん実践しながら学びました。
そして、それらを使ってテーブルやニュースのコンテンツを’動的’に扱うことや、Web制作でも頻出の機能を実装していきました。最後には会員登録やログイン機能といったコンテンツもJSを使って実装することができるようになりました（！）
自分でもこんなコードが書けるようになるなんて驚きでいっぱいです。
リファクタリング
バックエンドは仮のAPIやローカルストレージを代用したため、本当の現場の実装とは違う部分があることも理解していますが、それも含めて現役のフロントエンドエンジニアであるもりけんさんや塾生さん（中にはフロントエンドとして就職されている方もいらっしゃいます）に直々にレビューをいただき、それぞれの課題の最適解や、読みやすいコードとは何か？というのを追い求めてくることができました。
JavaScriptを勉強している方はたくさんいらっしゃると思いますが、「レビュー体制」のある環境で勉強している人は案外少ないのではないでしょうか？
わたしも仕様に沿って「動いているコード」は書くことができても、レビューを受けてみることでそれがより読みやすく、より保守性の高いコードへとリファクタリングを重ねることができました。
ロジックを立てて細かなPRをする
そして、仕様に沿って1から実装計画を立てて自分でロジックを組んでいくこと、それを細かい粒度で実装して、都度PR（プルリクエスト）として提出するという流れも学ぶことができました。
GitやGitHubの扱い、レビューを受けたり、レビューをする（自分で他の塾生さんのコードをレビューすることもありました）という流れも学び、練習してきました。
Git/GitHubの扱い一つとっても、ブランチ運用の方法、見やすいコミットメッセージの書き方、gitignoreするべきもの、PRの出し方、gitの便利な機能（stashやrevertなど）などなど、独学だとなかなか知り得ない現場でのお作法なども知ることができました。
Git/GitHubの運用については、たくさんあるJavaScript課題を進めるのに必須のため、嫌でも体で覚えていきます。（ターミナルも怖くないです！）
それが実際の実務でも大きく役立っています！！
コードを読む力
自分でロジックを作って書くことももちろん大事ですが、他の人の書いたコードを読む力もとても大切だと思います。
この塾では他の塾生さんの課題レビューに参加することができるため、必然的に他の人が書いたコードを読み漁ることができました！（いまだにこれが自分で書くより難しいと感じてます..！）
気づいたバグや、コードのリファクタリングの提案だけではなく、「ここはどうしてこのように書いているのですが？」といった質問をすることもできるので、課題に対する理解がより増していったと思います。
まだまだ練習中ですが、実務で参考のJavaScriptコードを調べているときも、拒否反応なく「読もう！」という気持ちになれます。
Vite環境構築
途中でViteが導入され、塾の課題にあったconfigを作り上げるところにも参加することができて大変勉強になりました！
実務でもViteを使用しているため、あれこれ悩みながらconfigをいじった経験が大きく活きています！
日々に生かされていること！！
わたしはアプリを作るようなフロントエンドエンジニアではなく、Web制作者として日々Webサイトやコンテンツ作りを行なっていますが、それでもほぼ毎日（…！）JavaScriptを触っています！！
頻出のアニメーションや機能はもちろんですが、HTML/CSSで実現が難しいことも 自分でJavaScriptを考えて実装ができるようになりました。JavaScriptでこうしたらできるかな…といったイメージが持てることが多いので本当に頑張ってきて良かったなと思います。
もちろんWeb上で紹介されているJavaScriptを参考にもしますが、そのコードを自分の力で読むことができるようになってきたので成長を感じます。
＼ もりけん塾とは ／
現役フロントエンドエンジニアのもりけんさん(@terrace_tec)が作ってくださったJavaScriptやフロントエンドの知識を学ぶことのできる無料のコミュニティです！
ストイックで熱意のある塾生さんが集まっていて、日々学習を切磋琢磨し合っています。
JavaScriptをレビュー環境下で勉強したい方、レベルアップしたいWeb制作者やフロントエンジニアを目指す方、ぜひぜひ一緒に勉強しましょうー！！
わたしもJavaScript課題は終えましたが、引き続き塾でレビューに参加したり、ReactやAstroを学んだり、新しい技術を追い求めていきたいです＼(^o^)／
もりけんさんのXで定期的に募集があるのでチェックしてみてください✨
もしよろしければ わたしのアカウントでもお気軽にご質問などどうぞ📮
制作物
Lesson37のリンクから実際の挙動を確認できます。下記のjsonデータ情報を入力するとログインすることができ、コンテンツを見ることができます。
会員登録は、ご自身のお好きなものを入力していただくと登録ができ、ディベロッパーツールのApplicationタブから登録内容を見ることができます。パスワード変更も実際にできます。
今回の課題では、会員登録内容を使ってログインをすることはできません。（不特定多数の個人情報がAPIデータに溜まっていくことを防ぐためです）
ログインの際には以下のjsonデータをご利用ください。
{
"name": "Dicki",
"email": "Lane20@example.net",
"password": "cW3SfU2Lkfb1Yfm",
"userId": "f612ba1c0c5ccf45c0f57e97",
"id": "4"
},
//
学習に使用している本は、JavaScript本格入門・独習JavaScriptです。
あとがき
ここまでご指導いただいたもりけんさん(@terrace_tec)をはじめ塾生の皆さんに感謝申し上げます ! 課題は完走となりましたが、今後もReact学習や新しい技術の習得でお世話になりつつ、わたしも他の塾生さんのコードレビューをしたり、日々勉強していることを勉強会を開いてお伝えするなどで恩返ししていきたいと思っています !
まずは1つの節目として、今日までご指導いただきありがとうございました！！
//
【もりけん塾で勉強しています】
もりけんさん(@terrace_tec)のHPはこちら
