お知らせ

現在サイトのリニューアル作業中のため、表示が崩れているページが存在することがあります。

React + TypeScriptでformのonSubmitで値を取得

2024/01/22 15:29 言語::TypeScriptライブラリ::React

サンプルコード

const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  ev.preventDefault();
  const target = ev.target as typeof ev.target & {
    t1: { value: string };
    t2: { value: string };
  };
  console.log(target.t1.value);
  console.log(target.t2.value);
};
return (
  <div className="App">
    <form onSubmit={(ev) => onSubmit(ev)}>
      <input type="text" id="t1" />
      <input type="text" id="t2" />
      <input type="submit" />
    </form>
  </div>
);

参考

コメント（0件）

JestでNodeのコアモジュールをモックする

2024/01/22 15:27 開発::テスト言語::TypeScriptNode.js::Jest
  • fsとかchild_processとかそういうやつをモックする方法
    • jest単体の機能では実現できないのでハマるポイント
  • たぶん jest.MockedFunction でも同じことができる

サンプルコード

import { execSync } from 'child_process';

// まず全体をモックする
jest.mock('child_process');

// モックにする
const mockExecSync = execSync as jest.MockedFunction<typeof execSync>;

describe('execSync', () => {
  it('spyOn execSync', () => {
    // 対象をコール
    execSync('echo 1');
    // 通る
    expect(mockExecSync).toHaveBeenCalled();
    // 通る, echo 2とかにするとちゃんとコケてくれる
    expect(mockExecSync).toHaveBeenCalledWith('echo 1');
  });
});
コメント（0件）

素のHTMLでイベントコールバックの引数を取得する

2024/01/22 15:26 言語::HTML言語::JavaScript
  • 素のHTMLにJSを埋め込んでイベントコールバックの引数を取る方法
    • イベントコールバックの引数にeventを指定する
      • 例：onclick="test(event)"

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Example of DOM Event callback arguments</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
      const test = (ev) => {
        console.log(ev);
      };
    </script>
  </head>
  <body>
    <p onclick="test(event)">aaa</p>
  </body>
</html>
コメント（0件）

Perlでメールを投げる

2024/01/22 15:25 言語::Perl技術::sendmail

文字コードはiso-2022-jp

SMTPの設定例

export EMAIL_SENDER_TRANSPORT=SMTP
export EMAIL_SENDER_TRANSPORT_host=smtp.example.com
export EMAIL_SENDER_TRANSPORT_port=1025

サンプルコード

use strict;
use Email::MIME;
use Email::MIME::Creator;
use Email::Sender::Simple qw(sendmail);

my $subject = Encode::encode('MIME-Header-ISO_2022_JP', 'さぶじぇくと');
my $mail    = Email::MIME->create(
    'header' => [
        'From'    => Encode::encode('MIME-Header-ISO_2022_JP', 'foo@example.com'),
        'To'      => Encode::encode('MIME-Header-ISO_2022_JP', 'to@example.com'),
        'Subject' => $subject,
    ],
    'attributes' => {
        'content_type' => 'text/plain',
        'charset'      => 'ISO-2022-JP',
        'encoding'     => '7bit',
    },
    'body' => Encode::encode('iso-2022-jp', 'ほんぶん！'),
);
コメント（0件）

iOS Safariでのinputやtextareaの実装注意点

2024/01/22 15:24 言語::JavaScript言語::HTMLOS::iOSソフトウェア::ブラウザ

iOS Safari向けのinputやtextareaを実装するときにmaxlengthが効かない問題のメモ

maxlength

  • 古いiOS Safariでは効かない模様
  • iOS 18.6.2のSafari 18.6では効いていることを確認
  • onInput()でstring.slice(0, maxlength)するとIMEの挙動が可笑しくなる
    • type="tel"など日本語が入力できない場合であれば有効
  • オートコンプリートやコピペ入力での字切れなどもあるため、根本的に使わないことが望ましい

type="number"

  • iOS Safariでは期待した動作にはならない
    • IMEが有効になり、全角入力が発生する
  • iOS 18.6.2, Safari 18.6でも挙動は変わらず
  • 使うならtype="tel"を使い、JSで数字以外の入力を弾くのが無難
  • 恐らく普及ブラウザの全てで半角入力を強制出来、スマホなどではNumPadが出てくる
    • アルファベットやハイフンなどの記号も打てるので必要に応じた入力制御が必要

あとがき

iOS SafariのバージョンはiOS側に一定の依存があるらしく調べるのが手間だった。とりあえずUserAgentから抜いた値で確認している。

参考

"maxlength" | Can I use... Support tables for HTML5, CSS3, etc

コメント（0件）