かとの投稿 - Crieit

Semantic UI ReactのForm.Inputとはなんなのか

2020-07-05T23:38:19+09:00

Semantic UI React を使っていて Input と Form.Input の違いがよくわかっていなかったので、ちゃんと調べてみました。

バージョンは次のとおりです。

React: 16.13.1
Semantic UI React: 0.88.2

はじめに

リファレンスで Form.Input を選択すると書かれている通り、 Form.Input はのシンタックスシュガーです。

Sugar for .

さらに From.Field の項目を読むと、次のように書かれています。

A field is a form element containing a label and an input.

しかし、バリデーションエラー用のLabelも重要な役割を担っているので、 From.Field は次の3つを含む複合コンポーネントだと捉えた方が良いでしょう ¹ 。

項目名を表すlabel
メインの入力欄であるInput
バリデーションエラー用のLabel

さて、 Form.Field の中身を記述する方法は、大きく分けて次の2つがあります。

control を指定する方法（ Form.Input を使ったときに発生）
children （子要素）を指定する方法

個人的には後者の方が暗黙的な挙動が少なくて好きですが、前者の方が記述は楽です。
この記事では、同じDOM構造を実現するための2種類の書き方を比較することで、 Form.Input を使った場合に行われることを理解します。

2種類の記述方法を比較する

ここでは次の2つの記述方法でほぼ同じDOM構造を実現します。

Form.Input のみを使う
Form.Field の子要素に Input を含める

ソースコードは次の通りです。

import React, { useState } from "react";
import { Form, Input, Label } from "semantic-ui-react";

const FormExampleFieldError = () => {
  const [firstName, setFirstName] = useState("");
  const handleChange = e => {
    setFirstName(e.target.value);
  };
  const error = firstName === "" ? "First name is required" : undefined;

  return (
    
      {/* 1. Form.Inputのみを使う */}
      

      {/* 2. Form.Fieldの子要素にInputを含める */}
      
        First name
        
        {error && (
          
            {error}
          
        )}
      
    
  );
};

export default FormExampleFieldError;

レンダリング結果: エラー無しの場合

エラーが無い場合、レンダリング結果は次のようになりました。同等のDOM構造になっていることがわかります。なお aria-invalid="false" はデフォルト値なので、属性が無いのと同じ意味です。


    
    First name
        
    

    
    First name

レンダリング結果: エラー有りの場合

エラーが有る場合、レンダリング結果は次のようになりました。こちらも同等のDOM構造になっています。 Form.Input を使うと、 aria-invalid や aria-describedby などのアクセシビリティ関連の属性が自動で追加されていることがわかります。


    
    First name
        
        
            First name is required
    

    
    First name
        
        
            First name is required

まとめ

Semantic UI Reactでは、 Form.Input を使うことで、少ない記述で次の3要素を持つ入力欄を作成できます。

項目名を表すlabel
メインの入力欄であるInput
バリデーションエラー用のLabel

特にバリデーションエラーの表示は自前で記述するとそれなりに大変なので、積極的に使っていきたいです。

おまけ: 子要素にinputを含めた場合

リファレンスに書かれているように、 Form.Field には Input の代わりに、HTMLの input 要素を含めることもできます。この場合、若干異なるDOM構造が生成されるものの、見た目は同じになりました。DOM構造の差異は、inputが

によって囲まれない点だけです。

ソース

      {/* 3. Form.Fieldの子要素にhtmlのinputを含める */}
      
        First name
        
        {error && (
          
            {error}
          
        )}

レンダリング結果: エラー無しの場合

    
    First name

レンダリング結果: エラー有りの場合

    
    First name
        
            First name is required

エラーの有無にかかわらず、見た目では区別がつきません。

Material UIの TextField と同じようなイメージです。 ↩︎

単一プロパティを持つdata classをJSONのプリミティブ型として表現する

2020-04-12T16:25:35+09:00

Value Objectとして使っている、単一プロパティを持つdata classを、シンプルなJSONとして表現するのにちょっと手こずったのでまとめておきます。

問題設定

例として、次のようなクラス定義を考えます。

data class User(val userId: UserId, val userName: UserName)
data class UserId(val value: Int)
data class UserName(val value: String)

UserオブジェクトをJacksonでシリアライズした場合、普通だと次のようになります。

{"userId": {"value": 1}, "userName": {"value": "sato"}}

これを次のようにシリアライズした上で、元の形にデシリアライズしたいというのが、この記事の主題です。

{"userId": 1, "userName": "sato"}

なお、 UserId や UserName は User 以外のクラスからも使われる可能性があります。これらを使うクラス間で挙動を統一できるよう、クラス定義に手を加えるなら User よりも UserId や UserName に加えたいです。

結論

次のように、 UserId や UserName にアノテーション @JsonCreator と @JsonValue をつけると実現できます。

data class User(val userId: UserId, val userName: UserName)
data class UserId @JsonCreator(mode = JsonCreator.Mode.DELEGATING) constructor(@JsonValue val value: Int)
data class UserName @JsonCreator(mode = JsonCreator.Mode.DELEGATING) constructor(@JsonValue val value: String)

解説

まず、 @JsonValue はシリアライズに影響を与えるアノテーションで、シリアライズ結果を取得するメソッドに付けます。

次に、 @JsonCreator はデシリアライズに影響を与えるアノテーションで、JSONの値からオブジェクトを作るためのコンストラクターやファクトリーメソッドに付けます。Javaの場合はコンストラクターに @JsonCreator をつけるだけでいいのですが、Kotlin Moduleを使っている場合はうまく行かないので、 mode = JsonCreator.Mode.DELEGATING が必要です [1]。

なお、Kotlinでプライマリコンストラクターにアノテーションをつけるには、 constructor キーワードが必要です [2]。

コード

実際のコードは次のようになります。

build.gradleの一部

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8"
    implementation "com.fasterxml.jackson.core:jackson-databind:2.9.10.4"
    implementation "com.fasterxml.jackson.module:jackson-module-kotlin:2.9.10"
}

Main.kt

import com.fasterxml.jackson.annotation.JsonCreator
import com.fasterxml.jackson.annotation.JsonValue
import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
import com.fasterxml.jackson.module.kotlin.readValue

fun main() {
    val u = User(UserId(1), UserName("sato"))
    println(u)

    val mapper = jacksonObjectMapper()
    val json = mapper.writeValueAsString(u)
    println(json)

    val parsed: User = mapper.readValue(json)
    println(parsed)
}

data class User(val userId: UserId, val userName: UserName)
data class UserId @JsonCreator(mode = JsonCreator.Mode.DELEGATING) constructor(@JsonValue val value: Int)
data class UserName @JsonCreator(mode = JsonCreator.Mode.DELEGATING) constructor(@JsonValue val value: String)

実行結果

User(userId=UserId(value=1), userName=UserName(value=sato))
{"userId":1,"userName":"sato"}
User(userId=UserId(value=1), userName=UserName(value=sato))

参考

java - How to instruct Jackson to serialize a field inside an Object instead of the Object it self? - Stack Overflow
https://stackoverflow.com/questions/11031110/how-to-instruct-jackson-to-serialize-a-field-inside-an-object-instead-of-the-object-it-self
java - Is there a generic way to deserialize single-valued value objects (without custom Deserializer) in Jackson - Stack Overflow
https://stackoverflow.com/questions/55492657/is-there-a-generic-way-to-deserialize-single-valued-value-objects-without-custo

注釈

[1] @jsonCreator on primary constructor is not working · Issue #305 · FasterXML/jackson-module-kotlin
https://github.com/FasterXML/jackson-module-kotlin/issues/305
[2] https://kotlinlang.org/docs/reference/annotations.html#usage