カスタムフックの戻り値は配列かオブジェクトか

React JavaScript

結論

どっちでもいい。 が、以下の方針に従うのがいいような気がします。

  • 返却される値を全て利用する場合が多い→配列
  • 返却される値の一部を利用する場合が多い→オブジェクト

例えばReact標準フックのuseStateを考えてみます。
useStateは値とその更新関数をセットで利用するケースが多い・かつ複数利用するシーンに備えてそれぞれ別の変数名にすることを想定していると考えると、配列で返却することで利用側が柔軟に使用できるようにしているように思います。 以下のような感じですね。

const [count, setCount] = useState(0);
const [input, setInput] = useState("");

とまぁこれだけでは寂しい気もするので、それぞれのメリットデメリットについてもう少し見ていきたいと思います。

呼び出し側から見た場合のメリット・デメリット

タイプ メリット デメリット
配列 任意の名前をつけられる 利用しない変数も宣言する必要がある
オブジェクト 利用する値のみの宣言ができる 名前を変更する場合多少手間

メリットとデメリットを詳しく

上記で表にまとめたメリット・デメリットを実際のコードで確認していきます。 　

// 配列を返すカスタムフック
export function useFunction1() {
    
    return [count, func]
}

// オブジェクトを返すカスタムフック
export function useFunction2() {
    
    return { count, func }
}

変数名の付け方

// 別名をつけられる
const [myCount, myFunc] = useFunction1();
// そのままの名前（キー名）を使用する必要がある
const { count, func } = useFunction2();

ただ、オブジェクトの場合も分割代入を利用すると別名を付けられます。

const { count: myCount, func: myFunc } = useFunction2();
console.log(myCount);

利用したい変数のみの宣言

// 配列の場合は各値をそれぞれ宣言する必要がある。使用しない場合は下記のように`,`や``_`を利用する。
const [ , myFunc] = useFunction1();
// オブジェクトの場合は利用したい値のみを宣言すればよい。
const { func } = useFunction2();

配列の場合はarr[1]のみ利用したい場合にarr[0]を宣言する必要があるので_や上記のような空白カンマで利用しないことを明示する必要があります。 　

まとめ

現時点での私の考えははじめにで述べた通りです。が、そこまで厳格なルールがあるわけでもないので適宜決めていけばいいのかなと思います。

シェル芸人への第一歩

シェル・ワンライナー160本ノックを買いました。
シェルは全く知識がないわけではないですが、ひとつひとつ知識を増やしていけるよう頑張ります。

1日1問、半年以内に習得　シェル・ワンライナー160本ノック Software Design plus

1日1問、半年以内に習得　シェル・ワンライナー160本ノック Software Design plus

Amazon

Spring Security について学ぶ

Java Spring Spring Security

とりあえず、Getting Startedをやるべき。
実際にやってみたのでメモを残す。

build gradle

以下の2行を追加する。

implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.security:spring-security-test'

WebSecurityConfig

WebSecurityConfigクラスを作成し、各メソッドをoverrideすることで、実際の設定を記述できる。

configureメソッド

configureメソッドはリクエストURLに対して、認証の要否を記述する。具体的なコードは以下。

        http
            .authorizeRequests().antMatchers("/", "/home").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin()
            .loginPage("/login")
            .permitAll()
            .and()
            .logout()
            .permitAll();

上記のように書くことで、 * / および /homeは認証が不要。 * 上記以外のリクエストは認証を必要とする。 * ただし、loginリクエストは認証不要 といった具合に動く。

userDetailsServiceメソッド

        UserDetails user = User.withDefaultPasswordEncoder()
            .username("user")
            .password("password")
            .roles("USER")
            .build();
        return new InMemoryUserDetailsManager(user);
  • ユーザーネームにuser、パスワードにpasswordが来た場合に許可する。
  • ロールをUSERとする

以上。

fish shellのプロンプトを変更する

fish shell

やること

タイトル通りです。fish shellを最近使い始めたが、プロンプトに出ているユーザー名とホスト名がいらないと感じているので、消すことにしました。

方法

$HOME/.config/fish/functionsにあるfish_prompt.fishを修正します。デフォルトでは以下のようになっています。

function fish_prompt --description 'Write out the prompt'
    set -l last_status $status

    # User
    set_color $fish_color_user
    echo -n $USER
    set_color normal

    echo -n '@'

    # Host
    set_color $fish_color_host
    echo -n (prompt_hostname)
    set_color normal

    echo -n ':'

    # PWD
    set_color $fish_color_cwd
    echo -n (prompt_pwd)
    set_color normal

    __terlar_git_prompt
    fish_hg_prompt
    echo

    if not test $last_status -eq 0
        set_color $fish_color_error
    end

    echo -n '➤ '
    set_color normal
end

ご丁寧に# Userなど、適宜コメントが残っているので、UserとHostを丸ごと消してしまいましょう。

function fish_prompt --description 'Write out the prompt'
    set -l last_status $status

    # PWD
    set_color $fish_color_cwd
    echo -n (prompt_pwd)
    set_color normal

    __terlar_git_prompt
    fish_hg_prompt
    echo

    if not test $last_status -eq 0
        set_color $fish_color_error
    end

    echo -n '➤ '
    set_color normal
end

以上です。