JavaScript（ジャバスクリプト）概要

えーと

Rubyはサーバーサイドを担う言語でしたが、JavaScriptは主にクライアントサイドにおいて力を発揮するプログラミング言語。
「ブラウザ上でのアプリケーションの使いやすさ」や「リクエストの送り方の工夫」を担うため、より使い勝手の良いアプリケーションの作成ができる。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

JavaScriptとはブラウザ上で実行される言語。JavaScriptを用いることで、

・ページ遷移なしで、画面の表示を切り替えることができる
・画面を更新をせずに、サーバーから値を取得することができる

JavaScriptを用いることで、一部分の表示のみを変更することができる。
また、体感として待ち時間が感じにくくなり、ユーザーはストレスなくさまざまな情報を得ることができる。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

Rubyを学んだ際に使用したirbのように、コードを実行したらすぐに結果が表示されるツール
・・・JavaScriptではデベロッパーツール。

・デベロッパーツール

ブラウザ開発者ツール、検証ツールなどとも呼ぶ。一般的なブラウザに付属し、誰でもすぐに使うことができる。

・表示しているサイトのHTMLの要素の確認・編集
                                                     ・・・Elements（エレメンツ）パネルで操作
・表示しているサイトのCSSの確認・編集
                                                     ・・・Elements（エレメンツ）パネルで操作
・JavaScriptの実行                    ・・・Console（コンソール）パネルで操作

デベロッパーツールはブラウザに用意されている。

1. ブラウザ上で二本指クリックする
2. 「検証」を選択する
もしくは、⌘ + option + Cのショートカットキー

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

テキストエディタで用意したファイルにソースコードを記述して、JavaScriptを実行する。
もしくは、コンソールにJavaScriptの記述をし、実行することもできる。

・console.log

ブラウザのコンソールにテキストを表示させるメソッド。引数としてコンソールに表示する情報を渡します。
Rubyにおけるputsメソッド。

console.log("Hello JavaScript")

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

変数定義の様式は、var、const、letと３つ存在する。

・var
再代入、再定義ともに可能な古い書き方。

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は再定義する予定のない変数を定義する際に使用する

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・変数に値を定義する際に、文字列の中に変数を含める方法

1. ​+を用いてそれぞれの値を連結させる
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歳です と出力される

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・条件分岐
Ruby同様に、条件を満たしているかどうかで実行内容を分岐する処理。Ruby同様if文を使います。

if (条件式1) {
                         # 条件式1がtrueのときの処理
} else if (条件式2) {
                         # 条件式1がfalseで条件式2がtrueのときの処理
} else {
                         # 条件式1も条件式2もfalseのときの処理
}
・条件式は()でくくる
・条件式の後に続く、波括弧{ }内の処理が実行される
・複数条件を指定する場合は、elseのあとに続けてif文を記述すること
                                  ・・・Rubyではelsif、JavaScriptではelse ifと書く。

・繰り返し処理
JavaScriptでは、for文を使用する。

for ([①初期化式]; [②条件式]; [③加算式]) {
# 繰り返す処理の内容
}
①初期化式
for文の中で使用する変数の定義。定義した変数は「今何回目の処理か」を判定するために参照される。
②条件式
for文の処理を何回繰り返すかを指定。この条件式の戻り値がtrueで有る限り処理は行われ続ける。
③加算式
初期化式として定義した変数の増減を記述できる。
i = i+1とすれば1周ごとに1が加算されて、処理が実行される。
i = i+1の同義・・・i += 1、i++
（慣習的にi++と記述される。）
let count = 1

for (let i = 1; i <= 10; i += 1) {
 console.log(`${count}回目の出力`)
 count +=  1
}

# => 1回目の出力
# => 2回目の出力
# => 3回目の出力
# => 4回目の出力
# => 5回目の出力
# => 6回目の出力
# => 7回目の出力
# => 8回目の出力
# => 9回目の出力
# => 10回目の出力

①まずletを用いて、変数iを1と定義している。③そして定義した変数iを用いてループする条件を指定する。つまり、変数iは処理が1回実行されると1増える。②条件式にi <= 100と記述しているので、iが100になるまでループ処理を続ける（100回処理）。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・配列の要素の取得
Rubyと同様に、JavaScriptにおいても配列の概念がある。

const list = ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]

console.log(list)
# => ["Ruby", "Ruby on Rails", "JavaScript", "HTML", "CSS"]
console.log(list[2])
# => JavaScript

・配列の繰り返し処理をする関数
Ruby：eachメソッド。JavaScript：forEach関数を用いる。

・forEach関数
配列に格納されている要素1つ1つに対して、繰り返し処理を行う場合に用いられる関数。
（「関数」：Rubyにおけるメソッドと同様と捉えられる）

配列.forEach( function(value){
# 処理の記述
})

forEach関数の引数に、関数（function）を指定する。
指定した関数（function）に引数を定義することで、その引数には配列の要素が入る。添字0から最後の要素まで繰り返すたびに、引数は各要素に置き換えられる。

fruits = ["apple", "orange", "grape"]
fruits.forEach( function(item) {
 console.log(item)                     # 配列に格納されている要素の数だけ実行される
})

2020/11/10

この記事が気に入ったらサポートをしてみませんか？