風待ち

プログラミングの勉強や日々の出来事のログなど

Reactでテーブルにテキストボックスを表示した時に一番最初の行のテキストボックスにフォーカスするには

業務用のシステムを開発していると、できるだけマウスやキーボードを使わずに使いたいという要望が多い。

ほとんどの場合はInputタグにautoFocus={true}を追加すればいいんだけど、ボタンを押すとテーブルが展開して詳細を入力していくような動きのある画面の時に、autoFocusが動作してくれなかった。

そこで、どうやったら表示された時にフォーカスがいくのかを調べた。

useRefを使うやり方でフォーカスさせる方法もあるけれど、配列からMAPでテーブルを作っていく時にはうまく動作させられなかったので、今回のようなやり方になった。

業務システムを実際に利用する人はパソコンやなんかになれている人は少ないので、こうしたちょっと操作を便利にするようなものは思ったよりも喜ばれる。

たいていこういう機能は開発の最後の方に作るので面倒に感じるけれどやっておいて損はないだろう。

import { useState } from "react";

type Item = {
  id: number;
  name: string;
};

function App() {
  const [list, setList] = useState<Item[]>([
    { id: 1, name: "foo" },
    { id: 2, name: "bar" },
    { id: 3, name: "baz" },
  ]);

  return (
    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>name</th>
        </tr>
      </thead>
      <tbody>
        {list.map((v, i) => (
          <tr key={`list-${v.id}`}>
            <td>{v.id}</td>
            <td>
              <input
                type="text"
                value={v.name}
                // 一番最初の行のテキストボックスをフォーカスする
                ref={(e) => i === 0 && e?.focus()}
                onChange={(e) =>
                  setList(
                    list.map((value, index) =>
                      index === i
                        ? { ...value, name: e.target.value }
                        : value
                    )
                  )
                }
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default App;

PythonistaでGitHubに公開されているライブラリの最新のリリースバージョンを取得する。

import requests


def get_latest_release(repo_owner, repo_name):
    url = f"https://api.github.com/repos/{repo_owner}/{repo_name}/releases/latest"
    response = requests.get(url)
    if response.status_code == 200:
        release_data = response.json()
        return release_data['tag_name']
    else:
        return None


# リポジトリのオーナー名とリポジトリ名を指定して最新のリリースバージョンを取得
owner = "owner-name"
repo = "repo-name"

latest_version = get_latest_release(owner, repo)
if latest_version:
    print("Latest release version:", latest_version)
else:
    print("Failed to fetch the latest release version.")

PostgreSQLで文字型のカラム達を連結する時にNULLがあり得る場合はCONCATを使う。

SQLで文字を連結する時は||演算子を使います。

しかし、PostgreSQLで文字列を連結する時、その文字型のカラムにNULLが入っている場合、全体がNULLとして返ってきてしまいます。

例えば下記のSQLはNULLが返ってくる。

SELECT 'Hello' || NULL || 'World';

そのため、この問題を回避するにはconcat関数を使います。

concat関数は、文字列を順番に連結しNULLの値を無視します。

SELECT CONCAT('Hello', NULL, 'World');

これならNULLが含まれていてもNULLを無視して文字列を連結し、結果は'HelloWorld'となります。

この問題で困ってconcat関数にたどり着くまで時間がかかったのを2回繰り返したのでメモ。

Pythonista3.4にバージョンアップしたらwkwebviewを使っていると落ちる問題を回避する方法

  1. 対象のソースを開いた状態で右上のプラスを押し、PythonistaのDocumentationを開く。
  2. その後、ソースに戻り実行するとこれまで通り動作する。

たまに勝手にDocumentationが閉じている場合があるので実行する時には、開いたソースだけでなく、Documentationのタブも開いていることを確認する必要がある。

開いていないと何も表示されずにPythonistaが落ちるのですぐにわかる。

これで回避できるけど、面倒なのでできたら解決したい。が、どうしたらいいのかわからない。

Raspberry Pi 4にUbuntu 20.04 LTSの64bitをいれて、xubuntu-desktopもいれたけど、マルチディスプレイになってくれなかったのでいろいろ調べて、表示されるようになった。

xubuntu-desktopをいれただけではマルチディスプレイになってくれなかった。

下記のファイルに追記して、再起動したら2個目のモニターにも表示されるようになった。

/boot/firmware/usercfg.txt

dtoverlay=vc4-fkms-v3d
disable_overscan=1

Raspberry Pi 4にUbuntu 20.04 LTSの64bitをいれたので、Go言語の開発環境をインストールする。

今の環境を確認する。

ubuntu@ubuntu:~$ uname -a
Linux ubuntu 5.4.0-1008-raspi #8-Ubuntu SMP Wed Apr 8 11:13:06 UTC 2020 aarch64 aarch64 aarch64 GNU/Linux

Goのパッケージをダウンロードして、展開する。

wget https://dl.google.com/go/go1.14.2.linux-arm64.tar.gz
sudo tar -C /usr/local -xzf go1.14.2.linux-arm64.tar.gz

~/.bashrcにパスを追記する。

export PATH=$PATH:/usr/local/go/bin

追記したパスの設定を反映する。

source .bashrc

確認。

ubuntu@ubuntu:~$ go version
go version go1.14.2 linux/arm64

Reactで配列をmap関数でグルグルしてJSX.Elementを返す時、一つで複数のエレメントや他とは別のエレメントを返すには

 配列の中身をJSXエレメントにする時にmap関数でグルグルするけど、その時、途中で区切り線を入れるなど別のエレメントを差し込みたい時にどう書くのか調べた。

  render() {
    const items = ["item1", "item2", "item3", "item4", "item5"];
    const list = items.map((v, i) => {
      if (i % 2 === 0) {
        return [
          <hr />,
          <h1>{v}</h1>
        ];
      } else {
        return <p>{v}</p>;
      }
    });
    return <div>{list}</div>;
  }

 ifで分岐すれば別のエレメンを返せるし、returnする時に配列を返せばいいだけみたい。全く別のエレメントを返すならdivでくくればいいだけだけど、普通のリストを表示する時に、何個かに一回改行を入れたい時なんかにも同じやり方でいけそうだ。