JavaScript
個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。 まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。 実質ただのリンク集 理由 State of JS 2021のビル…
個人的な観測範囲にある Node.js / React 関連のプロジェクトなどについて 2021 年 12 月時点の情報メモ。 ここ 2 年ぐらいコンシューマー向けの SPA や Node.js アプリケーションを書いておらず、react-admin で作った管理画面*1を書いているぐらいなのだが…
JavaScriptでDOMを監視して何かしらのコールバックを実行する際にMutationObserverが使える。 仮想DOM全盛時代でなくとも、jQueryでもvanilla JSでもイベントハンドラを自由に設定できるようなWebフロントエンドの世界で使い道あるか？と思っていたが、利用…
import / require文で読み込む3rd party libraryのコストを表示してくれるVSCode extension。3年も前からあったのにまったく知らなかったな〜 marketplace.visualstudio.com 完璧な分析ツールを目指しているわけではなく「開発中に明らかな問題に気づくため…
業務で扱っているSPAのReactバージョンを17.0にアップグレードした。 reactjs.org 対象のSPAの開発が始まったのが2020年内で元々16.13からスタートしていることもあり、production codeに関するブロッカーは1つもなかった。 ちなみにReact Admin 3.10.4を使…
react-use-kanaという、フォームでのよみがな入力支援のための npm package の内部実装をガッと書き換え、入力文字列からよみがなを抽出する処理を自前で書いてみた。 背景 同 package を作って公開したことは以前にも記事に書いた。 ReactのContextとHooks…
JSConf2019 記念すべき第一回の*1のJSConf Japanで『Migration from React Native to PWA』というタイトルの発表をしてきた。 登壇に関して 資料 発表では触れなかった余談は泣く泣く削ったトピックなので参照されると嬉しい。 今回は発表資料を作ったり練習…
半年以上前にReactのContextとHooksで日本語のふりがな入力を支援するコンポーネント書いた - valid,invalidという記事を書いたが、このときは何もわかってなかったということがわかった。 長々とContext, Provider, useReducerあたりのことを書きましたが、…
Static site generator の GatsbyJS が掲題の取り組みを始めたようす。 朝起きたらだいぶ前にめっちゃ小さくコントリビュートしたときの pull request にコメントが付いていた。 Gatsby community の OSS に貢献した人への感謝の気持ちとして Gatsby Swag St…
第5回 Roppongi.js に参加し、『続・貢献できるOSSの見つけ方 -How to find "Good First Issues"-』というタイトルでLTをしました。 リンク付きの原稿はこちら https://ohbarye.github.io/slides/2018/roppongi.js-5/ 紹介したアプリケーション github.com h…
以下のような 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…
TL;DR 現プロジェクトと近似した構成で素振り出来るよう Rails + PostgreSQL による backend と React + TypeScript による frontend を docker-compose で立ち上げる boilerplate 作ったhttps://t.co/iCqMc2TWrD— 広島の粗大ゴミ (@ohbarye) 2018年7月7日 g…
第4回 Roppongi.js に参加し、『貢献できるOSSの見つけ方 -How to find "Good First Issues"-』というタイトルでLTをしました。 リンク付きの原稿はこちら https://ohbarye.github.io/slides/2018/roppongi.js-4/ 紹介したスクリプト github.com Good first …
第3回 Roppongi.js に参加し、『エンジニアも気にしたい色のアクセシビリティ』というタイトルでLTをしました。 スライドのタイトルを575にしたかったものの「エンジニア アクセシビリティ 気にしよう」のような駄作しか生まれなかったために断念しました。 …
ゴールデンウィーク（以下、GW）の途中で以下の記事を読んで Generative Art (ジェネレーティブアート - Wikipedia)*1 なるものを知り、試しに触ってみたら面白かった。 ジェネラティブアートを始めよう｜なめらかサンショウウオ｜note Generative Art with …
TL;DR 開発している Slack bot で発生する N+1 問題を解消するために GitHub GraphQL API v4 を利用した クライアントサイド（今回は JavaScript）側から使ってみただけだが、かなり開発体験が良かった 背景: review-waiting-list-bot について review-waiti…
Parsing error on ESLint review-waiting-list-bot の実装中に以下のようなオブジェクトの分割代入するコードを書いたら eslint で parse error が起きるようになってしまった。 const { authors, ...conditions } = { authors: [], owner: '', repo: '' } $…
package.json に書かれた、依存しているライブラリの名前 (dependencies) を JavaScript のコード内で参照するやり方。 import pkg from './package.json'; const dependencies = Object.keys(pkg.dependencies) const devDependencies = Object.keys(pkg.de…
JavaScript の Object の spread operator (スプレッド構文) と Object.assign の違いを調べてわかった気になるが何度も忘れるので整理 結論 実質ほぼ同じことが実現できるが互換性の問題があるので Babel や TypeScript でトランスパイルするなら spread op…
結論 page.driver.browser.manage.logs.get(:browser) 調べた経緯 フォームの text input に対する fill が働かないのでどうしたかと思い、Selenium で操作中のブラウザをのぞいてみると React の component が一切 render されていなかった。 どこかで Java…
一度もまともに使ったことなかったけど bower って死んでたんだね…。正確にいうと "maintained, but deprecated" か。 github.com snyk.io 自分には関係ない話かと思っていた…が、普段まったく触らないがひっそりと稼働を続けるレポジトリに2014年来の bower…
2017年12月28日に The Problem with gulp-util という記事が公開された。 medium.com gulp をウォッチしていたわけではないのだが、たまたま残された gulp 資産を触っている時に deprecation warning がコンソールに出力され、そのメッセージ中にこの記事へ…
以下、所感混じりのメモ。まとめや感想はあとで書く。 ※ 内容については間違っている可能性あり。 Desktop Apps with JavaScript Electron = node.js(JavaScript) + Chromium(のレンダリングエンジン) + C++(OSネイテイブ機能の活用) monaco editor Electron…
kechol 氏からレビューを受けて知ったのでメモ。 https://google.github.io/styleguide/htmlcssguide.html#type_Attributes によると CSS や JavaScript を読み込むときのタグに type attribute は HTML5 では不要、というか非推奨とのこと。 引用 Omit type…
ES6 の勉強がてら kpt-bot という Slack bot を作ってみたので github.com 「kpt-bot を使って KPT も Slack に集約しよう」という記事を Qiita に投稿した。 qiita.com Node.js、JavaScript というだけで web フロントエンドと地続き間があるから書けなくは…
Twitter や GitHub のプロフィール欄にある「あなたの web サイト」的な箇所に登録するリンクがこのブログだったり GitHub の個人アカウントへのリンクだったり、統一感がなくて良くない！となんとなく思い立って About me page を作ってみた。 ~ttp://ohbar…
create-react-app すごい。React アプリを開発する環境構築が圧倒的に楽になった。 開発も素早く始められて build も一瞬で出来るように用意されている。Rails なんかもこうやって参入障壁を下げていくことで広まったのかなと思う。 npm run eject まだ始め…
複数サイトを管理していて、片方のサイトでは動くのにもう一方では動かない以下のようなコードがあった。 $svg('svg.target') $svg.toggleClass('hide') jQuery 2.2 and 1.12 Released | Official jQuery Blog を見るに、以下のバージョン以上であれば動くと…
developer console で $().jquery # => "2.2.4" etc. ref: How to check what version of jQuery is loaded? - Stack Overflow
以下のような HTML 要素がある時に <input type="text" id="hatena.jp" /> $('#hatena.jp') 上記のセレクターではこの要素を取得できない。 id == "hatena.jp" ではなく id == "hatena" && class.include?('jp') にマッチする要素を探してしまう。 メタ文字 (!"#$%&'()*+,./:;<=>?@[\]^{|}~) を含…
