はじめに
こんにちは。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は値に応じた分岐っていう違いがある。
let score = 85;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B'); //今回はここ
} else {
console.log('C');
}
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 (let i = 0; i < 5; i++) {
console.log(i);
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
Cと一緒で安心。
6.関数
なんか色々書き方があるみたいなので、次章以降に。
function greet(name) {
return 'Hello, ' + name;
}
const greet = (name) => 'Hello, ' + name;
ちなみに下はアロー型というらいしい。
それぞれ、特徴があって使い分けるらしいわ。
ほえー。難しそう。
おわりに
今回は変数や型などの基本的な部分について学習しました。
これだけ学んでも何も動かせないので、早く何かプロダクトを作ってみたいものです。
記事に足を運んで下さりありがとうございます。
それではまた。