《違い知ってますか?》変数宣言にvarをつける場合とつけない場合の違いまとめ

AfterEffectsのエクスプレッションで頻繁に利用する「変数」ですが、varをつける場合とつけない場合で、実は動作が変わる部分があります。

そんな「変数」について今回はしっかり説明してみたいと思います。

変数とは?

変数とはデータを格納する器のことです。文字や数字などが入ります。

エクスプレッションではJavascriptのエンジンを使用しており、4種類の宣言ができます。

※ CS6では、「let」「const」は使用できません
var a = 1;
let b = 2;
const c = 3;
d = 4;
  1. var・・・グローバルスコープの変数。
  2. let・・・ブロックスコープのローカル変数。
  3. const・・・ブロックスコープの定数。
  4. 省略(無修飾)・・・varに近い動作。

スコープとはアクセスできる範囲のことです。グローバルスコープはアクセス範囲が広い反面、外部からの予期せぬ変更でバグが発生するリスクがあります。

一方、ブロックスコープはアクセスできる範囲が狭いですが、バグの発生リスクが減るので、うまく使い分けると効果を発揮できます。

本記事では、AfterEffectsのバージョンに依存しない、①④について詳しく見ていきます。

※ varの詳しい仕様はこちら、letの詳しい仕様はこちら、constの詳しい仕様はこちらをご覧ください。
※ エクスプレッションでのletとconstの対応についてはこちらをご覧ください。

変数に入るものは?

変数には、数値、文字、配列、オブジェクトなど処理に必要なデータが入ります。

var nmb = 1;  /* 数値 */
var str = "colorcode-ae";  /* 文字 */
var ary = [10, 20, 30];  /* 配列 */
var obj = thisLayer.transform;  /* オブジェクト */

配列とは、複数のデータをまとめたデータです。数字以外も入れられます。

オブジェクトとは、クラスを実体化したもので、上記の場合は、「アンカーポイント」「位置」などが入ったトランスフォームのオブジェクトです。

変数から値を取り出す

それぞれの値の取り出し方を以下にまとめてみます。

数値

var num = 1;  /* 数値 */
num;  /* 1 を出力 */

文字

var str = "colorcode-ae";  /* 文字 */
str;  /* colorcode-ae を出力 */

配列

var ary = [10, 20, 30];  /* 配列 */
ary[0];  /* 10 を出力 */
※ ary[1]は20、ary[2]は30が取り出せます。

オブジェクト

var obj = thisLayer.transform;  /* オブジェクト */
obj.position[0];  /* 960(位置のX座標) を出力  */
※ obj.position[1]は位置のY座標を取り出せます。

無修飾とvarの違い

ここで本題の無修飾とvarの違いについてです。

  1. 無修飾はJavaScriptの厳格モードでエラーになる
  2. 関数内の場合、無修飾とvarでスコープ(アクセスできる範囲)が変わる

JavaScriptの厳格モードを使用すると無修飾はエラーとなりますが、意図的に厳格モードにしなければ関係ないので、①はあまり気にしなくていいです。

大切なのが②で、説明のために簡単なソースコードを準備しました。

nonNum = 1;  /* (A) */
var varNum = 2;  /* (B) */

function func(a, b){
  funcNonNum = a;  /* (C) */
  var funcVarNum = b;  /* (D) */
}
func(3,4);

for (var i = 0; i <= 1; i++) {
  forNonNum = 5;  /* (E) */
  var forVarNum = 6;  /* (F) */
}

例えば上記のような記述をすると、(D)だけスコープが異なります。具体的には関数外から「funcVarNum」にアクセスしようとするとエラーになります。

(D)以外は同一エクスプレッション内であればグローバルに(どこからでも)アクセスできます。

関数内の場合は、外部からの予期せぬ変更を防げるので、(C)より(D)のほうが有利な書き方だと言えます。

※ varを省略した場合としない場合の動作の違いの詳細はこちらの「無修飾の識別子」箇所をご覧ください。
※ 関数については以下の記事をご覧ください。
関連記事

AfterEffectsのエクスプレッション内で、時間計算など、同じ処理を何度もする場合もあると思います。 そんな時は、関数を使うと記述量を大幅に減らせる可能性があります。 この関数の使い方についてご紹介します。 関数と[…]

自作関数を使って処理を再利用する方法

まとめ

変数宣言に「var」をつけている人はかなり少ないと思いますが、関数内の変数宣言はvarをつけたほうが、スコープが狭まるのでバグの混入リスクが下がります。

当ブログでは、上記を踏まえ、AfterEffectsのバージョンに依存せず、シンプルなルールにする為、今後は以下の方式で記述していきたいと思います。

  • 変数宣言には常にvarをつける
  • let/constは使わない(CS6でエラーになる為)

ここまでまじめに説明してきましたが、AfterEffectsのエクスプレッションは、小さなプログラムが多いのと、関数を使っている人は少ないと思うので、常にvarを省略でも大きな問題はないと思います。

この記事を読んだことで、変数にvarをつけるのかどうか、モヤモヤした気持ちが消えていれば幸いです。

変数宣言にvarをつける場合とつけない場合の違いまとめ
最新情報をチェックしよう!
>Aeをもっと便利に。「COLOR CODE - AE」

Aeをもっと便利に。「COLOR CODE - AE」

AfterEffectsをもっと便利に使う為のコンテンツを制作・発信しているブログです。YouTube「COLOR CODE - AE チャンネル」では、エフェクト、エクスプレッション、プリセット、プラグインのリファレンス動画を公開しています。チャンネル登録もお待ちしています!

CTR IMG