日報

最近の活動状況

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

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

GW前くらいから朝活の記録をする時間がなかなかとれなくていたのですが、細々と活動は続けています。。 今はりあクト!シリーズ3作目をやっています。 oukayuka.booth.pm Firestore のセッティングではまった 本の通り順調に進めていましたが、 1-2. Firebas…

デバッグをもっと簡単に

「りあクト!」続編を読み始めました。 booth.pm React Developer Tools の使い方のところでちょっとはまったのでメモ。 サンプルコードは yarn start でビルドとサーバーたちあげを行うようスクリプトが書かれているのですが、 これが「development モード…

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

朝活続けていますが、こちらをマメに更新していなかった。。 サンプルコードをいじっているとき Git がやたら重いなぁと思っていたら、 .gitignore がなくて /node_modules を含めてしまっていたことが原因とわかりました。 なんでだろう?と思ったときにち…

React Router の使い方

サンプルコードを写経途中。 BrowserRouter index.tsx で <App /> を <BrowserRouter> というコンポーネントでラップすることで、 下の階層のコンポーネントで HTML5 の History API を利用した各種 の機能が使えるようになる。 ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('roo</browserrouter></app>…

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

Effect Hook でライフサイクルを扱う クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの クラスコンポーネントのライフサイクルメソッドは、「このタイミング…

Hooks・State Hook で Local State の管理・Git が重たいような気がする

Hooks Hooks は様々な React の機能をクラスを使わずに利用 できるようにするもの。 Local State とか Lifecycle とか。 この Hooks の発表が React Conf 2018 の基調講演のなかでされたということなんだけど、ここでずいぶん流れが変わってしまっているんだ…

関数コンポーネント・コンポーネントとコンテナ

関数コンポーネント 今後はクラスコンポーネントではなく関数コンポーネントを優先して書いていく流れ、とのこと。 以前書いたクラスコンポーネントのコードを関数コンポーネントに書き換えてみた。 github.com コンポーネントとコンテナ Presentational Com…

コンポーネントのライフサイクルを知るためののサンプルコードを写経

github.com ちなみに私のコードはサンプルコードにちょっと変更を加えていて、 componentDidUpdate で timeLeft が 0 のときに「60秒たちました!」というアラートメッセージを出すようにしました。 しかし今の状態だと、カウンターには 1 が表示されている…

私用環境を整理する・昨日はデザインパターン読書会だった

私用環境を整理する 強いチームはオフィスを捨てる: 37シグナルズが考える「働き方革命」作者:ジェイソン・フリード,デイヴィッド・ハイネマイヤー・ハンソン発売日: 2014/01/24メディア: 単行本 先日この↑本を読んでいて、そうだなーと共感したのが 仕事のP…

コンポーネントのライフサイクル

コンポーネントのライフサイクル 初期化され、マウントされ、レンダリングされ、再レンダリングされ、アンマウントされ…というサイクルのなかで、 それぞれのフェーズに介入して処理を差し込むメソッドが用意されている。 Mounting フェーズ constructor [vo…

開発するときに心がけたいこと(のひとつ)

技術書典8が新型コロナウイルス感染症の影響により中止となったため、 オンラインで応援祭が開催されています。(2020年4月5日まで) それで昨日こちらを購入しました。 techbookfest.org テストコミュニティには以前何度か参加したことがあり、ふだん自分が…

コンポーネントと props

コンポーネントと props コード写したり本文読んでいたんですが、やっぱりちょっと「コンポーネント」という考え方が身についていない。 ja.reactjs.org 概念的には、コンポーネントは JavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受…

新しいReactアプリ(TypeScript)の構築手順おさらい・Local State

最近運動不足が気になっているので、バランスボールに座りながら仕事できないかな?と考えています。 バランスボールは場所をとりそうなので、こちらを購入検討中。。 バランスワン フィットネスチェア(ワブリー)(GREEN)メディア: その他 新しいReactアプ…

Props

やっと「りあクト!」本文に戻ってきました。。 Props サンプルコード(CharacterList.tsx) interface CharacterListProps { school: string; characters: Character[]; } class CharacterList extends Component<CharacterListProps> { render(){ const { school, characters }</characterlistprops>…

ジェネリクス

TypeScriptでジェネリクス(Generics)を理解するための簡単なチュートリアル | I am mitsuruog こちらを参考にジェネリクスを使ったコードを書いてみました。 User クラスと Company クラスを定義して、それらの配列にオブジェクトを追加できるmerge関数を定…

朝活で読書会をはじめました

いつもの朝会(1時間)で、毎週金曜日は結城浩さんの「デザインパターン入門」を読むことにしました。 増補改訂版Java言語で学ぶデザインパターン入門作者:結城 浩発売日: 2004/06/19メディア: 大型本 Javaは書いたことがないのですが、デザインパターンの本…

JSX内でのコメント・ジェネリクス

JSX内でのコメント JSX内はあくまでJavaScriptなので、JavaScriptのコメント記述方法を使用します。 chaika.hatenablog.com ジェネリクス 「クラス宣言のとこ、Component と今までComponentクラスを継承するときにな かったジェネリクスみたいなのがあ…

Semantic UI React

Semantic UI React 簡単にスタイルを適用するためのライブラリ react.semantic-ui.com create-react-appしたディレクトリで、このライブラリを追加します。 >> yarn add semantic-ui-react semantic-ui-css index.tsx に import文を追加します。 import 'sem…

コンポーネントとProps・もう一度環境構築

コンポーネントとProps React では、データは必ず親コンポーネントから子コンポーネン トへ一方通行で渡されます。下の階層から上の階層にデータの変更を反映させることはできないの 親コンポーネントから子コンポーネントのデータの…

ReturnType・JSX・ESLint

昨日宣言したポモドーロテクニック作戦はあっさり敗北しました。。 今日はこのアプリを入れて実践してみようと思います↓ Be Focused - 仕事および勉強用の TimerDenys Yevenko仕事効率化無料apps.apple.com スタートするときにタスクを入力するので「よし!…

型のバリエーション

ポモドーロテクニックは25分間集中して5分休憩する、ということだけど、25分ってけっこうあっという間だよなーと思っていた。 今日「50分集中して10分休憩」というソリューションを教わったので、昼間さっそく実践してみようと思う。 ちなみに朝活も50分間。…

高階関数・クロージャ・ジェネレータ・カリー化と関数の部分適用

高階関数 // 引数に関数をとる arr = [1, 2, 3] arr.map(n => n * 2); // 戻り値として関数を返す const hof = (ex, fn) => { retrun n => fn(n + ex); }; const plusOneDouble = hof(1, n => n * 2); console.log(plusOneDouble(4)); // (4 + 1) * 2 = 10 /…

便利な配列やオブジェクトのリテラル・非同期処理・コレクションの反復処理・関数型プログラミングの概要

朝活が成功するとブログ更新ができるぞ!として、モチベーションを維持。 便利な配列やオブジェクトのリテラル // 分割代入 const [n, m] = [1, 4]; // スプレッド構文 const arr1 = [ 'A', 'B', 'C' ]; const arr2 = [...arr1, 'D', 'E' ]; // [ 'A', '…

クラス構文

夜に活動があったり(Ikejiri.rbオンライン読書会)、夜中にムスメ対応が発生すると、睡眠時間がずれてしまう。。 仕方なし、そういうときは受け入れて、またできるときに、やる。 クラス構文 constructor は継承されないので、継承先で constructor() と明…

package.jsonのscripts・ECMA Script2015

週末をはさむと少し「ひさしぶり感」がある。 花粉症がやばくなってきたので病院に行く必要がある。。 package.jsonのscripts npmコマンド、それはつまりyarnコマンド。 package.json の scripts にエントリを記述しておくと、あたかもnpmコマンドとして実行…

VSCodeのプラグインをインストール・package-lock.jsonのあつかい

VSCodeのプラグインをインストール 本の中でおすすめされているVSCodeプラグインをインストールしたり内容を確認してみたり サンプルコードをチェックアウトすると、 .vscode/extentions.json というファイルがあって、そのなかに同じプラグインが書かれてい…

npmの特定のバージョンをインストールする・サンプルコードで動かしてみる・VSCodeのプラグインをインストール

昨日は大江戸Ruby会議08が開催されて、行けなかった私は起きてからしばらく楽しそうなTLをながめていました。 今朝も「りあクト!」の続きから! npmの特定のバージョンをインストールする npmのバージョンが合っていなかったので、npm i -g npm@6.8.0 でイ…

朝活をはじめてみる・React環境構築

朝活をはじめてみる きっかけがあって、朝5時から 朝活 をはじめてみました。 いつも夜22時前くらいに娘を寝かしつけて、そのときに一緒に寝てしまい午前2時くらいに起きてすこし活動していることが多かったのですが、 そのまま朝まで寝てしまって、5時から…