JavaScript 〜基礎文法一覧〜
はじめに
javaScriptやプログラミングを学び始めで何をまず覚えるべきかわからないという方に
javaScriptの基礎となる文法をまとめました。
ひとまずこれだけは覚えておくべきものという形で書かせていただきました。
よくプログラミングは”暗記しなくていい”という風に言われたりしますが基本的な文法の書き方がわからなければ元も子もないと思いましたのでまとめさせていただきました。
各文法の応用や深い理解に関してはこの一覧表をキーにそれぞれ調べて理解を進めていただければ幸いです。
目次
はじめに
1. 変数
2. 配列
3. 条件分岐
4. ループ処理
5. 関数処理
1. 変数
let eatsname ="神戸牛"
console.log(eatsname);
出力結果
=>神戸牛
変数の解説：
let＋変数名によって変数名に値や文字列を代入する事ができる。
その代入後の変数名をもってして何度でも出力する事ができる。
2. 配列
let eats = ["豚肉","鶏肉","牛肉","魚","しょうゆ","塩",]
console.log(eats[0]);
console.log(eats[1]);
出力結果
[0] =>豚肉
[1] =>鶏肉
配列の解説：
同一カテゴリーの値や文字列を１つの箱(この場合eats)に入れてそれを必要に応じて取り出す事ができる書き方の事。
3. 条件分岐
・if文
let number=8
if (number > 5 ) {
cosole.log("大当り");
} elseif (number >3 ) {
console.log("当り");
} else {
console.log("外れ");
}
console.log(number);
出力結果：
=>大当り
if文の解説：
if (条件式){
trueだった時に適用される処理
} elseif (条件式){
最初のifがflseだった時に適用される処理
} else {
全てに当てはまらなかった時に適用される処理
}
コードの訳は上記になります。つまり、定義した値(今回の場合変数numberの8)に対しての条件を設定してその条件がどれに当てはまるかによって出力をコントロールさせる書き方の事。
4. ループ処理
・for文
for (let i= 0; i < 10; i++ ){
console.log(i);
}
出力結果：
=>1 2 3 4 5 6 7 8 9
for文の解説：
for (let 変数 = 0; 変数 < 繰り返し回数; 変数++) {
繰り返したい処理
}
コードの訳は上記になります。繰り返しで出力させたい時に使える書き方。上記コードの書き方によって繰り返しの回数や条件を設定して出力をコントロールする。
・forEach文
const friends = ["ライオン","猫","トラ"]
friends.forEach((friend) => {
console.log(friend)
})
出力結果：
=>ライオン 猫 トラ
forEach文の解説：
forEachは配列の要素を１つずつ取り出してループさせたい時につかうメソッド。
for文と違って出力させる条件が”配列の中身を取り出す”というように指定されている書き方になる。
・while文
let i = 2
while (i < 1000) {
console.log(i);
i = i * i
}
出力結果：
=>2 4 16 256
while文の解説：
While分は条件を満たすまで処理を繰り返す時に使用される。
(i < 1000) i = i * i
の意味は、iが1000にいくまで繰り返しiの２乗を繰り返すという処理。
5. 関数処理
・関数、引数
function build(material1,material2 ){
console.log(material1＋”を細く切ります。”);
console.log(material2＋”をよく混ぜます。”);
console.log(material2＋”を”＋material1＋”にムラなく塗ります。”);
cook("角材","塗料")
出力結果：
=>角材を細く切ります。
=>塗料をよく混ぜます。
=>塗料を角材にムラなく塗ります。
関数、引数の解説：
cook("角材","塗料")の"角材"と"塗料"の部分を引数という。
この引数として定義した値や文字列(今回の場合、角材と塗料)が、
関数build(material1,material2 )のmaterial1,material2の部分に渡させて処理が実行されていくという流れ。
・関数の戻り値
function applyTax(price){
const result = price *0.1
return result
}
const tax = applyTax(12000)
cosole.log(tax);
出力結果：
=>1200
戻り値の解説：
returnという書き方で処理の結果の値を呼び出した側に返してあげる事を戻り値という。
引数で一回もらったものを処理して(今回の場合ここの部分price *0.1)、その結果を返してあげている。
今回の場合applyTax(12000)に0.1を掛けた値(消費税額)を返した後にtaxに代入させて出力してくれている。
returnでこのapplyTaxに消費税額である0.1倍をした額を返してあげている部分を戻り値という。
・連想配列、オブジェクト
const aoki = { id: 123, name: 'Taro Aoki', age: 24 }
const sato = { id: 456, name: 'Santaro Sato', age: 20 }
console.log(aoki.id)
console.log(aoki.name)
console.log(sato.name)
console.log(sato.age)
出力結果：
=> 123
=> Taro Aoki
=> Santaro Sato
=> 20
連想配列の解説：
その名のとおり配列の一種だが、違う部分は{}のカテゴリー分けの軸が２つ以上になっているところが主な違いになっている。
配列の場合◯◯はこれとこれとこれというように軸が１つであったのに対し、
連想配列に関しては◯◯の△△はこれというように２つ以上の軸でカテゴリーを分けて箱で管理するのが特徴。
今回の１つ目の場合、◯◯の部分がaokiで△△の部分がidとなる。
この場合出力結果は=> 123となる。
さらに別の軸にして◯◯の部分がsatoで△△の部分がnameにすると
出力は=> Santaro Sato となる。
出力する際に２つの軸を指定してあげないと想定の出力はうまくできない。
・アロー関数
const double = x => x * 2
・アロー関数の元の形 ↓
function double(x) {
return x * 2
}
アロー関数の解説：
２段あるコードのうち、上段コードのように関数の記述を省略して書く事をアロー関数という。
下段のコードが元の省略する前の関数。
要するに、単に書き方を省略しただけなので何も怖くはない。上段も下段も意味やその後の出力も一緒。
=>の部分がアロー関数文法の部分。
アロー関数には書き方の決まりが下記のようにいくつかある。
引数が１つの時に限りx の()を省略する事ができる。
関数の中身がreturnだけの時に限り{ }の記載を省略する事ができる。
・関数型プログラミング
const add2 = x => x + 2
const null2 = x => x * 2
const n = 3
console.log(null2(add2(n)))
出力結果：
=> 10
関数型プログラミングの解説：
上記のように処理の連続のような記述をするのが関数型プログラミングという書き方になる。
const add2 = x => x + 2 // 引数xに2を足す関数
const null2 = x => x * 2 // 引数xに2を掛ける関数
console.log(null2(add2(n))) // 3に2を足してから、その結果に2を掛ける
*()が連続している場合()の内側から処理が始まるという決まりがある。
・高階関数
const add2 = x => x + 2
function twice(f, x) {
return f(f(x))
}
const result = twice(add2, 10)
console.log(result)
出力結果：
=> 14
( 2 + 2 + 10という意味 )
高階関数の解説：
関数を「値」として扱い、関数自体を引数として渡す書き方の事。
const result = twice(add2, 10) //=>add2を引数として関数を設定。
値に２をプラスするという意味の定義付けの関数を引数としてもう一度関数に渡して再使用するというイメージ。
・コールバック関数
const result = twice(add2, 10)
コールバック関数の解説：
ある処理に対して別の処理を呼び出すように指定する事をコールバック関数という。
実は高階関数のコードの中にコールバック関数は隠れている。
上記の高階関数の例でいうと引数として別の処理を呼び出す指定(twice(add2, 10) の部分)をする部分をいう。