JavaScriptを身に付けるためにZeroPlus在学中にやってたこと
私はZeroPlusで学んだHTML、CSS、JavaScriptの中でどれが一番好きかと聞かれたら間髪いれずにJavaScriptと答えます。
そんな私がJavaScriptをどうやって勉強してきたのか、学習のプロセスを初めてのnoteで書いてみようと思います。
JavaScriptが苦手な方やこれからZeroPlusで学習される方々の助けに少しでもなれたら嬉しいです。
私はZeroPlus入学前からIT業界におり、プログラミングはすでにある程度学習していました。しかし、JavaScript自体をちゃんと学ぶのは初めてでした。
ですので、JavaScriptを習得するために行なったこと、プログラムを書く時に考えていることの2つについて振り返っていきたいと思います。
ガチのエンジニアの方々から見たら「それは違う！」と思われるような内容になっているかもしれません。優しく見守って読んでくれたら嬉しいです。
ど素人から基礎を身に付けるまで
プログラミングの基本を理解するためにしたこと
未経験からIT業界に転職をして生まれて初めてプログラミングを学んだ際、基礎を身に付けるために私は最初に以下の内容を学習してました。
・変数の扱い方
・配列の扱い方
・if文の書き方
・for文の書き方
なぜこの内容なのかと言うと、まずプログラミングでは値を扱わないことがないです。ですので、値を扱うための基本である変数と配列についての理解は必須でした。
次にif文とfor文です。
そもそも、プログラミングというのはコンピューターに実行してほしい命令を書いたものです。この命令を正確に書くために必要なのがアルゴリズム。
アルゴリズムは順次処理、条件分岐処理、反復処理の3種類の処理の組み合わせでできています。
順次処理はプログラムは基本的に上の行から実行されるよという内容です。条件分岐処理と反復処理のコードが書けるようにするためには最低限if文とfor文が書けるようになる必要があります。
ですので、if文とfor文をはじめの方で学習しました。
今でも新しい言語を学ぶときははじめにif文とfor文の書き方から調べます。
これらを理解した上で、オブジェクト指向とかAPIとか色々あるプログラムの書き方を覚えていきました。
JavaScriptの学習法
ここからの内容は実際にZeroPlus在学中のJavaScriptの講義2回分の間、つまり2週間でどのような勉強をしていたのかを振り返っていきます。
Lesson8が終わった時の予習記事の多さに驚きましたが、一旦情報を整理してJavaScriptがどういう言語なのかを理解し、アニメーションの実装ができるようになることをゴールに情報の取捨選択と学習の順番を考えてました。
振り返ってみると3段階に分けて学習していたような気がします。
◆学習の1段階目
ここの段階では基本的な文法を覚えることをしていました。
・変数を扱い方
・配列を扱い方
・if文を書き方
・for文を書き方
これらについて調べました。ZeroPlusに入る前はJavaという似たような名前の言語の学習をしていました。名前こそ似ていますが、その特徴には違いがあったので、JavaScriptの特徴を理解するようにしました。
if文やfor文の構文は最初は暗記になります。最低限の暗記は必要だと思います。暗記した内容を定着させていくためにコードをたくさん書いていきました。
まだJavaScript学習前で読んでくださっている方がいるかもしれないので、少し詳しく書いていきます。
・変数の扱い方
letとconstの違いについて簡単に一言で十分ですので、説明できるようになれば大丈夫です。varは余裕があれば覚える感じでいいです。
変数に入る値は文字と数字とHTMLから取ってきた要素などを入れることができると認識しておけば取り合えず問題ないです。
null値とか未定義値とかは一旦置いておきましょう。
・配列の扱い方
配列の定義の仕方と配列の中から値を取り出す書き方をまずは覚えます。
その上で、要素、インデックス番号の2つの言葉の意味についてこちらも簡単に一言でいいので説明できるようにしておきましょう。
・if文の書き方
ifの他にもelseやelseifなどがありますが、とりあえず基本的なif文から覚えて、elseは役割を押さえておけば一旦大丈夫です。
・for文の書き方
こちらもまずは基本的なfor文の書き方を覚えましょう。while文とかforEachとかは一旦後回しにします。
しかし、forEachだけはZeroPlusのカリキュラム中でも頻繁に使っているので、後で覚える必要が出てきます。
for文は配列と組み合わせて使うことが多いです。「配列変数名.length」という書き方を使った配列の中身をfor文で全て取り出す書き方はこの段階で習得しておきたいです。
◆学習の2段階目
基本的なプログラミングの文法を抑えることができたら以下の内容に取り組みました。
・DOM操作
・関数
・DOM操作
DOM操作はJavaScriptでアニメーションを実装する上で避けては通れない内容なので、結構丁寧に学習してました。
同じ要素を取得したとしてもgetElementsByClassName()で取得するのか、querySelector()で取得するのかで取得のされ方が異なります。
このような違いもありますので、思いついたことはやってみて、コンソールに表示された内容をわけ分からないものは調べてみてと地道なことをやってました。
・関数
普通の関数、無名関数、アロー関数の順番で覚えました。
特にアロー関数は難しいと感じてましたが、色んなコードで出てきていたので、構文を覚えて定着するまでひたすらコードを書いてました。
◆学習の3段階目
ここの段階では実際の画面で動作を確認することができるような勉強をしていました。
具体的には次の2つを中心に勉強してました。
・addEventListener()を使う
・GSAPを使う
・検索したアニメーションをコピペしまくる
・addEventListener()を使う
これは革命的でした。「なるほど！こうやって動きを付けるのか！」と感動した記憶があります。
()内に何を書けばいいのかをゆっくり整理しながら使い方に慣れていくのがいいと思います。
その際にコールバック関数という言葉が出てきます。「コールバックって何？」と思うかもしれませんが、つまりは関数なので、関数の機能を抑えて怯えずに挑戦してみてください。このタイミングでforEachを覚えました。
・GSAPを使う
from()の使い方から覚えました。GSAPを使えるようになってから表現できる幅が広がりました。これも感動しました。
GSAPもどのようなことを必ず書かなければいけないのか、構文を意識しながら理解するのがいいと思います。
・検索したアニメーションをコピペしまくる
「JavaScript アニメーション」などで調べるとたくさんヒットするので、その中から好きなやつをコピペして再現してました。
このとき、コピペしたコードの変数の中身などをちょっとずつ書き換えて動きにどのような変化が出るのかを見ていました。
最初からサンプルコードを正確に読んでみるのもいい勉強法だとは思いますが、正直、コードを見ただけではイメージが湧かなかったため、ざっくり見たら、コードを書き換えて動きを確認する方が処理の内容を理解しやすかったです。
あと、動くのを見る方が楽しい(笑)
ここまで勉強をしていくとZeroPlusのJavaScriptの講義はだいたい攻略できると思います。
最初に学ぶfor文でコンソールに0～9を出すことや、「Hello, World!」を繰り返し表示させることなど、Web制作と何か関係があるのかと疑問に思うかも入れませんが、基本の文法を理解するためにはシンプルで分かりやすい内容となっています。
基本の文法さえ押さえてしまえばアニメーションのコードを書くときに理解が深まるので、諦めずに取り組んでみてください。
プログラムを書くときに考えていること
ここの結論は「実装したい内容を言語化する」です。
「JavaScriptの書き方を勉強してみたけど、実際に書こうとすると何を書いていいか分からない、、、」
というようなことを感じたことはありませんか？
条件によって処理を変えるならif文。同じことを繰り返すならfor文。イベントを付与するならaddEventListener()を使う。
こんな感じで個別になってたら分かるけど、いざ実装したいものができて、コードを書こうとしたときに手が止まり、落ち込む経験をしたことがある人は多いと思います。
そんな状態から脱却するためには「実装を細分化して言語化する」ことが大切だと思っています。
例えば「クラス名が◯◯◯になっている要素が4つあって、それぞれの要素に書かれているテキストをクリックしたら赤くなる」という機能を実装したいとします。
慣れたらすぐに手が動くかもしれませんが、まだ慣れていないうちはここから何が必要なのかを細分化していきます。
この場合だと
・クラス名が◯◯◯になっている要素を取得する。
・4回繰り返しが行われるfor文を書く。
・for文の中の処理で取得した要素にaddEventListener()を使ってイベントを付与する。
これらの組み合わせで機能が実装できるようになります。
このような細分化して言語化していくことがアニメーションの実装力を上げていく力になると思います。
繰り返しになりますが、「実装したい内容を細分化して言語化していく」これはJavaScriptでアニメーションを実装していく上でとても重要な力だと思っています。
そして、とりあえず想定通りに動けばオッケーぐらいの感じでコードを書いていきます。
他の人が呼んでも分かりやすいコードや簡潔な書き方をしているコードを書けるのが理想ですが、はじめのうちはとりあえず動くコードを書ければいいやという気持ちで書いてます。綺麗なコードは慣れれば自然と身に付いていくものですので、あまり気にしないで書いてます。
最後に
ZeroPlus在学中のJavaScriptをどうやって学習してきたのかを振り返ってみました。
今後、クラスの勉強会用に作った内容や色々試しで書いてたアニメーションをnoteにまとめて発信できていけたらと考えているので、もし良かったらこれからも読んでいただけると嬉しいです。
この記事が気に入ったらサポートをしてみませんか？