BETA

今更ながらJavaScriptを1から勉強してみる【その2】

投稿日:2019-05-30
最終更新:2019-06-04

こちらの記事は以下の続きとなります。
今更ながらJavaScriptを1から勉強してみる【その1】

変数と宣言

JavaScriptには変数を宣言するキーワードとして、var、let、constの3つがあります。

変数名のルール

  1. 半角のアルファベット、_(アンダースコア)、$(ダラー)、数字を組み合わせた名前にする
  2. 変数名は数字から開始できない
  3. 予約語と被る名前は利用できない

変数の名前は、半角のアルファベット(a~zとA~Z)と_(アンダースコア)、$(ダラー)、数字(0~9)を組み合わせた名前にする必要があります。上記に加え、ひらがなや一部の漢字なども変数名に利用できますが、半角全角が混在すると手間になってしまうため、一般的には使用されません。
また変数名に数字を含めることができますが、変数名と値としての数値を区別できなくなってしまうため、変数名を数字から開始することはできないです。

var $; // OK: $が利用できる  
var _title; // OK: _が利用できる  
var jquery; // OK: 小文字のアルファベットが利用できる  
var TITLE; // OK: 大文字のアルファベットが利用できる  
var es2015; // OK: 数字は先頭以外なら利用できる  
var 日本語の変数名; // OK: 一部の漢字や日本語も利用できる  
var 1st; // NG: 数字から始まっている  
var 123; // NG: 数字のみで構成されている  

また、予約語として定義されているキーワードは変数名に使用することができません。
予約語の一覧は下記URLを参照。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

var

varキーワードを使って変数宣言ができます。
以下のコードではbookTitleという変数を宣言し、値が代入されていない場合はundefined(未定義)で初期化されます。(undefinedは値が未定義ということを表す値)

var bookTitle;  

宣言した変数に=演算子を使って値を代入できます。

var bookTitle;  
bookTitle = "JavaScriptの本"  

変数宣言と同時に初期値の代入も可能です。

var bookTitle = "JavaScriptの本"  

また、変数宣言は,(カンマ)で区切ることで同時に複数の変数を定義することができます。

var bookTitle = "JavaScriptの本", bookCategory = "プログラミング"  

let

letはES2015から追加された機能です。
letは現在のスコープに対して変数宣言でき、基本的な使い方はvarとほとんど同じです。

let bookTitle = "JavaScriptの本"  

letと後述のconstはスコープの扱いと同じ偏す名の再定義の扱いが異なる他、letとconstは同一スコープ内で同じ変数名を再定義することができません。
同じ変数名で再定義すると構文エラーとなるため、間違えて変数を二重定義することを防ぐことができます。

let x; // "x"を定義する  
let x; // 同じ"x"を定義するとSyntaxErrorとなる  

const

constはES2015から追加された機能で、letにさらに制約を付けた変数宣言です。
基本的な使い方はletと同じですが、constは再代入することができません。そのためconstでの宣言と代入は同時に行う必要があります。

// varやletで宣言した変数には代入できる  
let bookTitle; // `undefined`で初期化される  
bookTitle = "JavaScriptの本"; // 値を代入している  

// 下記はSyntaxErrorとなる  
const bookTitle; // SyntaxError: missing = in const declaration  

// 宣言時に値を指定する必要がある。  
const bookTitle = "JavaScriptの本";  

そして一度constで宣言された変数は再代入できないため、下記のコードではTypeErrorとなります。

const bookTitle = "JavaScriptの本";  
bookTitle = "上書き"; // TypeError: invalid assignment to const `bookTitle'  

一般的に変数への再代入は「変数の値は最初に定義した値と常に同じである」というルール(参照透過性と呼ばれる)を壊すため、バグを発生させやすい要因と知られています。
ループなどの反復処理の途中で値を変化させたい場合がありますが、代替表現がある場合が多いこともあるので、バグに気付きやすくするためにもconstを積極的に利用することを推奨します。

[コラム]constは定数ではない

constは「再代入できない変数」を定義する変数宣言であり、定数を定義するわけではありません。
※定数とは、一度定義した変数が常に同じ値を示すもの
例えばconstでオブジェクトを宣言した場合、再代入することはできませんが値を変えることはできます。
このあたりは以下の記事でも書いたことがあるのでよかったらそちらを参照してください。
https://luck2515dev.hatenablog.com/entry/2019/05/16/223331

値の評価と表示

値の評価とは、入力を評価して結果を返すことです。

  • 1 + 1という式を評価したら2という結果を返す
  • bookTitleという変数を評価したら、変数に代入されている値を返す

コードの評価とエラー

プログラムを書いて一度もエラーを出さずに書き終えることはほとんどありません。特に新しいプログラミング言語を学ぶ際はトライ&エラー(試行錯誤)することが重要です。
そんなエラーには大きく分けて構文エラーと実行時エラーの2種類があります。

構文エラー

構文エラーとは文法が間違っている場合に発生するエラーのことです。
JavaScriptはコードをパース(解釈)してからプログラムとして実行できる形に変換しています。
コードをパースする際に文法の問題が見つかるとその時点で構文エラーが発生するため、プログラムとして実行されません。。
以下のコードは関数の呼び出しで)を付け忘れて構文エラーが発生している例です。

console.log(1; // => SyntaxError: missing ) after argument list  

エラーの内容をパーツごとに見ると以下のようになります。

SyntaxError: missing ) after argument list[詳細] index.js:1:13   
^^^^^^^^^^^  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^      ^^^^^^^^^ ^^^^  
エラーの種類                |                        |    行番号:列番号  
                  エラー内容の説明                 ファイル名  
メッセージ 意味
SyntaxError: missing ) after argument list エラーの種類はSyntaxErrorで、関数呼び出しの)が足りないこと
index.js:1:13 例外がindex.jsの1行目13列目で発生したこと

構文エラーによっては意味が読み取りにくいものもあります。
次のコードはconstをcosntとタイプミスした場合の構文エラーです。

cosnt a = 1; // => SyntaxError: unexpected token: identifier[詳細] index.js:1:6  
メッセージ 意味
SyntaxError: unexpected token: identifier エラーの種類はSyntaxErrorで、予期しないものが識別子(変数名)に指定されている
index.js:1:6 例外がindex.jsの1行目6列目で発生したこと

1行6列目(行は1から、列は0からカウント)であるaがおかしいとなっていますが、実際にはcosntというタイプエラーが構文エラーの原因のはずですよね。
なぜこのようなエラーとなるかというと、cosntはキーワードでないため変数名として解釈されます。
その結果以下のようなコードとして解釈されて構文エラーとなります。

cosntという変数名 aという変数名 = 1;  

構文エラーは書き間違いがほとんどでなので、エラーが発生した位置やその周辺を注意深く見ることでエラーの原因を特定する事ができます。

実行時エラー

実行時(ランタイム)におきるエラーであるため、ランタイムエラーとも呼ばれます。
構文としては正しいのですが、別の原因でエラーが発生しているということです。
以下のコードは存在しない変数xを参照したためにReferenceErrorという実行時エラーが発生しています。
xという変数が存在するかどうかは実行しないとわからないため、構文エラーではなく実行時エラーとなります。

const value = "値";  
console.log(x); // => ReferenceError: x is not defined  
メッセージ 意味
ReferenceError: x is not defined エラーの種類はReferenceErrorで、xという未定義の識別子を参照した
index.js:2:1 例外がindex.jsの2行目1列目で発生したこと

上記のように実行時エラーは該当箇所を実行するまでエラーになるかどうかがわからない場合が多いため、どこまでちゃんと実行できたか順番に追っていく作業が必要になる場合があります。このようなエラーの原因を特定して修正することをデバッグと呼びます。

実行時エラーは構文エラーと比べて種類も原因も沢山あって見つけるのが大変な場合が多いです。
ウェブ上に類似のエラーを報告している人も多いので、エラーメッセージで検索するとエラーの原因と解消方法が見つかるケースもあります。

今回はここまでとなります。
続きはこちら
今更ながらJavaScriptを1から勉強してみる【その3】

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

JavaScript / Python / React / Django / firebaseなど、自分の興味あるものを調べてアウトプットしていきたいです。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!