TECH EXPERT 25日目JavaScript 基礎文法

JavaSのことをもっと知りたい。

 

 

デベロッパーツール

使用法：ブラウザで右クリックで検証　or com+con+c

できること：

表示しているサイトのHTMLの要素の確認・編集
表示しているサイトのスタイルの確認・編集
JavaScriptの実行　上部ウインドウからコンソールへ

コンソール

使い方：デベロッパーツールから

Rubyにおけるirbポジ。　手軽にJavaScript実行。

console.log　〇〇　　　＃〇〇の出力。　Rubyの　puts　

試したが文字列はダブルクオテーションもしくはシングルでで囲む必要あり

数値はなしでも出力された。

基礎文法

変数定義　　letとconst

let sample="〇〇"　　　＃変数sampleに〇〇を定義　再定義不可　再代入可

const sample = "〇〇"　＃変数sampleに〇〇を定義　再定義不可　再代入不可

letは再代入する予定のある変数を定義する際に使用
constは再定義する予定のない変数を定義する際に使用

これらを使いこなすことで、チーム開発において視覚的に理解できるコードにできる

文字列のなかに変数を含める　

変数に値を定義する際に　

テンプレートリテラル（JavaScriptの構文、バッククォートで囲む）

を用いることで、文字列の中に変数を含めることができる。

やり方：shiftキー＋　＠キー

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

例

const name = "Tom"
const age = 25

const introduction = `私の名前は${name}、${age}歳です`
console.log(introduction)
// => 私の名前はTom、25歳です

条件分岐

Rubyと同じでif構文であるが、相違点がある。

1.条件式は()でくくること

Rubyにおいては()はいらないが、JavaScriptは必要。

2.条件式の後に続く波括弧{}内の処理が実行されること
Rubyの記述においては{}で処理を囲む必要はない。JavaScriptでは条件式の後には{}をつける必要がある。

3.複数条件を指定する場合は、elseのあとに続けてif文を記述すること
Rubyではelsifですが、JavaScriptではelse ifと書くことを注意しましょう。

配列

配列はRubyと変わらず、添字の概念も一緒。

繰り返し処理

for構文を使う

for ([①初期化式]; [②条件式]; [③加算式]) {
// 繰り返す処理の内容
}

例

for ( let i = 1; i <= 100; i++ ) {　＃①変数iを1と定義　②iが100を超えるまでを条件　③i = i + 1の省略

/ 100回処理を繰り返す
}

forEach関数を使う＃配列に格納されている要素1つひとつに対し、繰り返し処理を行う

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

例

fruits = ["apple", "orange", "grape"]　＃配列の定義

fruits.forEach( function(item) {　　　＃コールバック関数の引数としてvalueを設定

console.log(item)　// 配列に格納されている要素の数だけ実行される
})