今後UXPの実装が進むとAdobe用のscriptの開発でこれまで以上に非同期処理が重要になるでしょう。もちろん非同期処理自体もはや当たり前のように使われていますが意外にキャンセルボタンの実装をしようと思ったかなりややこしかったのでまとめることにしました。なお、実装にあたってはこちらの記事を参考にしました。キャンセル可能でPromiseなsetTimeout()を作る 最初にPromise関数の実装にあたってPromiseの状態をオブジェクトで管理して一度resolve,rejectの結果を投げるメソッドをプロパティーに代入するという形をとっています。キャンセルボタンされない場合そのまま非同期
ECMA2015以降classベースのオブジェクトの書き方が可能になりました。それまでの関数式ベースの書き方から大きく変わりました（但し中身は同じ）。今回classベースのオブジェクトの書き方を解説します。まずはECMA2015以前の関数式ベースのコンストラクトの作成について。 ご覧の通りECMA5まではコンストラクトの作成は関数をベースにしています。関数の引数にインスタンスのプロパティにしたい値を渡してthisで受け取る、というものでした。thisは所有者のインスタンスによって値が縛られます。このようにコンストラクトをnewした時に初めてthisの参照先が決まようになっています。またオブジェ
javascriptにおいてundefinedの扱いには誰もが慎重になるでしょう。undefined、それ自体がバグの原因になり得ます。変数の宣言でもオブジェクトのプロパティでもundefinedを避けるために事前に仮の値を代入したりする事もしばしばあります。今回undefinedの扱いを紹介します。 関数のデフォルト引数 ECMA2015よりデフォルト引数がサポートされました。これは関数の引数に何かしらの値をデフォルトの値として渡すことができます。ご存知の通り関数の引数は何も値を受け取らなかった場合はundefinedとなります。ECMA2015以前ですと以下のようにデフォルトの値に対応する
string型のプリミティブ値、地味に扱いが面倒なことがあります。ゼロパッディング、余白の削除、等。string型も最新の環境では色々便利になっています。 テンプレートリテラル ECMA2015以前、あるstring値を代入時に例えばstring値と関数の結果、変数をつなげる場合、ダブルクォート”もしくはシングルクォート’を使用して変数、式の範囲とstringの範囲を細く分ける必要がありました。 ダブルクォートかシングルクォートをstring値として使用する場合はどちらかで文字列を囲ってその文字列の中にどちらかを使用するという面倒なものでした。またクオートを何度も囲い直
ECMA5で大幅に追加されたArrayメソッドですがECMA2015以降も目覚ましい進化を遂げています。前回までに載せられなかったものを今回説明します。 for of for inと似ていますがfor ofは反復可能なオブジェクトをインデックス順に反復処理をします。ただし返す値は各配列の値のみとなります。 for inと違ってObject objectには使えません。 反復可能なオブジェクトなら配列以外にもECMA2015より追加されたMap、ArrayオブジェクトでなくてもHTMLCollectionやArgumentsオブジェクトも使用可能です。 ここまで見た感じfor inとfor of
配列のような配列 jsには配列のようで配列でないオブジェクトもあります。一見妙に聞こえるかもしれませんがECMA3で代表的なものと言えばargumentsでしょう。 引数の値を配列のように引き受けるarguments。for文で反復可能なので一見配列型のオブジェクトに見えます。しかし。 forEachを使用するとエラーが出てしまいました。なぜでしょうか？ 本当にArray型なのか確かめてみる。 ECMA5からArrayオブジェクトはArray.isArrayメソッドで確認可能です。Array型のオブジェクトならtrue、それ以外はfalseを返します。 以下確かめてみます。 なんとfalseが
モダンなjsを書く方にはもう当たり前ですがECMA5でarrayメソッドがたくさん追加されました。forEach,map,filter,some,every,reduce等。アロー関数と組み合わせるとECMA3でfor文で書いていたほとんどのコードをかなり省略化できます。慣れるともはやfor文自体使う頻度がかなり減るでしょう。同様にObjectのプロパティを列挙する構文はECMA3までだとfor~in文しかありませんでした。しかしECMA2015以降これらのコードも簡略化できるように新しいメソッドが追加されました。今回繰り返し処理の構文を紹介します。 array メソッド 前述の通りECMA5
今回分割代入スプレッド構文に入ります。この辺りはアロー関数以上に見た目が???な構文が多いです。とはいえインターネット上のjs関係の記事では勿論jsのフレームワークのドキュメントでももはや当たり前のように扱われています。これはPhotoshop UXPも例外ではありません。例えばPhotoshop UXPの以下の構文は見たことがあると思います。 constとrequireはわかるけどappを囲む{}は一体何だ!?という疑問を持つと思います。これこそが分割代入です。これは以下と同様のコードです。 それでもまだしっくりこないとは思います。勿論こういった書き方は個人で開発する場合はする必要もあるわけ
ECMA2015以降から定数、変数の定義はvarからconst、letを使用するのが主流となりvarはもはや使われなくなりつつあります。しかしAdobe jsxのECMA3準拠の環境下だとvarがずっと主流でありました。しかしこのただの定数、変数宣言がなぜ新しい形式で行われるようになったのか。 そもそも const、letって？ constは定数の宣言、一度定義して中身が変わらないことが前提の値を宣言します。letは変数の宣言、文字通り宣言後に値が再度変わりうる値を宣言します。しかしvarも変数の宣言であったはず、今回この二つの違いを掘り下げます。 varの仕様について varは変数の宣言とな
PhotoshopにUXPがついに来ましたが今後ECMA3ベースのjsxからUXPに移行するにあたり最新のjsの書き方がAdobe scriptを書く上でスタンダードになると思います。しかし今まで古い書き方に慣れていたのにいきなり新しい書き方に慣れようにも移行しづらいと思います。実際ECMA3からECMA2015の進化は飛躍的な進化でしたしその後のECMA2016,ECMA2017と年々さらに進化しています。もしくはECMA2015の進化影に隠れがちですがその前にECMA5の進化もありました。Adobe jsxはこのECMA5すらもサポートしていません。それくらいECMA3は古いです。今web