こんにちは。
Keiです。
今回は【JavaScriptの仕組みを言語化する】というテーマで学んだことを自分の言葉で整理しますが、この記事を投稿するR6.05.02時点では基礎知識を文章化はしてみたものの、意味は分かるけどあまりピンと来ていない…という状態です。
その為、この記事は「実際にコードを書く際に必要な用語の知識」としてアウトプットしたものになります。
基礎概念①：変数
変数はデータを一時的に保存する容器として機能する。
簡単に言うと、情報を入れるための名前付きの箱。
数値やテキスト、オブジェクトなど様々なデータを入れておき、別の場所で使用することが出来るようになる。
Webサイトの何を動かすのか：
・ユーザーがサイトにログインするとき名前や年齢などの情報を変数に保存する
・ショッピングカート入ってる商品数や合計金額を計算する
・ユーザーのアクションに合わせてメッセージを表示させる
等々
変数を使うためには”宣言”というキーワードで準備する必要がある。
種類は主に’var’、’let’、’const’など。
これらのキーワードにはそれぞれに異なる振る舞いがあるため、状況に応じて使い分ける必要がある。（現代のJSではvarはあまり使用されないのだとか）
letで宣言された変数は、その変数が宣言されたブロック（｛｝で囲まれた範囲）内でのみ有効となる。
constは「定数」を宣言するために使用されるため、値を変更できない。
つまり初期化（最初の値を設定すること）が必要となる。
このように準備（宣言）した変数はその変数名に応じて値を取得したり、新しい値を代入することが出来る。
その記載方法が'console.log(名前);’というコード。
但し、constで宣言された変数には新しい値を代入することが出来ない。
基本概念②：データ型
Webサイト上で保存する様々な情報をいろんな形で保存できる。
Webサイトの何を動かすのか：
1.数値 - Number
商品の価格、スコア、計算、タイマーのカウントダウン等に使用される。
例えば、ショッピングサイトで商品の価格を計算する際に用いる。
2.文字列 - String
ユーザー名、商品説明、メッセージなどのテキスト情報を扱う際に使用される。
例えば、ユーザーがログインする際に名前を表示させるために用いる。
3.ブーリアン - Boolean
条件が真（true）か、偽（false）かを判断するために使用される。
例えば、ユーザーがログインしているかどうかをチェックするのに用いる
4.配列 - Array
リストやデータの集まりを管理する際に使用される。
例えば、ショッピングカートに入れた商品のリストや口コミのコメントを扱う際に用いる。
5.オブジェクト - Object
複数の関連情報をひとまとめにして扱うために使用される
例えば、ユーザーや商品の情報など、多くの詳細を含む情報を保存するのに用いる。
ユーザー情報：個人名・性別・生年月日・住所・連絡先番号・決済情報 等
商品情報：商品名・商品種別・製造会社・値段 等
→オブジェクト指向という考え方の土台になっている。
6.未定義 - Undefined
プログラムが認識できるような値がまだ設定されていないことを示す。
デバック中に変数が適切に初期化されているかどうかを確認する際に用いる。
7.意図的な未定義 - Null
例えば、商品名を入力したが見つからなかった場合に「検索結果なし」とする場合に用いる。
これらのデータ型を使用することで、Webサイトにユーザーの入力を適切に処理・保存・表示させるような機能を与えられる。
基本概念：演算子
1.算術機能（算術演算子）
ショッピングカート内の商品の合計金額を出す計算、割引後の価格を計算する際に使用される。
例えば、商品の数を掛けることで合計価格を出したり、割引率を適用する際に用いる。
要するに足し算、引き算、掛け算、割り算をさせるということ。
2.比較機能（比較演算子）
ユーザーが入力フォームに記述した情報が正しいかどうかを確認するために使用する。
例えば、ユーザーが年齢の入力をした際に、特定の年齢よりも上かどうかを確認するということ。（お酒のホームページで最初に年齢確認されるやつみたいな）
3.複数条件のチェック（論理演算子）
ログイン機能やアクセス制限があるページで、ユーザーが入力した情報が正しいかどうかを確認する際に、複数の条件を提示する際に使用される。
例えば、ログイン画面でユーザー名とパスワードが両方正しい場合にログインを許可する、片方どちらかが間違っている場合は許可しない、というよくあるアレを作れる。
4.データの更新（代入演算子）
ユーザーの操作に基づいて、変数の値を更新する際に使用される。
例えば、ユーザーがページ内で行う選択によって、表示する画像やテキストを変更する場合に用いる。
ショッピングサイトで会計を済ませたら「ありがとうございました！」と出るアレを作れる。
5.カウンターの管理（インクリメント/デクリメント演算子）
サイト上でカウント（ショッピングの際の商品数選択）を管理する際に使用される。
これらの演算子を適切な部分に使用することで、ユーザーのアクションに応じた計算やデータ更新を行うことができる。
そのため、どの演算子が何の機能を動かすか、という基礎知識は必須。
（逆に言えば、コードを忘れても演算子の各機能を知っていれば後から調べられる）
まとめ
これら基礎概念はWebサイト上で「できること」を言語化したものだが、これさえ覚えておけば実際にコードを書く際に詳細な書き方を忘れてしまっても、「どこに何を実装するか」は分かる。
要するに、
「できること」は暗記しろ、実装方法（コーディング）は調べながらやれ
