JavaScriptの概要と基礎的な文法

前提
プログラミングを始めたて(1~2ヶ月)の自分が学習した内容をまとめています。
実際の現場では通用しないことや間違いなどあるかもしれません。
お気づきの際はコメントにてご報告いただければ幸いです。

JavaScriptは何ができる？

JavaScriptというとプログラミングを全く知らなかった私でも聞いたことのある単語でした。
そしてプログラミングを学び始めるまではプログラミング言語であるということすら知りませんでした。

JavaScriptとはなにか。そして何ができるのか。

Javascriptとは？
JavaScriptはクライアントサイドで主に使われる言語
ブラウザ上のアプリの使いやすさやリクエストの贈り方の工夫ができる

具体的な役割の例

・ページ遷移無しで画面の表示を切り替え
カーソルを合わせると動的な動きをする仕組み
webページの上部のグローバルメニューにカーソルを合わせると項目が出てくるようなあれです。
・画面を更新せずにサーバーから値を取得
twitterでいいね押すとその画面で数値が増えたり減ったりがページの更新をせずに見れますよね。

JavaScriptを実際に使うには？

JavaScriptでコードを実行したらすぐに表示されるツールであるデベロッパーツール（開発者ツール、検証ツール）を使って開発することができる。
Rubyでいうとirbのようなものです。

使い方

ブラウザ上で右クリック　検証を選択（コマンド option cでも起動できる。）
elementsはHTML CSSの記述がある場所
ConsoleのタブでJavaScriptのコードが実行できる

変数定義について

JavaScriptでは、var,const,letの３つで変数定義しなければならない。
var 再定義、再代入可能な書き方（あまり使われない）
const 書き換えることができない変数を定義する方法（値が変わらないもの）
再代入、再定義不可
let 書き換えることができる変数（値が変わるもの）
再代入は可能だが、再定義は不可

const,letがよく使われ、varが使われない理由

チーム開発を想定した場合についてコードを読む人の心理で考えてみます。
varで定義されている場合

var sample = "こんにちは"

sample = "おはよう"
//再代入OK
var sample = "こんばんは"
//再定義OK

varは変数が再定義、再代入可能な書き換え自由な変数の定義方法です。
定義されている値は途中で変わるのか？
変更しても他の機能に影響を与えないのか？
といったように視覚的にコードの内容を理解することができないためあまり使われません。
全部のコードを読まないと変数をどう扱うか把握できないためです。
let,constで定義されている場合

const sample = "こんにちは"

sample = "おはよう"
//再代入NG　エラーが出ます。
const sample = "こんばんは"
//再定義NG　エラーが出ます。

let sample = "こんにちは"

sample = "おはよう"
//再代入OK　おはように値が変わります。
let sample = "こんばんは"
//再代入NG　エラーが出ます。

再定義、再代入どちらもできないのがconstです。
再定義はできないが、再代入ができるのがletです。
constはこの先、変数とその値が変わることがない、つまり変更してはいけない値だとわかります。
letこの先、代入されている値が再代入によって変わるということがわかります。
たったこれだけでも変数がどういった値か一目で分かることが大きなメリットとなります。

再定義と再代入について

再定義と再代入ってやってること同じじゃない？と思いませんでした？
私は同じじゃん！再定義も再代入も結局は中の値が変わってるだけよね？
再定義わざわざしなくても再代入で値が変わるからletじゃなくてvarでもよくない？
そう思っていました。
この２つの明確な違いは再定義できるか否かです。
再定義は意識的にしなくても無意識的に定義してしまうことがあります。
同じような処理の場合に最初にコードを書いていた時に定義していた変数名を忘れてしまっていて、別の記述の時にその時と同じ変数をうっかり使ってしまったらどうなるでしょう。
意図せず最初の変数が変更されてしまいます。
そこでletを使っておけば、うっかり再定義してしまってもエラーがでるので安心ということです。

文字列の中に変数を含める方法

方法は２つ
・+を用いてそれぞれの値を連結させる
・テンプレートリテラルを使用する
テンプレートリテラルとは
JavaScriptの構文でバッククォート（shift+@)で囲むことで変数を文字列内に挿入できる機能

テンプレートリテラルでできること

文字列の中に変数を埋め込むことができる
改行を入れることができる
HTMLの要素を作成することができる

例

const name = "nako"
const age = "29"

//+で繋げる場合
const introduction = "私の名前は" + name + "、" + age + "歳です。"
console.log(introduction)
私の名前はnako、29歳です。

//テンプレートリテラルで繋げる場合
const introduction = "私の名前は${name}、${age}歳です。"
console.log(introduction)
私の名前はnako、29歳です。

テンプレートリテラルで書くと記述量が少なくなります。

条件分岐の方法

if文

if(1){
trueのときの処理
}else if(2){
1 false 2 trueのときの処理
} else{
1,2どちらもfalseのときの処理
}

条件式は()でくくる
{}内の処理が行われる。
else if で複数条件を記述する。

配列の要素を取得する方法

const list =[]　配列を定義
console.log(list)　配列全体を取得
console.log(list[2])　配列の要素の２にあたる値を取り出せる（rubyと同じく0から始まるのでこの場合は３番めの要素になる）

繰り返し処理

JavaScriptの繰り返し処理には
for文
forEach()関数
があります。
for文はRubyでいうとtimesメソッド、forEachはeachメソッドに似ています。

for文

JavaScriptでは繰り返し処理はfor文を使う
for([初期化式]; [条件式]; [加算式]) {
繰り返す処理
}

初期化式
for文中で使う変数を定義する。この変数は今何回目の処理化を判定するために参照される。
条件式
for文の処理を何回繰り返すかを指定する。この条件式の戻り値がtrueである限り処理は行われ続ける
加算式
初期化式として定義した変数の増減を記述できる。i=i+1とすれば１週ごとに1が加算されて、処理が実行される。
i =i+1 　i+= 1 i++は全て同じ意味

処理の流れ
①初期化式で変数を定義する。（この変数は何回目の処理かを判定するために使われる）
②条件式がtrueであれば処理を行う。
③処理を行った後加算式が行われる。
④条件式がtrueであればに戻り、falseになるまで繰り返される。
まとめると
初期化式で繰り返しのための変数を定義
条件式で繰り返しに関する条件を定義（何回繰り返すかを記述）
処理を行った後変数に加算式の処理が行われ再度初めから処理が行われる
条件式を満たさなくなるまで繰り返し処理が行われる。
（条件式は繰り返し回数を決定するための条件が書かれている式です。）

配列の繰り返し処理をする関数

RubyではeachメソッドJavaScriptではforEach関数を使って配列の繰り返し処理を記述します。
forEach関数
配列に格納されている要素１つ１つに対して、繰り返し処理を行う場合に使われる関数（メソッドのイメージ）
配列.forEach( function(value){
処理
})
functionは関数
valueが配列の要素
この場合は添字0から最後の要素まで繰り返す度に引数が要素に置き換えられます。
わかりにくいので具体例を

animals = ["dog", "cat", "bird"]
animals.forEach( function(item) {
console.log(item)
})

dog
cat
bird

と出力されます。

itemが引数としてanimals配列の中のすべての要素が順番に最後までforEach関数で渡されています。

まとめ

・JavaScriptは何ができる？
更新なしでの表示や値の更新
メニューの表示やtwitterのいいね
・JavaScriptの使い方
検証のconsoleでJavaScriptのコードが実行できる
変数定義は再定義、再代入の可否で３種類、var const let
繰り返し処理は２パターン　for文とforEach関数
Rubyで言うとfor文はtimes、forEachはeachのイメージです。