きっかけ（となったtweetの訂正） もう1ヶ月以上も経ってしまったが、こちらのtweetの公約どおり、WebAssembly (Wasm)におけるDOMの操作について知っている限りのことを書こう。 まずこの節の見出しのとおり、上記の発言は大きく間違えている。私はReference Typesがもたらすパフォーマンス的なメリットや、JavaScriptのオブジェクトを直接Wasmで渡すことが（一応）可能になったということを根拠に上記のtweetをした。しかし下記のtweetでも否定されているとおり、この観点は穴だらけなので、実際のところ多くの人が「直接操作できる」と実感できる状態ではないだろう。 詳細は後述するとして、我ながらひどい凡ミスを犯してしまった。JavaScriptのことを十分に知っているはずなのに、情けない。謹んでお詫びし、ここで訂正する。 大前提: ある意味で永遠にそんな日は
初めに React Hook Form（以後、RHF）はとても便利なバリデーションライブラリですが、非制御コンポーネント前提なのでRHFのAPIを通して全ての操作を行うことになります。 そのうえで、自分なりにつまづいたところやわかりづらかったところをまとめました。 個人的に結構このライブラリを扱うのに苦労しているので、皆さんもコメントで自分なりのハマりどころを書いたり、新しく記事にしたりしてネット上に知見が溜まればなと思っています。 ハマりどころ useFormのdefaultValuesは動的に変更しない これしっかりドキュメントに書いてあるんですが、defaultValuesを変更したい場合はresetAPIを使いましょう。 悪い例 このようにAPIからデータが返ってくるまで適当な初期値を渡しちゃうような設計だと、APIからデータが返ってきてもフォームの値が変わらないということがありま
はじめに こんにちは、株式会社TERASSでエンジニアをしている myrear です。 先日 React Blog にて公開された React Labs: 私達のこれまでの取り組み - 2024年2月版 という記事に React Compiler に関する記述があります。 この React Compiler とは React コードを自動的に最適化し、それにより開発者はメモ化について考える必要がなくなる(忘れることができる)というものです。 まるで魔法のようですが、一体どのような方法でコードの最適化を実現しているのでしょうか？ 本記事では2023年秋の講演の動画を自動翻訳字幕で追いながら要所要所をかいつまんで解説していきます。 React Forget とは？ 先述の通り React コードを自動的に最適化してくれるコンパイラです。 具体的には JavaScript と React のルー
サーバ・クライアント間の通信を gRPC で行う場合、インターフェイスを定義した共通のファイルから、サーバとクライアント双方のコードを生成することができる。 この記事では、インターフェイスの定義ファイルを作成するところから始めて、gRPC を利用した単純なウェブアプリを作っていく。 gRPC についての概念的な説明などは扱わず、実際に手元で動くウェブアプリを作ることで、gRPC を使った開発についてイメージしやすくなることを意図している。 Next.js では API Routes を使って API サーバを作ることができるが、それを gRPC クライアントとして実装する。 そのため、リクエストの流れは以下のようになる。 Frontend == (REST) ==> API Routes == (gRPC) ==> gRPC Server 動作確認は Node.js のv16.13.2で行
自動的にライブラリのアップデートのプルリクエストを作ってくれるDependabotはとても便利です。ただ、何かと通常の開発タスクに追われライブラリアップデートのプルリクエストは滞留しがちです。それを解決するための仕組みはないかなと思い、試行錯誤してみたので書きます。 静的アセットのビルド差分からレビューの必要性を判断 今のチームのプロダクトでは静的アセット（JS, CSS, Image）のビルドにのみ Node.js を利用しています。 そのため、npm モジュールのライブラリアップデート時にプルリクエストのブランチでビルドされた静的アセットが、master ブランチでビルドされた静的アセットと差分がなければプロダクトの動きは変わららないはずです。 なので、そのビルド差分の有無をみれば詳細なレビューが必要かどうか判断できます。差分もなく CI も通っていればほぼ動作確認は不要で、Chang
コンポーネントの分類について考えたことをまとめた
どのようにコンポーネントを分類していくか 個々のコンポーネントがが単一の責任のみ負っている状態であれば、コードの見通しも良くなる上、後々のメンテナンスも容易です。 まずは「複数の関心ごとを１つにまとめない」という原則（単一責任の原則）から分類の指針を考えていきます。 フロントエンドにおける関心ごとですが、大別すると APIとの接続 View（表示とイベント実行） 状態管理 以上３つに集約されるのではないでしょうか。 では、これらの関心ごとをどの様に切り分けていけば良いのか考えていきます。 APIとの接続 まずはAPIとの通信ですが、こちらはコンポーネントの外で管理した方が良いと考えています。 各コンポーネントに通信に関わる処理がベタ書きされている状態だと、エンドポイントの変更等に弱くなり、通信処理の再利用も面倒です。 それに、「フロントの状態管理 / 表示」と「外部との接続」はそれぞれ別種
function ProfileDetails() { const user = resource.user.read(); // throw promise here return <h1>{user.name}</h1>; } この仕様自体、それだけで記事になるほど面白いです。（ここでは割愛します。） React Freeze React Freezeは、そんなSuspenseを利用したライブラリです。 元々React側は、データ取得の際に使うことが主なユースケースと言っていたのに対して、このライブラリの目的は、ある瞬間にユーザーに表示されていないアプリの部分について、不要な再レンダリングを避けることとなっています。 どうやって実現しているのでしょうか？ 実は、ライブラリの実装もシンプルで興味深いです。 // ref: https://github.com/software-mansi
React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO
React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えてご紹介してみたいと思います。 なお本記事は、前の記事（react-hook-form編）に続く形式となりますので、お時間あれば下記の記事も合わせてご参照いただけますと幸いです。 作ってみた 前回の記事で作成した Web フォームの基本項目（Basic.js）というフォームに下記の yup という JavaScript schema builder を利用してバリデーションの機能を追加していきたいと思います。 バ
Next.js でテスト駆動開発を進める時に必ず関門となる各種機能のモックに関するベストプラクティスを紹介します。 今回は Router などの機能をモックした render を作成して、共通のコンポーネントとして利用することを目標としましょう。 バージョン情報 Node.js：15.11.0 React：17.0.2 Next.js：10.2.2 Jest：26.6.3 React Testing Library @testing-library/react：11.2.5 Router を使用した際の問題点 next/router
サイトのOGP画像を自動生成する
最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。 サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL とは別に表示される物がこれにあたります。サイトのページが増えるとページ一つ一つに OGP 画像を用意することは手間がかかります。そこでこの記事では、OGP 画像を自動生成する方法を紹介します。 OGP 画像の作成方
2022/10/16 以下ご指摘をもとに内容を修正および追記 https://zenn.dev/link/comments/463223a4de9ec2 はじめに Linux上でコマンドを実行したときのコマンドライン引数についてつらつら書きたくなったので書きます。 プロセスのコマンドライン引数とは、たとえばfoo bar bazというコマンドを実行したら、通常はコマンドライン引数はfoo、bar、およびbazになります。直観的には引数は”bar”と"baz"だけのようにおもえるかもしれませんが、とにかくこういう定義です。 コマンドライン引数はプログラムの中からはCやC++ではmain関数のargv配列引数から参照できます。上述の例であればargv[0]には実行ファイル名が入ります。それ以降の"bar"はargv[1]に、"baz"はargv[2]に入っています。argvに相当する変数はシェ
オープンソースのnpmパッケージ「node-ipc」にロシア在住の開発者を標的にした悪意のあるコードがメンテナーによって追加される
オープンソースで開発される、ウェブアプリのUI構築用JavaScriptフレームワーク「Vue.js」のコードに、ロシアとベラルーシに在住する開発者を標的とした悪意のあるコードが追加されたと、開発者向けセキュリティプラットフォームのSnykが発表しました。メンテナーの1人がロシアのウクライナ侵攻に対する抗議行為として、問題のコードを追加したことがわかっています。 Alert: peacenotwar module sabotages npm developers in the node-ipc package to protest the invasion of Ukraine | Snyk https://snyk.io/blog/peacenotwar-malicious-npm-node-ipc-package-vulnerability/ Sabotage: Code added
Semgrepはr2cという会社/サービスが開発しているツールです。 Semgrepの特徴としてTree-sitterでコードをパースしたConcrete Syntax Tree(CST)の構文木をベースにして検索や置換ができます。 コードをCSTにパースした構文木に対して検索/置換することで、ただの文字列検索/置換に比べてミスマッチしない検索/置換ができます。 例えば、次のa.js、b.js、c.jsはそれぞれevalを使っていますが、スタイルは違いますが意味はほとんど同じです。 // a.js eval("const a = 1, b = 2; eval(a + b);"); // b.js eval('const a = 1, b = 2;\ eval(a + b);'); // c.js eval(`const a = 1, b = 2; eval(a + b);`); $ sem
next.js の AMP mode を使って静的サイトを作る
この記事は amdxg を作りながら, next.js で AMP に対応したときにやったことです。 コードはこちらです amdx/packages/ssg at master · mizchi/amdx AMP について Google の推奨する HTML のサブセット仕様です。制約付きのインライン CSS のみ + 一切の JS が書けず、代わりに動きがあるものは amp plugin を使って記述します。 モバイルでは、Google の検索結果画面からは GoogleCDN 上のキャッシュが返却されるので、非常に高速に開くことができます。 (⚡ マークが AMP 対応の印) モバイルに限らず、ある種のベストプラクティスの強制なので、PC でも AMP 対応することに意味はあります。 この記事では、実際にこのブログのための SSG を作る過程で、どのように next.js 上で AMP
lizod: 1kb 未満の zod の精神的後継
作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, type Infer, type Valid
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活 | GiFT（ギフト）株式会社
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.28 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O
2021/10/12にDeno v1.15がリリースされました。 この記事では、Deno v1.15で新しく導入されたNode.jsの互換モードについて解説します。 Node.jsの互換モードとは？ まず、以下のようなJavaScriptファイルがあったとします。 import { EventEmitter } from "events"; const emitter = new EventEmitter(); emitter.on("foo", () => console.log("foo")); emitter.emit("foo"); $ deno run main.mjs error: Relative import path "events" not prefixed with / or ./ or ../ from "file:///home/uki00a/ghq/github
🏔背景 Reduxはしんどい、だるい、でかい、というイメージが定着して久しいですね 😭 僕も3年ほど前にどっぷり触ったときは「こいつぁなかなか」という感想でした。 しかしながら状態管理ライブラリやらFlux思想やらの流れとしてReduxが不可避の存在だったために、おつらい経験をされた方も多かったのかなとお察しします。 時代は巡り2019年末、令和元年のご時世ではすっかりTypescriptによる型安全、正式提供されたReact Hooksによる脱Class component・HOCフリーな省エネ設計などが定着してきており、この両者を前提とした構築がもはやスタンダードとなってきています。 諸兄の人柱的知見も相まって最近は敬遠されがちなReduxパイセンですが、この度久方ぶりにがっつりと向き合ってみると、上述した両者の恩恵を受けてなんだか垢抜けた感じになっていました。知ってましたか？
Node.js v18がリリースされました 🎉 nodejs.org この記事では Node.js v18 の主な変更点を抜粋して紹介します！ fetch() がフラグ無しで実行可能に (experimental) HTTP requestTiemout()のデフォルト値の変更 node:test モジュール（テストランナー）の追加 (experimental) V8 アップデートによる新しい JavaScript の API の追加 Array#findLast(), Array#findLastIndex() Intl.supportedValuesOf() その他の改善 Web Streams API のグローバルへの追加、実行時の警告の削除 (experimental) まとめ fetch() がフラグ無しで実行可能に (experimental) github.com Node
useStateでしょ！ という声が聞こえてきますね。 おっしゃる通りなんですが、それよりも実はそういう時はuseReducerの方がより適しているという話です。 はじめましてスペースマーケットでフロントエンドエンジニア兼リーダーをしています。 はじめに useState / useReducerがなんぞや？という方は公式のリファレンスをご確認ください。 1度だけ変更されるstateでいうと下記のようなイメージでしょうか？ const Hoge: FC = () => { const [finished, setFinished] = useState(false) const onClick = () => { setFinished(true) } if (finished) return <div>送信しました！</div> return ( <div> <button onClic
今月20日にInitial Releaseが予定されているNode.js v15ですが、ここでのunhandled rejectionの挙動変更について解説します。 unhandled rejectionとは async関数内でthrowされたエラーや、rejectされたPromiseが、.catch()などでハンドリングされずにrejectされたままになっている状態を、unhandled rejction（またはunhandled promise rejction）と呼びます。Node.js v14では、unhandled rejectionが発生すると次のような警告が出力されます。 $ node -e "Promise.reject()" (node:22145) UnhandledPromiseRejectionWarning: undefined (Use `node --trac
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
こんにちは、マーティン（@mrtn）です。みなさんNotion使っていますか？ 副業で広報を担当している株式会社トクイテンではコミュニケーションツールはSlack、ドキュメントツールはNotionを日々使っています。 今回、Notion投稿をいい感じにSlackへ通知するGoogle Apps Scriptを作ってソースを公開しました。ぜひ使ってください！ NotionのSlack通知機能は体験があまりよくない私にとってNotionは、手によく馴染み、書き心地のいいドキュメントツールです。ひとつだけ不満をあげるとすれば「Slackへの通知機能」です。 公式が用意してくれていて、ノーコードで簡単に設定できるのはとても良いですが、通知のタイミングや頻度、そして内容についてはもう少しなんとかならないものかと思っています。 この画像はNotionのSlack通知を設定しているチャンネルです。 ペー
（※ この記事は API およびそこから導かれる設計のしやすさ観点での比較をしています。実際にキャッシュが有効に効いたか、などについてはまた別の機会に ）
React Query のレンダリング最適化を目指した話 - Techtouch Developers Blog
エンジニアの macchii です。この記事はテックタッチアドベントカレンダー 14 日目の記事です。 テックタッチでは React を利用して WEB フロントエンドを開発しています。あわせて、リモートデータの取得、更新、キャッシングには React Query を導入しています。本記事では、簡単なタスク管理アプリを題材に、「React Query の再レンダリングを最適化するテクニック」紹介します。 ja.reactjs.org react-query.tanstack.com TL;DR はじめに React Query は取得データを厳密に比較（deep compare）する 参照していないプロパティの変更でも再レンダリングが発生する notifyOnChangeProps オプション select オプション まとめ TL;DR React Query は取得データを厳密に比較（
ケンモFMの配信バックエンド :: ラジオ番組の制作からライブ配信、Podcast化までを全自動化 - Qiita
ケンモFMとは 5ちゃんねる嫌儲板で、コロナ感染者を適当に予測したスレが立ち、明確なソースが貼られないまま「ソースはラジオで聴いた」などの一文が添えられていました。それを揶揄し、「ケンモFMかよ」のようなレスが付いたのが元ネタです。 せっかくなので、fmドメインを取得した上で、スレタイ（スレッドのタイトルのことです）を自動で読み上げるサイトを作ったのが https://kenmo.fm です。YouTubeにも同時配信しており、 https://www.youtube.com/channel/UCHBucrED96_pdOCvIs6jNSQ/live で聴けます。 とりあえずサイトにて自動で生成される音声を聴いてみてください。 システム構成 現状はこのようになっています。 ほぼTypeScriptで書かれており、所々にBashも使用しています。 順に解説します。 1 スクレイピング この項
TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う
TypeScript 4.9 から、satisfies operator が使えるようになりました。従来のas constと組み合わせ、型チェックと widening 防止を同時に行えます。筆者的には、"顧客が本当に必要だったもの"です。 本記事では satisfies とは何か？ as const とは何か？ 2つを組合わせるとどのようなメリットがあるのか？ について、実際のコードと共に解説します。 結論 TypeScriptで 定数を export する場合は、as const satisfies を設定しておくと便利です。 export const myName = "田中" as const satisfies string; export const foodList = { ramen: "ラーメン", udon: "うどん", soba: "そば" } as const sa
この記事でのusing宣言の動作はBabelのtransform及びes-shimsのpolyfill実装に依存しており、実際のV8エンジンやTypeScriptのトランスパイル出力の挙動とは異なる可能性があります。 以下の挙動がusing宣言に対応している処理系の実際の挙動と異なる場合はコメントをいただけると幸いです。 導入 先日、Twitterでこんなツイートが回ってきました。 TypeScript 5.2で新しい「using宣言」が追加されるというものです。 しかも、TypeScriptの独自構文かと思いきや、JavaScriptのStage 3のProposalをTypeScriptで先行実装するという通常のTypeScriptの実装プロセスに則ったものでした。 新しい変数宣言の追加はES 2015(ES6)の「let」「const」以来でなんと8年ぶりで、JavaScript/T
JavaScriptで億とか万とかに変換したいときはNumberFormatのnotation:compactが便利
const fmt = new Intl.NumberFormat("ja-JP",{ notation: "compact", }) fmt.format(BigInt(64 ** 8) ) // => "281兆" とりあえずざっくり数値を出したいときにとても便利。最高そう。 オプションを組み合わせる 詳しくは上記MDNが詳しいが、その他オプションと組み合わせることで色々調整も可能だ // 何も設定しないといい感じに小数点計算してくれる new Intl.NumberFormat("ja-JP",{ notation: "compact"}).format(BigInt(433333333)) // => "4.3億" // 小数点表記をさせたくなければmaximumFractionDigitsを0にする new Intl.NumberFormat("ja-JP",{ notation
自社Webサービス上にボタンを配置して、PDFをダウンロードできるようにしたいという要望がありました。しかも 表などのリッチな表現を活用したい 動的に表示する内容が変化し、内容に応じてページ送りをしたい これらは自社Webサービス上のページとしても表示している（しかも認証が必要なページ） という条件でした。react-pdf や html-pdf を使えばできなくはなさそうですが、できるだけスタイルを楽に・デバッグをかんたんに行ないたかったので、別の方法を考えました。 そう、みんな大好きヘッドレスブラウザを活用した方法です。この手の課題のときにはよく手段として上がりますよね。@media print などを使って印刷用に表示する内容の調整もできるし、サービス上のコンポーネントを使ってスタイルできるので非常にかんたんにPDFのコンテンツのスタイルが行なえます。 ただ、問題は認証です。Webサ
MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ（モック関数）をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し／2.入力操作し／3.WebAPI 通信し／4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ
［速習］ Puppeteer ～ヘッドレスChromeでテスト＆スクレイピング 第2章ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント 第2章では、実際にヘッドレスChromeを自動化するうえで必要となる、最新のJavaScriptの構文やPuppeteerのAPIについて解説します。 進化し続けるJavaScript PuppeteerのAPIを解説する前に、第1章の冒頭で掲載したサンプルコードを見返してみましょう。もしかすると、中にはまったく見慣れない構文が見つかったかもしれません。 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await b
JavaScriptに密かに存在する“無名関数宣言”
この記事では JavaScript エンジニアがしてしまいがちなある誤解を紹介し、それがなぜ誤解なのかを解説します。 その誤解とは、「関数宣言には必ず名前が必要である」ということです。これはexport defaultの場合に例外が存在しているため、誤解となります。 JavaScript の関数宣言 JavaScript で関数を作る方法は色々ありますが、その中でもfunctionキーワードを用いる方法は初期から存在しています。functionキーワードを用いて関数を作る場合は関数式と関数宣言の 2 つに大別されます。関数式はその名の通り式である一方で、関数宣言は文のように使用され、巻き上げ (hoisting) の挙動を持つことが特徴的です。 // 関数式 const func = function (num) { return num * 2; }; console.log(func(
はじめに 最近、周囲から「useEffectでバグった」という声を聞くことが増えました。そこで、今までなんとなくで使っていた useEffect とは何かを正しく理解したいと思い記事を書くに至りました。 この記事はReactの再レンダリングの仕組み(propsやstateが変更される度に再レンダリングされる)を理解している方向けです。 環境 TypeScript: 4.9.3 React: 18.2.0 そもそもuseEffectって？ 公式ドキュメントには以下のように記載されていました https://beta.reactjs.org/learn/synchronizing-with-effects 一部のコンポーネントは、外部システムと同期する必要があります。たとえば、React の状態に基づいて非 React コンポーネントを制御したり、サーバー接続をセットアップしたり、コンポーネン
CIのシークレット変数に1Password CLIを利用する - 24/7 twenty-four seven
CIでいろいろなタスクを自動化していると、CIで必要とするAPIのトークンやアカウント情報など設定しているシークレット変数が増えてきます。 たいていの場合はCIサービスのシークレット変数を利用すればよいですが、サービスによっては一度設定したシークレット変数を見ることができなかったり（GitHub ActionsやCircle CIが該当）、トークンやアカウント情報の更新や追加があったときにCIの変数を更新していくのが大変だったり、シークレット変数のメンテナンスはそこそこ面倒な作業です。 性質上かなり強い権限が設定されているトークンだったりすることもあるので、誰がその値をメンテナンスできるか、という管理の問題もあります。 そこで1Passwordをアカウント情報の共有に使っている組織なら、1PasswordはCLIの操作が提供されているのでCIから1Passwordのアカウント情報を取得する
ノートPCやタブレットとかについてるウェブカメラを使って、Googleマップ ストリートビューでランニングできるRunning on StreetViewというウェブアプリを作りました。 Google Maps Street Viewとウェブカメラを使って、ストリートビューを走るウェブアプリを書きました。 走るとストリートビューが進む感じ(雑な判定なので走らなくてもいい)https://t.co/bhYq289QmS 使い方はこちらhttps://t.co/kypr9Oo9JU Google MapのAPIキーは自分で取得する必要があります。 pic.twitter.com/tmD1XNwjSa — azu (@azu_re) May 8, 2020 動画はデバッグ用のモデルに走ってもらっていますが、ウェブカメラで走るなどのアクションに応じてストリートビューを進行できるアプリです。 色々検
追記 コメントありがとうございます、ご指摘を参考に読みやすくなるように修正しました！ はじめに (本記事は初歩的な内容ですが、少なくとも僕は引っかかったので記事化したものです) Cookie に HttpOnly という属性があります。 この HttpOnly を設定することで JavaScript からの直接の参照・操作を禁止することによって、XSS などの手法によって悪意のある第三者から Cookie の内容を見られるのを防止することができます。 ここまでは多くの記事に書いてあるのですが、私は一点ずっと勘違いしていました。 いや、直接値を読み取れないってだけで、API呼び出しとかの時に使えないってわけじゃないんかーーーーーーーーーーい！！！ いや、まあそれすらできなかったら何のための Cookie なんですかという話なのでそりゃそうなんですが... ということで見ていきます。 実装例(
ReactコンポーネントをブルブルさせながらReduxのパフォーマンスチューニング - カミナシ エンジニアブログ
はじめに こんにちは、カミナシ社でソフトウェアエンジニアをやっている浦岡です。 我々は「ノーコードでユーザー独自の現場アプリを作成できる」サービスを開発しています。 そのサービスのフロントエンドの開発にはReact×Reduxを使っているのですが、 サービス特性のため「Reduxのstateがファットになりがち」であったり「コンポーネント間のデータの依存関係が多くなりがち」といった状態に陥ります。 その結果、アプリの反応速度が遅くなりがちです... この記事では、上のような状態に陥った「React×Redux」アプリの高速化の一例をサンプルアプリを用いて説明します。 サンプルアプリについて 今回、Reduxのチュートリアルにあるカウンターアプリを改良し、下のような「モンスターの捕獲記録」アプリを作ります。 サンプルアプリについて Version1(コンポーネントをブルブルさせてみる) まず
Redux is state management. State management belongs off the main thread. React is a popular web framework.Some love React for its component abstraction, some because of its vast ecosystem and some for its meta-platform properties. Note: I use words like “popular” or “often” being very aware that I am under the influence of the Web Development Twitter Echo Chamber™️. Your mileage may vary, proceed
TypeScriptの表現力で自由なJavaScriptに立ち向かう 〜 Immutable.js 編 〜 | Wantedly Engineer Blog
WantedlyのDX (Developer Experience) Squadでエンジニアをしている原 将己 (qnighy) です。 Immutable.jsというライブラリを使っているJavaScriptコードをTypeScript化するにあたって、既存の型定義では不十分だった箇所を独自に修正しました。このときしたことがTypeScriptの知見として面白いと思ったので紹介します。 Immutable.js とはImmutable.js はFacebookが開発している永続データ構造 (純粋関数型データ構造、不変データ構造) のJavaScript実装です。配列 (List), Map, Set などが実装されていますが、データ構造に対する変更操作は全て「新しい状態を返す関数」の形で提供されています。 import { List } from "immutable"; const u
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebAssembly Reference Typesで、WasmでDOMを操作する壁がここまで下がった
React Hook Formハマりどころとベストプラクティス
React Forget は何を「忘れ」させてくれるのか
Next.js で始める gRPC 通信 - 30歳からのプログラミング
GitHub Actions で Dependabot のプルリクエストの滞留を防ぐ仕組みづくり
React Suspenseで不要な描画処理をなくす
Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう | fwywd（フュード）powered by キカガク
Linuxのプロセスのコマンドライン引数についていろいろ
Semgrepを使った構文木ベースの検索と置換でコードのリファクタリングをする
Deno v1.15で導入されたNode.js互換モードについて
TypescriptとReact HooksでReduxはもうしんどくない - Qiita
Node.js v18 の主な変更点 - 別にしんどくないブログ
【React】1度だけ変更されるstateにはuseStateよりuseReducerを使う方が最適
Node.js v15ではunhandled rejectionでプロセスがエラー終了する
Notion投稿をいい感じにSlackへ通知するGoogle Apps Scriptを公開しました｜マーティン
SWR vs React Query - fsubal
TypeScript 5.2で予告されているusingをいじってみる
ヘッドレスブラウザを活用して少しリッチなスタイルのPDFを生成する
MSW を活用した WebAPI リグレッションテスト
第2章 ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント | gihyo.jp
【React】useEffect解体新書 - Qiita
Googleマップ ストリートビューでランニングできるウェブアプリを作った
Cookie の HttpOnly 属性について勘違いしていたこと - Qiita
React + Redux + Comlink = Off-main-thread — surma.dev