はじめに

ゆとり世代の中野です。

今回の内容は【テーブルの中にチェックボックスを置いて失敗した話】です。

さっそく内容について書いていきます。

チャレンジする背景

• 現在WEBとiOSとAndroid向けにExpoを使ってプロダクトを開発しています
• コードレビューの中で複数の環境で動作確認をしています
• githubのPRテンプレートに動作確認の項目を作りチェックボックスを使って運用していました
• チーム内で環境ごとに確認したい派や項目ごとに確認したい派がいたので双方が幸せな着地を目指しました

チャレンジ内容

• テーブルの中にチェックボックスを配置する

結論

• 失敗しました

理由

• テーブルの中にマークダウンをチェックボックスで配置できない
• 直接タグを書くことでチェックボックスを表示させれるがチェック後数秒するとチェックが外れる

具体例

• 実際に試してみたコードは下記のコードです

|確認内容|Android|iOS|WEB|
|:---:|:---:|:---:|:---:|
|確認する内容| <ul><li>[ ] </ul> | <ul><li>[ ] </ul> | <ul><li>[ ] </ul> |

• この状態でCanvasでチェックをすると数秒後にチェックが外れました
• 本来であれば状態を持っていてほしいのですが状態が保持されないため失敗になります

代替案

• テーブルをやめて元のリスト形式に戻しました

- 確認する内容
  - [ ] Android
  - [ ] iOS
  - [ ] WEB

まとめ

• チェックボックスを使う場合は素直にリスト形式で使いましょう

さいごに

力技だと感じながらやっていたのでやっぱりかー！という感じです

今後は迷うことなくなったので良い経験だったと思っています

チーム内では合意をとり元のリスト形式に戻しましたが今後改善できるのであれば引き続き改善していこうと思っています

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています