UdemyでJavaScriptを学習しているため、
復習も兼ねて文言について、基礎文法などJS関連をまとめていく記事になります。

自分のメモ＆アウトプット的なものなので、
あまり参考にはなりませんが、気になる様でしたらみてください。

*基礎の基礎も自分のために書きますが、　　　　本記事で重要でないものは折り畳んでおきます。

1.JavaScirptとは？

JavaScriptとは、

Webサイトを表示するブラウザ上で動くクライアントサイド・スクリプトです。
HTML+CSS＋JavaScriptの組み合わせで、サーバー側の処理を必要とせずブラウザで動的な表現ができます。
例えば、画像を拡大し、見やすくするなどが当てはまります。

2. 記述場所について

JavaScriptを書く際には、

htmlファイル上ではなく、jsファイルに記述していきます。

まずは、htmlファイルのbodyタブの一番下に<script>タグでjsファイルを指定します。
今回は、main.jsとしておきます。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="main">sample</div>
    <script src="main.js"></script>
</body>
</html>

main.js


ここにJSの記述をしていきます

3. 基礎について

変数の宣言

変数とは、さまざまな文字列や数値を入れておく箱のようなもの。
jsで変数を定義する際には、下記の3種類を使う。

var

再宣言、再代入が可能。

var sample = '初期値OK';
sample = '再代入OK';
var sample = '再宣言OK';

let

再宣言禁止で、再代入が可能。

let sample = '初期値OK';
sample = '再代入OK';
let sample = '再宣言NG';

const

再宣言、再代入が禁止。

const sample = '初期値OK';
sample = '再代入NG';
const sample = '再宣言NG';

表にまとめると

変数	再宣言	再代入
var	○	○
let	×	○
const	×	×

データ型

値の種類。文字列なのか、数値なのか、true & falseなのか。
Javaの様に変数の宣言時にデータ型は記載する必要はない。

また、JavaScript は動的型付け言語である。

動的型付け言語とは、

変数宣言時にデータ型をしてする必要がなく、必要に応じてデータ型が自答的に変換される仕組み。

main.js

let sample = 12; 
//この時はNumberである。

この変数には、文字列を代入が可能。

sample = "こんにちは"; 
//ここでは、Stringになっている。

String

テキストの値を表す連続した文字
Hello World などが該当します。

let str = 'Hello World';

Number

整数または小数点など。
12や3.14など。

let num = 12;

Boolean

真偽値。
trueとfalseです。

let judge = false;

undefined

未定義。
名の通り、値が設定されていないことを表します。

表にまとめると

データ型	意味	例
String	文字列	"Hello Word"
Number	整数、小数点	12, 3.14
Boolean	真偽値	true,false
undefined	未定義	-

関数

基本的な構成要素の1つ。
同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの

以下の、funcitonを使用する。

function

基本的な書き方は下記の通り。

function hello() {
 //ここに処理を記述する。
}

helloが関数名となり、helloと書くだけで中に記述する処理が実行される仕組み。

参考例

helloにnameという関数を渡しているので、
hello('Tom')でnameにTomが代入？されます。

main.js

function hello(name) {
 console.log('hello' + name)
} 

hello('Tom');

//出力結果

> "Hello Tom"

メソッド

オブジェクトのプロパティに代入された関数のことを言います。

toUpperCase()

呼び出す文字列の値を大文字に変換して返す。

let city = "Tokyo";
console.log(city.toUpperCase());

//出力結果
> "TOKYO"

subString()

string オブジェクトの開始・終了位置の間、
または文字列の最後までの部分集合を返す。

let city = "Tokyo";
console.log(city.subString(0, 3));

//出力結果
> "Tok"

slice()

元の文字列を変更せず、
文字列の一部分を取り出し、それを新しい文字列として返す.

subString()と同じ。

split()

String を指定した区切り文字列で分割することにより、文字列の配列に分割する。

let str = "This is an apple";
console.log(str.split(' ')); //半角スペースで分割

//出力結果
> ["This", "is", "an", "apple"]

forEach()

与えられた関数を、配列の各要素に対して一度ずつ実行する。

const bestCombo = ['パスタ', 'ブラータチーズ', 'ワイン'];

bestCombo.forEach(element => console.log(element));

//出力結果
> "パスタ"
> "ブラータチーズ"
> "ワイン"

プロパティ

プロパティとは、オブジェクトの状態や特性を表す情報のことを言います。
書式は以下の通り。

オブジェクト名.プロパティ名

length

文字列の文字数や、配列の要素数の値を取得するプロパティ。

let name = "田中太郎";
console.log(name);
console.log(name.length);

//出力結果
> "田中太郎" //nameの値
> 4　   //田中太郎の文字数

配列

配列を使うことで複数の値を 1つの変数で保管・管理することが可能。
以下の記述する。

let fruits = ['apple', 'orange', 'banana', 'strawberry' ]

配列のインデックスは0から始まります。

let fruits = ['apple', 'orange', 'banana', 'strawberry' ]
//let fruits = [ [0], [1], [2], [3] ]

console.log(fruits[2]);

//出力結果
> "banana"

オブジェクト

データをプロパティ名(キー)と値のペアで管理する。
記述は以下の通り。

let/const 変数名 = { キー ：　 値 }

参考例：

let person = {
  name: '山田太郎',
  age: 25,
 }

取り出し方は以下の通り。
ドットによる記述で取り出しが可能。

console.log(person.name);
console.log

//出力結果
> "山田太郎"

ループ処理

条件を指定し、繰り返し何かを実行すること。

while文

条件式がtrueであるならば、反復処理を行う。

記述は以下の通り。

while (条件式) {
    実行する文;
}

参考例は以下の通り。

let x = 0;

while (x < 10) {
    console.log(x);
    x += 1;
}

//出力結果 0から9までが出力される。
> 0
> 1
.
.
> 9

for文

繰り返す範囲を指定した反復処理を書くことが可能。
記述は以下の通り。

for (初期化式; 条件式; 増分式) {
    実行する文;
}

参考例は以下の通り。

let total = 0;

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

//出力結果 0から9までが出力される。
> 0 
> 1
.
.
> 9

let i = 0; iを初期化
i < 10; iが10未満なら処理を実行し続ける。
i++ ループ処理が実行される度に1がiに加算される。

for...in 文

キーが文字列であるオブジェクトの列挙可能プロパティすべてに対して、列挙可能プロパティも含めて反復処理を行う。

*実際の使い方は、いまいちピンときていないです。

const object = { a: 1, b: 2, c: 3 };

for (const index in object) {
  console.log(`${index}: ${object[index]}`);
}

//出力結果
> "a: 1"
> "b: 2"
> "c: 3"

for...of 文

String, Array, およびユーザー定義の反復可能オブジェクトなどに対して、反復的な処理をするループを作成する。

配列に対して使用するイメージでいます。（あってるのかな）

const array1 = ['a', 'b', 'c'];

for (const element of array1) {
  console.log(element);
}

//出力結果
> "a"
> "b"
> "c"

if文

条件分岐。指定した条件で処理を変えることができる。

記述は以下の通り。

if (条件) {
  //条件がtrueであれば実行
} else if (条件) {
  //1つ目の条件が当てはまらず、else ifの条件がtrueであれば実行
} else {
  //　2つの条件ともに当てはまらなかったら実行
}

パッと思いついたもので作成。
年齢が20歳以上なら、成人。
年齢が20歳未満なら未成年と条件分岐しております。

function checkAged(name, age) {
    if (age >= 20) {
      console.log(name +  'は、成人です。');
    } else {
     console.log(name +  'は、未成年です。');     
    }
}
checkAged('太郎ちゃん', 25);

//出力結果
> "太郎ちゃんは、成人です。"

コールバック関数

関数の引数に渡す関数です。
いわゆる他の関数を実行するための関数。と言われることが多いみたい？

function hello(callback) {
    console.log('hello' + ' ' + callback());
}

function getName() {
  return 'Taro Yamada';
}

hello(getName);

//出力結果
> "hello Taro Yamada"

hello(getName)
hello関数の引数にgetName関数を入れています。
これによりhello関数の引数には、getName関数自体が渡る。

callbackに格納されている値を確認

function hello(callback) {
  console.log(callback);
}

//出力結果
> function getName() {
  return 'Taro Yamada';
}

console.log('hello' + ' ' + callback());
callback（）としているのは、callbackにはGetNmame関数自体が渡ってきているのでここで関数を実行。

結果として、Taro Yamadaという値が、格納される仕組み。

まずはここまで。
また、学習が進んだら書きます！

参考文献

今はこれで学習中です！
https://www.udemy.com/course/front-dev-tutorial/

わかりやすいのもあればよく理解できないのもあるけど参考になる。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

【JS】基本文法等のまとめ

1.JavaScirptとは？

2. 記述場所について

3. 基礎について

変数の宣言

var

let

const

表にまとめると

データ型

String

Number

Boolean

undefined

表にまとめると

関数

function

メソッド

toUpperCase()

subString()

slice()

split()

forEach()

プロパティ

length

配列

オブジェクト

ループ処理

while文

for文

for...in 文

for...of 文

if文

コールバック関数

参考文献