CookBook

変数のkey, valueを取り出して配列にするアクション、式表現の利用方法

投稿日:2022-06-13 更新日:

このCookBookでは、2022 Spring で新しく追加された以下のアクションと式表現について紹介します。

  • アクション
    • 変数○に○の各キー名を配列にして代入する
    • 変数○に○の各要素の値を配列にして代入する
  • 式表現
    • keys()
    • values()

はじめに

2022 Spring 以前のBloomMakerでは、以下のようなmap型の変数の key または value を配列に修正するとき、カスタムスクリプトを利用していました。

{0 : '', 1:"Hokkaido", 2 : "Aomori"....}

2022 Spring 以降では式表現 keys(), values() またはアクションを利用することで、簡単にマップ型変数のkey, valueを配列に変換することができるようになりました。

「ドロップダウン」エレメントのプロパティ「labels」, 「values」を指定する際に、式表現keys(), values()を利用できます。

このCookBookでは、keys(), values()を利用して「ドロップダウン」エレメントを表示するサンプルを作成しています。

JavaScript の Object.keys() , Object.values()について

JavaScriptには Object.keys() 、 Object.values() というメソッドが用意されています。
2つのメソッドはそれぞれ以下のような処理をすることができます。

Object.keys()

指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。

Object.keys() - JavaScript | MDN (mozilla.org)

Object.values()

指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for...in ループで提供される場合と同じ順序で配列にして返します。

Object.values() - JavaScript | MDN (mozilla.org)

今回追加したアクションと式表現は、Object.keys()、Object.values() と同じような動作をする機能です。

それぞれ以下のように対応しています。

  • Object.keys
    • 変数○に○の各キー名を配列にして代入する
    • keys()
  • Object.values
    • 変数○に○の各要素の値を配列にして代入する
    • values()

完成サンプルイメージ

このCookBookで作成したサンプルです。

完成サンプル

以下のサンプルをダウンロードしてご利用ください。

内容は以下のとおりです。

定義ID名称
コンテンツim_cookbook_209271im_cookbook_209271
ルーティングim_cookbook_209271im_cookbook_209271

インポート後、ルーティング定義の認可を設定してください。
ローカル環境でサンプルを表示させる場合は、intra-martのアカウントにログインし、次のURLにアクセスしてください。

http://localhost:8080/imart/im_cookbook/bloommaker/209271

なお、ベースURLである http://localhost:8080/imart はお使いの環境に合わせて適宜変更してください。

レシピ

サンプルの作成方法を説明します。

事前にコンテンツを作成し、デザイナ画面を表示してください。

エレメントの配置

「レイアウト(Bulma)」-「セクション」を2つ配置します。

次に、「フォーム部品(Bulma)」-「フィールド」を各セクションに配置します。

「フォーム部品(Bulma)」-「プルダウン」を各「フィールド」に1つずつ配置します。

画像のようになっていることを確認してください。

変数

以下の変数を変数タブの「JSON形式で編集」を選択し、入力してください。

各「プルダウン」エレメントの変数を指定します。「プルダウン」エレメントのプロパティを開いて、対応するプロパティに変数を指定してください。

上側(式表現側)のプルダウン

  • labels : = values($variable.prefectures)
  • values : = keys($variable.prefectures)
  • value : $variable.formulaPrefectureIndex

下側(アクション側)のプルダウン

  • labels : $variable.prefecturesValues
  • values : $variable.prefecturesKeys
  • value : $variable.actionItemPrefectureIndex

アクション

アクションを作成します。

アクションタブから新しいアクションを作成してください。

  • 「標準」 - 「変数○に○の各キー名を配列にして代入する」
  • 「標準」 - 「変数○に○の各要素の値を配列にして代入する」

を追加してください。

変数は以下のように指定してください。

  • 変数 $variable.prefecturesKeys に $variable.prefectures の各キー名を配列にして代入する
  • 変数 $variable.prefecturesValues に $variable.prefectures の各要素の値を配列にして代入する

作成したアクションをセットします。

「コンテナ」を選択し、「ページ読み込み時」イベントに作成したアクションを指定してください。

これでレシピは以上になります。サンプルでは、レシピで説明したこと以外に「ラベル」エレメントや「アクション」など追加しています。

動作確認

プレビューで表示し、プルダウンエレメントを選択すると、選択肢として都道府県が表示されることを確認してください。

keys(), values()の動作について

今回追加した機能は、具体的に以下のように動作します。

マップ型変数の場合

配列の場合

文字列の場合

他の型は keys(), values() にかかわらず空配列が返されます。

-CookBook

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

スケジュールにログインしている本人しか表示されない場合の対応方法

このCookBookでは「intra-mart Accel Collaboration」スケジュール機能を利用する前の注意点について紹介しています。 お客様で「intra-mart Accel Col …

no image

IM-BloomMaker レイアウトの作り方(横に並べる編)

この CookBook では横向きのレイアウトの作り方を紹介していきます。また、レイアウトの作り方(縦に並べる編)もありますので、併せてご確認ください。 はじめに 以前使用されていた HTML 上の要 …

no image

ライブラリのバージョン監視に応用可能なロジックフローの作り方

このCookBookでは、IM-LogicDesignerを利用して、指定したURLのHTMLから正規表現を利用して任意の文字列を取得する方法を紹介します。 JavaScript定義とREST定義を作 …

no image

intra-mart WebPlatform をサイレントインストールする方法

この CookBook では、intra-mart WebPlatform をサイレントインストールする方法について紹介しています。 インストーラのサイレント・モードについては以下のセットアップに記載 …

IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

はじめに IM-BloomMaker と IM-LogicDesigner で「リモートワークの報告メールを送信するアプリ」を作成したので、公開します。 新型コロナウィルスによる緊急事態宣言を受けて、 …