むじんブログ ”3歩進んで2歩下がる”

37歳未経験からのエンジニア転職を目指す営業部長

学習のアウトプット(JavaScript)

新しい言語であるJavaScriptの学習に入った。

Rubyとの相違点などを整理しながら、比較するRuby自体の理解度も高まるように

掛け合わせて学びたい。

 

JavaScript

世界で最も使用されているとされるプログラミング言語1つ。

実際にほとんどの現場で使用されている、人気の高い言語。

 

GitHubリポジトリで使われている言語を統計すると、下記の順番で使われている)

1位:JavaScript

2位:HTMLCSS

3位:Java

4位:PHP

5位:Ruby

 

JavaScriptを使うと、

カーソルを合わせるだけでウインドウが表示されたり、

いいね!ボタンを押すと画面遷移なしで反応したりする実装が可能となる。

これにより、ユーザーの体感待ち時間を削減するサイトが作成できる。

 

---------------------------------------------------------------------------------

JavaScriptの練習】

ブラウザデベロッパーツール(検証ツール)からコンソールを立ち上げて

入力を行う。(テキストエディタを使うよりも簡便な為)

 

検証ツールはデフォルトではブラウザ右側に表示されるが、

配置を下などに変更することも可能。

 

---------------------------------------------------------------------------------

console.log

コンソールにテキストを表示させるメソッド。

console.log(文字列)と入力する。

この文字列には変数を入れることもできる。

 

---------------------------------------------------------------------------------

JavaScriptにおける変数定義】

varconstletのいずれかを用いて定義する。書き方は、例えば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 {

~~~~~~~~~~~

}

 

※なぜかRubyelsifは一度しか使えない認識になっていたが、

同様に繰り返し使えることを今回再学習した。

 

---------------------------------------------------------------------------------

【配列】

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 + 1i += 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)に配列の各要素が入る。

配列の数だけ要素を変えながら処理が繰り返されていく。

全ての配列が入り終わると繰り返し処理は完了する。