日報
最近 6月と7月は体調を崩したりしていたので、朝活はお休み気味でした。 (起きてはいたけど、もくもくはあまりしていなかった) 相変わらず TECH PLAY 女子部の朝活に参加しているので、 そこで2月(だったかな)にはじめたデザインパターンの読書会は継続…
TECH PLAY 女子部のSlackチャンネルのひとつに、朝活をする人たちが集まるチャンネルがあって、 そこをベースに朝5時から活動しています。 最近メンバーが増えて(COVID-19による在宅勤務が増えた影響かな)、Twitterハッシュタグ #hayaoki_girls をつけてつ…
GW前くらいから朝活の記録をする時間がなかなかとれなくていたのですが、細々と活動は続けています。。 今はりあクト!シリーズ3作目をやっています。 oukayuka.booth.pm Firestore のセッティングではまった 本の通り順調に進めていましたが、 1-2. Firebas…
「りあクト!」続編を読み始めました。 booth.pm React Developer Tools の使い方のところでちょっとはまったのでメモ。 サンプルコードは yarn start でビルドとサーバーたちあげを行うようスクリプトが書かれているのですが、 これが「development モード…
朝活続けていますが、こちらをマメに更新していなかった。。 サンプルコードをいじっているとき Git がやたら重いなぁと思っていたら、 .gitignore がなくて /node_modules を含めてしまっていたことが原因とわかりました。 なんでだろう?と思ったときにち…
サンプルコードを写経途中。 BrowserRouter index.tsx で <App /> を <BrowserRouter> というコンポーネントでラップすることで、 下の階層のコンポーネントで HTML5 の History API を利用した各種 の機能が使えるようになる。 ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('roo</browserrouter></app>…
Effect Hook でライフサイクルを扱う クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの クラスコンポーネントのライフサイクルメソッドは、「このタイミング…
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 コード写したり本文読んでいたんですが、やっぱりちょっと「コンポーネント」という考え方が身についていない。 ja.reactjs.org 概念的には、コンポーネントは JavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受…
最近運動不足が気になっているので、バランスボールに座りながら仕事できないかな?と考えています。 バランスボールは場所をとりそうなので、こちらを購入検討中。。 バランスワン フィットネスチェア(ワブリー)(GREEN)メディア: その他 新しいReactアプ…
やっと「りあクト!」本文に戻ってきました。。 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内はあくまでJavaScriptなので、JavaScriptのコメント記述方法を使用します。 chaika.hatenablog.com ジェネリクス 「クラス宣言のとこ、Component と今までComponentクラスを継承するときにな かったジェネリクスみたいなのがあ…
Semantic UI React 簡単にスタイルを適用するためのライブラリ react.semantic-ui.com create-react-appしたディレクトリで、このライブラリを追加します。 >> yarn add semantic-ui-react semantic-ui-css index.tsx に import文を追加します。 import 'sem…
コンポーネントとProps React では、データは必ず親コンポーネントから子コンポーネン トへ一方通行で渡されます。下の階層から上の階層にデータの変更を反映させることはできないの 親コンポーネントから子コンポーネントのデータの…
昨日宣言したポモドーロテクニック作戦はあっさり敗北しました。。 今日はこのアプリを入れて実践してみようと思います↓ 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 npmコマンド、それはつまりyarnコマンド。 package.json の scripts にエントリを記述しておくと、あたかもnpmコマンドとして実行…
VSCodeのプラグインをインストール 本の中でおすすめされているVSCodeプラグインをインストールしたり内容を確認してみたり サンプルコードをチェックアウトすると、 .vscode/extentions.json というファイルがあって、そのなかに同じプラグインが書かれてい…
昨日は大江戸Ruby会議08が開催されて、行けなかった私は起きてからしばらく楽しそうなTLをながめていました。 今朝も「りあクト!」の続きから! npmの特定のバージョンをインストールする npmのバージョンが合っていなかったので、npm i -g npm@6.8.0 でイ…
朝活をはじめてみる きっかけがあって、朝5時から 朝活 をはじめてみました。 いつも夜22時前くらいに娘を寝かしつけて、そのときに一緒に寝てしまい午前2時くらいに起きてすこし活動していることが多かったのですが、 そのまま朝まで寝てしまって、5時から…