2025/04/14

コーディングの話

JavaScript勉強日記📔#03

こんにちは🌞

みなさん、最近JavaScript触ってますか？

私はというと…「やっとわかってきたかも！」と思う瞬間が増えて、楽しくコードがかけるようになってきました。

そんなこんなで、久しぶりの『JavaScript勉強日記』をお届けします✨

今回は、「どうやって勉強しているか」「どんな変化があったか」など、ここ数ヶ月の学びを振り返ってみたいと思います！

JavaScriptを勉強し始めた理由やきっかけについては、以前の投稿で詳しくお話ししました。

そちらもぜひあわせてご覧ください！👀👉JavaScirpt勉強日記01

勉強方法

ここ数ヶ月、私はある“縛り”を自分に課していました。

それは「JavaScriptだけでコーディングする」というもの。

jQueryが必要な場面（プラグインなど）を除いて、できる限りJavaScriptで書くことにこだわって取り組みました。

最初はとにかく大変で、

基本的な書き方も曖昧
アニメーションの実装手順がわからない
classList.addやaddEventListenerといった、超基本の使い方すらピンと来ない

といった状態。

とにかく何もわからないまま手を動かす感じでした。

ChatGPTをひたすら真似してみた

そんな私の助けになってくれたのが、ChatGPTです。

ただし、ただコードをコピペするだけではなく、『真似をする』ということを意識しました。

実は以前もChatGPTを使っていて、教えてもらったコードを参考にしながら書いてはいたのですが、
「全然自分の身になっていないな…」という感覚が拭えませんでした。

そこで変えたのが、次の2つです。

「意識」を変える

「この案件で実装できればOK」から、

「この案件でやったことは自分の武器にする」という気持ちで取り組むようになりました。

精神論かもしれませんが、この意識の変化でコードを見る視点や調べ方が変わったように感じます。

「わからないから聞く」ではなく、「理解するために聞く」に変わった感覚です。

「ChatGPTへの聞き方」を変える

今までは、やりたいことをざっくり全部伝えて、丸っとコードを書いてもらっていました。

でもそれでは、どこがどう動いているのか理解できず、気づけば「何も身に付いてない…」ということに。

社長との面談で「たくさん書いてるのに、全然自分のものになってる感じがしなくて…」と相談したところ、

「部分的にChatGPTを活用してみては？」とアドバイスをいただきました。

それからは、

まずは自分でできるところまで書いてみる
わからない部分をChatGPTにピンポイントで聞く

というスタイルに切り替えました。

最初は質問の回数も多く、なかなか思うようにいかないこともありましたが、

少しずつ理解が深まることで「聞かずに書けるコード」が増えてきて、確かな成長を感じられるようになりました。

理解の変化

最初の頃は、JavaScriptで何かを書こうと思っても、「何から書けばいいの？」という状態でした。

長いし、ややこしいし、正直ちょっと苦手な言語だと感じていました。

でも、実践を積む中で

コードの意味がだんだんわかってくる
実装の流れが自分の中で整理できる
「こういう感じのコードになるかな？」と、ChatGPTの回答を予測できるようになる

など、確実に前進している実感があります。

JavaScript縛りでコーディングをするようになって初めての案件を終えた時には、

『あ、掴んだかも』と言う感覚がありました。

それまでは、毎回1から調べて、聞いて、試して…の繰り返しでしたが、

この頃から「これは前にやった実装に似てるな」と気づけるようになったんです。

聞き方も変わってきて、

具体的に「今ここまで書いてて、この次どう書いたらいい？」と聞けるようになったことで、ChatGPTの返答も精度が上がり、実装ミスも減ったように思います。

今後の勉強について

この数ヶ月の経験から、やっぱり一番身につくのは実践だと実感しました。

なので、これからもとにかく手を動かしながら学んでいきたいです。

すぐに達成したい目標は、「ChatGPTに頼らなくても、自分で実装できる状態になること」。

そのうえで、アニメーションやAPI連携、フレームワークなど、より応用的な内容にも少しずつ挑戦していきたいなと思っています。

最後に

少し前の自分と比べると、理解できることが増えたり、苦手意識が薄れてきたり、

小さな変化ですが確かな“成長”を感じられるようになってきました。

これからも地道に、コツコツ、自分のペースでやっていこうと思います。

読んでくださってありがとうございました！

次回は私がJavaScriptの実装でよく使うコードを一挙にご紹介します！

お楽しみに💐

【おまけ】こんなコード見たことありませんか??

774: function(e, t, n) {
				"use strict";
				n.r(t);
				var r = n(709),
					i = n.n(r)();
				i(window).scroll((function() {
					i(".inview").each((function() {
						var e = i(this).offset().top,
							t = i(window).scrollTop(),
							n = i(window).height();
						t > e - n + n / 2 && i(this).addClass("is-anim")
					}))
				}))
			},