保守性の高いReact hooksコードの指針
前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます） ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは１ページに１つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは１ページに１つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat
JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する
2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！ このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？ 従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだと画面サイズが変わったら再計算しないといけ
Web Bluetooth API と Bluetooth MIDI を使って子供向けの音符学習アプリを作る - エムスリーテックブログ
エムスリー エンジニアリングGの岩本です。 会社ではiOS開発からサーバサイドの開発を担当していますが、家でDIY・IoT・スマホアプリなどを作るパパエンジニアやっています。 最近小学生になった娘がピアノに興味を持ち始めました。といっても習い事にするまでの興味はないようですが、楽しそうに猫ふんじゃったを弾いています。ところがドレミの音符もわかっていません。今回は子供に音符を教えるためといって買ったワイヤレスMIDIアダプター MD-BT01を使って、Chromeと通信してかんたんな音符を学習する子供向けのアプリを作ってみました。 なお、エムスリーテックブログのものづくり系の記事が増えてきたのでこちらもよろしければ参照ください。 Bluetoothを使った筋トレ用デバイスを作ろう - エムスリーテックブログ ROSでSLAMラジコンをつくった - エムスリーテックブログ FireTV sti
GitHub Actionsのworkflow_runイベントでテストを回すときの要点 - Kengo's blog
Dependabotの作ったPRがSecretsにアクセスできないためにことごとく失敗していたのを修正しました。 github.com SecretsにアクセスできないのはKeeping your GitHub Actions and workflows secure: Preventing pwn requestsで説明されているようにセキュリティ向上のためです。workflow_run イベントでCheckを回すとワークフロー定義は常にデフォルトブランチのものが使われるため、PRでワークフローファイルが悪意を持って変更されてもマージしなければ悪影響を受けません。ので今後、基本的にはSecretsを必要とするワークフローはworkflow_runイベントで回すことになります。 上記securitylab.github.comの記事で色々説明されていますが、わりと限定的なユースケースについ
アクセシブルじゃないクリックイベントを発見する
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return clickListeners; }) .flat(); for (const event of clickEvents) { if (event.owner.matches("button, a[href]")) {
JSのレスポンシブ対応をresizeからmatchMediaに移行した
JS でブレークポイント毎に処理を分ける場合の方法を resize から matchMedia に移行したので、その際のメモ書きです。 昔ながらの方法 恥ずかしながら、最近まで JS でブレークポイント毎に JS 処理を切り替える場合、 以下のように昔ながらの resize イベントの監視を使っていました... /** * イベントリスナー */ const listener = () => { // リサイズ時に行う処理 if (window.innerWidth >= 768) { // 768px以上 console.log('PC用ブレークポイント用処理'); } else { // 768px未満 console.log('SP用ブレークポイント用処理'); } }; // リスナー登録 window.addEventListener('resize', listener); /
Slack Events APIの再送仕様と回避方法まとめ(Serverless on AWS) | DevelopersIO
SlackのEvents API(Event Subscription)で盛大にドハマりしてしまったので、Events APIの再送の仕様をまとめて、本来のベストプラクティスに沿った実装と妥当な落とし所をご紹介します。 どうも、もこ@札幌オフィスです。 最近Slackを利用したBotの開発をする機会がありまして、SlackのEvents API(Event Subscription)で盛大にドハマりしてしまったので、Events APIの再送の仕様をまとめて、本来のベストプラクティスに沿った実装と妥当な落とし所をご紹介します。 Slack Events APIとは？ 従来のポーリング型のAPIとは違い、あらかじめ受信するURLとイベント(メッセージの送信、リアクションの追加など)を指定してあげる事で、ワークスペース上でイベントが発生した際にSlackがWebHookしてくれる物となります。
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
