AfterEffectsのエクスプレッションで頻繁に利用する「変数」ですが、varをつける場合とつけない場合で、実は動作が変わる部分があります。
そんな「変数」について今回はしっかり説明してみたいと思います。
変数とは?
変数とはデータを格納する器のことです。文字や数字などが入ります。
エクスプレッションではJavascriptのエンジンを使用しており、4種類の宣言ができます。
var a = 1;
let b = 2;
const c = 3;
d = 4;
- var・・・グローバルスコープの変数。
- let・・・ブロックスコープのローカル変数。
- const・・・ブロックスコープの定数。
- 省略(無修飾)・・・varに近い動作。
スコープとはアクセスできる範囲のことです。グローバルスコープはアクセス範囲が広い反面、外部からの予期せぬ変更でバグが発生するリスクがあります。
一方、ブロックスコープはアクセスできる範囲が狭いですが、バグの発生リスクが減るので、うまく使い分けると効果を発揮できます。
本記事では、AfterEffectsのバージョンに依存しない、①④について詳しく見ていきます。
変数に入るものは?
変数には、数値、文字、配列、オブジェクトなど処理に必要なデータが入ります。
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 を出力 */
オブジェクト
var obj = thisLayer.transform; /* オブジェクト */
obj.position[0]; /* 960(位置のX座標) を出力 */
無修飾とvarの違い
ここで本題の無修飾とvarの違いについてです。
- 無修飾はJavaScriptの厳格モードでエラーになる
- 関数内の場合、無修飾と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)のほうが有利な書き方だと言えます。
※ 関数については以下の記事をご覧ください。
AfterEffectsのエクスプレッション内で、時間計算など、同じ処理を何度もする場合もあると思います。 そんな時は、関数を使うと記述量を大幅に減らせる可能性があります。 この関数の使い方についてご紹介します。 関数と[…]
まとめ
変数宣言に「var」をつけている人はかなり少ないと思いますが、関数内の変数宣言はvarをつけたほうが、スコープが狭まるのでバグの混入リスクが下がります。
当ブログでは、上記を踏まえ、AfterEffectsのバージョンに依存せず、シンプルなルールにする為、今後は以下の方式で記述していきたいと思います。
- 変数宣言には常にvarをつける
- let/constは使わない(CS6でエラーになる為)
ここまでまじめに説明してきましたが、AfterEffectsのエクスプレッションは、小さなプログラムが多いのと、関数を使っている人は少ないと思うので、常にvarを省略でも大きな問題はないと思います。
この記事を読んだことで、変数にvarをつけるのかどうか、モヤモヤした気持ちが消えていれば幸いです。