at backyard

Color my life with the chaos of trouble.

React

Create React Appで作成したアプリケーションに対してTestCafeでのE2EテストをGitHub Actionsから動かす

Create React Appで作成したアプリケーションに対して、E2EテストをTestCafeで実装した。 ローカルでE2Eテストを動かす分にはさほど難しくはなかったが、GitHub Actions で動かす際にはハマったりすることが多かったので、一旦このように書けば動く、という…

useRefを使って指定したDOMのサイズを取得する方法

最近、表題のような処理を書くべき状況になったのだが、うまく書けなかったので、反省の意味を込めて書いていく。 useRef を用いて対象のDOMを取得 useRef を使うと対象のDOMを取得できる。 https://ja.reactjs.org/docs/hooks-reference.html#useref Ref と…

Reactを自作するための学習メモ #5

Reactを自作するための学習の記録の続き この続き shinshin86.hateblo.jp 参照ドキュメント 現在ここに記述しているコードは、下記のドキュメントのほぼ写経となっています。 pomb.us zenn.dev 関数コンポーネントに対応する 現在の実装では関数コンポーネン…

Reactを自作するための学習メモ #4

Reactを自作するための学習の記録の続き この続き shinshin86.hateblo.jp 参照ドキュメント 現在ここに記述しているコードは、下記のドキュメントのほぼ写経となっています。 pomb.us zenn.dev Render Phase と Commit Phase のおはなし Reactはページをレン…

Reactを自作するための学習メモ #3

Reactを自作するための学習の記録の続き この続き shinshin86.hateblo.jp 参照ドキュメント 現在ここに記述しているコードは、下記のドキュメントのほぼ写経となっています。 pomb.us zenn.dev おさらい ここまでの実装は下記。 なお、createElement や rend…

深い階層を持つHTMLを生成するための、どうでも良い関数を作ったのメモ(React)

深い階層を持つHTMLを生成するための関数を書いた。 あまり使いみちはない。 下記で書いている、Reactを自作する際に生み出した謎の副産物である。 shinshin86.hateblo.jp 以下、ソースコード。 const generateDeepElement = (depth) => { depth = depth - 1…

Reactを自作しようとしたときに"pragma and pragmaFrag cannot be set when runtime is automatic."のエラーが出たのでその対応方法を書いていく

最近、Reactの中身をちゃんと理解せねばと思い、Reactの自作につながるような勉強をしています。 一応下に備忘録を残していっていますが、個人用のメモみたいなレベルなので、あまり見やすくはないと思います。 うまく成果を得られたらQiitaかZennにまとめよ…

Reactを自作するための学習メモ #2

1から続いて、引き続き行っていく。 shinshin86.hateblo.jp 参照しているドキュメントも変わらない。今はまだドキュメントをなぞっているだけなので、ここに乗っているコードは下記の記事に乗っているものと同じだ。 React.createElement関数を自作する 下記…

Reactを自作するための学習メモ #1

私は普段ソフトウェアエンジニアとして仕事をしているときが多い。 そして普段の業務でよく触るライブラリの一つに、Reactがある。 私は普段からReactをよく触っているくせに、そういえばこのReactの内部の仕組みを深堀りしたことがなかった。 (ザックリとだ…

ランダムな果物の名前を生成するだけのnpm package、random-fruits-name.js

以前、物凄くシンプルなnpm packageを作っていた。 random-fruits-name.js という名前のpackageである。 GitHubはこちら。 github.com READMEにも書いているが、ReactでもNode.js環境下でも動くものになっている。 Reactでのコードサンプルはこちら。 import…

クリックしてクリップボードにコピーする機能をReactで作る

これまた下書きフォルダに入りっぱなしになっていた文章を見つけたので、整理してアウトプットする。 去年書いていたものだ。 よくある、ボタンやテキストなどをクリックしたときに、クリップボードに対象の文字が自動的にコピーされる機能。 あれをReactで…

PaginationをReactで実装したサンプル (Bootstrap使用)

去年書いていたポストだが、下書きの状態のママになっていたため、公開することにした。 以下本文。 最近Reactで実装されたPaginationに触れる機会があったので、自分の理解を深める意味も込めて、自分なりに1から実装してみる。 といっても、スタイルはboo…

Next.jsで作ったアプリでgoogle analyticsの設定を5分で行う

追記: Google analyticsに関するコードは"pages/_document.js"内に書いたほうが良いかもしれない 以前書いたこちらの記事だが、本文のとおりにやればGoogle Analytics側では正常に認識されるものの(Google Search Consoleでの確認も完了できる)、 どうやら正…

next.jsにreact-notificationsを導入しようとしてハマったのでメモ

next.jsでreact-notifications用のcssファイルを読み込もうとしたら、Module parse failed: Unexpected character '@' (1:0) というエラーが出た next.jsで書いたアプリに先日書いたreact-notificationsを導入しようとしたら、コンパイル時に下記のようなエ…

Reactでnotificationを簡単に実装できるreact-notificationsを試してみた

Reactでnotificationを簡単に実装できるreact-notificationsを試してみた Reactで簡単にnotificationを使えるライブラリを見つけた github.com create-react-appを使ってサクッと試してみる npx create-react-app react-notifications-sample cd react-notif…

Airbnbが作ったReactのCalendarライブラリ、react-datesを試してみる

Airbnb製のReact用Calendarライブラリ、react-datesというものを試してみました。今回はその備忘録 (結構導入、というかセットアップ段階でハマりどころが個人的に多かったので、この記録には誤りが含まれている可能性があります。割と最後までやるのに疲れ…

Headless CMS の Contentful からデータを取得して、Next.jsのページで表示させるメモ

完全なる備忘録です。 Next.js 9 with TypeScript セットアップ 最近 Next.js 9 を余暇を利用して触っているので、今回はそちらの環境のセットアップから行います。 ちなみに最初からTypeScriptで書けるように設定していきます。 以前Qiitaに書いたNext.jsで…

metabase で 質問をコピーする方法

metabase で 質問をコピーする方法 未来の自分に向けた metabase に関する備忘録となります。 www.metabase.com metabase で 質問をコピーするには、既存の質問を一度開き、なにかしらの編集を行い、それから新しい質問として保存することで、結果的に質問を…