JavaScriptでループ(繰り返し)処理を行えるfor文をご紹介します。

for文の構文

for(1.カウンタの初期化式;2.繰り返す回数の条件式;3.カウンタの加算式){
    繰り返す処理;
}

と3つの式を指定し、「{}」内の処理を、カウンタが2.繰り返す回数の条件である内はひたすら繰り返します。

構文例

例えば、テキストレイヤーのソーステキストに下記のエクスプレッションを適用すると…

var txt="";
for(var i=0; i<5; i++){
    txt=txt+(i+1)+"回目の処理\n";
}
// (\nは改行)

1回目の処理
2回目の処理
3回目の処理
4回目の処理
5回目の処理

と表示されます。

「i=0」から始まるため、文章を表示する処理内では(i+1)で「1」から表示しています。iそのままでは1回目の処理で「0回目の処理」という文章を表示してしまいます。

条件式の「i<5」である間は繰り返すので、「i++」で繰り返す度にiを1プラスし、5回目の処理が終わった後、i=5となり、条件式から外れるため繰り返し処理が終了します。

iに1を足す処理「i=i+1」を簡単に記述すると「i++」

iから1を引く処理「i=i-1」を簡単に記述すると「i–」と短くすることができます。

また、今回の文章ではi+1とすると混乱するという場合は

var txt="";
for(var i=1; i<=5; i++){
    txt=txt+i+"回目の処理\n";
}

としても結果は同じです。「i=1」から始まり、iを1ずつプラスし、「i<=5(iが5以下)の間繰り返し、5回目の処理が終わると「i=6」となり繰り返し処理が終了します。

今回のfor文では、繰り返し中は「i」が1ずつプラスされるため、1ずつズレる数値としてiが活躍します。

実例

それでは実例として、またテキストのソーステキストに適用するエクスプレッションで、コンポジション内の全レイヤー名をリスト化します。

var txt="";
for(var i=1; i<=thisComp.numLayers; i++){
    txt=txt+thisComp.layer(i).name+"\n";
}

ポイントは「thisComp.numLayers」です。「このコンポジションの、レイヤー数」が数字で返ってきます。

つまり繰り返し処理内の「thisComp.layer(i).name」で「上から1つ目のレイヤー名」「2つ目のレイヤー名」…を取得し、最後のレイヤー名を取得した後、「i=レイヤー数+1」となり条件から外れ、処理が終了します。

for文から抜ける「break;」

「break;」で繰り返し途中でもループを抜けられます。

使い所はというと、先程のプログラムに追記すると

var txt="";
for(var i=1; i<=thisComp.numLayers; i++){
    if(thisComp.layer(i).name=="テキストレイヤー 5"){
        break;
    }else{
        txt=txt+thisComp.layer(i).name+"\n";
    }// if
}// for

txt;

これで、「テキストレイヤー 5」という名前のレイヤーがあれば、そこで「break;」へ条件分岐し、変数「txt」にレイヤー名を追加せずに繰り返し処理が終了しますので、「テキストレイヤー 5」を含めず、その一つ前までのレイヤー名がリストとして取得できます。

応用

var txt="";
for(var i=thisComp.numLayers; i>=1; i--){
    txt=txt+thisComp.layer(i).name+"\n";
}// for

iがレイヤー数から始まり、iを1ずつ減らしながら、iが1以上の間処理を繰り返します。つまり、レイヤー名を下から上に逆順でリスト化します。

初期化式、条件式、加算式を駆使して、思い通りの繰り返し処理を実現しましょう。

次回予告

次回はJavaScript基本編の最終記事、「関数」について学びます。

この記事を以て、ほぼスクリプト、エクスプレッションを自作するための基本的なプログラムを修了することとなります。

他者の制作したJavaScriptを読めるようになり、調べながらでも自身がスクリプトやエクスプレッションを作れるレベルになっています。

是非「関数」までモノにして、自動化、効率化の世界へ飛び出しましょう。

下記リンクから飛べます。

「関数」でJavaScriptを自在に操る