JavaScirptの基礎まとめ 基礎編1～これは絶対に覚えておくべき～

JavaScript 基礎編1

最近、js(JavaScript)を復習しているのですが、学んだことを忘れないために何かできないかと考え記事を書くことにしました。
参考書の内容を自分で復習しやすいようにまとめています。
(記事に間違いがあれば指摘お願いします)

JavaScriptとは

jsはweb上での動きをつけることができる。webサイトの処理はクライアント側とサーバ側があるが、jsはクライアント側でのweb上の見た目の動きを処理する役割がある。
jsとjavaは名前が似ているが、まったく違うもの。

変数名のつけ方

変数をつけるときに変数宣言をする必要がある。
変数宣言をする際につけるキーワードは3つ。

var,let,const。letは再代入可能な宣言、constは再代入不可の宣言。

値を変更したくないときはconstを使う。
varとletはほとんど同じだが、varは特殊で、宣言した変数をもう一度宣言できてしまうのでletを使うのが良い。

let 変数名 = 値;
const 変数名 = 値;

let tmp = 0;
const tmp = 0;

データ型

データ型には数値型、文字列型、論理型、Null型、Undefined型がある。

• 数値型（Number）：数値を表すデータ型
  ex) let number = 0;（クォーテーションで囲むと文字列として認識されてしまう）
• 文字列型（string）：文字列を表すデータ型
  ex) let name = "sample";
• 論理型（Boolean）：trueとfalseを表す型
• Null型：値としては存在するが空であることを表す型
• Undefined型：存在しない型

変数宣言時にはデータ型は考えなくてよい。（C++のようにint,stringなどの特別なコード記述はしなくてよい。）
下記のようにtype of 調べたい値とすることで値の型を調べることができる。

type of 値;
type of 'abc';

配列

配列を定義、アクセス
アクセスする要素のインデックスを変数に代入

const samples = ['値1','値2','値3']; //定義
const element0 = sample[0]; //アクセス

要素の上書き
上書きの際は上書きしたい要素のインデックスを指定

const samples = ['値1','値2','値3'];
samples[0] = '値0';

要素の数
lengthで要素の個数を調べることができる。

配列.length;

最後尾に要素を追加する

配列.push（追加したい要素）;

最後尾から要素を取り出す

配列.pop();

特定の要素が配列に含まれるか調べる

配列.includes（要素）;

配列要素の結合と文字列の分割

配列.join(区切り文字)
const samples = ['値1','値2','値3'];
const a = samples.join('と');
console.log(a); //値1と値2と値3

文字列から配列を生成する

文字列.split(区切り文字)
const string = '友情&勇気&努力';
const a = string.split('&');
console.log(a); //['友情','勇気','努力']

条件分岐

もし～ならば、～である。そうでないならば～の処理はif文を使う。

if(条件式){
条件式がtrueの場合の処理;
}else{
条件式がfalseの場合の処理;
}

もし～ならば、そうでなくて、もし～ならば～である。そうでないならば～の処理。

if(条件式1){
条件式1がtrueの場合の処理;
}else if(条件式2){
条件式2がtrueの場合の処理;
}
else{
どの条件式もtrueにならない場合の処理;
}

三項演算子
if文を簡潔なコードで書く

(条件式) ? trueのときに返す値 : falseのときに返す値;

論理積と論理和

条件式A && 条件式B //論理積　AとBの両方がtrueならture。そうでないならfalse
条件式A || 条件式B //論理和　AとBのどちらか1つがtrueなら、true。両方falseならfalse

swich文
if文より簡潔に書ける場合がある。

switch(変数){
  case 値1:
    変数が値1となるときの処理;
    break;
  case 値2:
    変数が値2となるときの処理;
    break;
  case 値3:
    変数が値3となるときの処理;
    break;
  default:
    その他の処理;
}

繰り返し処理

for文の書き方
繰り返し表示する
バックティック``で囲まれた中で${変数}と書くと変数の中身を文字列に入れることができる

for(初期化式; 条件式; 加算式){
  処理;
}

for(let i = 1; i <= 6; i++){
console.log(`${i}回目の処理`);
}

while文の書き方
回数を指定せずに繰り返し処理を行う
条件式がfalseなら処理を終了、trueなら処理を実行

while(条件式){
  処理;
}

配列の繰り返し処理を書く方法

for (変数 of 配列){
  処理;
}

const samples = ['値1','値2','値3'];
for (const sample of samples){
  console.log(sample);
}

次回

基礎編2はこちら