Frontend
背景 ESLint v9からflat configがデフォルトとなり、将来のリリースで古いconfigの書き方は廃止される予定なのは把握していた。その後本格的に調べないままになっていたが、そろそろまずいかもなと思って概要だけでも調査したメモ。 先に簡単なまとめ 次のメ…
はじめに Zod というバリデーションライブラリが非常に流行っているようなので、素振りした。 www.totaltypescript.com このチュートリアルはたしか Twitter で流れてきて知ったのだが 今見ると Zod の公式ドキュメントからも Resources として紹介されてい…
こちらの記事を読んで。 以前から https://reading-list.zaki-yama.dev/ という自分のサイトに OG 画像を設定したいな〜と思っていたところに @vercel/og なるライブラリが登場したので試してみた。 ※ なお、今までずっと「OGP 画像」だと思ってたんだけど、…
少し前に話題になっていた以下のドキュメントをようやく読んだ。 beta.reactjs.org 記事を書いた時点でドキュメントはまだベータという位置づけ。 長いので先に目次を。 ⭐ は中でも特にへえ〜って思ったやつ。 はコメント。 How to remove unnecessary Effec…
社内の10分勉強会駆動でようやく Storybook の Interaction Test についてまとめることができたので、メモ。 Interaction Test とはなにか Storybook 上でユーザーのインタラクション（ボタンクリックやフォーム入力など）を再現できる機能。 上の GIF のよ…
先週の This Week In React に流れてきたやつ。 TypeScript Cheat Sheets by @orta4 nicely designed and official cheatsheets now online:- Types- Interfaces- Classes- Control Flow Analysishttps://t.co/fnqAcuU8c8 pic.twitter.com/D7BlZsyvjf— Seba…
作った。 最低限の機能しかないしコードも汚いところいっぱいあるけどとりあえず公開することにした。 ここで試せます。 pixela-api-playground.zaki-yama.dev ソースコードはこちらに。 モチベーション ここのところ仕事では SDK など GUI を持たないライブ…
Rust を勉強したらやってみたいなと思ってた記事。 記事について タイトルの通り、簡単なブラウザのレンダリングエンジンを Rust で作る、という趣旨の記事。 著者は Servo という Mozilla が開発しているレンダリングエンジンのチームに所属（していたらし…
@octokit/rest.js は GitHub 社が提供する公式の REST API クライアントライブラリです。 以前この@octokit/rest.js のアーキテクチャがどうなっているか調査した 際、テストに @octokit/fixtures-server という別のパッケージが使われていることまではわか…
AWSによるクラウド入門 少し前に話題になっていた東京大学の講義資料をやってみたので、内容、感想などメモ。 講義で使用するソースコードはすべて Python で書かれていますが、自分が実際に使うとしたら TypeScript で書くだろうなと思ったので TypeScript …
良いREST APIクライアントの設計というものに関心があり、GitHub社の公式REST APIクライアントである @octokit/rest のコードを読んでみたメモです。 (ドキュメントは https://octokit.github.io/rest.js/) 知りたかったこと 漠然と、こういう疑問に対してな…
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJ…
メモ。 こんな感じで、ある配列として定義されている値に対し、「その値のいずれか」を意図した String Literal Types を作りたい。 const size = ['small', 'medium', 'large']; type Size = 'small' | 'medium' | 'large'; でも、配列と型定義とで値を二度…
メモ。 ReactNode ReactElement ReactChild の関係性、何回か調べている気がするので整理しておく。 @types/react の型定義 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts を参照した。 図で、ReactNodeArray → A…
npmでインストールしたパッケージが期待通りに動かず内部の動作を確認したい、となったときの話。 これまでは該当のスクリプトに console.log() とか直接書いてデバッグしてたんですが、あまりにも効率が悪いのでもうちょっと良いやり方を見つけたい。 VSCod…
TypeScript + Reactでコンポーネントを書くとき、Context を使っているコンポーネントに対してどう型を書くのが正解か迷ったので、調べたことをメモしておきます。 調べるきっかけとなったコンポーネントは React 16.3 以前の Legacy Context を使った書き方…
を作りました。 https://chrome.google.com/webstore/detail/amazon-to-kintone/leipfhjipgnfbdjkbinlmlmfdhgcakki からインストールできます。 アイコン未登録だったりコードがぐちゃぐちゃだったりしますが、とりあえず自分が使うための要件は満たせたので…
メモ。 TypeScript を使ったプロジェクトに Jest を導入する時に必要なパッケージや設定、とくに ts-jest と @types/jest が必ず必要なのかどうかがよくわかってなかったので調べた。 先にまとめ TypeScript -> JavaScript のコンパイルを TypeScript 自身で…
今さらだけどメモ。 ESLint を使っているプロジェクトに Prettier を導入するときの設定方法。 結論としては、公式のこのページに全部まとまってた。 なお、 prettier-eslint というのもあるようだが調べていない。 先にまとめ eslint-plugin-prettier: ESLi…
Web Components を学ぶべく、昨年の 技術書典5 で販売されていた 1000ch さんの本を買って読んでみました。 2時間程度で読み切れるので、Web Components 全く知らない状態から概要を理解するのにはとても良い本だと思います。 自分は Web Components がどう…
業務で Closure Library を使うので読んだ。 正確には、最後まで写経しながら読み進めようと思ったけど第5章あたりで挫折して、第6章以降はさっと目を通す程度になってしまった。 Google API Expertが解説する Closure Libraryプログラミングガイド作者:伊藤…
Google Closure ○○ シリーズが多くてわからん、となったのでメモ。 主に Closure Compiler と Closure Library を中心に。 総称として Closure Tools と呼ぶらしいです。ここにまとまってます。 またソースコードはすべて GitHub で公開されている模様。 htt…
2018-04-01のJS: TypeScript 2.8、React 16.3.0、TensorFlow.js - JSer.info を読んで。 React 16.3.0 から StrictMode コンポーネントというものが追加されたらしい。 公式ドキュメントを読んでみます。 StrictMode とは StrictMode はアプリの潜在的な問題…
メモ。 Prettier という JavaScript のフォーマッターをファイル保存時に自動的に実行する、というのを Vim でやりたい。 特に自分は ESLint や Flow のチェックに ALE というプラグインを使っているため （参考：VimでESLintとFlowを使うためにNeomakeからA…
Chatter Desktop という Electron アプリ を作っていて真っ先にハマったところのメモ。 Lightning Design System という CSS フレームワークを入れようとしたところ、以下のエラーとなった。 $ git clone --depth=1 https://github.com/chentsulin/electron-…
メモ。 ちょっと前から Lightning Design System（LDS）の React 実装が公式から出てます。 Lightning Design System for React で、ようやく入れてみようとドキュメントを頼りにやってみたところ色々手こずったので、手順をまとめておきます。 はじめに des…
はじめに ES2015 の変換に babel-preset-es2015 を使っているプロジェクトで、npm install 時に npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to updat…
メモ。 これまでは Homebrew でインストールした Node を使っていたが、バージョンを上げたくて複数バージョン管理できるツールを取り入れることにした。 Node のバージョン管理ツールはちょっと調べた限り nodebrew n ndenv あたりがあったが、元々 Python …
ちょいメモ。CDN で配信されているライブラリ限定。 moment.js とか挙動をちょっと試したいなーと思ったときに環境作るの面倒だったんですが、こちらの記事を読んでいて。 Chrome 開発者ツールのコンソールで以下を実行すると、3rd party ライブラリ（この場…
はじめに こちらのスライドを見て。 Webpackのビルド時間を1/3にした話 #gotandajs // Speaker Deck 紹介されている thread-loader も cache-loader も知らなかった！ので、使い方やどういった効果があるのか自分でも調べてみます。 なお、スライド中にもあ…
