【超基礎】ProgateでJSを学んでこれは覚えとかなきゃなって思ったこと

前提

この記事はPython,C,C++がちょっとだけ書ける、読める筆者がProgateでのJS学習を通して、はえ～と思ったことをまとめたものになります。ちなみに生成AI頼りの個人開発をした際，JavaScriptを使いましたのである程度はわかっているつもりですが、自分で書かないと気づけない厳密な部分は何もわかっていないです。

記憶定着用のアウトプットに近いものになりますので、誤っている部分があれば訂正していただけると幸いです。。

筆者の技術力

• C,Python (基礎文法~ポインタ、アルゴリズムの授業、研究での使用など)
• HTML,CSS,JS (大半を生成AIに支援してもらったため読めるが書けない)
• C++ : (AtcoderのD問題をたまにギリギリ完答できる程度)
• React : (ハンズオン形式の教材で一度だけ学びました)

JSについて新しく学んだこと

大体同じ

for文やif文、四則演算や変数の更新などはPythonやCと同じであり、ここから固有の表現等で用途が枝分かれしていくんだろうなという印象。

letとconst

宣言の際はletやconstを使い、値を変更できる"変数"として宣言するか、変更できない"定数"として宣言するかを選択する。c++の様に型の制約は厳しくないが、変数か定数どちらとして扱うかを明示的にする必要がある。ちなみにc++ではconst修飾子を使い変数を書き換えないようにすることができる。

セミコロンについて

C++と同じように各行末につける。ただしなくても基本的にコードは動作するが予想外のバグを生むことがあるため、基本的には付けるようにすることが推奨される。

変数の命名規則

• 英単語であるべき。ローマ字は△
• 2語以上の場合は2つ目以降の単語の先頭の文字を大文字とする(キャメルケース)　
  例 : friendName,isLoggedInなど
• 先頭の文字が数字だとエラー

真偽値

PythonだとTrue/Falseの真偽値がtrue/falseになる。先頭が小文字。
（この様な、各言語間の細かい文法の違いを比較、変換できるサービスがあればなと思いました。まあChatgptでもいいんですけどね)

厳密演算子

演算子(==や!=)と、より厳密な比較をする厳密演算子(===，!==)が存在する。

const number = "46"; //numberに文字列の「46」を代入

console.log(number == 46); //true : 文字列"46"が数値の46に変換されて真となる。
console.log(number ===46); //false : 型についても厳密に等しいかを比較するため偽となる。

オブジェクトという概念

• CやC++における構造体の様なもの。構造体より柔軟性に富む。
• 下記コードのようにオブジェクトの中にオブジェクトを含めることもできる。
• よく目にするJSONはこれをテキストにしてデータのやりとりに使用されるものである。
• nameやgenderはプロパティと呼ばれ、各プロパティに対応する値が格納されている。
• オブジェクト名.プロパティ名で各値を取り出せる

const student = {
    name: "Taro",      
    gender: "Male",
    favorite: {
        animals: "cat", 
        food: "coke"    
    }
};

//値の取り出し方
console.log(student.name); //"Taro"
console.log(student.favorite.animals); //"cat"

undefined

直訳すると未定義。配列の存在しないインデックスや、オブジェクトの存在しないプロパティにアクセスすると返ってくる。

constと配列、オブジェクト

constで定数として宣言した配列やオブジェクトについて、再代入はできないが、中身の変更は可能である。

「宣言」とはメモリアドレスの割り当てを行う行為であるため、一度宣言されたものについて、再代入を行うと新たにメモリアドレスが割り当てられることになるが、これはconstでは許されていないため出来ない。

逆に既に割り当てられたメモリアドレスに存在する配列、オブジェクトについてその中身を変更する行為は、宣言時に割り当てられたアドレスを参照してその内容を変更するため特に問題はない。

言い換えるとconstで宣言された定数はメモリアドレスの再割り当てができないということである。

配列

const number = [1,2,3];

//NG
number = [4,5,6]; // Error
//OK
number[0] = 4; // [4,2,3]

オブジェクト

const friend = {name : "Sota" , gender : "Male"};

//NG
friend = {name : "Hanako" , gender : "Female" }; //Error
//OK
friend.name = Kumi;

まとめ

受講したコースは初歩の初歩、超基礎コースでしたが、意外と新しい知識が多かったです。やはり初学者が何もわからないまま生成AI頼りの開発をすると抜ける知識が多く、"なぜか動いてしまう"ものが爆誕してしまうのだなと痛感しました。😿