JS初心者が盛大に勘違いしていたこと #JavaScript

今回はJavaScriptを学び初めて数週間の私がプログラムを書く上で盛大に勘違いしていて、先輩にコードレビューをしてもらった時にとても恥ずかしい思いをしたことを備忘録も兼ねて記録し、実は・・・と同じように勘違いしていた人が恥ずかしい思いをせずに済むように、また無駄に時間をかけずに少しでも綺麗なコードが書けるようになるようにと願っていろいろ書いていきたいと思います。

関数を全て即時関数で記述していた

プログラムを学んだことのある人ならば関数はご存知かと思いますが、JavaScriptには関数にはざっくり分けて３種類存在しており、以下のようになります。
・通常の関数

     function example(){
     処理内容1;
     処理内容2;
     }

     example();

・無名関数

     var example = function(){
     処理内容1;
     処理内容2;
     }

     example();

・即時関数

     (function example(){
     処理内容1;
     処理内容2;
     })();

特に使う理由がなければ通常の関数で問題ないのですが、関数の基本的な記述の仕方がわからなかったため、とりあえず間違いなく動く方法を最初に知ったのが即時関数だったので、そのまま全て即時関数で書いていました・・・・

最初は良かったのですが、複数の関数でループ処理（タイマー処理）を用いていたため、途中意味不明のバグに苦しめられまくりました(**)

contextを複数定義していた

JS初心者がCanvasを使っていたらぶち当たった壁 - Qiita
canvasを使っていて、色が正しく適用されないバグがあった際に、原因がコンテキストにあると勝手に勘違いしてしまい、それぞれの関数ごとに
・ctx
・ctx_1
・ctx_2
・ctx_3

のような感じで複数定義していた。確かに問題なく動くが後々、あまり良くない書き方だということを教えてもらいました。

まとめ

JavaScriptはコンパイルしなくても動いてしまう分バグの原因を探るのが難しいように思います。間違って記述していても動いてしまうのが逆に厄介なこともあると実感しました。

基礎が全くない状態でドットインストールなどを見て、必要な箇所だけを勉強しているとこういうことが起きるんですが、最初はしょうがない気もします。一つ一つ問題を解決していく自力をつけることこそエンジニアとしてのスキルだとも思うからです。

ちょっと脱線

解決不能なバグに頭を悩ませていた時にある先輩にコードを見せたところ、ありとあらゆる方法を駆使して解決してしまうのですが、その方法はまずググるのではなく

       console.log(a);

や

       alert(a);

をうまく使ってこの時点でこの変数にはこの値が入っている、ってことを一つ一つ確認しているんですね。
少しづつ自分もGoogle先生に頼りすぎず、自分でconsoleを使うようにしてみると、少しづつ自力でバグを解消できるようになってきています。
このように地に足をつけたプログラミングしていけるかどうかが、記述方法を覚えること以上にかなり大事なのではないでしょうか。

こういうことってネットにもなかなか載ってないし、正直かなり泥臭くてやりたくないです。
ネットで記述調べてパパっとコピペして終わり！！ってのは楽でいいんですけど、自分に理解力がなさすぎて、一度記述を読んだだけでは理解できないから、こういうやり方をもっと覚えていきたいな、と思います。