コンポーネントの開発

コンポーネントコードを追加し、ローカルの開発サーバーを使用してテストします。

始める前に

• 環境の設定
• プロジェクトの設定

このタスクについて

カウンターコンポーネントの開発のチュートリアルについては、開発者サイトにアクセスしてください。

手順

1. プロジェクトディレクトリで、src/<component-name>/index.js に移動します。
   これはコンポーネントのプライマリコードファイルです。
2. コンポーネントコードを追加します。

   この例は、Hello World コンポーネントのサンプルを示しています。

   import {createCustomElement} from '@servicenow/ui-core';
   import snabbdom from '@servicenow/ui-renderer-snabbdom';
   import styles from './styles.scss';
   
   const view = (state, {updateState}) => {
   	return (
   		<div>Hello World!</div>
   	);
   };
   
   createCustomElement('hello-world', {
   	renderer: {type: snabbdom},
   	view,
   	styles
   });

   仮想エージェント のコンポーネントを開発するには、仮想エージェント クライアントインターフェイスとやり取りするための特定のプロパティとアクションを追加します。必要なプロパティは、作成するコンポーネントのタイプによって異なります。 詳細については、「 仮想エージェント のコンポーネントの開発 」を参照してください。
3. オプション: 内部コンポーネントを追加します。
   内部コンポーネントは、別のコンポーネントに含まれるコンポーネントです。たとえば、カードコンポーネントに個別のボタンコンポーネントが含まれている場合があります。ボタンコンポーネントは、カードコンポーネントプロジェクトでインポート、インストール、および定義する必要がある内部コンポーネントになります。
   1. システムのコマンドラインツールを使用してインストールコマンドを実行し、内部コンポーネントパッケージをインストールします。

      npm install @servicenow/<now-inner-button> 

   2. index.js ファイルの先頭にインポートステートメントを追加します。

      import '@servicenow/<now-inner-button>’;

   3. index.js ファイルで内部コンポーネントを使用します。

      <now-inner-button label="Click Me" />

   4. now-ui.json 構成ファイルの components.[component-name].innerComponents アレイに内部コンポーネントをリストします。

      {
        "components": {
          "now-chart-timeseries": {
            "innerComponents": [
              "now-inner-button"
            ],

4. 開発サーバーコマンドを実行して、テストブラウザーでコンポーネントを表示します。

   $ snc ui-component develop [--entry entry --open --port port --host host]

   これらの引数に値を渡します。

   名前	説明
   エントリー	コンポーネントプロジェクト内のテストモジュールへのパス。 デフォルト： example/index.js。
   open	デフォルトのブラウザーを開き、テストページに移動します。 デフォルト値：false。
   port	開発サーバーが実行されているポート。 デフォルト：8081。
   host	ローカル開発サーバーを他のユーザーが外部からアクセスできるようにする場合に使用するホストアドレス。通常は 0.0.0.0 に設定します

   $ snc ui-component develop --entry example/hello.js --open --port 3000

次のタスク

インスタンスへのコンポーネントの展開。

関連概念

• カスタムコンポーネントビルダー