react-redux と useContext を組み合わせて使う実験

react-redux v6 で中身が新しい方の Context API になったと聞いたので、コード読んでみたらContext自体が外部に export されていた。じゃあ hooks の useContext と組み合わせて使えるじゃん、と思って実験してみた。 useContext で connect 相当の処理を置…

Edge 終了に寄せて

初報を聞いたとき、描画系だけ blink に入れ替えて処理系は V8 使わず ChakraCore などに入れ替えるのかな、と思っていたが、どうも V8、というか chromium 一式を使うらしい。 正直に言って、Edge が死ぬことに、そこまで強く思うところはない。Edge は内部…

Webpack の考え方について

なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理す…

WebComponents: ReactNative.View のような CSS の既定値を持つだけの x-view を作ってみる

ReactNative 触った事ある人なら、ReactNative.View の iOS の UIView や Android View みたいな一貫性のある基底クラスが羨ましい人も多いと思う。 今の Webでは実質 div がそれを担っているわけだが、div になんでも押し付けるのはよくないという意見もわ…

minfront: フロントエンド実験用のSPAボイラープレート

なんでそんな手が速いのか聞かれたので、最近使ってるSPAボイラープレートを紹介しておきます。 github.com $ git clone git@github.com:mizchi-sandbox/minfront.git --depth 1 myspa $ cd myspa $ yarn install $ yarn dev # Start app server 終わり。 sr…

redux-workerized で Redux と Vue を接続する

mizchi/redux-workerized 作った。 yarn add redux-workerize で入る。 元々は react-hooks で redux へのアダプタを書いていただけのライブラリだったが… TypeScript フレンドリーなAPIにする ReactRedux.Provider の異なるAPI表現だけじゃ面白くない じゃ…

React Hooks をどう使っていくか

大きく、末端コンポーネントと全体アーキテクチャの視点がある。 末端コンポーネントでの Hooks ここはあまり議論の余地なく、setState で local state を持っているものや、 componentDidMount していたものを置き換えることが出来ると思う。 FC を class …

「この〜を導入すると、なんとこうなりました!どうです?わかりやすいと思えませんか?」

主にUI設計やプログラミングのAPI設計について、「わかりやすい」というのは主観的で合意が取れないのでクソという話。 定量的な指標が示されてない そもそも趣味が合わない場合はそこで終わり 〜の本来意図された機能が隠れてしまっている ↑によって隠れて…

JavaScript エンジニア向け: 知識ゼロから tensorflow.js で機械学習入門

この週末で機械学習を勉強した結果として、JavaScript エンジニア向けにまとめてみる。 自分が数式見て何もわからん…となったので、できるだけ動いてるコードで説明する。動いてるコードみてから数式見たら、多少気持ちがわかる感じになった。 最初に断って…

keras 使って DQN で迷路を解いてみた

世界観をつかめるぐらいには機械学習やっておきたいと思い、とりあえず何かしらのお題がないと興味が続かなさそうなので、二次元の盤面上で何かしらの行動をする、ローグライクのモンスターのエージェントを作るのを目標にしようと思う。自分がゲーム作ると…

React Hooks での状態管理と副作用の表現

React Hooks は Stateless Functional Component でも setState 的な状態操作や componentDidMount のような操作を可能にするための仕様提案です。 既に開発ブランチに入っていますが、 現時点で公式に採用されたものではないです。リリース時にはAPIが変わ…

Mac で pyenv / pipenv の環境を作って keras 動かすところまでのメモ

tensorflow.js で遊んでたら keras でモデルを作って import してみましょうみたいな章に差し掛かったので、python の環境構築した。 TensorFlow.js tutorials - import-keras 環境構築 keras ついでに pyre を試してみたいので、 pyre で keras が書ける、…

MarkdownBuffer の実行時間の計測とパフォーマンスチューニングの余地

昨日作った mdbuf が 100000文字を超える場合、遅いときいたので、色々試してみた。 手元で18万のテキストを用意して編集してみた。それなりに重いが、それでもIMEを完全にブロックしてしまうほどでもない。とはいえイライラはする。 innerHTML で挿入にかか…

大量のテキストを食っても速い Markdown Editor 作った

もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも…

この DOM がすごい2018: worker-dom

おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM …

WebAnimation の為のタイムラインエディタを試作してみた

ペルソナ5みたいな UI 作りたいみたいな話あって、メニュー画面の動きだけでも作れないか、と主要な動線だけ雑にReactでスケッチしてみたが、早々に限界が訪れた。 理由はいろいろあるが、(無限に気合でやれば終わるが) (そもそもどこにゴールに設定するかお…

二世の呪い

僕はエンジニアで、このブログで書くことは、そういうテーマを期待されていることを知っている。それ以外はノイズだから、あんまりやらないでほしい、とも。 でもこれは自分のアイデンティティの根幹に関わることで、そういう前提で、一部で話題になってたこ…

Redux 再考

今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、と…

TypeScript入門以前ガイド

某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が…

off-the-main-thread の時代

off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照…

tensorflow.js の mnist (数値の画像分類) のコードを読んで勉強した

tfjs の練習がてら、ちょっとやってみた。大学生の頃PRMLを二章ぐらいまで読んでギブアップした程度の知識なので、ほぼ無知。 js.tensorflow.org 間違ってたら教えてほしい…というか特に予習とかせず生半可な知識でやったのでたぶん間違ってる。 入力と出力 …

SWSRSSR という1フレーム技

Service Worker Side React Server Side Rendering ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech(テック) ってスライドの中で、React の SSR を Service Worker の中でやれば、SEO は死んじゃうけど First Meaningful Paint …

WebRTC DataChannel で 1:1 接続をやってみた

まだプロトコルを正しく理解しておらず、とにかく動くところまで。そのメモ。 こんな感じ コード GitHub - mizchi-sandbox/hello-data-channel simple-peer と react で雑に一筆書きした。simple-peer は webtorrent などでも使われていて、筋が良さそう。 n…

WEB+DB PRESS Vol.106 で仮想DOMアルゴリズムについて書かせていただきました

特集書かせていただきました WEB+DB PRESS Vol.106作者: 成田元輝,杉浦颯太,小和瀬塁,山中大輔,末田正樹,藤野真聡,竹馬光太郎,桑原仁雄,倉長拓海,牧大輔,秋山卓巳,前田雅央,星北斗,末永恭正,久保田祐史,池田拓司,はまちや2,竹原,WEB+DB PRESS編集部出版社/メ…

tweetdeck のタイムライン表示を user css で夜フクロウ風にした

usersteam 止まって、tweetdeck に移ったが、あまりにTLの一覧性が悪すぎたのでやった こんな感じ 昔使ってた stylish が問題起こしてストアから削除されてたので、 stylebot を使った。 雑なCSS .column:nth-child(1) { width: 600px; } .js-stream-item-co…

手足がもがれる感覚

最近乗り換えたもの Twitter: 夜フクロウ => Tweetdeck ブラウザ: Firefox(Vimperator) => Vivaldi RSSリーダー: Livedoor Reader => Inoreader ただ、これらにかなり不満がある。 情報には上流がある。情報の上流は、一次情報が乱雑に転がってる未整備の荒…

Just Monika

前評判はチラチラ聞いていたが、ドキドキ文芸部やってみた。 …すごかった store.steampowered.com 無料。だが舐めてはいけない。これはギャルゲの皮を被った、それ以上の何か。 公式日本語版はないが、有志の日本語翻訳の出来が良いので、それで。 Steamのゲ…

オブジェクト指向の呪いと、その避け方

このテーマで書く前に、まず、最初に自分に多少の偏りがあることを認めておかなくてはなりません。 オブジェクト指向より、関数指向寄り オブジェクト指向のアプローチは有用だが、ただしそれを実現する手段はクラスと継承ではない。 階層化されたツリー構造…

IPFSについて勉強した

ipfs.io IPFS とは / BitTorrent とどう違うのか P2P の分散ファイルシステム BitTorrentがトラッカーファイルと呼ばれる単位でファイル共有を行うのに対し、IPFS は内部が別のオブジェクトを指し示すポインタ(ディレクトリ相当) or またはバイナリ(ファイル…

オクトパストラベラー

体験版で感じたとおり、河津ゲーの同人ゲームという印象だった。たぶん今の技術でロマサガ3完全版を作ろうとしたらこんなゲームになるんだろうという感じ。 毒にも薬にもならないシナリオを、やたらウェットなカット演出で見せられる。仲間4人目ぐらいから全…