hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

JavaScriptの基本文法

プログラミング・テキスト

JavaScriptをどこでどのように書けばいいのか。2つ方法がある。

①コンソールに直接記入する/表示する

JavaScriptはブラウザ上で動く言語である。したがって、以下のように検証ツールからコンソールを開くことでJavaScriptのコードが書ける。

ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択でコンソールを開くことができる。
https://tech-master.s3.amazonaws.com/uploads/curriculums//2b2c24f98b5483bb801df113e373cb0f.gif

コンソール上ではJavaScriptのコード記述のみならず、実行結果を表示することもできる。Rubyにおけるirbのようなものだと把握しておける。

②ScriptタグでJavaScriptのコードを呼び出す

HTMLのコード中にスクリプトタグを埋め込むことで、JavaScriptのコードを呼び出すことができる。

index.html
1
2
3
4
5
 
<body>
    <script>
        // この中にJavaScriptのコードを記述する
    </script>
</body>

また上記以外にも、cssを呼び出す際と同様に、jsファイルを指定することで読み込むことができる。

例えば、ディレクトリ構造が以下のようになっていた時、

  •  folder
    •  index.html
    •  script.js
    •  style.css

以下の用に記述することでjsファイルを読み込むことができる。

index.html
1
2
3
 
<body>
    <script src="script.js"></script>
</body>

 

JavaScriptを書く

 JavaScriptを実装するファイルの準備

以下のコマンドを実行して練習用のファイルを生成する。

ターミナル
1
 
git clone https://github.com/we-b/jquery-practice.git -b lesson1_javascript_practice javascript_practice

index.htmlにjavaScriptファイルを読み込むための記述を追記。

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script src="script.js"></script>
  </body>
</html>

これでJavaScriptを実装する準備が完了。

 アラートを表示させる

JavaScriptではwindow.alertというメソッドを用いることでブラウザ上にアラートを表示することができる。script.jsに以下のように記載する。

script.js
1
 
window.alert('こんにちは');

 テキストはシングルクォート（'）かダブルクオート（"）で囲む。

index.htmlをブラウザで開いてみると、以下のようにアラートがブラウザ上に表示されるはず。
https://tech-master.s3.amazonaws.com/uploads/curriculums//3cc1addd274e7616979a5e4265d390e5.png

 window.alert()

ブラウザでアラートを表示させるメソッド。引数としてアラートに表示させる情報を渡す。上記の例では、文字列を直接引数にしましたが、変数でも可能。

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

ブラウザ上で二本指クリック→「検証」を選択→Consoleを選択でコンソールを開くことができる。
https://tech-master.s3.amazonaws.com/uploads/curriculums//066bfc0c2b4eb756a0bcadf77bd26162.pngscript.jsを以下のように書き換える。

script.js
1
 
console.log('こんばんは');

上記のように修正できたら、index.htmlを開いているブラウザをリロード。
以下のようにコンソールにテキストが表示されていれば成功。
https://tech-master.s3.amazonaws.com/uploads/curriculums//b1af5d14f9b08df8ace2755b7cef901a.png

 console.log()

ブラウザのコンソールにテキストを表示させるメソッド。引数としてコンソールに表示させる情報を渡す。window.alertと同様に変数を引数に渡すこともできる。Rubyにおけるputsメソッドと同様に使える。

 変数を宣言

変数を宣言する際は、varのあとに半角スペースを挟んで変数名を記述する。以下のようにscript.jsを修正する。

script.js
1
2
 
var name = 'yamada';
console.log(name + 'さん、こんばんは');

上記の修正ができたら、index.htmlを開いているブラウザをリロード。以下のように表示がされていれば成功。
https://tech-master.s3.amazonaws.com/uploads/curriculums//7b6ed006c32ee4cef80edeb0eee102af.png

Rubyでは変数宣言の際に付加すべき文言は必要なかったが、JavaScriptはvarが必要です。

上記をRubyで書くとしたら...
1
2
 
name = 'yamada'
puts name + 'さん、こんばんは'

 ES2015(ES6)バージョン以降の変数宣言の書き方

varはES2015(ES6)バージョン以前の古い書き方でもある。

ES2015(ES6)バージョン以降は、letとconstを使います。

letの場合
1
2
 
let name = 'yamada';
console.log(name + 'さん、こんばんは');

letは、後で書き換えることができる変数宣言。

constは、後で書き換えることができない変数宣言。

 条件分岐を行う

JavaScriptで条件分岐をする際には、Ruby同様if文を使う。

条件分岐の例
1
2
3
4
5
6
7
 
if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

script.jsを以下のように記述。

script.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
let num = 60;

if (num % 15 == 0) {
  console.log(num + 'は3と5の倍数です');
} else if (num % 3 == 0) {
  console.log(num + 'は3の倍数です');
} else if (num % 5 == 0) {
  console.log(num + 'は5の倍数です');
} else {
  console.log(num + 'は3の倍数でも、5の倍数でもありません');
}

上記の修正ができたら、index.htmlを開いているブラウザをリロード。以下のように表示がされていれば成功。numに代入する数字を入れ替えて、しっかり条件式が作用しているのかも確かめる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//3473214059e72c0f77976395ace492ec.png

以下の3点が特にRubyのif文記述と異なる点。

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

Rubyにおいては()でくくる必要がない

条件式の後に続く波括弧{}内の処理が実行されること

Rubyの記述においては{}で処理を囲む必要はない。一方で、if文の終わりにendを付与する必要がある

複数条件を指定する場合は、elseのあとに続けてif文を記述すること

Rubyではelsifだが、JavaScriptではelse ifと書くことを注意

上記をRubyで書くとしたら...
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
num = 60

if num % 15 == 0
  puts num.to_s + 'は3と5の倍数です'
elsif num % 3 == 0
  puts num.to_s + 'は3の倍数です'
elsif num % 5 == 0
  puts num.to_s + 'は5の倍数です'
else
  puts num.to_s + 'は3の倍数でも、5の倍数でもありません'
end

 配列を取り扱う

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

以下のようにscript.jsを修正。

script.js
1
2
 
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list);

index.htmlを開いているブラウザをリロードしてコンソールを確認すると、以下のように配列内に含まれている情報を確認することができる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//8db3a7f1fba27d0aad17e36ecf23527a.png

この配列に対して以下の4つの操作を行う。
（▷の部分を押すことで配列の中身を確認することができる）

  1. 配列の要素を取得する
  2. 配列の要素数を取得する
  3. 配列の要素を追加する
  4. 配列の要素を削除する

1. 配列の要素を取得する

配列は0から始まる。ゆえに、以下の配列のJavaScriptという文字列を取得するために、script.jsを以下のように修正する。

script.js
1
2
 
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list[2]);

index.htmlを開いているブラウザのコンソールを確認して、JavaScriptという文字列が出力されていれば成功。

2. 配列の要素数を取得する

Rubyと同様にlengthメソッドが利用できる。script.jsを以下のように修正。

script.js
1
2
 
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
console.log(list.length);

index.htmlを開いているブラウザのコンソールを確認して、5と出力されていれば成功。

3. 配列の要素を追加する

Rubyと同様にpushメソッドが利用できる。script.jsを以下のように修正。

script.js
1
2
3
 
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.push('GitHub');
console.log(list);

index.htmlを開いているブラウザのコンソールを確認して、GitHubという文字列が6番目の要素として含まれていれば成功。

4. 配列の要素を削除する

Rubyと同様に、popメソッドが利用できる。script.jsを以下のように修正。

script.js
1
2
3
 
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.pop();
console.log(list);

index.htmlを開いているブラウザのコンソールを確認して、CSSという文字列が消えていれば成功。popメソッドは配列の最後の要素を取り除く。Rubyの場合はpopメソッドの引数に数字を渡すことで「何個分要素を取り除くか」という数を指定できるが、JavaScriptのpopメソッドではそれができない。

また、先頭の要素を取り除くためにshiftメソッドが利用できる。script.jsを以下のように修正。

script.js
1
2
3
 
let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
list.shift();
console.log(list);

index.htmlを開いているブラウザのコンソールを確認して、Rubyという文字列が消えていれば成功。こちらもpopメソッド同様、Rubyでは取り除く要素数を指定できるが、JavaScriptではできない。

 オブジェクトを取り扱う

オブジェクトはデータのまとまりのこと。配列は順番でデータを管理するが、オブジェクトは名前と値をセットにしてデータを管理する。

 オブジェクト

オブジェクトを作成するには波カッコ{}を用いる。

オブジェクトの定義1
1
 
let obj = {};

オブジェクトはデータを名前と値をセットで管理する。このセットをプロパティと言う。 プロパティを持った状態でオブジェクトを定義することもできる。

オブジェクトの定義2
1
 
let obj = { name: 'yamada' };

変数objはnameプロパティを持っている。プロパティは必ず属性名である"プロパティ名"とデータである"値"をセットで持つ。したがって、nameはプロパティ名、'yamada'は対応する値である。

script.jsを以下のように修正。

script.js
1
2
 
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj);

index.htmlを開いているブラウザのコンソールを確認して、変数objに代入したオブジェクトの情報が表示されていれば成功。
https://tech-master.s3.amazonaws.com/uploads/curriculums//eedb6f24a852483aeaca04fbf60d20ef.png

このオブジェクトに対して以下の2つの操作をしてみる。

  1. プロパティの値を取得する
  2. プロパティの値を変更する

1. プロパティの値を取得する

script.jsを以下のように修正。オブジェクトに対してプロパティ名を続けて記載することで値を取り出すことができる。

script.js
1
2
 
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
console.log(obj.name);

index.htmlを開いているブラウザのコンソールを確認して、yamadaという文字列が出力されていれば成功。

2. プロパティの値を変更する

script.jsを以下のように修正。オブジェクトに対してプロパティ名を続けて記載することで値を取り出すことができる。

script.js
1
2
3
 
let obj = { name: 'yamada', age: 25, address: 'tokyo' };
obj.name = 'tanaka';
console.log(obj.name);

index.htmlを開いているブラウザのコンソールを確認して、tanakaという文字列が出力されていれば成功。

 繰り返し処理を実装

繰り返しはfor文を使う。

 for文

繰り返しの基本的な構文
1
2
3
 
for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

i = i + 1の部分は変数iを1増やすという意味です。この部分は処理が一回繰り返すごとに呼ばれる。つまり、変数iは処理が1回呼ばれると1増えるということ。なお、Rubyと同様に、i += 1と表現することも可能。

script.jsを以下のように修正。

script.js
1
2
3
4
5
 
num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

index.htmlを開いているブラウザのコンソールを確認して、以下のように繰り返しの処理の結果が表示されていれば成功。
https://tech-master.s3.amazonaws.com/uploads/curriculums//1511caeb8be350bb7f161baa251b9582.png

 関数を定義

Rubyでは def ~ end で囲むことで関数を定義したが、JavaScriptで関数を定義するにはfunction文を使う。

 function文

関数の定義
1
2
3
 
function 関数名(引数) {
  // 処理の内容
}

関数に引数が含まれなかった場合でも、()は記載する必要がある。

script.jsを以下のように修正。

script.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
function sayHello(){
  console.log('hello');
}

function sayName(name){
  console.log(name);
}

let myName = 'yamada';
sayHello();
sayName(myName);

index.htmlを開いているブラウザのコンソールを確認して、以下のように関数を呼び出した結果が表示されていれば成功。
https://tech-master.s3.amazonaws.com/uploads/curriculums//79e2a3f264fea1cf1e44e05baaf1f69b.png

 関数の戻り値を明示

以下のような関数を定義したら、12という結果が出力されることが期待できる。

この記述では値が出力されない
1
2
3
4
5
6
7
 
function calc(num1,num2){
  num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

しかし、値は出力されない。
https://tech-master.s3.amazonaws.com/uploads/curriculums//95c23167f046126382a5a1e626f8e87d.png

JavaScriptにおいてはreturnで戻り値を明示する必要がある。

 return

Rubyでは関数における最後の戻り値が関数の戻り値として処理されたが、JavaScriptではreturnを用いて明示する必要がある。

script.jsを以下のように修正。

script.js
1
2
3
4
5
6
7
 
function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

index.htmlを開いているブラウザのコンソールを確認して、以下のように関数を呼び出した結果が表示されていれば成功。
https://tech-master.s3.amazonaws.com/uploads/curriculums//8a70a0e9df1cae7e126c05d4a962b5ff.png

 無名関数を定義する

JavaScriptにおける関数の定義には2種類の方法がある。1つがこれまで使用してきた方法で、関数宣言と呼ばれる。もう1つが無名関数を用いた関数式と呼ばれる方法。

JavaScriptにおける関数の定義
1
2
3
4
5
6
7
8
9
 
// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function(){
    console.log('hello');
}

関数式の方は、関数自体に名前が無いため無名関数と呼ばれる。

script.jsを以下のように修正。

script.js
1
2
3
4
5
 
let hello = function(){
    console.log('hello');
}

hello();

index.htmlを開いているブラウザのコンソールを確認して、helloと出力されていれば成功。

関数宣言と関数式の役割には大きな違いはない。関数式とすることで、何かに代入したり他の関数に渡しやすくなる。

ただし、関数宣言と関数式では読み込まれるタイミングが異なる。例えば、以下のようにコード記述してコンソールで確認してみると

script.js
1
2
3
4
5
 
hello();

let hello = function(){
    console.log('hello');
};

hello is not a function...といった形でエラーが表示されるはず。1行目の時点で関数helloは定義されていないので、このようにエラーが発生するのも納得。一方、以下のように関数宣言を用いた際は。

script.js
1
2
3
4
5
 
hello();

function hello(){
    console.log('hello');
}

helloとエラー無く出力が確認できたはず。

JavaScriptにおいては関数宣言は先に読み込まれるために、このような事象が発生する。一方で、関数式であれば先に読み込まれることはない。コードを書く上での実害はあまり無いかもしれないが、JavaScriptにおいてはRubyと違ってこのような特徴がある。

便利な拡張機能を導入

JavaScriptでは関数を{}で囲むため、複数の関数が入れ子になるとどの括弧が対応しているのかわかりにくくなる。そこで拡張機能を導入する。

 Bracket Pair Colorizerを導入

VSCodeにBracket Pair Colorizerという拡張機能を導入する。

https://tech-master.s3.amazonaws.com/uploads/curriculums//b5d1e312154d1055679ee6196b1dc484.png

インストールすると、下の画像のように()、{}、[]などが色分けして表示されるようになるので、 JavaScriptを書く際にわかりやすくなる。

https://tech-master.s3.amazonaws.com/uploads/curriculums//3586796c71e6cb8964586ddee1bc833c.png