【脱Redux】React hooks だけでグローバルな状態を管理する

前に書いた記事 Context と Hooks でグローバルな状態を管理する一番シンプルな方法 - 藤 遥のブログ を発展させた。 やりたいことは以下。 Redux を使わずに React だけでグローバルな状態を管理したい 状態は関心事に空間分けしたい TypeScript を使うが型…

【VSCode Tip】なぜかタブバーに1ファイルしか表示されなくなったら Cmd+Ctrl+w

VSCode でなぜかタブバーに1ファイルしか表示されなくなるときがある。 これ。 https://stackoverflow.com/questions/48589785/vscode-showing-only-one-file-in-the-tab-bar-cant-open-multiple-files 結論としては、Command + Ctrl + w を押すと直る。(と…

プロンプトの$を終了コードによって色変更する

後輩から教わったTips。 $ echo foo ↑これの「$」の色を前のコマンドの終了コードが0以外だったら赤色表示にしたい。 $ false $ # ↑$を赤くする Mac のターミナルを使っているので .bash_profile を編集して変数 PS1 をいじる。 RETURN_CODE_DOLLAR='$([ $? …

Context と Hooks でグローバルな状態を管理する一番シンプルな方法

Redux を使わずに React だけでグローバルな状態を管理したい Context API はやや複雑なのでシンプルにしたい グローバルな状態は末端のコンポーネントでも更新できるようにしたい これらを満たすには、 Context API と Hooks API を組み合わせる。シンプル…

useEffect()の中で非同期処理を書く

React 16.8 から追加された Hooks API の useEffect() 。 Hooks API Reference – React useEffect() のコールバックに async 関数を与えたくなるけど、それは禁止されている。TypeScript で書いているとわかるが、useEffect() のコールバックに与える関数の…

VSCode で Prettier と StandardJS を併用する ESLint の設定

覚え書き。 npm init でプロジェクトを作った後、Eslint と Prettier と StandardJS を使うための依存関係をインストールする。 $ npm i --save-dev \ eslint \ prettier \ eslint-config-prettier \ eslint-config-standard \ eslint-plugin-import \ eslin…

Clean Architecture と React を組み合わせる

Clean Architecture と React を組み合わせるデモアプリが eduardomoroni/react-clean-architecture というリポジトリにあったので、コードを覗いたら勉強になった。 Clean Architecture を大づかみに理解する よく出てくる図。 私の理解している限りでは、 …

機械学習と連続体仮説。純粋数学が何に応用されるか誰にも予測できない

機械学習の分野にも「解決できるかどうか証明も反証もできない問題」が存在することが発見され、その論文が話題になっている。 機械学習によって解決できるかどうかが証明不可能な学習モデルが発見される - GIGAZINE Learnability can be undecidable | Natu…

.envファイルから環境変数をセットする alias

これだけのことなんだけど。 https://stackoverflow.com/questions/43267413/shell-how-to-set-environment-variables-from-env-file .env ファイルに書かれたすべての変数を環境変数として export するには、簡単にやるには以下のコマンドでいい。(ただし…

(翻訳)gRPC-Web is Generally Available

grpc.io の2018年10月23日のブログ記事 gRPC-Web is Generally Available の翻訳です。少し時間が経過しているので、ホットな話題ではありませんが。 gRPC-Web が Generally Available になりました 満を持して gRPC-Web の GA リリースをお知らせします。gR…

1分でプログラミングの練習ができるサイトを作った

1分でプログラミングの練習ができるサイトを作った。 30-seconds-of-code Training データはオープンソースの 30-seconds-of-code を使っていて、それぞれのスニペットを問題にした。 JavaScript なのでコードの実行はブラウザ側で行っている。サーバーサイ…

技能実習生に対する聴取票PDFをOpenCVで加工する

要約 技能実習生に対する聴取票PDFをOpenCVで画像解析して機械的に集計しようとしたが、前処理がすでに難しかった。 背景 政府が非公開としていた失踪した技能実習生に対する聴取票を野党の国会議員が書き写し、その全PDFが公開された。 失踪した技能実習生…

【Node.js】return await の紛らわしい注意点

Eslint には no-return-await というルールがある。Standard JS にも採用されているルールだ。このルールは、return await に警告を出す。 async function foo() { return await bar() } しかし、常に return await しないべきかというとそうでもなくて、必…

【翻訳】HTTP/3(daniel.haxx.seのブログ記事)

daniel.haxx.se のブログ記事 HTTP/3 の翻訳です。この記事は翻訳支援エディタ phra-phra.com を使って翻訳しました(手前味噌)。翻訳の許可は元記事のコメントで了承いただきました。 長い間 HTTP-over-QUIC と呼ばれていたプロトコルは名称が変更され、正…

Firebase + React でオンライン翻訳支援エディタ Phra Phra を作りました

作った Web サービスはこちら。 https://phra-phra.com 2018年11月現在、Phra Phra (プラ・プラ)はオープン・ベータ版です。 Phra Phra を作った動機 私は翻訳が趣味なのですが、本格的な翻訳支援ツールを使ったことはなく、テキストエディタだけを使って…

npm ci コマンド

npm

https://docs.npmjs.com/cli/ci の翻訳。 このコマンドは npm-install に似ていますが、テストプラットフォームやCIや開発環境といった自動化環境で使われることを意図しています。通常の npm install と比べると、ユーザー指向の機能をスキップして高速に動…

JSでプライベートコンストラクタを実現する小技

JavaScript は言語レベルでプライベートメソッドをサポートしていないので、プライベートコンストラクタを実現しようとしたら自分で工夫しないといけない。 通常のコンストラクタを隠蔽して、自作の static メソッドからのみインスタンス作成を許すようにす…

WebRTCの接続がSTUNかTURNかを確認する方法

https://groups.google.com/forum/#!topic/skywayjs/EBnKa28GWxQ chrome:/webrtc-internals/ を開き、 Conn-audio-1-0 のような項目を開き、 googLocalCandidateType または googRemoteCandidateType を見る

【JavaScript】JSON.stringify/parse をカスタマイズしてDate型とかを使えるようにする

JSON を拡張して Date 型とかも使えるようにしたい。 そういうライブラリはすでにある(ejson)けど、標準の JSON.stringify() の第二引数を上手に使えば、ライブラリに頼らなくても自前で簡単にできる。 JSON.stringify() - JavaScript | MDN JSON.stringif…

Travis上でSSH deployする

CI

いつもググって忘れるのでメモ。 やりたいこと Travis でデプロイスクリプトを走らせる時に、VMにSSHログインして何かする、というのをやりたい。そのために暗号化した SSH キーを git 管理下において、Travis 上でのみそれが使えるようにする。 やること 以…

【JavaScript】オブジェクトをmap()とかするにはRamdaが便利

lodash みたいな便利関数のライブラリ Ramda はちょっと変わり種だけどけっこう便利。 特徴としては、 関数型の思想に基づいている なので関数に副作用がない ほとんどの関数が配列とオブジェクトの両方に適用できる というのがある。 JavaScript は配列の操…

ChromeでアドレスバーにフォーカスするショートカットはCmd + L

Chromeでアドレスバーにフォーカスするショートカットは Cmd + L 。 っていうだけの小ネタ。 マウスを使わずにキーボードだけでChromeのアドレスバーにフォーカスできたら便利だなと思って調べたら出てきた。

【Swift】Optionalの配列からnilを取り除くにはflatMap()またはcompactMap()

mapとflatMapという便利メソッドを理解する - Qiita によると flatMap() を使うとのことだが、Swift 4 から deprecation warning になる場合があるので、その時には compactMap で置き換える。 [1, 2, 3, nil].flatMap { $0 } // → [1, 2, 3]

/etc/hostsを編集せずにlocalhostに別名をつける

やりたいこと ローカル・ループバック・アドレス(127.0.0.1)に localhost 以外のホスト名をつけたい。でも /etc/hosts は編集したくない。 方法 lvh.me というドメインがあり、開発用に 127.0.0.1 で DNS 登録されている。 lvh.meというループバックドメイ…

【iOS】frameとboundsの違いを一言で

何回聞いても忘れるので。 frame は親ビューから見た相対座標 bounds はビュー自身の座標系から見た座標 子ビューには bounds を渡す。 let child = UIView() child.frame = self.bounds

ffmpegの出力をパイプしてffplayで表示する

こんな感じで行けるようだ。 $ ffmpeg -i input.mp4 -f matroska - | ffplay -i - ffmpeg の出力を標準出力にして、 ffplay がパイプで標準入力を受け取って表示する。 参考: bash - How can I pipe output of ffmpeg to ffplay? - Super User 出力の - は …

MacのtopコマンドでCPU使用率順に表示する

知らなかった。Linux の top コマンドと違うなあくらいしか思っていなかった。 MacOSのtopコマンドでCPU使用順にソート - ex1-lab $ top -o cpu こうしたら確かに CPU 使用率順になった。

とにかく機械学習を始める(kaggle練習問題Titanic)

とにかく機械学習を練習してみようと思って、『Python 機械学習プログラミング』を読みながら、見よう見まねで kaggle の練習問題 Titanic: Machine Learning from Disaster | Kaggle をやったので記録を残す。 [第2版]Python 機械学習プログラミング 達人デ…

【React】recomposeモジュールをTypeScriptで使う

HOC(高階関数)は便利なんだけど、型と一緒に使おうとするとどうもうまくいかなくて、試行錯誤の結果やっと最小構成の例が作れたので書いておく。まあジェネリクスの練習ですね。これでそこそこの規模のものを作ろうとしたら消耗する予感しかしない。 Examp…

Server Side TypeScriptでdecoratorを使い倒す

サーバーサイドを TypeScript で書くなら decorator を活用するとシンプルに書ける。 decorator はむやみに使うと可読性・保守性が下がるけど、汎用性の高いケースに活用すればビジネスロジックに集中した快適コーディングができる、と思う。 decorator ベー…