SFDC：Salesforce Development 2016 - Part 3 - tyoshikawa1106のブログ

Salesforce Development 2016 - Part 3です。前回はAngularJSをつかってVisualforceページを開発するときの流れを確認しました。今回はReactをつかったVisualforceページ開発について確認したいと思います。

前回のPart2はこちら。

はじめに

AngularJSは必要なファイルを静的リソースにアップロードするだけで開発を進めることができました。Reactで開発する場合、ビルドの作業が必要になります。そのため、GulpやWebpackといった開発環境が必ず必要になります。

・・ということで今回の話が一番メインの話です。

NPMパッケージのインストール

無くても大丈夫なものも含まれているかもしれませんが、以下のパッケージをインストールします。

React

$ npm install react --save
$ npm install react-dom --save
$ npm install react-router --save
$ npm install react-slick --save
$ npm install reactify --save

Babel

$ npm install babel-core --save-dev
$ npm install babel-loader --save-dev
$ npm install babel-preset-es2015 --save-dev
$ npm install babel-preset-react --save-dev

Webpack

$ npm install webpack --save-dev
$ npm install style-loader --save-dev
$ npm install sass-loader --save-dev
$ npm install css-loader --save-dev
$ npm install node-sass --save-dev

Reactまわりのフォルダ構成

フォルダ構成です。reactフォルダの中に必要なファイルをまとめます。

modulesに各コンポーネント
entryにビルド前のファイル
buildにビルド後のファイル

ビルドはWebpackをつかって行います。
静的リソースにはビルド後のファイルのみアップロードします。

├── react
｜      ├── entry
｜      ├── build
｜      └── modules
｜            └── comoponents
└── pkg
    ├── (略)
    └── webpack.config.js

f:id:tyoshikawa1106:20160705180236p:plain

build, entry, modulesはこのようになります。
f:id:tyoshikawa1106:20160705180344p:plain:w300

webpack.config.jsはこんな感じです。
f:id:tyoshikawa1106:20160705180449p:plain

Reactコンポーネントのビルド実行 ~ 静的リソースへのアップロード

上記のフォルダ構成と設定ファイルを用意したら次のコマンドでビルドを実行できます。

$ webpack

f:id:tyoshikawa1106:20160705180553p:plain

ビルド後のファイルは静的リソースにアップロードします。Part 1 / Part 2のときと同じようにdevstaticresourcesフォルダにまとめてデプロイコマンド実行します。
f:id:tyoshikawa1106:20160705181603p:plain:w300

$ gulp build-staticresources
$ foreman run gulp deploy

これでReactのビルド後のファイルを静的リソースにアップロードできました。
f:id:tyoshikawa1106:20160705181936p:plain

Visualforceページの作成

ReactでつくったJSファイルを静的リソースにアップできたのでいよいよVisualforceページを用意します。
今回用意するデモページは以下のとおりです。

ReactBoard.page
ReactCounter.page
ReactDiscussion.page
ReactHome.page
ReactSlick.page
ReactTodo.page

例えばReactBoard.pageの場合はこんな感じになります。
f:id:tyoshikawa1106:20160705184348p:plain

作成後、そのURLにアクセスしてみると無事に表示されました。
f:id:tyoshikawa1106:20160705184503p:plain

ということでReactコンポーネントをつかってVisualforceページをつくることができました。各コードの詳細は最後に記載するGitHubへのリンクを確認してください。

リンクURLについて

別のVisualforceページへのリンクを用意する場合、URLが『/apex/pagename』となるので注意してください。JS処理を静的リソースに用意する場合は『{!$Page.pagename}』という書き方は利用できません。
f:id:tyoshikawa1106:20160705185145p:plain

静的リソースからの画像読み込みについて

Reactコンポーネントの開発で静的リソースにアップしてある画像を利用したりすると思います。そのときは次のような感じで指定する必要があります。

<svg aria-hidden="true" className="slds-button__icon">
    <use xlinkHref="/resource/SLDS202/assets/icons/utility-sprite/svg/symbols.svg#home"></use>
</svg>

f:id:tyoshikawa1106:20160705185648p:plain