はじめに
JavaScriptの学習から長く離れていたため、復習として投稿します。
デベロッパーツール
JavaScriptをテキストエディタでファイルを用意して基本文法を試すのはけっこう手間です。
コードを実行したらすぐに結果が表示されるツールがあると便利です。
デベロッパーツールによって、それが実現でき、以下のようなことができます。
- 表示しているサイトのHTMLの要素の確認・編集
- 表示しているサイトのCSSの確認・編集
- JavaScriptの実行
HTMLやCSSの確認・編集はElements（エレメンツ）パネルで操作することができますが、
JavaScriptの実行はConsole（コンソール）パネルにて行うことができます。
デベロッパーツールの使い方
デベロッパーツールはブラウザに用意されています。
まずは新しいブラウザの画面を立ち上げます。
新しいブラウザの画面を立ち上げたら、次に以下のように操作をします。
- ブラウザ上で二本指クリックする
- 「検証」を選択する
もしくは⌘ + option + Cのショートカットキーを用いてもデベロッパーツールは表示できます。
コンソールパネルの使い方
コンソールパネルでJavaScriptのコードを実行します。
コンソールに文字を表示させるにはconsole.logというメソッドを使います。
console.log（コンソールログ）
ブラウザのコンソールにテキストを表示させるメソッドです。
引数としてコンソールに表示する情報を渡します。
console.log("Hello")
JavaScriptの基礎的な文法
var （ヴァー）
再定義や再代入が可能な古い書き方です。
開発現場においてvarはあまり使われず、現在はconstとletがよく用いられています。
var sample = "こんにちは"
sample = "こんにちは"
// 再代入OK
var sample = "こんにちは"
// 再定義OK
const （コンスト）
後から書き換えることができない変数を定義する書き方です。
特徴として、再代入、再定義ともに不可という制約があります。
const sample = "こんにちは"
sample = "こんにちは"
// 再代入NG →エラー
const sample = "こんにちは"
// 再定義NG →エラー
let （レット）
後で書き換えることができる変数を定義する書き方です。
特徴として、再代入は可能ですが、再定義は不可という制約があります。
let sample = "こんにちは"
sample = "こんにちは"
// 再代入OK
let sample = "こんにちは"
// 再定義NG →エラー
letとconstの使い分け
- letは再代入する予定のある変数を定義する際に使用する
- constは再定義する予定のない変数を定義する際に使用する
constとletの使い分けに関しては、エンジニアによって様々な方針があるそうです。
再代入が必要でない場合は主にconstを用いて変数定義を行っていきます。
文字列の中に変数を含める方法
変数に値を定義する際、文字列の中に変数を含める方法は以下の2つの方法があります。
- +を用いてそれぞれの値を連結させる
- テンプレートリテラルを使用する
テンプレートリテラル
JavaScriptの構文のことです。
ダブルクォートやシングルクォートの代わりにバッククォートで囲むことで、文字列内に挿入することができます。
shift + ＠のショートカットキーで使えます。
テンプレートリテラルを用いることで以下のことが可能となります。
- 文字列の中に変数を埋め込むことができる
- 改行を入れることができる
- HTMLの要素を作成することができる
テンプレートリテラルを使用しない場合
const name = "Tom"
const age = 25
const introduction = "私の名前は" + name + "、" + age + "歳です"
console.log(introduction)
// => 私の名前はTom、25歳です と出力される
テンプレートリテラルを使用した場合
const name = "Tom"
const age = 25
const introduction = `私の名前は${name}、${age}歳です`
console.log(introduction)
// => 私の名前はTom、25歳です と出力される
上記２パターンの構文はどちらも実行結果が同じになります。
条件分岐
条件を満たしているかどうかで実行内容を分岐する処理です。
JavaScriptで条件分岐をする際には、Rubyと同じようにif文を使います。
if (条件式1) {
// 条件式1がtrueのときの処理
} else if (条件式2) {
// 条件式1がfalseで条件式2がtrueのときの処理
} else {
// 条件式1も条件式2もfalseのときの処理
}
配列の要素を取得
Rubyと同じ様に、JavaScriptにおいても配列の概念があります。
const list = ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]
console.log(list)
console.log(list[2])
上記のコードをコンソールで実行すると、以下のように結果が表示されます。
> const list = ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]
console.log(list)
console.log(list[2])
▶︎(5) ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]
JavaScript
< undefined
添字を指定することで要素を取得することができます。
繰り返し処理
for（フォー）文
構文は以下のようになります。
```
for ([①初期化式]; [②条件式]; [③加算式]) {
// 繰り返す処理の内容
}
① 初期化式
for文の中で使用する変数を定義します。ここで定義した変数は「今何回目の処理か」を判定するために参照されます。
② 条件式
for文の処理を何回繰り返すかを指定します。この条件式の戻り値がtrueで有る限り処理は行われ続けます。
③ 加算式
初期化式として定義した変数の増減を記述できます。i = i+1とすれば1周ごとに1が加算されて、処理が実行されます。
i = i + 1の省略形として以下のような選択肢があります。
- i += 1
- i++
慣習的にi++と記述されることが多いようです。
実際にfor文の記述をすると以下のようになります。
for ( let i = 1; i <= 100; i++ ) {
// 100回処理を繰り返す
}
まずletを用いて、変数iを1と定義しています。
そして定義した変数iを用いてループする条件を指定します。
i++の部分は変数iを1増やすという意味です。この部分は処理を1回繰り返すごとに呼ばれます。
つまり、変数iは処理が1回実行されると1増えるということです。
上記の条件式はi <= 100と記述しているので、iが100になるまでループ処理を続けることになります。
つまり100回処理が行われます。
forEach関数
配列に格納されている要素1つひとつに対して、繰り返し処理を行う場合に用いられる関数です。
配列.forEach( function(value){
// 処理の記述
})
forEach関数の引数に、さらに関数（function）を指定することで、実行することができます。
さらに、指定した関数（function）に引数を定義することで、その引数には配列の要素が入ります。
上記の例では、引数はvalueです。添字0から最後の要素まで繰り返すたびに、引数は各要素に置き換えられます。
fruits = ["apple", "orange", "grape"]
fruits.forEach( function(item) {
console.log(item) // 配列に格納されている要素の数だけ実行される
})
上記のコードをコンソール上で実行すると、すべての要素が順番に出力されます。
引数itemには、1回目の繰り返しで「apple」、2回目で「orange」、3回目で「grape」が代入されます。
そして、要素の数だけ繰り返し処理を実行すると、この繰り返し処理は終了します。
おさらい
- JavaScriptで変数定義をする場合は、原則constとletを使用する
- 変数に値を定義する際にテンプレートリテラルを用いることで、文字列の中に変数を含めることができる
- JavaScriptにおいて、繰り返し処理を行う場合はfor文を使用する
- JavaScriptにおいて、配列の繰り返し処理を行う場合は、for文またはforEach()関数を使用する