Zenn
🦈

JavaScript基礎

2023/07/12に公開
JavaScript
tech

JavaScriptとは？

JavaScriptエンジンによって事前コンパイルなしで実行されるプログラミング言語！

コンピューターは０か１しかわからない。
例えば、C言語だとコンパイラというものを使って事前に、言語のプログラムを機械語に変換している！

JavaScriptはJavaScriptエンジンというものを使い、事前コンパイルなしでいきなりJavaScriptのファイルを受け取ってそれをそのまま実行するというソフトウェア。

JavaScriptエンジンは、基本ブラウザの中にあり、基本ブラウザ上で実行されるもの！

Google Chrom, Edge = V8
FireBox = SpiderMonkey
Safari = JavaScriptCore

nodejs はブラウザ以外でJavaScriptを実行したい目的で使用するソフトウェア。

console.log

let count = 0;
console.log(count);
count = 30;
console.log(count);
let newCount = 0;
  • デベロッパーツールのコンソールで確認できる！

変数についてざっくり

let count = 0;

この変数を宣言しているところを、変数宣言と言ったり初期化と言ったりします！
初期化した時の= 0のところの値のところを初期値と言ったりします。

  • 初期化する時に、初期値を与えなかった場合は、undefined(未定義)という値が入る！
let count;
console.log(count);
count = 30;
console.log(count);

  • 同じ変数を2回定義することはできない！
let count = 0;
console.log(count);
count = 30;
let count = 30;
console.log(count);


すでに宣言されてますというエラーが出ます！

また、宣言されていない時にcountという値をアクセスした場合は？

console.log(count);
let count = 0;
console.log(count);
count = 30;
let count = 30;
console.log(count);


初期化する前にcountにはアクセスできませんというエラーが出ます！

定数についてざっくり

定数とは
一定の値を常に返す変数のようなもの

letの部分をconstに変えると定数になる！

const daysInWeek = 7;

1週間の日にち＝7日
こんな感じで必ず一定のものになるようなものを定数として定義！

  • 新しい値で再び代入することはできない。
const daysInWeek = 7;
daysInWeek = 8;


定数を代入することはできないというエラーが出ます！

  • 初期値を与えないこともエラーになる
const daysInWeek;


constの宣言の中で初期値を忘れてますよというエラーが出ます！

じゃあなぜ定数が必要なの？

例えば、daysInWeekの値が変更されたとなった時に、
一箇所しか変えなくていい！

定数には意味のある名前を付けることができるため、コードが読みやすくなる。
特定の値がどのような目的で使用されているかを理解しやすくなる！

将来のメンテナンス性も向上する！

基本的には変数を使う必要がないところは、常に定数を使用するようにする！！

変数と定数の名前のルール

  • 基本どんな記号も入れることができない（-,*などなど）
  • 例外で入れることができる記号は2つ($,_)
let tomato$Count;
let _tomato_Count;
  • 数字は先頭に来てはいけない！
let 7tomatoCount; //NG
let tomato7Count; //OK
let tomatoCount7; //OK
  • 使えない予約語がある！
例えば
let const;　//NG
  • 日本語でも他の言語でもできるが、一般的には英語
let トマトカウント;
  • 大文字と小文字を区別する
//この2つの変数は違う変数！
let tomatoCount; 
let tomatocount;
  • 単語の区切り方はキャメルケースで区切るのがベスト！
    JSではスネークケースはあまりよくないとされている。
let tomatoCount;

PAケースといった書き方もあり、使ったりすることもあるが
変数名定数名では基本的にキャメルケースで書く！

let TomatoCount;

算術演算子

数学の計算をするための演算子を算術演算子
= は代入演算子

2 + 5; //足し算
7;

10 - 7; //引き算
3;

3 * 4; //掛け算
12;

20 / 4; //割り算
5;

32 % 5; //あまり
2;

2 ** 3; //累乗
8;

2 + 3 * 4; //普通の数学と一緒で掛け算から計算される！
14;

(2 + 3) * 4; //普通の数学と一緒で足し算を先にしたい場合は()をつける！
20;

省略記法を使う方法

let result = 5;
result = result + 10;
result += 10;

2行目3行目は全く同じ意味！どちらも15になる。
他の記号も同じように省略できます！

1にした場合のみ、他にも2つの書き方がある！

let result = 5;
result = result + 1;
result += 1;
result ++;
++result;

2行目〜５行目は全てresultを＋１するという意味で同じ！
これは掛けても割っても同じになるので、プラスとマイナスだけある。

  • この2つの違いは？
result ++;
++result;
  • 1行目の、result++の場合は、値を返している。
let result = 5;
result = result + 1;
result += 1;
console.log(result++);
++result;

コンソールでは何を返しているか？

7が返ってきてる！
つまり、+1する前の値を返していることがわかる。

  • 2行目の++resultの場合、
let result = 5;
result = result + 1;
result += 1;
console.log(++result);
++result;

8が返ってきてる！
つまり、+1した後の値を返していることがわかる。

また、++のところで、変な改行が入ってしまうとうまく動かなくなることがあるので注意！

データの型と動的型付け

データにはいろんな種類がある。

// ナンバー型
let number = 10; //整数をinteger
numer = -4; //整数をinteger
number = 32.42; //小数をfloat
number = 'something';  //文字列も入れることができる

// ストリング型
let string = 'Hello';

他のプログラミング言語であれば、例えばnumberという変数は、
ナンバー型を入れるための箱ですということを明示的に示す必要がある！

が、JavaScriptにおいては、numberという変数はナンバー型専用というのは一切ない！
常にどんな形でも入れることができる🙆🏻‍♀️
これを、動的型付けと言います。

動的とは？
状況によって変化すること。
今回の場合だと、数字も入れることができるし、文字も入れることができるようなイメージ！

３つの文字列の書き方

'',"",``の3種類がある！

const userName = 'Yoshipi';
const userName = "Yoshipi";
const userName = `Yoshipi`;

違いは？
文字列と変数を組み合わせるとき、、

let string = 'Hello';
const userName = 'Yoshipi';
string = 'Hello' + userName + '!';
console.log(string);

+演算子を使って、文字列と変数をくっつけることができる！

これは''でも、""でも、``でも全部できる！

もう一つの方法は``のみで使える方法。
${}の中にJavaScriptを埋め込むことができる！

string = `Hello ${userName}!`


同じように表示されました。

  • 文字列の中で''みたいな特殊な文字を扱うケースについて。
string = '" `` "';


表示したいもの以外で囲むとうまく表示される！

  • ''を使って''を表示させる方法もある。

\を使うと特殊な文字を表示できる！

string = ` \` \\ `;

\を表示させたい時も、前に\をつけます。

  • 改行の仕方

Stringは改行できない！

// NG
string = 'Hello
Yoshipi!';

\nを使うと改行できる！

string = 'Hello\nYoshipi!';

``を使った場合だと、この中で改行してもエラーにならない！👀

string = `Hello
Yoshipi`;

''と""は同じだが、
``は変数を埋め込むときに${}を使うことができたり、
改行もそのままエディタで改行したものが反映されたり、
若干違いがあるので、使い分けると良い！

明示的に型を変換する方法

例えば、ユーザー側から10を受け取ったとする。
calcResultに+10をしたい場合。
userInnputは'10'で文字列だが、結果20で表してほしいとなった場合。

const userInnput = '10';
let calcResult;
calcResult = userInnput + 10;

userInnputを明示的に数字に変換しなければならない！
その方法が4つある！

const userInnput = '10';
let calcResult;
calcResult = Number(userInnput) + 10;
console.log(calcResult);

あとは、、

calcResult = parseInt(userInnput) + 10; //これは小数点表示されない
calcResult = parseFloat(userInnput) + 10;
calcResult = +userInnput + 10;


どの方法も、20と表示される。

  • 文字列に変えたい場合は？
const tenNumber = 10;
calcResult = '10' + String(tenNumber);
console.log(calcResult);

この方法でも同じ！

calcResult = '10' + tenNumber.toString();

が、文字列の場合は自動的に数字に変換されるのでこうする必要がなく、使う機会はあまりない！

ちなみに、

calcResult = Number(userInput) + 10;

ここのuserInputとかのところに文字列を入れると
NaN、NotaNumberが返ってくる。数字じゃないと言っているが、こいつ自体は数値型。

真偽値

JavaScriptの真偽値（Boolean）は、true（真）とfalse（偽）の2つの値を持つデータ型です。
真偽値は、条件判断や制御フローの制御など、プログラムのロジックで非常に重要な役割を果たします。

JavaScriptにおける真偽値の特徴

  1. true（真）とfalse（偽）
    真偽値は、trueとfalseというキーワードで直接表現されます。trueは真を表し、falseは偽を表します。

  2. 条件式の結果
    条件式は真偽値を評価し、結果として真か偽を返します。条件式は、比較演算子（<, >, ==など）や論理演算子（&&, ||など）を使用して構築されます。

  3. 他のデータ型からの変換
    avaScriptでは、他のデータ型を真偽値に変換することができます。
    この変換は、真偽値コンテキストでの評価時に行われます。

一般的なルールは次のとおりです!

  • 真偽値自体はそのまま評価されます。
  • 数値0、NaN、空の文字列、null、undefinedは偽として評価されます。
  • それ以外のすべての値は真として評価されます。
真偽値の使用例
var isTrue = true;
var isFalse = false;

if (isTrue) {
  console.log("This is true."); // 実行される
}

if (!isFalse) {
  console.log("This is not false."); // 実行される
}

var num = 10;
if (num > 5 && num < 20) {
  console.log("The number is between 5 and 20."); // 実行される
}

var emptyString = "";
if (!emptyString) {
  console.log("The string is empty."); // 実行される
}

配列

配列とは、値を順序つけてまとめる方法。

let array = ['apple', 'banana', 'grape'];
array = [1, 2, 3];
array = [1, 'apple', true, array];
array = ['apple', 'banana', 'grape'];

文字列だけではなく、数字も入れることができ、それぞれ混ざってもいいし、
変数を入れたりしても良い。

データを取りたい時。
[]の中に配列の値の番号を入れるが、配列は0から始まっていることを忘れずに！

console.log(array[0]);

配列にデータを１個ずつ入れたい場合。
pushを使う。

array = [];
array.push('apple');
console.log(array);


appleだけが入った配列ができた。

オブジェクト

JavaScriptの中でも一番重要な型と言っても過言ではない！
まとまったデータを表す型。

coffeeにオブジェクトを{}の中に代入していく！

const coffee = {
  name: 'Chocolate Mocha',
  size: 350,
  isHot: true,
  toppings: ['Cinnamon', 'Caramel'],
  nutritions: {
    calories: 430,
    sugars: 53,
  },
};

KEYとVALUEのセットがたくさん並んでいる。これがオブジェクトになります！
そして、KEYとVALUEのセットをプロパティと呼びます！

例えば上の例だと
name: 'Chocolate Mocha'はNameプロパティ
size: 350はSizeプロパティとか。

プロパティー名に関しては基本的に変数名のルールと同じ！

  • coffeeにアクセスしたい場合。
console.log(coffee);

  • coffeeのサイズだけにアクセスしたい場合。
console.log(coffee.size);

  • 値を変更したい場合。
coffee.isHot = false;
  • 新しいプロパティを後から追加したいとなった場合。
    同じように書ける！
coffee.barista = 'Yoshipi';
console.log(coffee);

まだ存在してないプロパティ名に、値を入れると追加できる！


baristaが追加されている！

nullとundefindの違い

nullは一般的に、明示的に書かない限りは出てきません。予定通りの場合が多い。
予定通り何もない。

undefindは暗黙的に色々なところで使用されます！
一般的に予期せぬ、エラーのようなものを表しています。

なので、どっち使ったらいいの？ってなった時、何もないことを=で明示的に示したい場合は
nullを使用する！undefindは使わない！てなイメージ！

typeof演算子

こんな感じで型が返ってくる！

  • 配列もオブジェクトの一つに過ぎない。

  • undefindはundefined型

  • nullはオブジェクト型
    つまり、何もない、というよりは何もないオブジェクトという意味が元々の意味。

関数

何度も呼び出すことができるコードのかたまり。

関数の後ろにはセミコロンはつけない。

オブジェクト以外の{}をブロック文と呼ぶ。
ブロック文があるときは；はつけない。
{}があって、オブジェクトがなかったらつけないくらいの感覚！

function add() {
  console.log(1 + 1);
}
add();
add();
add();
add();

こういう書き方を関数宣言文と呼びます。

何度も呼び出すことができる！

パラメーターと引数

function add(num1, num2) {
  console.log(num1 + num2);
}
add(2, 3);
add(6, 3);
add(10, 5);

(num1, num2)という受け口を作り、変数のように扱うことができる。
関数を呼び出すときに追加の情報を渡すことができる。

function add(num1, num2)この(num1, num2)をパラメーター、
add(2, 3);こっちの渡す値のことを引数と呼びます。

戻り値

関数を呼び出した時にadd(2, 3);の部分でデータを取得したい場合、
リターン文を使う！

function add(num1, num2) {
  return num1 + num2;
}
const returndValue = add(2, 3);
console.log(returndValue);

リターン文のあとは全て無視される！処理終了！
リターン文に当たった瞬間にすぐに呼び出し元に処理が返ってしまう！

return;

だけだとundefinedが返る。
IF文を使った時や、条件分岐をした時に、この条件だったらすぐに
処理を終わりたい、という時によく使う！

return num1 + num2;

のこの戻ってきた値、add(2, 3)この５を戻り値や返り値と呼ぶ。

関数の位置は先頭に巻き上げられる

関数宣言文を下に書いても、V8エンジンなどで読み込まれるときに
一度ざーっとみて関数宣言文は全て巻き上げられる。（上に持っていかれる）内部的に。

const returndValue = add(2, 3);
console.log(returndValue);

function add(num1, num2) {
  return;
}

なので、こう書いても、実際はファイルの一番上に持っていかれる内部的な処理がある。

ですが、なるべく関数は上の方に書いたほうがわかりやすいので書き方は気をつけましょう〜

スコープについて

まず。。関数の中にも定数は定義できる！

function add(num1, num2) {
  const value = num1 + num2;
  console.log(value);
  return value;
}
const returndValue = add(2, 3);

関数の中に定義した定数valueを関数の外からアクセスできるか？
これはできない。

function add(num1, num2) {
  const value = num1 + num2;
  return value;
}
console.log(value);
const returndValue = add(2, 3);

例えば、このように外側からアクセスしてみると、、

valueは定義されていないというエラーが出る。

逆に、関数の外側に定義されているnewValueに
関数の外側からアクセスできるか？
これは、できる！

const newValue = 'hello';
function add(num1, num2) {
  console.log(newValue);
  const value = num1 + num2;
  return value;
}
const returndValue = add(2, 3);


ちゃんとhelloと表示されている。

つまり、
関数の外側で定義された変数や定数は、関数の中からアクセスできる。
ただ、関数の中で定義された変数や定数、関数はその中でのみ使える。
外側からは使えないことに注意！

ここで、スコープという言葉に注目！

スコープとは？

変数を参照できる範囲のこと。

const newValue = 'hello';
function add(num1, num2) {
  console.log(newValue);
  const value = num1 + num2;
  return value;
}
const returndValue = add(2, 3);

例えば、この関数の中で定義されたvalueのスコープは関数の中と言える。
この、関数の中だけのスコープを関数スコープと呼んだりする。また、ブロックスコープとも呼ばれる。

このように特定の場所でないと参照できない範囲を持っている変数をローカル変数と言い、そのスコープをローカルスコープと言う。

一方、newValueのスコープはJavaScript全ての場所と言える。これをグローバルスコープと言ったりする。そして、その変数をグローバル変数とも言う。

さいごに

JavaScriptの基礎について、ざっくりですがメモをとりながら学びました。
ほぼ復習のような感じでしたが、知らなかったこともたくさん出てきました！
早くReactやりたいので猛スピードで頑張ります。

Discussion