最近の活動状況・マップという言葉

最近

6月と7月は体調を崩したりしていたので、朝活はお休み気味でした。 (起きてはいたけど、もくもくはあまりしていなかった)

相変わらず TECH PLAY 女子部の朝活に参加しているので、 そこで2月(だったかな)にはじめたデザインパターンの読書会は継続中。 あと最近Go言語の読書会もスタートしました!

Goならわかるシステムプログラミング

Goならわかるシステムプログラミング

  • 作者:渋川 よしき
  • 発売日: 2017/10/23
  • メディア: 単行本(ソフトカバー)

まだ序盤ですが、ポインタ型とか「???」でググりながら…

毎日暑くて普通に生活するのがしんどいですが、体調は戻ってきたのでリズム整えていくぞ!

マップ

「マップ」と聞くとつい名詞の「地図」を思い浮かべてしまうんだけど、 動詞としての「なにかとなにかを対応づける、関連づける」という意味のほう。マッピング

マップはES2015で導入されたので、それ以前はオブジェクトをマップとして使用していたとのこと。 しかしこれは意図しないマッピングが生じたり、 プロパティとして値を持つので文字列しかシンボルしかキーに使用できない、 という問題がある。 マップはプロパティとは異なる値の持ち方をするため、プロトタイプがもつメソッドやプロパティとキーが衝突することは、ない。

最近の活動状況

TECH PLAY 女子部のSlackチャンネルのひとつに、朝活をする人たちが集まるチャンネルがあって、 そこをベースに朝5時から活動しています。 最近メンバーが増えて(COVID-19による在宅勤務が増えた影響かな)、Twitterハッシュタグ #hayaoki_girls をつけてつぶやくことも増えました。

私は最近は #jsprimer 「JavaScript Primer」をオンラインで読んでいます。

jsprimer.net

ほんとうはオライリーの「プログラミング TypeScript」を読みたいんだけど、その前にJavaScriptにちゃんと入門しようと思ったからです。

はやく業務に活かしたい。

Firestore のセッティングではまった

GW前くらいから朝活の記録をする時間がなかなかとれなくていたのですが、細々と活動は続けています。。

今はりあクト!シリーズ3作目をやっています。

oukayuka.booth.pm

Firestore のセッティングではまった

本の通り順調に進めていましたが、 1-2. Firebase プロジェクトの作成と初期化 のところで、 Firestore Setup でエラーがでました。

=== Project Setup
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: mangarel-demo (mangarel-demo)
=== Firestore Setup
? What file should be used for Firestore Rules? firestore.rules
? What file should be used for Firestore indexes? firestore.indexes.json

Error: Error fetching Firestore indexes

ちょっとググってみましたが、これはGCPコンソールで - Firestoreの設定を Datastore モードから Native モードに変更 - API の有効化 のふたつを実行する必要がありました。

おなじところではまる場合は debug オプションをつけて Firebase 初期化をおこなうと、ヒントが得られます!

$ firebase init --debug

デバッグをもっと簡単に

「りあクト!」続編を読み始めました。

booth.pm

React Developer Tools の使い方のところでちょっとはまったのでメモ。

サンプルコードは yarn start でビルドとサーバーたちあげを行うようスクリプトが書かれているのですが、 これが「development モード」らしくて、 そのままだと Chrome の React dev tools が動かないんです。

「production モード」で起動してくれみたいなメッセージがでます。

ググってみたらデフォルトが production モードで yarn run dev とかすると devlopment モードになるみたいな情報は見つかったんだけど、 サンプルコードのスクリプトがどこで明示的に dev モードを使用しているのかわからなかった。。

ので、 yarn run build したときに表示されるメッセージの通りに起動しました。

$ yarn run build
$ serve -s build

f:id:katoriexxxkatorie:20200420053228p:plain

しかしいざ Chrome Dev Tools で開くと、本で説明があるように表示されなくて、これはもしかしたら Chrome Dev Tools がアップデートした可能性。。

今日はここまで!

.gitignore がなかった(/node_modules を push していた)・第9章まででいったん読了とする

朝活続けていますが、こちらをマメに更新していなかった。。

サンプルコードをいじっているとき Git がやたら重いなぁと思っていたら、 .gitignore がなくて /node_modules を含めてしまっていたことが原因とわかりました。

なんでだろう?と思ったときにちゃんと調べないといけないな、と反省。

本文の方は第9章の React Router の部分まではざーっと読んだので、今回はここまででいったん読了として、 (今のところReduxを業務で使っていないので…) 明日から続編を読もうと思っています。

oukayuka.booth.pm

React Router の使い方

サンプルコードを写経途中。

BrowserRouter

index.tsx<App /><BrowserRouter> というコンポーネントでラップすることで、 下の階層のコンポーネントHTML5History API を利用した各種 の機能が使えるようになる。

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

HTML5History API とは…

developer.mozilla.org

Helmet

どこからでも HTML ドキュメン トヘッダが上書きできるようになるので、ページごとに <title> がセットできるようになる。

link

タグで書いちゃうと普通にHTTPリクエストになってしまうので、React Router 管轄外となってしまう。

Effect Hook でライフサイクルを扱う

Effect Hook でライフサイクルを扱う

クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの

クラスコンポーネントのライフサイクルメソッドは、「このタイミングでこの処理をする」という発想だったのに対し、Effect Hook では「この処理はこのタイミングとこのタイミングでやる」という発想になっている。

useEffect()(() => {
  doSomething();

  return clearSomething();
}, [watchVar]);
  • useEffect() の第一引数に、引数なしの関数を設定すると、コンポーネントレンダリングの直前に実行される(ここでは doSomething()
  • useEffect() の第二引数は、変数の配列で、省略可能。配列の中の変数が、前回のレンダリング時と変わらなければ、第一引数で渡された関数の中身の副作用処理実行がキャンセルされることになる
  • コンポーネントのアンマウント時にreturn 文が返される(ここでは clearSomething() が実行される)
  • 第二引数を省略すると、レンダリングのたびに doSomething() が実行される
  • 第二引数を空配列にすると、doSomething() は初回のレンダリングでしか実行されない

こちらのほうが、コード量は減るかもしれない?

というわけで早速書いてみました。

github.com