自分はプログラム出身じゃないので自分が学習した中でこうこうことって説明してくれないよねってことが多々ありました。
プログラムを作る上でこうやって考えたらたぶん作りやすくなるんだろうなと思ったのでまとめてみます。
基本的には機能とUIは別物です。
UIはまじで見た目だけ、機能とは基本的にはワンぽちしたときに何を動作させるかなので、
初めて作る場合はそもそも機能さえ作らないことが多いと思います。
(jsxを実行したら機能が走るような形)
作成の手順
作りたい機能を分解する
例えばこんなものを思いついたとしましょう。
『ボタンを押したときにAE内のアイテムの名前を全部取得したいなー』
いったんボタンを押すというのは無視します。
AE内のアイテムの名前を全部取得する＝AE内のアイテムのすべてのリストからひとつずつ名前を取得する
まぁ最終的なデータとしてGUI上のeditboxに書き出すのか、txtデータで欲しいのか、クリップボードに欲しいのか書き出す手段もいくつかありますが、基本的には最初に思いついた動作をループさせて取得するといいかと思います。
条件が入る場合……例えばコンポジションのみとかそういうのは取得する手前でif文をかまして回避します。名前を取得する箱を用意する方法もいくつかあります。
配列に直接ぶち込む方法、いったん普通の変数にいれてあとで配列にする方法の基本的には2種類です。
AEはjavascirptで構成されているため結構緩く、直接配列にぶち込んだら配列数を自動で増やしてくれるため別に最初のやり方で問題ないです。vbaとかだと配列数を毎回1つ増やして追加とかになるのでちょっとめんどいため後者の方法をとったりします。
分解した要素ごとをなるべく短く関数にする
関数にする際になるべく短くすることがいいとされています。
理由としては汎用性かと思いますが、ものによっては難しいので最初のうちは特に何考えなくていいですが、やっていくうちにこれくらいの長さがいいなとかこれくらいで値を返した方がいいなとか分かってくると思います。
GUIを作成して何をしたら実行されるか作成する
関数で作成されている場合、最後に関数自体の記載がなければ実行はされません。
これをボタンを押されたらの中に入れることで初めて実行されるような形にあります。
関数を使わずにプログラムを書いてしまうと、jsxが起動したときにすぐに実行してしまうため、
複雑な要素をもったプログラムを作ることが出来なくなります。
(jsxごとに1つずつ機能を作れば出来なくないですが、スクリプトの数が膨大になってしまいます)
簡単な機能とかはjsx内に関数を設けず作成する場合もあります。
例えばプロジェクト内のレイヤーでガイドレイヤーが存在する場合、すべてガイドレイヤーを解除するとか非表示のものがあれば表示状態にするとかそういった全部のアイテムに何かする場合は特にUIを作らず作成することがあります。
変数は大きく2つある
直接ものが入っている変数とオブジェクトが入っている変数の2つに大きくわかれると思います。
例えば
var i = 1;まぁi = 1ってことで以降はiに1が入ってますよーって形で使えます。
もひとつ
var ap = app.project;お決まりのような定型句ですが、apにはapp.projectが入ってます。
app～始まるものはいわゆるオブジェクトでAEが立ち上がった時点で勝手にフォルダ階層を作成してくれてるようなものです。
ここにはいろんなものが入っており、この中のオブジェクトを操作することでいろいろなことができます。
オブジェクトっていうのは簡単に言えば参照しているような形で数字や文字と言った直接の値とは違って大体ものは階層的になっているため(本当にフォルダのような形をイメージすると分かりやすい)だいたいのもの(コンポジションとか)は1つのオブジェクトから別のオブジェクトを探せたりと全部つながっています。
よくやるのは名前に○○が含まれていたら～のような処理ですが、最終的に欲しいのはその名前を持つオブジェクトだったりするのでreturnする時はオブジェクトを返すことが多いです。