朝活で読書会をはじめました
いつもの朝会（1時間）で、毎週金曜日は結城浩さんの「デザインパターン入門」を読むことにしました。
- 作者:結城 浩
- 発売日: 2004/06/19
- メディア: 大型本
Javaは書いたことがないのですが、デザインパターンの本としては名著中の名著とうかがっているので、 Javaの環境を整えつつ読んでみます。 Rubyだったらどう書く？もできるとよさそう。
読書会は輪読スタイルです。（Ikejiri.rbのスタイルを踏襲） 今日は初回なので「はじめに」から読んでみました。
UMLやシーケンス図の丁寧な説明があったので、このあと本文で出てきても大丈夫そう。
Javaの言語仕様などはわからないことがあったときどこを見るのがよさそうなんだろう。。
JSX内でのコメント・ジェネリクス
JSX内でのコメント
JSX内はあくまでJavaScriptなので、JavaScriptのコメント記述方法を使用します。
ジェネリクス
「クラス宣言のとこ、Component
と今までComponentクラスを継承するときにな かったジェネリクスみたいなのがあります。これは何ですか?」
ジェネリクス？ そういえば配列のところでも出てきていましたが、スルーしてしまっていました。
> const arr1: number[] = [1, 2, 3]; [1,2,3] > const arr2: Array<number> = [1, 2, 3]; [1,2,3]
<number> と表現することで型変数を追加している。
CやC#を書く人にとっては「あぁジェネリクスね」ということらしいのだけれど、
Rubyからきた私には「？？？」なので、以下のドキュメントを読みました。
まだちょっと「？？？🤔」なので、以下のチュートリアルをやってみます。
Semantic UI React
「Reading Sinatra」 を読んでいます
世田谷区池尻で週に一度、おいしいランチを食べながら読書会をする、というスタートを切った Ikejiri.rb ですが、 メンバーのいろんな事情に柔軟に対応した結果、 現在は2週間に一度、オンラインで読書会をしています。 メンバーも4人に増えました！
2月から、「Reading Sinatra」を読んでいます。
#ikejirirb のオンライン読書会で @GhostBrain さんの Reading Sinatra を読みはじめたのですが、読んだだけだと次の会までに忘れるので、手書きしながら復習してました pic.twitter.com/vIfDDpzg2s
— かとりえ (@katorie) 2020年2月29日
2週間に一度なので、読書会だけの時間だと前回分を思い出すのに時間がかかったり、 その時間内に「なんとなくわかった」で終わってしまったりするので、 2回分をひとりでスケッチノートしてました。
せっかくなので、ここに全部貼っておきます。
間違っているところあったら教えてください。。
コンポーネントとProps・もう一度環境構築
コンポーネントとProps
React では、データは必ず親コンポーネントから子コンポーネン トへ一方通行で渡されます。下の階層から上の階層にデータの変更を反映させることはできないの
親コンポーネントから子コンポーネントのデータの受け渡しに使われるのが Props
もう一度環境構築
「Props をコンポーネントに受け渡す」にさしかかり、写経してみようと思ったのでいったん環境構築に戻ります。
>> npx create-react-app chapter07 --typescript Creating a new React app in /path/to/chapter07. The --typescript option has been deprecated and will be removed in a future release. In future, please use --template typescript. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template-typescript... yarn add v1.22.0 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... error @typescript-eslint/eslint-plugin@2.19.2: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.1.0" error Found incompatible module. info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command. Aborting installation. yarnpkg add --exact react react-dom react-scripts cra-template-typescript --cwd /path/to/chapter07 has failed. Deleting generated file... package.json Deleting generated file... yarn.lock Deleting chapter07/ from /Users/katorie/js_ex Done.
Fetching packages... でエラーが起きました。
error @typescript-eslint/eslint-plugin@2.19.2: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.1.0" とあるので、 node のバージョンが問題になっている。。
現在のバージョンは v11.1.0 なので、nodenv でバージョンを切り替えて再度実行。
// とりあえずエラーの要件を満たすバージョンがすでに入っていたのでこちらを利用 >> nodenv local 12.1.0 // さっきwarning出てたのでオプションの書き方を修正 >> npx create-react-app chapter07 --template typescript
成功しました :tada:
まだ書き方とか考え方に慣れないので、サンプルコードを持ってきて動かしてみるより、 写経しながら進めようと思います。
ReturnType・JSX・ESLint
昨日宣言したポモドーロテクニック作戦はあっさり敗北しました。。 今日はこのアプリを入れて実践してみようと思います↓
スタートするときにタスクを入力するので「よし！」という気持ちになりそう。
ReturnType
TypeScriptは型推論を行うけれど、その推論した戻り値の型を抽出する方法。
const aloha = () => 'Aloha!' type Greeting = ReturnType<typeof aloha>; const chao = () => Greeting => 'Chao!';
- 複数の関数の戻り値型をまとめて共用体型をつくりたいとき
- ReduxをTypeScriptで使うとき
JSX
JSXはテンプレート言語ではない！
「React の開発者は DOM のインタラクティブな書き換えという複雑な問題に対応するため、アプリ を独立性の高いコンポーネントという単位に分割し、そこにロジックとデザインを完結させて閉じ込 める方法を採った。ひとつのページを役割別に MVC の 3 つに分けて処理するよりも、見た目と機能 が完結した無数のコンポーネントを組み合わせていくほうが、より複雑なアプリケーションを破綻なく構築できると思わない? 前にもちょっと説明したけど、React では各コンポーネントはロジックレベルでもデザインレベルでもそれぞれ相互に独立していて、処理が終わったものから五月雨的にレ ンダリングされていくの」
なるほど。
JSX でタグを階層化して書くときは、ツリー階層のトップレベルはひとつにしないといけない。
ESLint
TSLintはESLintに統合されていくので、今後はTSLintで。
VSCodeの settings.json に下記を追加しておくとよい。
"editor.codeActionsOnSave": { "source.fixAll.eslint": true
},
型のバリエーション
ポモドーロテクニックは25分間集中して5分休憩する、ということだけど、25分ってけっこうあっという間だよなーと思っていた。 今日「50分集中して10分休憩」というソリューションを教わったので、昼間さっそく実践してみようと思う。 ちなみに朝活も50分間。
さて今日もがんばりましょう！！
型のバリエーション
・ number ・ string ・ boolean ・ symbol ・ null ・ undefined
0、’’（空文字）、null、undefined が false、それ以外は true
strictNullChecks オプションを有効にすると、厳密な Null 安全性を保証する。（tsconfig.json で設定する）
VSCodeだと、任意の変数の上にカーソルをホバーさせたときにポップアップで型を教えてくれる！
never
const greet = (friend: 'serval' | 'caracal' | 'cheetah') => {
switch (friend) {
case 'serval':
return 'Hello, Serval!';
case 'caracal':
return 'Hello Caracal!';
case 'cheetah':
return 'Hello Cheetah!';
default:
const check: never = friend;
}
};
console.log(greet('serval')); // Hello, Serval!
このコードから case 'cheetah ではじまる2行を削除すると、コンパイルエラーが起きる。
配列とオブジェクト
型は合成できる
interface Foo { hoge?: number, fuga: string };
interface Bar { hoge: number };
interface Buz { piyo: string };
type FooBar1 = Foo & Bar; // 交差型
type FooBar2 = Foo | Bar; // 共用体型
type FooBuz1 = Foo & Buz;
type FooBuz2 = Foo | Buz;
Reactではコンポーネントの引数の型合成を行うことが多い。 同じ名前で複数回定義すると、上書きではなく継承されていくので注意。 拡張したいときは、型合成を行ってType Alias で穴めをつけるやり方がおすすめとのこと。
constで変数を定義した場合、変数自体の再代入はできないが各要素の上書きや追加はできる。 配列やオブジェクトの中身までイミュータブルにしたい場合、readonly をつける。
const arr1: ReadonlyArray<string> = ['foo', 'bar']; const arr2: readonly string[] = ['foo', 'bar'];
