年内に間に合わなかった… 2021年に主にお世話になった言語・ライブラリ TypeScript React chakra-ui dnd-kit Node Vite esbuild Docker(=> lima) とりあえず挙げてみたが、なにか特定のライブラリを使う、という感じではなく、レイヤーが一つ下にいった感じがあり、実際にはなんかもうちょっと下のミドルウェアみたいなものを作っていることが多かった気がする。ASTをいじるコンパイラ周辺ツールを作っていることが多かった。 サクッとなにか作る場合、 React + TypeScript + Vite(esbuild) が鉄板という感じで、 esbuild が異次元に速すぎて、typescript の変換もバンドルも、もはやこれ一本でいい気がしてる。 microsoft/typescript はもはや言語仕様の定義と型検査がメインであって、コン

今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ

prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5

ちょっとはてなブログを放っておいたら90日以上進捗がない人の広告が出るようになってしまい、最近やり続けたことといえばリングフィットなので、その話。 (ちなみに、最近このブログの投稿数が減っていたのは、技術記事を別のブログ で書くようにしたからです) クリア自体は 62 日目、今は 101 日目で二週目の後半。体重の変化はタイトルのとおりです。 ビフォアアフター before 去年の11月頃。似た構図の写真がない。腹が出てるのを隠している after さっき撮ったやつ 身長169cm なので 62.8kg が標準体重です。63kgなのでほぼそれぐらい。14年前の高校生以来の水準です。 体重がただ減っただけではなく、体全体がかなり筋肉質になっています。 ダイエットの動機 突然病気の話なのですが、去年の 12 月頃から 1 月にかけて長期間、体温が37.5度から下がらず、病院にいったところウイル

2020年になり、先の10年のゲームを振り返るのが話題になってたので、自分も書く。 RPGが多く、洋ゲー寄り。あくまで自分がこう思っているというだけで、なにかの総意というわけではないのに注意。 jp.ign.com anond.hatelabo.jp 追記: 最初は 8本だったが、 Bloodborne を追加して 9本になった ウィッチャー 3 ワイルドハント store.steampowered.com Bethesda のゼロ年代の TES IV: Oblivion と Fallout3 という２つの傑作が、テン年代のオープンワールドを方向性を決定づけた。テン年代のオープンワールドからベストを一本選ぶなら、その続編の TES V: Skyrim も Fallout4 も、そしてもちろん任天堂のゼルダの伝説:BotW も素晴らしかったが、自分はウィッチャー 3 を選ぶ。 ウィッチャー

toyokeizai.net satoru-takeuchi.hatenablog.com 全然レイヤーが違うが、自分が何に悩んで、どういう風に理解したか、思い出しながら書き出してみる。 プログラミング歴 20歳からなので、現時点で10年ぐらいだが、中学生の時ちょっと触ったことがあった。 14 歳: 病気で入院したときに暇すぎて、2 週間ほど VBA を触った 大学 1 年: 大学の選択科目で Java, 夏休みに Python と Ubuntu の独習 大学 3 年: Python で自然言語処理のバイト 大学 4 年: Android アプリを作るバイト、就活ポートフォリオとして node/Websocket で MMO 一社目: Unity, ActionScript, Haskell, JavaScript 以降~: JavaScript/CoffeeScript/TypeScri

年末年始の時間を使って実験していたこと。 tl;dr vscode をカスタマイズして静的サイトとしてデプロイしたい。やった。公式にない永続化層も作った。 できた。ここで試せる。 https://mizchi-vscode-playground.netlify.com/ やりたかったこと フロントエンドにまつわるものはフロントエンドで作業を完結したい。なので vscode がブラウザで動いてほしい。 vscode をカスタマイズしたものを各自が自由にデプロイできると、様々な可能性がある。インストールの手間を省いたプログラミング教育用のツールだったり、専用の開発環境だったり、その他諸々。 問題 この用途で期待していた vscode online が使いづらかった。MS のアカウントを要求されたり、Docker コンテナの Enviroment を作ったりする必要があり、面倒だった。そもそもリ

なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript + React が常に正解というわけではないですが、このスタックはかなり強力だという手応えがあります。 このスタックは得意のウェブフロントエンドは勿論、それ以外もとりあえず 80 点ぐらいの品質でプロトタイピングできる、というようなエコシステムになってきたような肌感があります。 モダンフロントエンドだと TypeScript と Webpack は採用しているのを前提として、本記事では React を軸にその技術を活かすために、次の 6 個の技術を紹介

西村賢さんのこの記事について coralcap.co 68件のコメント https://t.co/jGBUcpTCoK “プレーンテキスト Markdown 時代の終焉 - portal shit!” https://t.co/1Q831CDuXY— 限界シェアハウスみたいなTL (@mizchi) 2019年11月18日 ↑ の記事や、あとは最近の slack の wysiwyg 化について色々思うところあった。 wysiwyg は人類の技術の進歩なのかコンピュータへの適応の失敗なのかは議論の余地がある— 限界シェアハウスみたいなTL (@mizchi) 2019年11月19日 編集してるものと、出力されるものが違う、という発想、エンジニアの発想であるのは間違いなく、markdown を使うのはプログラミング的な思考や訓練が前提にあるのはそうで、人間を訓練するか、内部状態が汚れるのを許容

ブラウザ上でローカルファイルの読み書きができる Native File System API が ChromeCanary で実装された。 前々から欲しかった機能なので、自分が作ってる markdown preview ツールに実装してみた。 Intent to ship https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/noan0cgEBGQ/t8DuK8_hDwAJ 仕様 http://wicg.github.io/native-file-system/ 動かすとこんな感じ https://mdbuf.netlify.com/ で Meta+O/Meta+S のキーバインドを振ってる。 有効化 https://www.google.com/intl/ja/chrome/canary/ をダウンロード chrom

この記事読んで自分のリモートワーク経験からどうやるのが今一番良いだろうか、という話をずっと考えていたので、書き出してみました。 リモートワークをする人必読。組織パフォーマンスを左右する「デジタル心理的安全」とは？ | 未来を変えるプロジェクト by iX（アイエックス） 自分自身はフルタイムリモートとフリーランスでのリモートの2つの経験があります。 次の会社が申請すればリモート可というスタイルなのですが、自分がリモートワークする場合、働く環境に期待しているのはこういうことだ、というのを事前に宣言しておく目的もあります。 フルリモートではなく、部分的なリモートを想定しています。 リモートワークに期待すること リモートワークは、基本的には「うまく運用すれば効率が下がらない」というものです。リモートワークで効率が上がることもありますが、基本的にはある種の福利厚生、雇用競争力のためと割り切ったほう

2 年ほど走ってみました。 Qiita の Increments を退職します - mizchi's blog からの 転職活動 https://gist.github.com/mizchi/4e097923bb92399d03ced9da44f15cfa の結果 この記事は、自分の体験を書くことで、どういう人がフリーランスに向いてるか、というのをわかるように書いたつもりです。自分に近い属性ということで、ある程度プログラマとして経験を積んだ人向けです。 フリーランス辞める理由 フリーランスが嫌になったわけではないです。機会があればまたやりたいとも思っています。今回はフリーランスを続けるより良い選択肢があった、というだけの話です。 個人事業主を 2 年やって、消費税の徴収方式が変わるタイミングがあり、法人化してフリーランスの働き方を続けるか、個人事業主をやめるか、という 2 つの選択肢があり

追記: 前提部分 開発環境を docker-compose で抽象することが最近のベストプラクティスだとされているが、フロントエンドをコンテナに突っ込むと無視できないIOボトルネックが発生する。 とくにwebpackのファイル監視からのビルドで発生する高頻度のIO処理を捌くために、フロントエンドだけはホスト環境に移したほうがいい、という主張。 これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関与する部分以

最近のフロントエンドに関するお気持ち。正直まとまってはない。 最近、こんな感じのツイートや記事が増えた。 web 技術をキャリアの中心にしない シングルページアプリケーション (以下SPA) の台頭により、私の観測範囲ではモダンな Web サイトは SPA で作られるようになった。サーバーサイドは JSON を返す API サーバーとなり、DB やバックエンドシステムのプロキシのような存在になりつつある。 私はサーバーサイドエンジニアとしてキャリアを積んできた。SPA が流行りだした頃、いずれサーバーサイドエンジニアは不要になって自分のキャリアを考え直さなくてはいけない時期がくるのではないかと戦々恐々としていた。 自分も元々、SPA を他サイトとの「差別化技術」と定義していた。ブラウザのタブページのライフサイクルにおいて、初期化プロセスを一回にまとめてシームレスな遷移を実現する技術。たとえ

漫画 ドロヘドロ（１） (IKKI　COMIX) 作者: 林田球出版社/メーカー: 小学館発売日: 2018/11/12メディア: Kindle版この商品を含むブログを見る ずっとよみたかったが kindle 版が発売されたのと、また完結したということで アオアシ 1 (ビッグコミックス) 作者: 小林有吾,上野直彦出版社/メーカー: 小学館発売日: 2015/04/30メディア: コミックこの商品を含むブログ (3件) を見る サッカーユースの話 イサック（１） (アフタヌーンコミックス) 作者: 真刈信二,ＤＯＵＢＬＥーＳ出版社/メーカー: 講談社発売日: 2017/07/21メディア: Kindle版この商品を含むブログ (2件) を見る 江戸時代、日本の傭兵がヨーロッパに渡って、30年戦争の中で仇(？)を追う話。 デッドデッドデーモンズデデデデデストラクション (1) (ビッグコミ

12月はなんとなく新しいことをやりたくなる。ということで、elm をやってみた。 大昔に触った気がするけど、文法が Haskell っぽいこと以外、何も覚えてなかった。というか当時触った signal とかがなくなってたので別物になってた。 作ったもの 勉強がてら作った、球拾いゲームみたいな何か コードはここ https://github.com/mizchi-sandbox/elm-playground elm-platform, svg の扱い, キー入力、乱数の副作用の分離などが学べた。乱数は面倒くさくなったので外部(JS)からSeed与える方式にして、気持ち純粋になった。 (自分の)環境構築 Parcel を使った brew install elm # OSに応じて mkdir elm-playground cd elm-playground yarn init -y yarn a

なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in

この週末で機械学習を勉強した結果として、JavaScript エンジニア向けにまとめてみる。 自分が数式見て何もわからん…となったので、できるだけ動いてるコードで説明する。動いてるコードみてから数式見たら、多少気持ちがわかる感じになった。 最初に断っておくが、特にJSを使いたい理由がないなら python で keras 使ったほうがいいと思う。tensorflow.js が生きる部分もあるが、学習段階ではそこまで関係ないため。 追記: 最初 0 < a < 1.0 0 < b < 1.0 で三角関数 Math.sin をとっていて、これだと三角関数の一部の値しか使っておらず、線形に近似できそうな値を吐いていたので、次のように変更して、データも更新した。 // 修正前 const fn = (a, b) => { const n = Math.cos(a) * b + Math.sin(b

React Hooks は Stateless Functional Component でも setState 的な状態操作や componentDidMount のような操作を可能にするための仕様提案です。 既に開発ブランチに入っていますが、 現時点で公式に採用されたものではないです。リリース時にはAPIが変わる可能性があります。 React のメイン開発者の一人である sebmarkbage の出してる RFC https://github.com/reactjs/rfcs/pull/68 試してみる react@16.7.0-alpha.0 に既に実装されており、公式のブログでも解説が出ています。 https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hooks-reference.html 自分は以下