# switch文の中に、if文を入れてフィールドの表示・非表示を変えたい

**URL:** <https://community.cybozu.dev/t/topic/1523>\
**Category:** kintone 開発相談\
**Created:** [2023 年 4 月 13 日午前 9:46 UTC](https://community.cybozu.dev/t/topic/1523 "2023-04-13T09:46:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1856](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1856](https://community.cybozu.dev/u/Legacy_Account1856)\
**Post date:** [2023 年 4 月 13 日午前 9:46 UTC](https://community.cybozu.dev/t/topic/1523/1 "2023-04-13T09:46:17Z")

</div>

いつもお世話になっております。  
switch文の中で、if文を入れて表示・非表示を制御したいのですが、うまくできません…

下記URLを参考にタブを設定して表示変更まではできたのですが、特定のフィールドの文字列のありなしで判定をかけて、タブ内の表示項目を絞り込みたいです。  
kintoneのレコード画面をタブ化する（縦長画面防止）  
[https://aakel-digital.com/LGbkSfGN/BLOG34](https://aakel-digital.com/LGbkSfGN/BLOG34)

■タブ[基本情報] タブ[Ａ単位] タブ[Ｂ単位]  
↑タブ[Ａ単位]をクリックして、フィールドAに何かの文字列が入っていたら、フィールド[Ａ単位の１]を表示、フィールド[Ａ単位の２]を非表示、フィールド[Ａ単位の３]を非表示  
↑タブ[Ａ単位]をクリックして、フィールドBに何かの文字列が入っていたら、フィールド[Ａ単位の２]を非表示、フィールド[Ａ単位の２]を表示、フィールド[Ａ単位の３]を非表示  
↑その他の場合はフィールド[Ａ単位の３]のみ表示

というようなことがやりたいです。chatGPTにも聞いてみましたが、うまく行きませんでした。

&nbsp;

&nbsp;

```
(function() {
    'use strict';

  var ButtonAll = document.createElement('button');
  ButtonAll.id = 'eeButton';
  ButtonAll.style.height = '30px';
  ButtonAll.style.width = '120px';
  ButtonAll.innerHTML = ' 全表示 ';
  ButtonAll.style.borderRadius = '10px 10px 0px 0px';
  
  var ButtonA = document.createElement('button');
  ButtonA.id = 'ButtonA';
  ButtonA.style.height = '30px';
  ButtonA.style.width = '150px';
  ButtonA.innerHTML = ' 基本情報 ';
  ButtonA.style.borderRadius = '10px 10px 0px 0px';
  
  var ButtonB = document.createElement('button');
  ButtonB.id = 'ButtonB';
  ButtonB.style.height = '30px';
  ButtonB.style.width = '150px';
  ButtonB.innerHTML = ' Ａ単位 ';
  ButtonB.style.borderRadius = '10px 10px 0px 0px';
  
  var ButtonC = document.createElement('button');
  ButtonC.id = 'ButtonC';
  ButtonC.style.height = '30px';
  ButtonC.style.width = '150px';
  ButtonC.innerHTML = ' Ｂ単位 ';
  ButtonC.style.borderRadius = '10px 10px 0px 0px';
  

  var devSpace = document.createElement('dev');
  devSpace.innerHTML = ' ';//タブ開始位置の調整
  
  
  kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (e) {
    if (document.getElementById ('button') != null) {
      return;
    }
    kintone.app.record.getSpaceElement('TAB_ID').appendChild(devSpace);
    kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonAll);
    kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonA);
    kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonB);
    kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonC);

     tagView("All");//追加
  });

  ButtonAll.onclick = function() {
      tagView("All");
      // グループフィールドの表示・非表示
      kintone.app.record.setGroupFieldOpen("基本情報", true);
      kintone.app.record.setGroupFieldOpen("Ａ単位", true);
      kintone.app.record.setGroupFieldOpen("Ｂ単位", true);
      return false;
    }

    ButtonA.onclick = function() {
      tagView("a");
      return false;
    }
    ButtonB.onclick = function() {
      tagView("b");
      return false;
    }
    ButtonC.onclick = function() {
      tagView("c");
      return false;
    }

    function tagView(setInfo){
      ButtonA.style.background = '#c0c0c0';
      ButtonB.style.background = '#c0c0c0';
      ButtonC.style.background = '#c0c0c0';
  
      switch (setInfo) {

          case "a": ButtonA.style.background = '#ff9e3d';
            // グループフィールドの表示・非表示
            kintone.app.record.setFieldShown("基本情報の１", true);
            kintone.app.record.setFieldShown("基本情報の２", false);
            kintone.app.record.setFieldShown("基本情報の３", false);
            break;

          case "b": ButtonB.style.background = '#ff9e3d';

// 【エラー箇所】[フィールドA]に文字列があった時の処理【エラー箇所】
if (event.record.フィールドA.value) {
  kintone.app.record.setFieldShown("Ａ単位の１", true);
  kintone.app.record.setFieldShown("Ａ単位の２", false);
  kintone.app.record.setFieldShown("Ａ単位の３", false);
} else if(event.record.フィールドB.value) {
  kintone.app.record.setFieldShown("Ａ単位の１", false);
  kintone.app.record.setFieldShown("Ａ単位の２", true);
  kintone.app.record.setFieldShown("Ａ単位の３", false);
}
else {
  kintone.app.record.setFieldShown("Ａ単位の１", false);
  kintone.app.record.setFieldShown("Ａ単位の２", false);
  kintone.app.record.setFieldShown("Ａ単位の３", true);
}

// 【エラー箇所】[フィールドA]に文字列があった時の処理(chatGPT回答)【エラー箇所】
var fieldValue = kintone.app.record.getFieldValue('corpNumber');
if (fieldValue !== '') {
    // グループフィールドAを表示する
    kintone.app.record.setFieldShown('Ａ単位の１', true);
    // グループフィールドBを非表示にする
    kintone.app.record.setFieldShown('Ａ単位の２', true);
    // グループフィールドCを非表示にする
    kintone.app.record.setFieldShown('Ａ単位の３', true);
  }

            break;

          case "c": ButtonC.style.background = '#ff9e3d';
            // グループフィールドの表示・非表示
            kintone.app.record.setFieldShown("Ｂ単位の１", true);
            kintone.app.record.setFieldShown("Ｂ単位の２", false);
            kintone.app.record.setFieldShown("Ｂ単位の３", false);
          break;

          default :
            ButtonAll.style.background = '#ff9e3d';
            kintone.app.record.setFieldShown('基本情報',true);
          break;
      }
      return;
  
    };
  })();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1856](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1856](https://community.cybozu.dev/u/Legacy_Account1856)\
**Post date:** [2023 年 4 月 13 日午前 9:47 UTC](https://community.cybozu.dev/t/topic/1523/2 "2023-04-13T09:47:59Z")

</div>

ここを直せばいけそうな気がしているのですが、いかがでしょうか…

宜しくお願いします。

```
// 【エラー箇所】[フィールドA]に文字列があった時の処理【エラー箇所】
if (event.record.フィールドA.value) {
  kintone.app.record.setFieldShown("Ａ単位の１",true);
  kintone.app.record.setFieldShown("Ａ単位の２",false);
  kintone.app.record.setFieldShown("Ａ単位の３",false);
}elseif(event.record.フィールドB.value) {
  kintone.app.record.setFieldShown("Ａ単位の１",false);
  kintone.app.record.setFieldShown("Ａ単位の２",true);
  kintone.app.record.setFieldShown("Ａ単位の３",false);
}
else {
  kintone.app.record.setFieldShown("Ａ単位の１",false);
  kintone.app.record.setFieldShown("Ａ単位の２",false);
  kintone.app.record.setFieldShown("Ａ単位の３",true);
}
// 【エラー箇所】[フィールドA]に文字列があった時の処理(chatGPT回答)【エラー箇所】
var fieldValue = kintone.app.record.getFieldValue('corpNumber');
if (fieldValue !=='') {
   // グループフィールドAを表示する
    kintone.app.record.setFieldShown('Ａ単位の１',true);
   // グループフィールドBを非表示にする
    kintone.app.record.setFieldShown('Ａ単位の２',true);
   // グループフィールドCを非表示にする
    kintone.app.record.setFieldShown('Ａ単位の３',true);
  }

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1177](https://avatars.discourse-cdn.com/v4/letter/l/77aa72/32.png) [@Legacy\_Account1177](https://community.cybozu.dev/u/Legacy_Account1177)\
**Post date:** [2023 年 4 月 13 日午後 11:49 UTC](https://community.cybozu.dev/t/topic/1523/3 "2023-04-13T23:49:05Z")

</div>

まず

```
var fieldValue = kintone.app.record.getFieldValue('corpNumber');

```

getFieldValue()という関数はありません。

次に

```
// 【エラー箇所】[フィールドA]に文字列があった時の処理【エラー箇所】
if (event.record.フィールドA.value) {

```

エラーが発生しているのはこの部分ですが、解説含めて[以前に私が回答したもの](https://community.cybozu.dev/hc/ja/community/posts/16621564723097-%E3%83%9C%E3%82%BF%E3%83%B3%E6%8A%BC%E4%B8%8B%E3%81%A7-%E3%83%AB%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%AF%E3%83%AA%E3%82%A2%E3%81%A8%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E8%A1%A8%E7%A4%BA%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%97%E3%81%9F%E3%81%84?page=1#community_comment_16664188700313)と同じです。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1856](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1856](https://community.cybozu.dev/u/Legacy_Account1856)\
**Post date:** [2023 年 4 月 14 日午前 12:49 UTC](https://community.cybozu.dev/t/topic/1523/4 "2023-04-14T00:49:58Z")

</div>

早速のご回答ありがとうございます！

教えて頂いた箇所でしたね…すみませんm(\_ \_)m

if(event.record[‘フィールドA’].value)&nbsp;  
を下記に変更したところ修正できました！！！  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
let recordData = kintone.app.record.get(),  
rec = recordData.record;  
if(rec[‘フィールドA’].value)&nbsp;  
\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

if文は「if(event.record」は固定だと思い込んでおりました  
精進します！！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1856](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account1856](https://community.cybozu.dev/u/Legacy_Account1856)\
**Post date:** [2023 年 4 月 14 日午前 12:51 UTC](https://community.cybozu.dev/t/topic/1523/5 "2023-04-14T00:51:28Z")

</div>

修正後のコードです。

```
(function() {
  'use strict';

var ButtonAll = document.createElement('button');
ButtonAll.id = 'eeButton';
ButtonAll.style.height = '30px';
ButtonAll.style.width = '120px';
ButtonAll.innerHTML = ' 全表示 ';
ButtonAll.style.borderRadius = '10px 10px 0px 0px';

var ButtonA = document.createElement('button');
ButtonA.id = 'ButtonA';
ButtonA.style.height = '30px';
ButtonA.style.width = '150px';
ButtonA.innerHTML = ' 基本情報 ';
ButtonA.style.borderRadius = '10px 10px 0px 0px';

var ButtonB = document.createElement('button');
ButtonB.id = 'ButtonB';
ButtonB.style.height = '30px';
ButtonB.style.width = '150px';
ButtonB.innerHTML = ' Ａ単位 ';
ButtonB.style.borderRadius = '10px 10px 0px 0px';

var ButtonC = document.createElement('button');
ButtonC.id = 'ButtonC';
ButtonC.style.height = '30px';
ButtonC.style.width = '150px';
ButtonC.innerHTML = ' Ｂ単位 ';
ButtonC.style.borderRadius = '10px 10px 0px 0px';

var devSpace = document.createElement('dev');
devSpace.innerHTML = ' ';//タブ開始位置の調整

kintone.events.on(['app.record.create.show','app.record.edit.show','app.record.detail.show'], function (e) {
  if (document.getElementById ('button') != null) {
    return;
  }
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(devSpace);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonAll);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonA);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonB);
  kintone.app.record.getSpaceElement('TAB_ID').appendChild(ButtonC);

   tagView("All");//追加
});

ButtonAll.onclick = function() {
    tagView("All");
    // グループフィールドの表示・非表示
    kintone.app.record.setGroupFieldOpen("基本情報", true);
    kintone.app.record.setGroupFieldOpen("Ａ単位", true);
    kintone.app.record.setGroupFieldOpen("Ｂ単位", true);
    return false;
  }

  ButtonA.onclick = function() {
    tagView("a");
    return false;
  }
  ButtonB.onclick = function() {
    tagView("b");
    return false;
  }
  ButtonC.onclick = function() {
    tagView("c");
    return false;
  }

  function tagView(setInfo){
    ButtonA.style.background = '#c0c0c0';
    ButtonB.style.background = '#c0c0c0';
    ButtonC.style.background = '#c0c0c0';

    switch (setInfo) {

        case "a": ButtonA.style.background = '#ff9e3d';
          // グループフィールドの表示・非表示
          kintone.app.record.setFieldShown("基本情報の１", true);
          kintone.app.record.setFieldShown("基本情報の２", false);
          kintone.app.record.setFieldShown("基本情報の３", false);
          break;

case "b": ButtonB.style.background = '#ff9e3d';

// 【修正箇所】[フィールドA]に文字列があった時の処理【修正箇所】
let recordData = kintone.app.record.get(),
rec = recordData.record;
if(rec['フィールドA'].value) {

kintone.app.record.setFieldShown("Ａ単位の１", true);
kintone.app.record.setFieldShown("Ａ単位の２", false);
kintone.app.record.setFieldShown("Ａ単位の３", false);
}
// フィールドAに文字列がない時
 else if(!rec['フィールドA'].value) {
kintone.app.record.setFieldShown("Ａ単位の１", false);
kintone.app.record.setFieldShown("Ａ単位の２", true);
kintone.app.record.setFieldShown("Ａ単位の３", false);
}
break;

        case "c": ButtonC.style.background = '#ff9e3d';
          // グループフィールドの表示・非表示
          kintone.app.record.setFieldShown("Ｂ単位の１", true);
          kintone.app.record.setFieldShown("Ｂ単位の２", false);
          kintone.app.record.setFieldShown("Ｂ単位の３", false);
        break;

        default :
          ButtonAll.style.background = '#ff9e3d';
          kintone.app.record.setFieldShown('基本情報',true);
        break;
    }
    return;

  };
})();

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 10 月 5 日午前 4:24 UTC](https://community.cybozu.dev/t/topic/1523/6 "2023-10-05T04:24:19Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。