プログラミングを始めて、はや３か月。
毎週課題提出をしてはいるものの、改めてコードについて聞かれると分からないな、、、。っていうことありませんか？
だけど周りはどんどん学習が進んでいって、今更こんなこと聞きづらいよな。などど二の足を踏んでしまう気持ち、分かります。痛いほど分かります。わかりみです。
今日ちょうどAnime.JSに挑戦している時に、疑問点があり、思い切ってまえたつ大先生に質問したところ、JS学んだはずなのに理解できてなかったぞ！という気付きがいくつかあったので共有させていただきますね。
▼コードの参考にしたページはこちらです▼
https://www.youtube.com/watch?v=-2dyyzU2O-o
targets:".block",
translateX:function(){
return anime.random(-800,700);
},
初めの頃の学習では「〇〇〇:△△△」のようにvalueが短い文字列になっていることが多かったのですが、この場合は「短いテキストをkeyに渡している」という状況ですね。
それと同様に「長い記述の関数をkeyに渡す」ということも可能なのです。valueは短いテキストであるという固定観念が混乱の原因でした。
container = document.querySelector(".container");
上記では緑色になっていますが、VSCodeで記述すると「querySelector」の部分が黄色くなります。これを「魔法」と呼ばれている機会に遭遇することがよくありますが、詰まるところ何？って感じでした。
これは特定のライブラリを読み込むことで使えるメソッドのこと。ここでのライブラリは「anime.min.js」となります。
つまり、今日の晩御飯にかに玉を食べたいな！と思った時に、普通であれば八百屋や魚屋でたけのこ・にんじん・かに肉・かまぼこ・きくらげ・しいたけを買わなければなりませんが、「永谷園」というライブラリが用意した「広東風かに玉の素」というメソッドを用いることで誰でも簡単においしいかに玉が作れるということですね。そうですね（？）
ライブラリが違うと、もちろん使えるメソッドも異なりますのでこれが「丸美屋」の「かに玉の素」だと全く違うかに玉が出来上がるということですね。（伝わってる？）
scale:function(){
return anime.random(1,3);
},
functionの最後に付いているカンマ。これって何の役割があるの？と思っていたんですが、結論、無くてもOKらしいです。「ここまでが一つのオブジェクトですよ～」を表す為のカンマなのですが、処理の一番最後のカンマってみんな付けるの忘れちゃうよね。という世話心から、JavaScriptではカンマが無くてもエラーが出ないようにデフォルト設定されているそうです。やさしい世界。
「こんなこと聞いて大丈夫かな？」「そこもう勉強したところじゃん！と思われるかな…」みたいな気持ちは誰しもが持っていると思うのですが、誰もそんなこと気にしてないから大丈夫だよ！と言ってあげたいですし、現に今この文章を通してお伝えしています。
そして、分からないことがクリアにあったらそれを誰かに教えてあげることで、自分のアウトプットにもなるという素晴らしいエコシステムですね。今後もこのエコシステムどんどん回していきましょう！
以上、本日の学習の気付きでした！