javascript基本的に一枚のパネル上でインターフェイスを構築する必要があるExtensionでは多機能なパネルを開発しようと思うと表示の切り替え機能が必要になったりそれに伴いhtmlのコード量が莫大になったりします。結局ある程度の規模のパネルを開発する場合は何らかしらのフレームワークの導入も視野に入ってくる、という事で今回はReactの環境構築をAdobeCEP上で行う場合につまづいた点を載せたいと思います。最低限必要なnpmパッケージから。React、webpack、babelの一連のパッケージになります。Node.jsのためにexternalsをインストールasync,awaitを使用するためのbabelのプラグイン。React上でこれらを使用するにはたとえ最新のecmaに対応している環境でも別途プラグインのインストールが必要らしいです。構文でメソッドに対してアローファンクションを使用するためのプラグイン。npmパッケージをインストールしたらwebpackの設定へポイントはtargetでnodeの環境を明示する事でしょうか。デフォルトだとweb(ブラウザーベースの環境)が設定されるのでここを設定し忘れるとNode関連のモジュールが上手く動きません。webkitベースで作られているらしいのでnode-webkitの設定の方が合っているかもしれないですが一応現在問題無いのでnodeで設定していますが正確かどうか自信がありません、、、またプラグインで一部、機能を拡張します。awaitをclassメソッドで使用できるようにします。これが無いとreactでasync,awaitがうまく動きません。scriptだと通常のbabelとpolyfillだけで動くので当初想像もつかなかった。plugin-proposal-class-propertiesアローファンクションをclassメソッドでも使用できるようにします。これが無いとstateを更新するメソッドを一々bindで束縛しないといけません。次回はreact-dndについて書きたいな。tubeprevbabeljavascriptPhotoshopReactscriptコメントする。コメントをキャンセル入力エリアすべてが必須項目です。内容をご確認の上、送信してください。formにセットされた値を効率よく取得する。formにセットされた値を効率よく取得する。