2021.01.29

コーディング

JSの基本のキ（構文のルール、データ型、変数）#1

柄本 広樹

INDEX

  1. 読み込み方
  2. 構文のルール
  3. 変数と定数
  4. データ型
  5. リテラル

読み込み方

JavaScriptの読み込み方は基本的に2通りの読み込み方があります。 HTMLファイルの中でそのまま読み込むインラインタイプと.jsファイルに記述して外部ファイルをHTML側から読み込むタイプがあります。

インラインタイプ

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title>インラインスクリプトの書き方</title>
  7. </head>
  8. <body>
  9. 	<h1>サンプル</h1>
  10. 	<!-- bodyの一番下に読み込む -->
  11. 	<script>
  12. 		window.alert('実行する!');
  13. 	</script>
  14. </body>
  15. </html>

type属性には、一般的には「text/JavaScript」以外を指定することはほとんどないです。HTML5では、デフォルトで「text/JavaScript」になっているため省略して問題ないです。ここでは、「window.alert」という命令で、指定された文字列をダイアログ表示しています。

※基本的にHTMLタグの中にJavaScriptを書く場合はbody閉じタグの直前に書くようにしたほうが良いです。 ブラウザは基本、スクリプトの読み込みや実行が完了するまで、そのあとの処理は行われないので読み込みや実行に時間がかかるスクリプトが上部にある場合ページの表示が遅れます。巨大なスクリプトがある場合にはなおさらです。

外部ファイルから読み込むタイプ

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title>外部ファイルから読み込む方法</title>
  7. </head>
  8. <body>
  9. 	<h1>サンプル</h1>
  10. 	<!-- bodyの一番下に読み込む -->
  11. 	<script src="main.js"></script>
  12. </body>
  13. </html>
  2. //main.js
  3. window.alert('外部ファイルから実行されています。');

こちらの例ではmain.jsファイルをHTMLで読み込むことで外部ファイルに処理をかけるようにしています。 インラインのときと同じでbodyの終了タグの前で読み込むほうが良いです。

外部ファイルとインラインだとどちらがよいのか

一般的にコードの見通しを良くするためにHTMLとスクリプトは別々に書いたほうが良いです。 とくに、複数のHTMLで使用するような処理がある場合は外部ファイルに記述しておけば再利用できてコードを簡略化出来ます。 逆に1,2行しかないスクリプトを外部ファイルに書くとかえって冗長になる場合があるのでその時の状況に応じて使い分けるのが良いでしょう。

構文のルール

JavaScriptの構文の基本的なルールになります。JavaScriptはもともとそこまで厳密に厳しい言語ではないのでルールも曖昧なものが多いのですが、 意図しないエラーがでないようにするため、またはチームで開発しているときに統一化を図るためにもルールを覚えておくことは大切です。

文法の末尾にはセミコロン(;)をつける

セミコロンは省略することが可能ですが、文の区切りがわかりづらく見通しがわるくなるため一般的によろしくはないです。特別な理由がない限りセミコロンは省略しないほうが良いです。

  2. window.alert('セミコロンなしパターン');
  4. window.alert('セミコロンありパターン');

文のなかに空白、改行、タブを含めることができる

文が長くなってしまうケースは少なくないです、文の途中で改行やインデントを加えることで見通しが良くなることは少なくないので冗長になりそうな処理に有効です。

  2. window.alert('処理の途中でも改行できる');

大文字／小文字が厳密に区別される

上でも説明しましたがJavaScriptはそこまで厳密な言語ではありませんが1点だけ大文字／小文字が厳密に区別されます。

  2. window.Alert('Alertの頭が大文字になってる');

コメントの挿入の仕方

一行のコメントのときは//から後に記述したものはコメントアウトされます。 複数行に渡るコメントの場合/* ~ */で囲まれた中身がコメントアウトされます。

  2. //一行のコメントの仕方
  4. /*
  6. 複数行のコメントアウト
  7. window.Alert('コメントアウトになってる。');
  9. */

変数と定数

変数はデータを入れておくためのものです。JavaScriptで処理を記述していると1つの一連の処理で一時的にデータを保存しておいて使い回すことが 頻繁に起きます。そういうときに変数を使用します。

  2. //変数msgに'これは変数です。'を代入しています。
  3. var msg = 'これは変数です。';
  5. //宣言だけしておくこともできます。
  6. var item;

※JavaScriptでは変数は宣言せずに使用することも可能です。変数が宣言されなかった場合暗黙的に変数を宣言して領域を確保してくれます。 しかしこの方法はバグを生み出しやすいので原則として変数は宣言してするようにしたほうが良いです。

  2. //暗黙的に上部で変数宣言される
  3. //var msg;
  6. //変数宣言せずに代入する。
  7. msg = 'これは変数です。';
  8. console.log(msg); // 結果 -> これは変数です。

let宣言 (ES6)

※ES6以降の記法になります。

変数を宣言する方法にvar宣言のほかにlet宣言というものがあります。var宣言との違いはvar宣言は同名の変数を宣言できますが、let宣言は同名の変数を宣言できません。 それ以外は一緒と考えてもらって大丈夫です。

  2. var msg = 'これは変数です。';
  3. var msg = 'もう一度宣言';
  4. console.log(msg) //結果 -> もう一度宣言
  6. let msg = 'これは変数です。';
  7. let msg = 'もう一度宣言';
  8. console.log(mgs) //結果 -> 「Identifier'msg'hasalreadybeendeclared」エラーがでる。

定数の宣言 (ES6)

※ES6以降の記法になります。

変数は中身をなんどでも入れ替えることができますが、その反対に中身を変更できないものを定数といいます。 例えば、消費税など、変わることのない不変的な値に使用することが多いです。

  2. //constで定数を宣言することができる。
  3. const tax = 1.08;

データ型

データ型はデータの種類のことを指します。
例）

  2. //文字列型
  3. var text = '文字列';
  5. //数値型
  6. var onetwothree = 123;
  8. //論理型
  9. var bool = true;

JavaScriptはデータ型に厳密でなく、データの型を変更することが出来ます。 例えば文字列を格納しておいた変数に数値を入れることができます。その逆も可能です。変数のほうが、代入される値に応じて型を変更してくれます。

  2. var item = '文字列';
  4. item = 123;

型変換が容易に行えてしまうのでそこまでデータの型を意識する必要性がなくなってしまうのですが厳格に型チェックを行う場合にエラーを起こす要因となるので 多少なり意識する必要はあります。

リテラル

リテラルは、データ型に代入している値のことを指します。

文字列リテラル

文字列リテラルはシングルクォーテーションまたはダブルクォーテーションで囲うことで表すことができます。 シングルにするかダブルにするかはチームでルールを決めて運用すると良いでしょう。

  2. var string1 = 'これは文字列リテラルです';
  3. var string2 = "これは文字列リテラルです";

数値リテラル

数値リテラルは一般的に以下のようなものを指します。 詳しくは16進数リテラルや8進数リテラルなどのものもありますが数値になってるものはわりと全般的に数値リテラルになります。

  2. //整数
  3. var number1 = 12;
  4. var number2 = 0;
  5. var number3 = 200;
  6. //浮動小数点
  7. var number4 = 1.6;
  8. var number5 = 3.14;

配列リテラル

配列リテラルは、データの集合体で1つの変数、定数に複数のデータを格納しておける倉庫のようなものです。 データの中身を取り出したいときにはインデックス番号を使って配列名[インデックス番号]でアクセス出来ます。
インデックス番号は0,1,2,3,4…の順になってます。

  2. var ary = [ "String", 345, "455" ];
  4. console.log(ary[0]) // 結果 -> String
  5. console.log(ary[1]) // 結果 -> 345
  6. console.log(ary[2]) // 結果 -> 455
  7. console.log(ary[3]) // 結果 -> undefind

オブジェクトリテラル

オブジェクトリテラルは名前をキーにして値にアクセスできる配列のことを指します。配列リテラルではインデックス番号でしか格納した値にアクセスできませんでしたが、自分の付けた名前をキーにしてアクセスすることが可能なので見通しがよくなります。

  2. var obj1 = { 
  3.     a: 3,
  4.     b: "3",
  5.     func : function(){ 
  6.         console.log("関数の結果");
  7.     }  
  8. };
  10. console.log(obj1['a']) // 結果 -> 3
  11. console.log(obj1['b']) // 結果 -> 3
  12. console.log(obj1['c']) // 結果 -> 関数の結果
  13. console.log(obj1['4']) // 結果 -> undefind
  15. //↓ ドット演算子を使用してアクセスもできるようになる。
  16. console.log(obj1.a) // 結果 -> 3
  17. console.log(obj1.b) // 結果 -> 3
  18. console.log(obj1.c) // 結果 -> 関数の結果
  19. console.log(obj1.4]) // 結果 -> プロパティに数値は使えないのでそもそもエラーを起こす。

オブジェクトリテラルでは、格納したデータをプロパティと呼びます。 プロパティには配列リテラルと同じく数値はもちろん、関数までも格納することができます。そして関数はプロパティではなくメソッドと呼ぶようになります。

オブジェクトリテラルはデータを扱う上で様々なデータを取り扱うことができるのでとても便利ですのでぜひ活用していきましょう

関数リテラル

関数リテラルは、処理の塊のようなもので、何かしらの値を渡すことでその値を利用して結果を返すための仕組みを提供してくれます。 関数もオブジェクトリテラルと同じくらい重要な要素になるのでまた後日詳しく説明します。

  2. //numの2倍の値を返す関数
  3. var func1 = function(num){
  4.     return num * 2;
  5. }
  7. func1(4); // 結果 -> 8

次回

次は、演算子 / for文 / if文について触れていきたいと思います。

この記事を気に入ったら

柄本 広樹

美しい景色、人、食べ物、そんな当たり前の日常に彩るすべてに感謝し、 今も映像を作り続ける。

この人が書いた記事を見る >>