Frontend
はじめに 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 のよ…
作った。 最低限の機能しかないしコードも汚いところいっぱいあるけどとりあえず公開することにした。 ここで試せます。 pixela-api-playground.zaki-yama.dev ソースコードはこちらに。 モチベーション ここのところ仕事では SDK など GUI を持たないライブ…
Rust を勉強したらやってみたいなと思ってた記事。 記事について タイトルの通り、簡単なブラウザのレンダリングエンジンを Rust で作る、という趣旨の記事。 著者は Servo という Mozilla が開発しているレンダリングエンジンのチームに所属（していたらし…
@octokit/rest.js は GitHub 社が提供する公式の REST API クライアントライブラリです。 以前この@octokit/rest.js のアーキテクチャがどうなっているか調査した 際、テストに @octokit/fixtures-server という別のパッケージが使われていることまではわか…
良いREST APIクライアントの設計というものに関心があり、GitHub社の公式REST APIクライアントである @octokit/rest のコードを読んでみたメモです。 (ドキュメントは https://octokit.github.io/rest.js/) 知りたかったこと 漠然と、こういう疑問に対してな…
はじめに npmパッケージを開発するとき、パッケージ利用者の実行環境に合わせて適切なモジュール形式のファイルをパッケージに含め、提供する必要があります。 具体的には、たとえば以下のようなバリエーションが考えられます。 Node.js環境であれば CommonJ…
メモ。 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 がどう…
メモ。 ちょっと前から 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…
ちょいメモ。CDN で配信されているライブラリ限定。 moment.js とか挙動をちょっと試したいなーと思ったときに環境作るの面倒だったんですが、こちらの記事を読んでいて。 Chrome 開発者ツールのコンソールで以下を実行すると、3rd party ライブラリ（この場…
はじめに React に限らず、JavaScript を使ってると本番環境用のビルド（以後、production build）として圧縮や難読化を行う必要があります。 webpack にはそのためのプラグインとして UglifyJsPlugin があるのは知っていましたが、 単純にこのプラグインを…
こちらのイベントに行ってきました。 AMA（休憩時間中の質問コーナー）という取り組みが非常に良かったです。 以下、話を聞きながら手元でメモしてた内容。 Web over ServiceWorker by @jxck__ Capability against Native/Low API Installable Performance P…
メモ。 webpack 2 正式リリース（バージョンは 2.2）だとか Tree Shaking という機能がいいらしい とかは目にしていたけど 結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの？というのがよくわからなかったので調べてみた。…
ESLint はあまり深く考えず eslint-config-airbnb を導入していて、そんなに問題はないんだけども たまにこちらが期待したルールが無効になってたり、逆にそんなに守らなくてもいいと思われるルールが有効になってたりして、ふと 「あれ、xxx っていうルール…
メモ。 なんの話か React でフォーム項目を簡潔に書く方法がわからない 管理されたコンポーネントで書こうとすると、項目の数だけ state と対応するイベントハンドラが必要になる 親に渡す必要がある、とかだとさらにしんどい // 基本形 class MyFormCmp ext…
タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際に…
$ npm install --save react などのコマンドでパッケージをインストールすると、package.json にはインストールした（その時点での最新）バージョンが記載されますが そのとき "dependencies": { "react": "^15.3.2" } というように、バージョン番号の前に ^…
はじめに web サイト／アプリケーションで画像のアップロード機能などを実装する場合、 最近のスマホのカメラで撮影した画像はサイズが数 MB にも及ぶので、あらかじめクライアント側で送信可能なサイズまで縮小する必要があります。 今回はそのような画像の…
最近になって JavaScript を勉強中です。 ES2015 と React にもちょっとずつ慣れてきましたが、テストについては Karma とか mocha とか名前は聞くけど何が何なのかよくわかってなかったので、軽く整理してみます。 JavaScript テストツールの大まかなカテゴ…
行ってきました。
ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要が…
はじめに （2017/08/10追記） この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.…
（2016/10/24追記） しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。 （追記ここまで） はじめに vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じる…
（2017/08/28追記） この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github…
タイトルの通り、こちらの公式チュートリアルをES6でやってみました。 https://facebook.github.io/react/docs/tutorial-ja-JP.html また、チュートリアルでは React や Babel などを CDN で読み込んでいるためビルドは不要になってますが、 実際に開発する…
