イトウ先生のTips note【AfterEffects CC 2019】スネークケースとキャメルケース


こんにちは、イマジカデジタルスケープの伊藤和博です。
今回は、AfterEffects CC 2019のエクスプレッションから、「スネークケースとキャメルケース」をご紹介します。
このスネークケースとキャメルケースは、プロパティやメソッドの「書き方の違い」になりますが、AfterEffects CC 2019で新しく搭載されたJavaScriptエンジンでは、一部のプロパティやメソッドで許容されていたスネークケースでの書き方がサポートされなくなり、キャメルケースを使うよう仕様が変更となりました。
書き方を変えることによって結果的に文字入力の数も減るため、コーディングする側にとっては楽にはなりますが、書き慣れた方にとっては少々面倒かもしれません。
仕様変更を理解しておかないと、都度コンポジションパネルにエラーのバナーが表示されるため、このバージョンから書き方を変える必要がある、ということについては理解しておく必要があるかと思いますので、そのあたりをご紹介します。

●スネークケースとキャメルケース

まず、スネークケースとは、複数の単語で成り立つプロパティやメソッドを書く際、各単語をハイフンやアンダーバーで区切って書く書き方をスネークケースといいます。
以前のブログ【イトウ先生のTips note【After Effects CC 2019】トレイル(オニオンスキン)】でご紹介しました、valueAtTime()メソッドをスネークケースで書くと、value_at_time()となり、ハイフン及びアンダーバーを蛇が地を這う様子に見立ててスネークケースといいます。
また、アンダーバーを取り、アンダーバーの次の単語の先頭を大文字に変更して書く書き方がキャメルケースといい、飛び出した大文字がラクダのコブのように見えることからキャメルケースといいます。value_at_time()メソッドをvalueAtTime()と書くことでキャメルケースになります。
例えば、CSSで使用するfont-sizeプロパティなども、CSSでは・・

p{font-size:small;}

のように書きますが、JavaScriptでは・・

<p id="title">フォントサイズを100pxに変更</p>
<script>
var x=document.getElementById("title");
x.style.fontSize="100px";
</script>

のように、キャメルケースに変換して書くことで、JavaScriptで利用することが可能になりますので、双方の書き方には互換があるわけですが、AfterEffects CC 2019では、スネークケースがサポートされなくなったことから、これまでスネークケースで書いていたプロパティやメソッドは原則キャメルケースに書き直す必要があります。ただし、互換は残されているため、コンポジション上にエラーのバナーは出るものの、動作やレンダリングは可能は可能、というようになっています。

●対象となるプロパティとメソッド

AfterEffectsのエクスプレッション言語メニューでは、もともと(CSの時代から)スネークケースを呼び出す仕様にはなっておらず、最初からキャメルケースで呼び出せるため、わざわざスネークケースでエクスプレッションを手書きするか、他の人が書いたソースを見なければ、目に触れることも無いかもしれません。

また、「どのようなプロパティやメソッドでも、キャメルケースで書かれているものは、大文字を小文字に変更し、変更した小文字の前にアンダーバーを追加することでスネークケースで書き換えることができるか?」というとそうではありません。例えば、timeToTimecode()メソッド(ストリング扱い)や、timeToFrames()メソッド(ナンバー扱い)などを、time_to_timecode()や、time_to_frames()と記述してもReference Error(参照エラー)となるため、あくまでもスネークケースで書くことができるプロパティやメソッドのみ、ということになります。

ちなみに、以前のブログ【イトウ先生のTips note【After Effects CC 2019】トレイル(オニオンスキン)】でご紹介しました、valueAtTime()メソッドをスネークケースで書き直すと以下のようなアラートを返します。

TypeError:・thisComp.layer(・・・),position.value_at_time is not a function.


この場合は、「Reference Error」ではなく「TypeError」で「書き方のエラー」という表示がでてきます。ただし、エラーは表示されるものの、コンポジションで通常通りプレビューも可能で、レンダリングも可能です。これは、互換はあるけれども、サポートはされない、ということになりますので、スネークケースを使ったままレンダリングし、何らかの不具合が発生してもサポートされない、という解釈になるかと思います。
ちなみに、CC2018では、スネークケースで書いても以下のようにエラーは返しません。

AfterEffects CC 2019からサポートされなくなったスネークケースのプロパティは、以下の32個になります。

this_comp
this_layer
this_property
color_depth
has_parent
in_point
out_point
start_time
has_video
has_audio
audio_active
anchor_point
audio_levels
time_remap
casts_shadows
light_transmission
accepts_shadows
accepts_lights
frame_duration
shutter_angle
shutter_phase
num_layers
pixel_aspect
point_of_interest
depth_of_field
focus_distance
blur_level
cone_angle
cone_feather
shadow_darkness
shadow_diffusion
active_camera

サポートされなくなったメソッドは、以下の28個になります。

value_at_time()
velocity_at_time()
speed_at_time()
nearest_key()
posterize_time()
look_at()
seed_random()
gauss_random()
ease_in()
ease_out()
rgb_to_hsl()
hsl_to_rgb()
degrees_to_radians()
radians_to_degrees()
from_comp_to_surface()
to_comp_vec()
from_comp_vec()
to_world_vec()
from_world_vec()
to_comp()
from_comp()
to_world()
from_world()
temporal_wiggle()
loop_in_duration()
loop_out_duration()
loop_in()
loop_out()

ちなみに、スネークケースで書いたまま保存し、再び開くとキャメルケースに自動で書き直されているか?、また、以前のバージョンのAfterEffectsでスネークケースで書いたものを、CC2019で開いて更新すると、キャメルケースに書き直されて更新されるか?というと、そういった互換性はなく、スネークケースのままで開きます。ただし、動作の互換があるため、タイプエラーになるものの、動くことは動きます、という解釈になるかと思います。
CC2018以前のAfterEffectsでこれらを使用されていた場合は、キャメルケースに書き換えることで「エラーなく」使用でき、言語メニューからも従来通りキャメルケースで呼び出し可能ですので、CC2019からこういった変更点も新たに加わった、ということは頭の片隅にでも覚えておくといいかと思います。


この記事を読んだ方にオススメの講座はこちら!

▼AfterEffects CC 2018の使い方・基本トレーニング
メインビジュアル:AfterEffects CC 2018の使い方・基本トレーニング

▼AfterEffects CC 2014の使い方・実践トレーニング
メインビジュアル:AfterEffects CC 2014の使い方・実践トレーニング


イトウ先生が、Twitterを始めました!みなさんもぜひ、フォローしてくださいね!
itoh_sensei

イトウ先生のTips noteアーカイブ【2016年~】

○AfterEffects CC 2015:顔のトラッキング
○AfterEffects CC 2015:タイムチューナー
○AfterEffects CC 2015:AIデータはレイヤーに分配で取り込む
○AfterEffects CC 2015:プレビューのコントロール
○AfterEffects CC 2015:スクリプト
○AfterEffects CC 2015:新しくなったMAXON CINEMA 4D Exporter
○AfterEffects CC 2015:マスクリファレンス
○AfterEffects CC 2015:スムーザー
○AfterEffects CC 2015:立体の旗を作る・1
○AfterEffects CC 2015:立体の旗を作る・2(CINEMA 4Dレンダラー)
○AfterEffects CC 2017:強化されたライブテキストテンプレート
○AfterEffects CC 2017:日付のトークン
○AfterEffects CC 2017:マーカーデュレーション
○AfterEffects CC 2017:他のレイヤーのエフェクトをプリコンポーズ無しで参照する
○AfterEffects CC 2017:拡張された平面フォルダ
○AfterEffects CC 2017:レイヤーのあるコンポジションに変換
○AfterEffects CC 2017:現在のフレームから静止画を作る
○AfterEffects CC 2017:最後のフレームでフリーズ
○AfterEffects CC 2017:サウンドの振幅を他のレイヤーで活用する、オーディオ振幅
○AfterEffects CC 2017:カンマ区切りの文字列をランダムに表示する
○AfterEffects CC 2017:CC Light Raysとトラッカー
○AfterEffects CC 2018:パスからヌルを作成
○AfterEffects CC 2018:モーショングラフィックステンプレート
○AfterEffects CC 2018:マスタープロパティ
○AfterEffects CC 2018:プロパティリンクのピックウィップ
○AfterEffects CC 2019:レスポンシブデザインー時間
○AfterEffects CC 2019:パペットベンドピン
○AfterEffects CC 2019:Mocha AE CC プラグイン
○AfterEffects CC 2019:Animate CC FLAファイルの読み込み
○AfterEffects CC 2019:コンテンツに応じた塗りつぶし
○AfterEffects CC 2019:トレイル(オニオンスキン)
○AfterEffects CC 2019:スネークケースとキャメルケース