イトウ先生のTipsnote AfterEffects CC 2019 :スネークケースとキャメルケース

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 緊急事態宣言発令に伴うトレーニングの開催延期について
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に

クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote

イトウ先生のTipsnote Secondbook


イトウ先生のTipsnote:目次

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

Aecc19_sc003

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

Aecc19_sc004


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

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

Aecc19_sc001

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

Aecc19_sc002

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からこういった変更点も新たに加わった、ということは頭の片隅にでも覚えておくといいかと思います。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2018の使い方・基本 | Illustrator CC 2018使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CC 2018の使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2018の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |