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
Photoshop用フォルダー監視Extension 特定のフォルダーを監視してファイルが投げ込まれたら自動的にPhotoshop上で開いて保存したりアクションを実行するExtensionを大幅アップデートしました。元々こちらの記事で作っていたものを改良していろんな画像拡張子に対応させました。よくわかりませんが前回の記事のアクセスがいまだに多かったので更新しました。 使い方 監視するフォルダーを設定してwatchボタンを押します。監視開始後に監視フォルダーに画像ファイルが投げ込まれるとPhotoshopが自動的に画像ファイルを開きます。オプションによってはそのまま特定のフォーマットで保存できま
配列のような配列 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
Photoshop UXPの開発について今回特にサポートされていない事、現状できないことを中心に書いていきます。CEP経験者なんかはドキュメントを結構飛ばして読んでしまうと思いますが結構サポートされていない機能、意外な仕様が多いです。 そもそもUXPのシステムは完全なブラウザベースのパネルではない CEPはgoogle Chromiumベースのシステムでした。つまりほとんどGoogle ChromeをベースにしたシステムであったのでブラウザでサポートしているCSS,HTMLに関してはよほど新しいものでない限りCEP上では動くものでした。それに対してUXPは基本は同じですが完全なブラウザベースの
今回分割代入スプレッド構文に入ります。この辺りはアロー関数以上に見た目が???な構文が多いです。とはいえインターネット上の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