ShopifyのUIフレームワークPolarisをReactで扱う

Shopifyのアプリ開発などで使うUI FrameworkであるPolarisですが、意外と単体で動かす方法を紹介しているものが少ない気がしたのでまとめました。

ただのUIフレームワークとして動かす方法ですので、Shopifyアプリなどに使うにはShopify APP CLIやKoaなどと連携させる必要があることに注意してください。

アプリセットアップ

手取り早いのはやはりcreate-react-appですね。

$ yarn create react-app shopify-polaris
$ cd shopify-polaris

Polarisをインストール

ライブラリをいつも通りインストールします。

$ yarn add @shopify/polaris

src/index.jsxでCSSを読み込む

PolarisのスタイルをあてるためにCSSを読み込みます。linkタグを使う方法がよく紹介されますが、importでもいけます。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import '@shopify/polaris/dist/styles.css'

ReactDOM.render(
...

@shopify/polaris/styles.cssで紹介しているサンプルや記事もありますが、version5以降ではdistをつける必要がある様子です。

For Polaris 5, the import has changed from:

import ‘@shopify/polaris/styles.css’

to

import ‘@shopify/polaris/dist/styles.css’

You may want to check out the migration guide as the tutorial may be slightly out of date.

https://github.com/Shopify/polaris-react/issues/3134#issuecomment-662992997

src/App.jsxでAppProviderを設定

PolarisにはTheme Providerがありますので、App.jsxに設定しておきましょう。

import React from 'react';
import jaTranslations from '@shopify/polaris/locales/ja.json';
import {AppProvider} from '@shopify/polaris';


function App() {
  return (
    <AppProvider i18n={jaTranslations}>
      <h1>Hello</h1>
    </AppProvider>
  );
}

export default App;

あとはUI Componentを並べていくだけ

あとはBootstrapやMaterial UIのようにパーツを並べていくだけです。

import React from 'react';
import jaTranslations from '@shopify/polaris/locales/ja.json';
import {AppProvider, Button, FormLayout, Heading, Layout, Page, TextField} from '@shopify/polaris';


function App() {
  return (
    <AppProvider i18n={jaTranslations}>
      <Page>
        <Layout>
          <Layout.Section>
            <FormLayout>
              <Heading>フォームタイトル</Heading>
              <TextField label="商品名" onChange={() => undefined} />
              <TextField label="商品名" onChange={() => undefined} />
              <Button submit>Save</Button>
            </FormLayout>
          </Layout.Section>
        </Layout>
      </Page>
    </AppProvider>
  );
}

export default App;

UIが実装できたら、Admin APIとの接続に進もう

Shopify App CLIなどを使った場合、実際にShopifyに対してOAuthの認証が入ったり、そのためにngrokを使う必要があったりと、ちょっと手間が入ります。

そのため、UIをある程度create-react-appなどで作り込んでおいて、そのコードをコピペ＋React Hook or ApolloでAPIつなぎこみを行うようなやり方がスピード出せそうかなと思いました。