はじめに

本記事では、JavaScriptを学習した際に、はじめに登場するものを紹介します。
本日、復習したため、アウトプットを兼ねて投稿いたします。

JavaScriptとは

プログラミング言語の1つで、主にクライアントサイドにおいて使用します。
「ブラウザ上でアプリケーションを便利に使えるように」
「リクエストの送り方の工夫」などをすることができます。

つまり、使い勝手の良いアプリケーションの作成ができるということです。

(ex)カーソルを当てると、ブラウザを更新せずメニュー画面が表示される。

用語一覧

console.log

コンソールにテキストを表示させるメソッドです。
コンソールに引数が表示されます。
Rubyでいうputsメソッドと同様の意味があります。

console.log("Thank you")
//コンソール上では、「Thank you」が表示されます。

var

再定義、再代入が可能です。
しかし、誤った記述をすることが多く、現在では、開発現場であまり使われないようです。

var sample = "田中"

sample = "伊藤"
// 再代入可能

var sample = "中村"
// 再定義可能

const

後から書き換えはできない変数を定義するものです。
再代入、再定義は不可です。
割と使用する印象です。

const sample = "田中"

sample = "伊藤"
// 再代入NG →エラーが起こる

const sample = "中村"
// 再定義NG →エラーが起こる

let

後から書き換えることができる変数を定義するものです。
再代入は可能ですが、再定義は不可です。

let sample = "田中"

sample = "伊藤"
// 再代入OK

let sample = "中村"
// 再定義NG →エラーが起こる

for

繰り返し処理を行う際に使用します。

for ([①初期化式]; [②条件式]; [③加算式]) {
  // 繰り返す処理の内容
}

①初期化式
変数を定義します。何回目の処理であるかを判定するために使用されます。
②条件式
処理を何回繰り返すかを指定します。条件式の戻り値がtrueで有る限り処理は行われ続けます。
③加算式
定義した変数の増減を記述できます。
例えば、（i=i+1）、（i+=1）、（i++）などと記述すれば1周ごとに1が加算されて、処理が実行されます。

for ( let i = 1; i <= 100000; i++ ) {
  // 100000回繰り返し
}

forEach関数

配列に存在する要素に対して、繰り返し処理を行う場合に用いられる関数です。

sports = ["soccer", "baseball", "tennis"]
sports.forEach(function(item) {
  console.log(item)　
})

//soccer,baseball,tennisの順に取り出されます。

function

関数を定義することができます。
functionに続けて関数の名前を記述し、()のなかに引数、{}のなかに処理を記述します。
Rubyにおけるメソッドと文法的に意味は同じようなものです。

＊引数がない場合にも()を記述する必要があることに注意しましょう。

function sayYO(){
  console.log("ヨイショ")
}

sayYO()

//コンソール上で、「ヨイショ」と表示されます。

関数宣言

ここまででの関数の定義する方法は、関数宣言といいます。

function 関数名( 引数 ){
  // 関数内の処理
}

関数式

関数宣言とは、記述に違いがあります。

変数 = function( 引数 ){
  // 関数内の処理
}

関数宣言と関数式の違い

読み込まれるタイミングに違いがあります。

関数宣言・・・上から順にコードが読み込まれる。
関数式・・・上から順に読み込まれることはない。

関数式の種類

無名関数

関数名なしで関数を定義することができます。
コードを簡単に記述することができます。
関数名の重複を避けることができます。

const rice = function(){
  console.log('米')
}

//ターミナル上には、「米」が表示されます。

即時関数

関数を定義するのと同時に処理を実行します。
定義してから呼び出す手間がなくなります。

(function countNum(number) {
  console.log(number)
})(2)

//ターミナル上には、「2」が表示されます。

アロー関数

functionを省略し、()=>を記述することで関数を定義します。
見た目がスッキリし、短い記述で関数を定義できます。

const countNum = (number) => {
  console.log(number)
}
countNum(5)

// ターミナルには、「５」が表示されます。

セミコロン

;です。
JavaScriptでは、変数定義の最後に;をつけて終了することがあります。

これは、開発現場によって有る場合と無い場合があるようで、
注意が必要です。

終わりに

JavaScriptも用語が多いので、ここで終了します。

はじめにも書きましたが、本日JavaScriptの復習をしましたところ、
かなり知識が抜けていましたため、アウトプットいたしました。

しかし、JavaScriptはクライアントが使いやすいように必要不可欠な言語であることから、
私は、今のところ一番好きかもしれません。

Railsとも交えてアプリケーションを作成することが増えるかと思うので、
このタイミングでしっかりと復習し、理解しておきます！

それでは、明日も頑張ります！！