はじめに

こんにちは。web開発未経験からwebアプリケーションエンジニアになるため、勉強を始めようと思い記事にいたします。
私のこれまでの経験はC言語を嗜む程度であり、コンピュータサイエンスに関する知識がゼロのところからのスタートとなりますので暖かく見守っていただけると幸いです。最終的にはReact、Next.jsとモダンなweb開発?へと繋げていけたらと思います。また、初学者の方は、私の記事と一緒に勉強していけたらと思います。
よろしくお願いいたします！

1.変数

どの言語でもそうですが、変数を宣言してあげる必要がありそうです。

var name = 'Kenta';
let age = 30;
const country = 'Japan';

var、let、constとあります。ざっくりした使い分けとして、

・基本はconstを使う。再宣言、再代入ができないため、エラーを未然に防ぐことができる。
・繰り返し構文にはletを使う。
・varは汎用性が高すぎるが故にあまり使わない。

とのことです。
ここで関数スコープとブロックスコープという言葉が出てきました。
簡単言うと、関数スコープは関数全体で有効になる、ブロックスコープはブロック内({}で囲まれた部分)のみで有効という意味らしいです。
ここで、varは関数スコープで、let、constはブロックスコープです。

function testVar() {
  if (true) {
    var x = 10;  // varは関数スコープ
  }
  console.log(x);  // ここでもxにアクセス可能 => 10
}

function testLet() {
  if (true) {
    let y = 10;  // letはブロックスコープ
    console.log(y);  // ここではyにアクセス可能 => 10
  }
  console.log(y);  // ここではyにアクセスできない => エラー
}

へー、おもしろ。

2.データ型

JavaScriptには7つの基本データ型があり、特徴としてJavaScriptには動的型付けがあり、変数は宣言時に型が決まらない。実行時に型が決まるらしい。へぇー。

Number: 整数や小数
String: 文字列（例: "Hello", 'World'）
Boolean: 真偽値（trueかfalse）
Undefined: 初期化されていない変数の型
Null: 明示的に値がないことを示す型
Symbol: ユニークな識別子
BigInt: 超巨大な整数（ES2020以降）

3.演算子

算術演算子

+、-、*、/、%はCと同じだ。

比較演算子

==：型変換を行い比較する
===：方も含めて厳密に比較する

console.log(5 == '5');  // true（型変換が行われる）
console.log(5 === '5'); // false（型が異なるため）

へぇー。おもしろ。===で比較できるようなコーディングしたほうが管理しやすいコーディングな気がするな。

論理演算子

&&、||、!これらもCと同じだ。

4.条件分岐

if~elseとswitchがあるらしい。
if~elseは条件に応じた分岐、switchは値に応じた分岐っていう違いがある。

if~else

let score = 85;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B'); //今回はここ
} else {
  console.log('C');
}

switch

let fruit = 'apple';

switch (fruit) {
  case 'apple':
    console.log('This is an apple.'); //今回はここ
    break; //breakがないと次のcaseに進んでしまうので必要。
  case 'banana':
    console.log('This is a banana.');
    break;
  default:
    console.log('Unknown fruit');
}

なるほど、範囲画広くなきゃswitchか。

ちょ待って、全部if~elseでよくない？そう思った私は質問してみた。
すると、条件が多い時はswitchの方がスッキリ書けるらしい。納得。

5.ループ

基本通りforとwhileがあると。一応備忘録も含め例を書いておく。

for

for (let i = 0; i < 5; i++) {
  console.log(i);
}

while

let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

Cと一緒で安心。

6.関数

なんか色々書き方があるみたいなので、次章以降に。

function greet(name) {
  return 'Hello, ' + name;
}

const greet = (name) => 'Hello, ' + name;

ちなみに下はアロー型というらいしい。
それぞれ、特徴があって使い分けるらしいわ。
ほえー。難しそう。

おわりに

今回は変数や型などの基本的な部分について学習しました。
これだけ学んでも何も動かせないので、早く何かプロダクトを作ってみたいものです。
記事に足を運んで下さりありがとうございます。
それではまた。