てくてく

C#畑にいたころ、「C#とJavaScriptは似てる」というような話をたびたび聞きました。
有名なゲームエンジンUnityがかつてサポートしていた言語がC#とJavaScriptであったこと(※現在UnityはC#のみです)もあり、C#とJavaScriptは似てると先入観のまま触れるようになりました。

初めて見たJavaScriptのソースがjQuery使用のものだったので、
「全然違うじゃん！！なんだこの表記！！」
とたじろいだ記憶があります。
jQuery特有の記載方法であり、JavaScriptがすべてあの書き方ではないと今なら分かります。
実際JavaScriptに触れてみて
「ある程度基本的な部分はどの言語も恐らく同じ。配列の扱いは確かに似ているかもしれない」
と感想を抱きました。

とはいえ、言語が違えば”常識”も違う。
雰囲気で使っているあれこれを、C系言語と比較しながら今一度きちんと勉強して理解するぞ！おー！！
※記事が長くなったので命名については分けます。

変数宣言
JavaScriptで変数宣言するとき
varletconst
の３種類の命令から始まります。
違いをそこまで理解できていなかったので、まずはここからお勉強。

var
C#にも型推論のvarがあるので同じものだと思ってました。C++だとauto。
JavaScriptのvarもおおよそ挙動は同じ。
ただし、なんとこやつグローバルで宣言でき、初期化しなくてもエラーにならず、しかも同じ名前で何度も宣言できて、スコープ内で宣言したものを外でも使えるのである！
分かりますか奥様！この驚きたるや。

例えばC#で以下のように記述してみる。
エントリポイント（ソースが実行される開始点）が必要な関係上class内に入れている
class Program
{
    var test;

    static void Main()
    {
        var test2;

        var test3 = 0;
        var test3 = 2;

        var test4 = 0;
        test4 = 4;

        var test5 = 0;
        for (int i = 0; i < 10; i++)
        {
            test5++;
        }

        var test6 = 0;
        Console.WriteLine("test6は" + test6 + "です。");
    }
}

上記だと、test4～test6以外はエラーになる。


これをJavaScriptで書き直してみよう。
classは一旦おいておく
var test;

function Main()
{
    var test2;

    var test3 = 0;
    var test3 = 2;

    var test4 = 0;
    test4 = 4;

    var test5 = 0;
    for (var i = 0; i < 10 ; i++) {
        test5++;
    }

    var test6 = 0;
    console.log("test6は" + test6 + "です。");
}

JavaScriptはなんとエラーにならない！！

しゅごい……。
この挙動はJavaScript特有のものらしく、「巻き上げ」と呼ぶそうです。脳内でへえボタン連打しました。へえボタン…分かるかな…ﾊﾊ。
とはいえ、C#扱っていた頃はデータ型きっちり書きたいマンでvarを使う習慣がさほどなかったので、JavaScriptで記述する際にintを使おうとしてエラって「intがない…だと…？」と困惑した記憶があります笑
varの再宣言ができて便利だなと思う一方、
変数を簡単に書き換えられてしまうと、意図しないバグが発生する
letやconstに比べて、varは巻き上げ時のバグを生み出しやすい
と記事を見つけたので肝に銘じます。

スコープ内で宣言したものを外でも使えるのスコープとは、for(条件文){...}やif(条件文){...}など{ }で囲まれた部分のことを言います。
これがね…実に気持ち悪い面白い動きなんですよね。
C#でスコープ内で宣言した変数をスコープ外で使おうとするとエラーが出ます。


JavaSciptさんはなんとえらーがでないんですねぇ。


宣言以降も使えるというのはなんやかんや使いやすいんだろうなとは思います。ちょっと私はまだ慣れないけれど、必要になったところから宣言できるのは、「この宣言した変数どこから使い始めてるんだ？」となるよりソースの可読性が高くなると思えばいいものなのかもしれません。

let
Let It Go が思い浮かぶほど馴染みないものでした。なんやこれ。
なので実はあんま使ってなかった。これからきっと使いこなせるはず…！
varと使い方が似ているletの特徴は同じ名前の変数を作れない、ブロックスコープを意識していることです。
前項varで分かる通り、私が過去触れた言語（C、C#、C++など）は同じ名前の宣言ができません（別同士のブロックスコープであれば名前が同じでも可。ブロックスコープについては後ほど）。
なので私からするとletのほうが馴染みがあるものでした。びっくり！
ただまあ、例えば「タグ内のテキストを取得したい」とかだと変数名をtextとかにするのが分かりやすくて楽だし何かと多用してしまいそうなので、jsファイル内に１つだけの変数にしたいときに使うのがいいのかな？とか思いました。
…いや、下手なこと言っちゃいけないな…ううむ…

２つ目のブロックスコープを意識しているに触れていきます。
「ブロックスコープ？」と初めは疑問でしたが、C系時代は「当たり前すぎて一周回って意識しない」感じのものでした。
ブロックスコープとは{}で囲まれた領域内のことを指します。
昔はブロックレベルはなかったそうですが、ES2015（2015年に標準化されたJavaSciptの規格ECMASCriptのこと。６版であるためES6と呼ばれていたらしい）で新しくブロックレベルが追加されました。letが使えるようになったのもこのときです。
varではfor文やif文内で宣言した変数を外でも使えましたが、letは使えない…個人的に挙動としてはこちらのほうがしっくり来ます。

letもvarもデータの上書きが可能なので、どう使うのが良いかいろんなプログラム見てもう少し勉強が必要そうです。

const
これはC#やC++にあるのと同じものでした。
データ型の宣言がない点では違和感を覚えますが、JavaScriptはそういうものなんですね。
constは定数です。定数とは「値が変わらないもの」のことです。
サイトで使うJavaScriptはあまり数字が出てこない印象があるのですが、ゲームプログラムだと数字がたくさん出てきます。パラメーターあたりなんかは数字祭りですね。
プログラムを打つ中で数字を扱うとき、原則として数字の意味を明確にしなければなりません。パッと見てなにを表すかわからない数字のことをマジックナンバーといいます。魔法の数字、でもすっごく嫌われる数字です。初期化で使う0は例外だとは思いますが。
例えば、jQueryを使い「速度500ミリ秒（0.5秒）のスクロールアニメーションを実装しよう」とします。
当サイトでのやり方だと
$('a[href^="#"]').click(function () {
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    let position = target.offset().top;
    $("body,html").animate({ scrollTop: position }, 500, "swing");
    return false;
});
になるわけですが、上記だと「500」の数字がマジックナンバーです。
「なんの処理か分かるし500が何を意味してるか分かるから別にこのままでもいいんじゃ？」
と思うでしょう。自分ひとりで好きなようにやっているのであればそれでもかまわないと思います。
ただ、他に使う人がいる場合はたとえ相手が意味をわかったとしても定数化しておくべきでしょう。
上記のコードであれば
$('a[href^="#"]').click(function () {
    const animSpeed = 500;
    let href = $(this).attr("href");
    let target = $(href == "#" || href == "" ? "html" : href);
    let position = target.offset().top;
    $("body,html").animate({ scrollTop: position }, animSpeed, "swing");
    return false;
});
と言った感じにするのがいいかな？と思います。
横着してclickイベント内でconst宣言していますが、もし全体的によく使うものであればconstの宣言はファイルの一番最初にやるのが定石かなと思います。（C系で語ってるけどJavaScriptもそうだよね…？）
constで宣言されたものはデータの書き換えができません。これがvarやletとの大きな違いでしょう。
C系で使うときはデータ型が必要なのでconst float TAX = 1.1;みたいな使い方ですが、JavaScript はデータ型宣言がなくとも使えるので数字以外にタグやセレクタでも使えますね。（例：const TAX = document.getElementById("TAX");）
何度も使うタグはconstで定義しておくと楽だと思います。

最後に
個人サイトを作った当初はなんとな～く「動けばいいや」と開設や運営に重きをおいていました。今ではJavaScriptで実装したいことがあればある程度自力で書けるようになったと思います。
そんな今だからこそ、基礎的な部分を学び直せば理解が深まるのではと（諸事情で買った）本を開きました。
まだまだ序盤しか読めていませんが、今の私にはちょうどよく分かりやすいので本で学んだことを自分の考えを添えて記事にしていこうと思います。
JavaScript勉強の旅は始まったばかりであるっ！

関連記事
JavaScriptを理解したいっ【命名編】

参考
JavaScriptでvarが非推奨な理由を整理してみた
改訂新版JavaScript本格入門モダンスタイルによる基礎から現場での応用まで
※私が参考にしたのは2019年発行のものですが、最新版があるのでご購入の際は最新版（改訂3版JavaScript本格入門
～モダンスタイルによる基礎から現場での応用まで）が良いかと思います。