初心者向けAdobe JSX、Javascript入門これからjsxを始める前の話
JavaScirptでAdobeのアプリを自動化したい方向けの入門記事です。入門と言っても開発のやり方とか、文法の話ではなくそもそもJavaScriptってなんじゃらほいという話です。実際scriptを書いているとあのコードどうやって書くの？とかあの関数どうやって書くんだっけ？という壁にぶつかった時にインターネットで調べるになるはずです。しかしJavaScriptそのものの種類とか理解してないと検索やりかもわからなければどう言った種類の本を買えばいいのかというそもそもコード以前の壁にぶつかるからです。実際こう言った経験を自分自身が何度もぶつかったのでどのような方がこのサイトを見てるかわかりませんが初心者の道標になればいいかなと思います。
JavaScriptの歴史
wikipediaによるとウェブブラウザ Netscape Navigatorが起源と書いてあります。間違ってもJavaと一緒にしていけません。怒られます。始まりはブラウザ上で動きをつけたりユーザーの行動に反応させたりする事です。ここで注意したいのはあくまでブラウザ上で動かすためのscriptだったという事。つまりファイル操作とかAdobeのアプリとか全く別の話なのです。実際ブラウザ上で動くJavaScriptはファイル操作はセキュリティの関係で基本的にできません。もしあるウェブサイトに飛んでブラウザが勝手にユーザーのファイル操作をしたりできるとウェブサイトを通じてユーザーのPCを乗っ取ったりできるからです。これがウェブサイト上で動くJavaScriptです。それではその他にJavaScriptがあるの？かというとあります。
JavaScriptの種類
まず有名なのはサーバーサイドで動くNode.js。これはサーバー側で動くscriptです。サーバーでは例えばショッピングサイトの顧客の情報とか商品の情報が格納されていてアクセスがあると情報を引き出したりします。とりあえずブラウザとサーバーで違うものだと認識してください。このNode.jsは本来サーバーで動かすscriptですが自分のPCで動かしてファイルを自動的に操作したり書き込んだりする事も可能です。それでAdobeのアプリ上で動くJavaScriptはこれらとまた違ったJavaScriptなのです。どのJavaScriptも基本は同じですが違う種類のJavaScriptです。AdobeのJavScript(JSXと呼ばれるものなので以下JSX)もファイル操作が可能なのですがNode.jsとやり方が異なります。例えばあなたがJSXでのフォルダ作成に関する情報を調べる時「JavaScript フォルダ 作成」と検索するとNode.jsを使用したフォルダ作成のやり方ばかり引っかかります。これをJSX上で書いてもエラーばかり出て一切動いてくれません。つまりgoogleで調べる場合、「Adobe フォルダ 作成」と検索しないとJSX上で動くコードが発見できないのです。以下newFolderという空のフォルダーをデスクトップに作成するNode.jsとJSXのコード。
全然違いますね。結果は同じですがJavaScriptの種類が違うと中身が違ってくるというのだけ知っておいてください。実際JSXよりもNode.jsの方が圧倒的に知られています。JSXの存在はあまり知られていません。他にもJSXには例えばPhotoshopにレイヤーを作成させるコードとかIllustratorに四角形のパスを作成させるコードが独自にあります。これはブラウザ上やサーバー上では動きません。JSXだけのコードです。
ブラウザー上に表示されたボタンをクリックするとhelloと表示するscriptです。JSX上では動きません。
これはPhotoshop上でレイヤーを新しく作成するscriptです。ブラウザ上では動きません。Photoshop上でのみ動きます。二つとも異なる内容のscirptですがfor(var i=0…)という部分が同じである所に注目してください。ここが各種JavaScriptに共通する文法の部分です。レイヤーを作成するコードもブラウザ上で動きを与えるコードもこの基本の文法の上で動くのです。
それでJavaScriptにも種類があるのはわかっていただけたとは思いますがさらにJavaScriptにはバージョンがあります。JavaScriptも日々進化しています。JavaScriptの中核的な文法はどの種類のJavaScriptも共有しています。例えば以下のコードは全てのJavaScriptで動きます。
こういった繰り返し処理、計算方法と言った文法は同じですがこの基本の部分は年々進化しておりこの中核の部分はECMAと呼ばれていてEcma internationalという団体がその仕様とかについてあーだこーだ議論して策定されます。この核となるバージョンはPhotoshopでいう所のCS6とかCC2020のバージョンと似たような概念になります。それでこのECMAのバージョンですが1,2,3(4は破棄)5,6(2015)…etcと進化してきました。最新はECMA2020です。各種ブラウザーは常に最新のECMAに対応するように追いかけっこしています。Node.jsも同じく。それではJSXはどうでしょうか。JSXのバージョンはECMA3です。ちなみにECMA3が策定されたのが1999年です。ECMA2020って2020年に策定されたの？かというとそのようになります。ECMA3は1999年です。古すぎない？と思った方。そうですかなり古いです。1999年ってwindows OSがまだXPですらなかった頃です。世の中がPhotoshopCC2020を使っているのに未だにPhotoshop 5.0(CSじゃないよ)を使っている感じですかね。なので最新のJavaScriptの技術書を購入して応用しようとしても全く応用できないでしょう。特にECMA2015からかなり変わったので最近の情報はJSXとの隔離がかなり激しいと思います。僕が始めた時は2013年くらいで全然マシな方でした。ちなみに最新のECMAとECMA3で同じ結果を返すコードを書いてみます。
同じ結果を返すコードですが全然違いますね。ECMA3のコードは最新の環境でも動きますが逆は動きません。なのでJSXと付き合う場合は古い書き方を勉強しなければなりません。
学び方
とはいえECMA3準拠のJavaScript解説サイトや書籍は2020年8月現在世にまだまだ存在します。新しいものと古いものがあるとわかればこう言った教材の選択を大きく間違えることはないでしょう。ちなみに一般的にJavaScriptというとブラウザ上で動くJavaScriptになります。なので一般的な技術書を購入するとwebサイトを開発することを最終目的において学習することになります。基本文法はそういった本で勉強してもいいのですが基本文法を勉強した先のhtmlやcssを動かしたりする箇所はJSXのみを学ぶという観点のみでいうと全く関係無いので飛ばすべきです。よくJavaScriptは事前にhtmlを習得する必要があると言われますがあくまでwebサイトを作る場合のみの話であってJSXをいきなり学びたい場合はその限りではありません。
もし一から勉強する場合はJavaScript入門のような初心者向けのサイトで基本文法を（webサイトを開発するわけでは無いのでhtmlは不要）
JSXの具体的なコードは先駆者の古籏氏のサイトが有名で一番いいと思います。JSXを学ぶ者が誰もが参考にするサイトです。Adobe Photoshop CC 2014自動化作戦
2021年2月20日javascriptを勉強するためのNode.jsをインストールする記事を書きました。
初心者、これからモダンなjsをやりたい人向けNode.jsで始めるJavaScript