valid,invalid

関心を持てる事柄について

ReactのuseStateで日本語のふりがな入力を支援するhook書いた

半年以上前にReactのContextとHooksで日本語のふりがな入力を支援するコンポーネント書いた - valid,invalidという記事を書いたが、このときは何もわかってなかったということがわかった。

長々とContext, Provider, useReducerあたりのことを書きましたが、同じことは以下の十数行のcustom hookで実現できた。

import historykana from 'historykana';

export const useKana = (fieldNames: string[]) => {
  const [history, setHistory] = useState({});
  const [kana, setKana] = useState({});

  const setKanaSource = ({ fieldName, inputtedValue }) => {
    const newHistory = inputtedValue ? [...history[fieldName], inputtedValue] : [];
    setHistory({ ...history, [fieldName]: newHistory });
    setKana({ ...kana, [fieldName]: historykana(newHistory) });
  };
  return { kana, setKanaSource };
};

stateを更新するロジックは大した複雑性もないのでuseReducerは不要。stateを更新するにはdispatcher相当のcallback関数を自前で書いてユーザーに提供すればよし。

ライブラリを使う側の気持ちとしても今だったらContextじゃなくふつうにcustom hookを使いたいと思う。

import React from 'react';
import ReactDOM from 'react-dom';
import { useKana } from 'react-use-kana';

const App = () => {
  const { kana: { lastNameKana }, setKanaSource } = useKana(['lastNameKana']);

  return (
    <>
        <input
          type="text"
          onChange={e =>
            setKanaSource({ fieldName: 'lastNameKana', inputtedValue: e.target.value })
          }
        />
        <input type="text" value={lastNameKana} />
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

demo

Test for React Hooks

React hooksのテストってどうやって書くのかな?と思ってHooks FAQ – Reactを見ると@testing-library/react-hooksを見つけたので試してみた。今回はJestと併用。

基本的にはReact Testing Libraryと類似のAPIactとか)が使える…と思ったらreact-test-rendererに依存しており、そこからexportされているだけのようだった。

React Componentのテストのときと同様にactにはユーザーインタラクションのいち単位を記述する。今回は一文字ずつの入力をインタラクションとして定義したく、ループ内でactを呼ぶようなテストになった

import { renderHook, act } from '@testing-library/react-hooks';
import { useKana } from '../useKana';

test('returns kana based on user input', () => {
  const { result } = renderHook(() =>
    useKana(['lastNameKana', 'firstNameKana']),
  );

  expect(result.current.kana).toEqual({
    lastNameKana: '',
    firstNameKana: '',
  });

  // Emulates to input a user's last name
  [
    'や',
    'やm',
    'やま',
    'やまd',
    'やまだ',
    '山田',
  ].forEach(value => {
    act(() => {
      result.current.setKanaSource({
        fieldName: 'lastNameKana',
        inputtedValue: value,
      });
    });
  });

  expect(result.current.kana).toEqual({
    lastNameKana: 'やまだ',
    firstNameKana: '',
  });
});

Publised

今回書いたreact-use-kanaはnpm registoryに公開し、react-kana-providernpm deprecateした。

github.com

www.npmjs.com

#builderscon 2019 行ってきた

buidersconは2017年に初めて参加したときにとても刺激を受け、そのおかげで2018年に自分が登壇やOSS活動がんばる気力になったぐらい、(勝手な)思い入れがあるカンファレンス。今年で3年連続の参加になる。

特に印象に残ったセッション

全部で9本のセッションに参加し、その中でも特に"Discover something new"したもの、心が動いたものは以下の3つ。

コンパイラを作ってみよう

コンパイラをつくってみよう - builderscon tokyo 2019

これは自分の今の気持ちに刺さったので#builderscon 「コンパイラをつくってみよう」に触発されてRubyでも書いてみた - valid,invalidにも書いたようにすぐ実践してみた。

一歩でも自分の知識が深まるような実践に繋がってよかった。

形式手法による分散システムの検証

形式手法による分散システムの検証 - builderscon tokyo 2019

形式手法に関する事前知識はほとんどなかったけれどもその概要から実践的なモデルケースの解説まで非常にわかりやすかった。自分もやってみようかなという気持ちになった。

これまで「形式手法はソフトウェアテスト手法の一種かな?」ぐらいの雑な認識で実装の間または後ぐらいに位置づけられると勝手に思っていたのだが、開発/テストを待たずにシステムの設計を検証できるものということがわかってよかった。設計自体へのレビューと捉える方が自分にとってはしっくりきたし、実用したいと思えた。「常に、生産過程のなるべく早い時点で誤りに気づかなければいけない」*1ので設計時点で齟齬に気づきたい。

もしもハッカーの「サイバー攻撃日誌」が読めたら

もしもハッカーの「サイバー攻撃日誌」が読めたら - builderscon tokyo 2019

これは…かつてなくワクワクするセッション。

サイバー攻撃をセキュリティ診断として実施する会社いわば「いろんな会社を攻撃する仕事」があるというので「一企業の中にもそういう部門があるぐらいだし、まぁそれはありそう」というぐらいの印象だったのだが、実際にプレゼンが始まってみるとその本格度の高さに終始ひきこまれた。技術的についていけないことがあるだけでなく、ソーシャルハッキングなどの人的側面からの攻撃も多分に有効であるということがわかり、自分ではまったく守りきれる気がしない…。

内容は公開できないとのことだが、「(クラッカーとして)二要素認証は攻めづらいので嫌い」の一言は持ち帰って拡散しても良さそう。

改善してもらえると嬉しい点

あらかじめ書いておくと、どちらも自分にとってのbuildersconの価値を毀損するほどのものではないです。

前夜祭で最後席付近のスタッフ(?)の私語の声が大きく、登壇者のプレゼンがたびたび聞こえなくなるほどだった。これがそこそこつらかったのと、そのとき体力気力があまりなかったこともあって前夜祭は中途で抜けて帰った。アルコール入っている人ぽくて怖かったのと、前夜祭ってお酒飲みつつ盛り上がるものでしょと言われたらそれまでなので直接言えなかったけど、その場で一言いえばよかったかなぁ。

また、こちらは会場の都合もあるので言いがかりに近くて申し訳ない…が、温度調整でダメージを受けました。

ランチ

イベント側提供のランチもとてもありがたいが、せっかく普段行かない土地に行くのだからその土地でしか食べれないものを食べたくなってしまうので、その土地でしか食べれないものを食べました。

f:id:ohbarye:20190902010615j:plain
ビリヤニ食堂のスペアリブビリヤニ

f:id:ohbarye:20190902010631j:plain
BOSSA BURGERのゴルゴンゾーラと蜂蜜のハンバーガ

どちらも本当に素晴らしかったので北千住に行くことがあれば再訪するぞ!!

*1:『HIGH OUTPUT MANAGEMET』に書いてあった気がする

#builderscon 「コンパイラをつくってみよう」に触発されてRubyでも書いてみた

builderscon 2019 で @DQNEO さんが コンパイラをつくってみよう / How to make a compiler - Speaker Deck という発表をされていた。ライブコーディングの緊張感と会場の一体感もすごかったが、そのうえ自分はプレゼンの中で言及されていた想定聴衆にストライクだったためとても楽しんだ。*1

「どの言語でどの言語のコンパイラを書いてもよい」「学んでから作るのではなく作りながら学ぶ」という言葉が刺さったのでさっそくRubyで実装してみた。今回の発表のために用意されたレポジトリのcommit logを一つ一つ読み、bashからの実行を小さく小さく繰り返しながら進めること1時間半ほどで、四則演算ができる程度の極小コンパイラが書けた。

github.com

実は過去に『RubyでつくるRuby ゼロから学びなおすプログラミング言語入門』を読んでRubyインタプリタ実装についてわかった気持ちになったことがあるのだがそちらではtokenizeやparseの実装はスキップしていた*2ので、今回その辺をかじることができて足りなかったピースがハマった感覚があってよかった。*3

また、発表の質疑応答にて「次に何を実装するのが良いでしょうか?」という質問に対し「if、for、関数あたり」とのこと。まさに同書の知識+未知の部分で学びが多そうなので続きをやっていきたい。

その他の感想:

  • コンパイラ実装においてはとにかく型が欲しい気持ちがすごいので型がある言語でも書いてみたい
  • Golangとの違いを意識しながら書けたのが面白かった
  • Rubyで書き上げることを目標にしたがリファクタリングの余地がだいぶあるので設計を考えてみたい
  • 特にRuby 2.7のパターンマッチを使ってすっきり書けるところはあるかも
RubyでつくるRuby ゼロから学びなおすプログラミング言語入門
遠藤 侑介
ラムダノート
売り上げランキング: 451,219

*1:発表に関するまとめはクラスメソッド社の [builderscon 2019 レポート] コンパイラを作ってみよう #builderscon | DevelopersIO が詳しい

*2:書籍のやり方に従うとminruby_parseというgemを使うことになる。もちろん自分で書くチャンスも無限にあるがそのスキルがなかった

*3:よかった…が、こういうの皆さん大学でやってきているのかな〜、はぁ〜〜〜と思うと改めてビハインドを感じるのでやっていくしかない

VR chat で 1-on-1

あらすじ

弊社社員@pankonaは社内いちXRに熱い気持ちがある男(美少女)。購買申請を出した。

VRは今のところ弊社の事業とはまったく関係ないのでこれはもうだめかもわからんねと思ったが予想外の角度の予算でOculus Questを2台買えた。

活用を推進するVR番長としての役割を任命された@pankonaはマネジャー@ohbaryeVR 1-on-1を挑むのだった。

f:id:ohbarye:20190619222454p:plain
イメージ

やった

恥ずかしながら@ohbaryeはQuest初体験なのでインストラクションされつつ、2人で密室でゴーグルをかぶる状態でスタート。

途中トラブルがありながらも仮想世界にDIVE。すると…やだ、オフィスが突如マイホームに!?

そんな驚きもつかの間、マイホームに美少女(男)が突如現れてどうなっちゃうの…って、おれも美少女になってる〜〜〜!?

結論

テックカンパニーなんだからテックを使った試みをしていこう

【正規輸入品】Oculus Quest (オキュラス クエスト)- 64GB
Oculus (2019-05-21)
売り上げランキング: 213

最近知った音楽

YouTubeで関連動画やレコメンドを再生するだけの人生

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

www.youtube.com

docker runで複数コマンドを実行する `-c` option

docker runで複数コマンドを実行したいとき -c オプションでコマンドを文字列として渡せる。

stackoverflow.com

たとえば python Docker image を用いて pip install したあとにそのまま requirements.txt に変更内容を save するような場合*1

$ docker run -it -v $PWD:/app -w /app python bash -c "pip install requests3 beautifulsoup4 && pip freeze > requirements.txt"

*1:たまたまPythonを書いていたときに必要だったのでこの例を書いたが、これがPython界での作法に従っているかは不明

業務中に学んだり遊んだりする力

業務中に学んだり遊んだりするのがうまい人とそうでない人がいる。

学習時間を業務時間の一部として確保して実験したり学習したりときには遊んだりできるのはとても大事なスキルだと思う。

業務に必要なことなら業務時間中に学べば良いと思っているし、もし知識が足りなくて困っている人が居たら「そのぶん時間を取ってはどうか」と言うと思う。にもかかわらず自分自身は業務時間中に学ぶのが下手だという自覚がある。

なんだろうな、仕事に関連するインタラプションや締切のプレッシャーがあると落ち着いてインプットが出来ないということなのかな。

短時間で成果を出したように見せたい => 無知・無能だと思われることへの恐怖がある => 心理的安全性が欠如している?

無知も無能も十分さらしているのでそういうことでもない気がする。