30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

Reactのコンポーネントにpropsを渡さない場合のFlowの書き方

React Flow

Flowのバージョンは0.61.0で確認している。

propsを渡さない場合、Flowはどのように指定すればよいのか

ReactのコンポーネントのpropsにFlowで型をつける場合、以下のように書く。

type Props = {
  foo: string,
};

class ChildComponent extends React.Component<Props> {
  render() {
    return <div>{this.props.foo}</div>;
  }
}

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent foo="hoge" />;
  }
}

https://flow.org/en/docs/react/components/

では、このコンポーネントにはpropsを渡さない場合は、どう書けばいいのか。

propsは、何も渡されなかった場合、空のオブジェクトになる。

class ChildComponent extends React.Component<Props> {
  render() {
    console.log(this.props); // {}
    return <div>foo</div>;
  }
}

class ParentComponent extends React.Component {
  render() {
    return <ChildComponent />;
  }
}

なので、空のオブジェクトを型として設定してみる。

type Props = {};

しかしこれだと、propsを渡してもエラーがでない。
間違ってpropsを渡してしまった場合はエラーを出してくれないと、型として機能していない。

結論を書くと、以下のように定義すればよい。

type Props = {||};

これは、Exact object typesという表記を使って「空のオブジェクト」を定義したものである。

Exact object types

Flowでは通常、指定していないプロパティがオブジェクトに含まれていても、エラーにはならない。
例えば下記の例では、引数として渡したオブジェクトに指定していないプロパティ（boo）が含まれているが、エラーにはならない。

// @flow

function method(obj: {foo: string}) {
  return obj;
}

method({
  foo: '1', // Works!
  boo: 2, // Works!
});

先程のpropsのケースも、これが原因だった。
空のオブジェクトを指定した場合、それはむしろ、あらゆるプロパティを許容することになってしまう。

// @flow

function method(obj: {}) {
  return obj;
}

method({
  foo: '1', // Works!
  boo: 2, // Works!
});

これを防ぎ、厳密にオブジェクトを定義したいときに使うのが、Exact object typesである。
{|と|}で囲めばよい。

// @flow

function method(obj: {|foo: string|}) {
  return obj;
}

method({
  foo: '1', // Works!
  boo: 2, // Error!
});

そのため、空のオブジェクトは中に何も書かず{||}と定義すればよい。
この場合、空のオブジェクト以外が渡された場合はエラーを出してくれる。

参考資料

『わかばちゃんと学ぶ Git使い方入門』を読んだ

読書 Git

同僚にお借りして読んだ。

わかばちゃんと学ぶ Git使い方入門〈GitHub、Bitbucket、SourceTree〉

全くの初心者向けに、GitやGitHubの使い方を解説した本。
漫画の主人公も、プログラマではなく「Web業界に憧れる大学生」。

コマンドラインではなくGUIで操作していき、写真も豊富で分かりやすい。Gitの説明そのものも分かりやすかった。

「Git入門」を謳った教材は多いが、自分が見たなかでは本書が一番理解しやすかった。
既にある程度知識がある状態で読んだからかもしれないけれど。

最初にGitについて学ぼうとしたとき、ステージという概念がよく分からずイメージできなかったが、本書ではコミットを「その状態を写真に撮る」、ステージングを「撮影台に載せる」と説明してあり、分かりやすかった。

仕事で日常的にGitを使っているから本書の内容は大体知っていたが、初学者向けの本書を読むことでGitの利便性を改めて実感できた。
と同時に、いくら便利なものでもちゃんと理解して使わないと意味がないなと感じた。
それが、本書を読んだ一番の感想。
正しく使わないとせっかくのGitの利点を活かせないわけだけど、今の自分がまさにそういう状態だから。

仕事で使っていると書いたが、Gitを理解している、使いこなしている、とは言い難い。
流れ作業になっており、こういうときはこのコマンド、次にこのコマンド、と機械的に行っている。
だから「いつものコマンド」では出来ないことをやろうとしたとき、困ってしまう。
トラブルが発生した時に、どうすればいいか分からなくなってしまう。
どのコマンドを実行すると何が起こるのか、を正しく理解していないから、こうなる。対応できないし、対応を考えられない。

Gitが完全にブラックボックスになっていて、このコマンドを叩けばこうなる、という、入力と結果しか分かっていない。
中で何が起こっているか分かっておらず、だからトラブルシューティングできない。
あるいは、すごく簡単に出来るであろう作業を、ものすごく手間を掛けて行う羽目になる。

本当はこういう状態はすぐに脱却して、内部的に何が起こっているのか理解して使うべきなんだろう。

本書は入門書だからそこまで踏み込んだ内容ではないけれど、取っ掛かりとしては十分で、普段の業務で使う分にはほとんど問題ないと思う。
少なくとも自分が普段使っているGitの機能は、ほとんど本書に書かれてあった。

メモ

本書で存在を知ったものもいくつかあるので、メモしておく。

チェリーピック

特定のコミットを、今いるブランチの最新のコミットとして取り込む。

$ git cherry-pick <commit>

連続する複数のコミットを取り込むことも出来る。

$ git cherry-pick <始点の一つ前のcommit>..<終点のcommit>

参考資料

スタッシュ

現在の作業内容を、コミットすることなく一時的に保存しておける。

$ git stash

これだけで保存できる。
スタッシュは複数行うことができ、$ git stash listで一覧を確認できる。

復元するにはstash applyを使う。$ git stash applyとすると、直近のスタッシュが復元される。
復元しただけではリストからは削除されないので、$ git stash dropで直近のスタッシュを削除できる。
また、$ git stash popで、復元とリストからの削除を同時に行える。

通常、ステージングしてあるかどうかは復元されない。
applyやpopに--indexオプションをつければ、それも含めて復元できる。

どのブランチにいても復元を行える。

参考資料

スカッシュ

直近の複数のコミットを一つにまとめる。

$ git rebase -i HEAD~<まとめたいコミットの数>

こうするとエディタが開くので、2行目以降のpickをsquashに変更する。

pick コミットID　コミットメッセージ
pick コミットID　コミットメッセージ <- pickをsquashに変更
pick コミットID　コミットメッセージ <- pickをsquashに変更

参考資料