ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

TypeScriptでReactのフォーム部品のイベントハンドラーを使う

毎日技術日誌

うまいタイトルがつけられなかった。

class TodoForm extends React.Component<PropTypes, StateTypes> {
  constructor(props: PropTypes) {
    super(props);
    ...
  }

  public render() {
    return (
      <label>
        What to do next?
        <input
          type='text'
          value={this.state.input}
          onChange={this.onChangeHandler}
          onKeyDown={this.onKeyDownHandler}
        />
      </label>
    );
  }

  private onChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    ...
  }

  private onKeyDownHandler = (event: React.KeyboardEvent) => {
    const ENTER_KEY_CODE = 13;
    if (event.keyCode === ENTER_KEY_CODE && this.state.input !== '') {
      ...
    }
  };
}

onChangeやonKeyDownのハンドラの第一引数にはイベントが入るが、その型に何を指定すればいいのかがずっとわからなくて、anyを使ったりいろいろしてたが、正解を見つけた。

Reactの中に、React.xxxxEventという名前のinterfaceがあるので、それを指定する。onChangeであれば、↑の例にもあるようにChangeEventを指定し、ジェネリクスで対象のタグを指定する。

これで、無理やりなキャストやanyを使わなくてもちゃんと型情報を保ったまま使える。細かいことだけどスッキリしたので書いた。

雑談

大きな買い物をしました。

SSHFSを使ってみたけどいまいちだった話

SSHFS

SSHFSと言うものの存在を知った。SSH File Systemの略だと思う。多分。

SSH越しのサーバーのディレクトリをマウントできるファイルシステム。これがあれば、手元のMacがスペック低くてビルドもままならない問題が解消するのでは(ファイルだけSSHFS経由でリモートサーバーにあげてビルド自体はサーバー上で走らせる)と思ったので早速使ってみた。

結論から述べると、速度がそれほど速くないため、今回私が想定していたフロントエンド開発で使うという用途には少し厳しいかと思った。

How to use

macOS 10.14(Mojave)上で動かすという前提です。

macOS上で動かすにはFUSE for macOSと言うものが必要になる。説明を軽く読んだ感じ、macのファイルシステムを拡張するためのもののっぽい。

Home - FUSE for macOS

↑のページのダウンロードから最新版を落としてきてインストーラーをクリックしてインストールした。

そうしたら、SSHFS本体を入れる。Homebrewが使えれば

$ brew install sshfs

でインストールできる。

インストールしたら、適当にディレクトリ作ってそこにマウントしてやる。以下のような感じ

$ mkdir hoge
$ sshfs uutarou@192.168.1.2:/home/uutarou/ hoge/

この時注意するのはリモート側のディレクトリは絶対パスで指定すること。相対パスでしているするとNo such file or directoryと怒られる。

ちなみに、~/.ssh/configで多段SSHするように設定してあっても使えた。この辺は素晴らしい。

結論

今回フロントエンドのコードだけ手元のエディタで開いて、ビルドはリモートサーバー上で行って、結果だけSSHでトンネル掘って手元のブラウザで確認しようと思って使ってみたが、速度が遅くお世辞にも使い物になるとは言い難いと思った。

単純なテキストでも保存してから1秒ちょっと待たされてる気がする。測ったわけではないが。

というわけで学校のリソースをつかって快適に趣味開発をしようの試みは砕け散ってしまいました。

雑談

なんだか知らないが今日は一日中眠い。どんなに寝ても眠い。

マジでどうなってんだ

■

明日朝早いので今日は手抜き

母校の文化祭に行ったらコードを書かされた

母校の文化祭に遊びに行きました。

もともと文化祭の実行委員長をやっていたので、毎年時間を作って遊びに行っているのですが、今年はなぜかコードを書かされました。

というのも、文化祭では来場者と生徒全員による、出し物の投票が行われるのが毎年の恒例になっており、今年もそれをやると。

ところが、無効票になる条件が詳しく決まっていて、それを弾いたり集計したりするのに膨大な時間がかかるのでなんとかしてくれという依頼を受けて、遊びに行ったはずがずっとコードを書いていました。(投票データ自体はCSVで渡される)

持っててよかったMacBook。

どうしても泥臭く書くとコードの可読性が落ちまくって大変なのでどうしたものかと悩んでいます。

なめてかかっていたら結構やることあって面倒、だけど勉強にはなりそう。

雑談

自分の実力からどの程度実装に時間がかかるかをなるべく正確に見積もるのもスキルの一つだと思っているので、見誤ったのは完全に悔しい。

■

明日の準備を細々と

明日はとあるイベントなので、それに向けた準備を少しやっていました。

Photoshopとか初めて使いましたが、やはり多くのプロから愛されてるソフトだけに機能も豊富で使いこなすのは大変だろうなと感じました。

そして、そんな中で発見した「被写体を選択」という機能がすごかった。

Photoshopの新機能「被写体を選択」がどれほど凄いのか、ぱくたそのフリー素材で検証してみた | ぱくたそ公式ブログ

機械学習ってすげー(科学の力ってすげー風

僕の写ってる写真も見事に抜いてくれてすごかったです。

雑談

今日は研究室に新たに配属された3年生のセットアップのお手伝いなどもやっていました。

以上。明日は少し大事な用事なので早めに寝たい。

Electronアプリができた

2日くらい前から作ってたElectronアプリが90％くらい完成した。あとの10％は見た目上のクオリティとかそのへんなので割とどうでもいい。

正直自分でもこんな速度で一つのものを完成させたことがなかったのでやればできんじゃんと言う気持ちになった。

やっぱり、デッドラインがないと仕事の時間は無限に膨張するなと思った。

今回のElectronアプリは前に書いたかもしれないが、TypeScript + Reactと言う構成で動いている。ちなみにネイティブな機能を使ってる箇所はないので、実質Webアプリ。(ネット環境のないところで動かしたいという要求があったので、Electronに乗っけただけ)

もっと規模の大きいアプリ作るとどうなるのかはわからないが、おそらくフロントエンドでできることは全部rendererプロセス側に寄せて、本当にmainプロセスでやらないといけないことだけをそちらに書いてなるべく小さくmainプロセスを保つのが良いのではないかと思った。

今回作ったアプリはCSVを読み込む機能があるが、それもFileAPIを使うとrendererプロセスだけで実装できてしまう。素晴らしい。

あとWebアプリと違って、動作する環境が変わらないので、気にせず新しい仕様をブチ込めるのもいいところかなと思う。

雑談

にゃーん