valid,invalid

関心を持てる事柄について

JavaScript

個人サイトのビルドツールをwebpackからViteに移行した

個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。 まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。 実質ただのリンク集 理由 State of JS 2021のビル…

Node.js/React周辺プロジェクトステータス (2021年12月時点)

個人的な観測範囲にある Node.js / React 関連のプロジェクトなどについて 2021 年 12 月時点の情報メモ。 ここ 2 年ぐらいコンシューマー向けの SPA や Node.js アプリケーションを書いておらず、react-admin で作った管理画面*1を書いているぐらいなのだが…

MutationObserver

JavaScriptでDOMを監視して何かしらのコールバックを実行する際にMutationObserverが使える。 仮想DOM全盛時代でなくとも、jQueryでもvanilla JSでもイベントハンドラを自由に設定できるようなWebフロントエンドの世界で使い道あるか?と思っていたが、利用…

VSCodeのimport-cost extensionでimportするライブラリのサイズをチェックする

import / require文で読み込む3rd party libraryのコストを表示してくれるVSCode extension。3年も前からあったのにまったく知らなかったな〜 marketplace.visualstudio.com 完璧な分析ツールを目指しているわけではなく「開発中に明らかな問題に気づくため…

React Adminで開発しているSPAのReactを17.0へupgradeした

業務で扱っているSPAのReactバージョンを17.0にアップグレードした。 reactjs.org 対象のSPAの開発が始まったのが2020年内で元々16.13からスタートしていることもあり、production codeに関するブロッカーは1つもなかった。 ちなみにReact Admin 3.10.4を使…

react-use-kana v2.2.0 ユーザーの入力文字列からひらがなを抽出する

react-use-kanaという、フォームでのよみがな入力支援のための npm package の内部実装をガッと書き換え、入力文字列からよみがなを抽出する処理を自前で書いてみた。 背景 同 package を作って公開したことは以前にも記事に書いた。 ReactのContextとHooks…

#jsconfjp 2019 で Migration from React Native to PWA という発表をした

JSConf2019 記念すべき第一回の*1のJSConf Japanで『Migration from React Native to PWA』というタイトルの発表をしてきた。 登壇に関して 資料 発表では触れなかった余談は泣く泣く削ったトピックなので参照されると嬉しい。 今回は発表資料を作ったり練習…

ReactのuseStateで日本語のふりがな入力を支援するhook書いた

半年以上前にReactのContextとHooksで日本語のふりがな入力を支援するコンポーネント書いた - valid,invalidという記事を書いたが、このときは何もわかってなかったということがわかった。 長々とContext, Provider, useReducerあたりのことを書きましたが、…

GatsbyjsがContributorにグッズを配布したりする取り組み

Static site generator の GatsbyJS が掲題の取り組みを始めたようす。 朝起きたらだいぶ前にめっちゃ小さくコントリビュートしたときの pull request にコメントが付いていた。 Gatsby community の OSS に貢献した人への感謝の気持ちとして Gatsby Swag St…

#roppongijs で『続・貢献できるOSSの見つけ方 -How to find "Good First Issues" part 2-』というLTをしてきました

第5回 Roppongi.js に参加し、『続・貢献できるOSSの見つけ方 -How to find "Good First Issues"-』というタイトルでLTをしました。 リンク付きの原稿はこちら https://ohbarye.github.io/slides/2018/roppongi.js-5/ 紹介したアプリケーション github.com h…

必要なときだけ Polyfill.io のCDN から polyfill を読み込むようにする

以下のような script tag を HTML の最初の script tag として埋め込む。 <script> ( function(doc){ if([].find&&window.fetch)return; var firstScript = doc.getElementsByTagName('script')[0]; var scriptToInsert = doc.createElement('script'); scriptToInse…

最近の構成 (backend: Rails + PostgreSQL, frontend: React + TypeScript) を docker-compose で立ち上げる boilerplate 作った

TL;DR 現プロジェクトと近似した構成で素振り出来るよう Rails + PostgreSQL による backend と React + TypeScript による frontend を docker-compose で立ち上げる boilerplate 作ったhttps://t.co/iCqMc2TWrD— 広島の粗大ゴミ (@ohbarye) 2018年7月7日 g…

Roppongi.jsで『貢献できるOSSの見つけ方 -How to find "Good First Issues"-』についてLTをしてきました

第4回 Roppongi.js に参加し、『貢献できるOSSの見つけ方 -How to find "Good First Issues"-』というタイトルでLTをしました。 リンク付きの原稿はこちら https://ohbarye.github.io/slides/2018/roppongi.js-4/ 紹介したスクリプト github.com Good first …

Roppongi.jsで『エンジニアも気にしたい色のアクセシビリティ』についてLTをしてきました

第3回 Roppongi.js に参加し、『エンジニアも気にしたい色のアクセシビリティ』というタイトルでLTをしました。 スライドのタイトルを575にしたかったものの「エンジニア アクセシビリティ 気にしよう」のような駄作しか生まれなかったために断念しました。 …

Generative Art を始めて7日間、作品を毎日公開した記録

ゴールデンウィーク(以下、GW)の途中で以下の記事を読んで Generative Art (ジェネレーティブアート - Wikipedia)*1 なるものを知り、試しに触ってみたら面白かった。 ジェネラティブアートを始めよう|なめらかサンショウウオ|note Generative Art with …

GitHub GraphQL API v4 を JavaScript から利用する

TL;DR 開発している Slack bot で発生する N+1 問題を解消するために GitHub GraphQL API v4 を利用した クライアントサイド(今回は JavaScript)側から使ってみただけだが、かなり開発体験が良かった 背景: review-waiting-list-bot について review-waiti…

babel-eslint を使って非標準仕様でも lint できるようにする

Parsing error on ESLint review-waiting-list-bot の実装中に以下のようなオブジェクトの分割代入するコードを書いたら eslint で parse error が起きるようになってしまった。 const { authors, ...conditions } = { authors: [], owner: '', repo: '' } $…

package.json の dependencies を JavaScript のコード内で参照する

package.json に書かれた、依存しているライブラリの名前 (dependencies) を JavaScript のコード内で参照するやり方。 import pkg from './package.json'; const dependencies = Object.keys(pkg.dependencies) const devDependencies = Object.keys(pkg.de…

スプレッド構文と Object.assign の違い

JavaScript の Object の spread operator (スプレッド構文) と Object.assign の違いを調べてわかった気になるが何度も忘れるので整理 結論 実質ほぼ同じことが実現できるが互換性の問題があるので Babel や TypeScript でトランスパイルするなら spread op…

JavaScript が動作する Capybara の feature spec でブラウザのコンソールを確認する

結論 page.driver.browser.manage.logs.get(:browser) 調べた経緯 フォームの text input に対する fill が働かないのでどうしたかと思い、Selenium で操作中のブラウザをのぞいてみると React の component が一切 render されていなかった。 どこかで Java…

Bower は deprecated なので Yarn へ移行した

一度もまともに使ったことなかったけど bower って死んでたんだね…。正確にいうと "maintained, but deprecated" か。 github.com snyk.io 自分には関係ない話かと思っていた…が、普段まったく触らないがひっそりと稼働を続けるレポジトリに2014年来の bower…

gulp-util の問題、deprecation warning と migration path について

2017年12月28日に The Problem with gulp-util という記事が公開された。 medium.com gulp をウォッチしていたわけではないのだが、たまたま残された gulp 資産を触っている時に deprecation warning がコンソールに出力され、そのメッセージ中にこの記事へ…

builderscon 2017 - day 1 メモ

以下、所感混じりのメモ。まとめや感想はあとで書く。 ※ 内容については間違っている可能性あり。 Desktop Apps with JavaScript Electron = node.js(JavaScript) + Chromium(のレンダリングエンジン) + C++(OSネイテイブ機能の活用) monaco editor Electron…

JavaScript や CSS を読み込む時の type 属性はもはや不要

kechol 氏からレビューを受けて知ったのでメモ。 https://google.github.io/styleguide/htmlcssguide.html#type_Attributes によると CSS や JavaScript を読み込むときのタグに type attribute は HTML5 では不要、というか非推奨とのこと。 引用 Omit type…

kpt-bot を使って KPT も Slack に集約しよう

ES6 の勉強がてら kpt-bot という Slack bot を作ってみたので github.com 「kpt-bot を使って KPT も Slack に集約しよう」という記事を Qiita に投稿した。 qiita.com Node.js、JavaScript というだけで web フロントエンドと地続き間があるから書けなくは…

ohbarye.me

Twitter や GitHub のプロフィール欄にある「あなたの web サイト」的な箇所に登録するリンクがこのブログだったり GitHub の個人アカウントへのリンクだったり、統一感がなくて良くない!となんとなく思い立って About me page を作ってみた。 ~ttp://ohbar…

npm run eject で create-react-app はアプリケーションの長寿を保証する

create-react-app すごい。React アプリを開発する環境構築が圧倒的に楽になった。 開発も素早く始められて build も一瞬で出来るように用意されている。Rails なんかもこうやって参入障壁を下げていくことで広まったのかなと思う。 npm run eject まだ始め…

jQuery の古いバージョンでは SVG の class 属性を操作する API の一部が使えない

複数サイトを管理していて、片方のサイトでは動くのにもう一方では動かない以下のようなコードがあった。 $svg('svg.target') $svg.toggleClass('hide') jQuery 2.2 and 1.12 Released | Official jQuery Blog を見るに、以下のバージョン以上であれば動くと…

ロードされた jQuery のバージョンを確認する

developer console で $().jquery # => "2.2.4" etc. ref: How to check what version of jQuery is loaded? - Stack Overflow

jQuery セレクターのエスケープにはバックスラッシュを使う

以下のような HTML 要素がある時に <input type="text" id="hatena.jp" /> $('#hatena.jp') 上記のセレクターではこの要素を取得できない。 id == "hatena.jp" ではなく id == "hatena" && class.include?('jp') にマッチする要素を探してしまう。 メタ文字 (!"#$%&'()*+,./:;<=>?@[\]^{|}~) を含…