学習のアウトプット(JavaScript)
新しい言語であるJavaScriptの学習に入った。
Rubyとの相違点などを整理しながら、比較するRuby自体の理解度も高まるように
掛け合わせて学びたい。
世界で最も使用されているとされるプログラミング言語の1つ。
実際にほとんどの現場で使用されている、人気の高い言語。
(GitHubのリポジトリで使われている言語を統計すると、下記の順番で使われている)
1位:JavaScript
2位:HTML&CSS
3位:Java
4位:PHP
5位:Ruby
JavaScriptを使うと、
カーソルを合わせるだけでウインドウが表示されたり、
いいね!ボタンを押すと画面遷移なしで反応したりする実装が可能となる。
これにより、ユーザーの体感待ち時間を削減するサイトが作成できる。
---------------------------------------------------------------------------------
【JavaScriptの練習】
ブラウザ→デベロッパーツール(検証ツール)からコンソールを立ち上げて
入力を行う。(テキストエディタを使うよりも簡便な為)
※検証ツールはデフォルトではブラウザ右側に表示されるが、
配置を下などに変更することも可能。
---------------------------------------------------------------------------------
【console.log】
コンソールにテキストを表示させるメソッド。
console.log(文字列)と入力する。
この文字列には変数を入れることもできる。
---------------------------------------------------------------------------------
【JavaScriptにおける変数定義】
var・const・letのいずれかを用いて定義する。書き方は、例えばvarなら
var name = “Suzuki”
のように記述する。
var:再代入・再定義が可能
const:再代入・再定義ともに不可能
let:再代入は可能、再定義は不可
複数人で作業をすることが多い中で、
varを用いると「今後再代入を行う予定があるのか」などが判然とせず
共通認識を持てず作業効率が上がらないことから、
基本的には「再代入予定のないものはconst、予定がある場合はlet」を使い、
varは使用しないのが一般的になっている。
---------------------------------------------------------------------------------
【テンプレートリテラル】
文字列の中に変数を入れ込む方法。
記述が短くなるメリットがあるので、積極的に活用する。
テンプレートリテラルなし→introduction = ”私は” + name + “です”
テンプレートリテラルあり→introduction = `私は${name}です`
→どちらもconsole.log(introduction)で出力
※テンプレートリテラルを使用する場合は、SHIFT+@でバッククウォートを
出力して囲む。
---------------------------------------------------------------------------------
【条件分岐】
Rubyと同様に条件分岐を行うことができるが、異なる点がいくつかある。
書き方は以下の通りで、
・条件式を()で囲む
・条件に該当する処理を{}で囲む
・elsifではなくelse ifを使う(else ifは複数回使用可能)
if (条件式1) {
~~~~~~~~~~~
} else if (条件式2) {
~~~~~~~~~~~
} else {
~~~~~~~~~~~
}
※なぜかRubyでelsifは一度しか使えない認識になっていたが、
同様に繰り返し使えることを今回再学習した。
---------------------------------------------------------------------------------
【配列】
Rubyと同様に配列も使用可能。
添字も使えて、0から始まる点も同じ。
const list = [“○○”, “△△”, “□□”]
console.log(list)
console.log(list[2])
---------------------------------------------------------------------------------
【for文】
JavaScriptの繰り返し処理を実現する構文。
下記のように記述する。
for (①初期化式; ②条件化式; ③加算式) {
繰り返す処理の内容
}
初期化式などの名称は暗記する必要はないが、
どのような内容を入力するかは把握すること。
例)
let count = 1
for (let i = 1; i <= 10; i++ ) {
console.log(`${count}回目の出力`)
count += 1
}
iが初期値1で、10以下である間は処理を繰り返す(=10回繰り返す)
i++はi = i + 1(i += 1)と同じ意味で、繰り返し処理が1回完了した後に加算される。
1回目の処理では「1回目の出力」と出力され、以降回数分だけ処理が行われる。
---------------------------------------------------------------------------------
【forEach関数】
配列の繰り返し処理を行う関数。(Rubyでいうeachメソッド)
※関数=Rubyでいうメソッド
配列.forEach( function(value){
処理の記述
})
※functionも関数
例)
fruits = ["apple", "orange", "grape"]
fruits.forEach( function(item) {
console.log(item) // 配列に格納されている要素の数だけ実行される
})
functionの引数(今回はitem)に配列の各要素が入る。
配列の数だけ要素を変えながら処理が繰り返されていく。
全ての配列が入り終わると繰り返し処理は完了する。