ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

javascript

cloudflare workerを始める

cloudflare workerずっと気になってたのでhelloworldとそのテストを触ってみたメモ 事前にアカウントは作っておいたのでプロジェクト作る所から。 プロジェクトを作る pnpm create cloudflare@latest これを実行するとcliでログインしていなければブラウザが…

chakra-uiでthemeからカラーコードを取得する

chakra uiのテーマ機能を使用しgray.300のような値を特定のカラーコードに変換できるようになっているが、chakra uiのコンポーネントでは無いものに値を渡すに当たってカラーコードハードコードするのも…と考えていた所、ちゃんとカラー文字列をカラーコード…

astroを実践投入してみた

所属企業のHPのホスティングサービスを引っ越ししようとしたら、最新LTSのnodejsでビルドできなくなっていて会社に相談した所手を入れる時間を確保できたのでライブラリのアップデートなど色々手を入れてみた。 astro.build tl;dr astro簡単に導入できたし、…

tanstack-routerのquick startやってみた

健康診断に向かってる途中にtwitter見てたらtanstack-routerが発表されていた。 100% Typesafeと書かれているのが気になってとりあえず試してみることにした。 そこでソース読んだり色々試す前にquickstart動かしてみようと思ったら地味にハマったのでそれの…

prismaのquickstartであるstarterを1から作ってみた

prismaのquickstartはすぐにできたので、この環境を0から作ってみる sqliteの説明はないのでDBは適当に選択した www.prisma.io 今回はyarnとesbuild-registerでやる やってみたソース github.com プロジェクトの作成と必要なもののインストール yarn init -y…

google driveの重複をハイライトするブックマークレットを書いた

google driveの無限ストレージが無くなってしまうのでNasを買ってrcloneで移そうと思ったら NOTICE: xxx/yyy.mp3: Duplicate object found in source - ignoringと言われてgoogle drive上に同じファイルが複数あることがわかった。 どうもアップロードする際…

dayjsで時間文字列を特定のタイムゾーンの値としてパースする

google calendarのAPIを触っていて特定のタイムゾーンの時間として時間情報をパースする必要があって調べたら、特に情報がなかったのでメモ。 dayjsのtimezoneプラグインを読み込み tz 関数でパースする際にtimezoneを指定する。 day.js.org import * as day…

ts-jestではなくesbuild-jestを試してみる

開発にgoogleapisを使っているとtscが遅くなってしまったのでテストの実行だけでも早くならないかと思い調べるとesbuild-jestとswr-jestというのがあることを知った github.com github.com aws-cdkの@aws-cdk/aws-lambda-nodejsがbuildにesbuildを使っている…

typescript 4.5 betaでes modulesを試す

node.jsでes modulesがサポートされた時にやってみようと思ったがts→mjsに変換する方法が無くて諦めたやつができるようになったっぽいので試してみた。 devblogs.microsoft.com 一応試したコードはgithubに上げてある。 github.com インストールと設定 beta…

node-cronのv3でハマった

そんな事あるのかって思ったのでメモ tl;dr node-cronのtask.destory()がなくなっていた 概要 家のラズパイで動いてるプログラムの依存をアップデートしたらnode-cron周りでエラーを吐くようになってしまった。エラーを見るとtask.destory()が呼べなかったら…

javascriptのオブジェクトから特定のプロパティを取り出しつつeslintのlintを回避する

javascriptであるオブジェクトから特定のプロパティを除いたオブジェクトが欲しい時にdeleteではなくSpread構文を使って取得し、その際のeslintのlintの対応をしたメモ developer.mozilla.org 特定のプロパティだけを取り出す Spread構文を使ってプロパティ…

reactを自作するやつやってみた

元記事 pomb.us 日本語訳 zenn.dev 環境構築 環境自体はreact-scriptsを使用する やってみて Fiberの名前だけ知らなかったものがどういったものかわかった JSX解釈の実装方法を学べた 他の処理を妨げないようにrequestIdleCallbackでループを作って画面を組…

node.jsでgoogle recaptcha v3の検証をする

クライアント側で取得したGoogle reCAPTCHA トークンの検証をNest.jsでやろうと思ったら、無駄にハマったのでメモ tl;dr データをapplication/x-www-form-urlencodedで送れ 検証方法 公式のドキュメントで指定されているエンドポイントに対してPOSTでクライ…

Nest.jsで特定のAPIだけset-cookieを削除する

gaeにデプロイされているNest.jsプロジェクトで、レスポンスをエッジサーバーにキャッシュさせたい。 tl;dr いい感じのHeader設定すればキャッシュできそう csurf使ってるとset-cookieが邪魔 interceptorでresponseのheaderからset-cookieヘッダーを削除 GAE…

Yupのcastエラーを任意のメッセージに変える

yupのYup.date().required('プロパティは必須です')のようなメッセージを出すと思うんですが、Yup.date()の変換に失敗した場合に出るメッセージの指定方法がぱっとわからなかったのでメモ github.com tl;dr typeErrorを使う そもそもの発端 他の主要ブラウザ…

nestjsでpostのraw bodyを取得する方法

webhookのverificationでbodyParseされてないraw bodyが必要になって割と困ったのでメモ tl;dr 結局方法3で実装した ダメだったやり方 検索すると一番最初に以下のstack overflowが引っかかって、raw-bodyというnpmモジュールをインストールしてrawbodyを渡…

nest.jsで特定のパスだけcsrufのチェックを回避する

nest.jsで開発をしていて、webhookを利用したい時に特定のパスだけcsurfチェックを外したい時に公式の説明とかだと「csrfのガードの前に特定のエンドポイントを設定する」方法しか書かれていなくてnestでは使えなかった。 そのため直接app.use(csurf())する…

nest.jsの起動時のログを止める

github.com tl;dr 一旦LogLevelの設定でlogをなくす 起動後Loggerの設定を上書きする きっかけ 最近nest.jsを使っていて、serverless環境で動かす時にgoのechoだとできたんだけど、起動時のログ出るのなんとか抑制できないかなーと思って結構無理やりっぽく…

GoogleFormがsubmitされた時にgasからメールを投げる

会社のwebサイトに導入したGoogle Formがsubmitされた時にG Suiteで用意したメーリングリスト(グループ)にメールを送りたかっただけなのに 信じられないくらいハマって時間かかったので、誰かが同じような所でハマった時に助けになればと思いメモ ハマった…

今からReactを始める人に向けた型の話

周りでこれからReact始める人とかが増えてきて、以外と知られてないんだな〜ってことがあったのでReactに型をつけるというかTypeScript(以下ts), Flowと prop-typesの関係について書く tl;dr prop-typeはやめとけ tsはいいぞ prop-typesとは 昔はReactのcore…

parcelで動的にファイルを読み込む

yuzu441.hateblo.jp parcelでReactのアプリケーション書いてて、画像を動的に取得したい時にやり方が分からず困ったのでメモ やりたかったこと jsonか何かにデータを定義しておいて、そこから画面を組み立てたかった。 課題 静的な画像であればhtml内に含ま…

AsyncStorageをreact-native-community版に移行する

react nativeにはAsyncStorageというデータの永続化に使用する機能がありますが、今後react nativeのコアから出されてreact-native-community下に移されるみたいです github.com そのため将来的にAsyncStorageを使用しているアプリはこのパッケージに移行し…

素振り環境にparcelのご提案

最近Reactを素振りするための環境として、前から話題になってたparcelを使ってみたらとても簡単に動作環境作れたのでその紹介 ja.reactjs.org parceljs.org githubに今回のコード等すべて置いといたので、読むの面倒な人はそちらで github.com 環境作成と依…

reactのlazy load & suspenseを試してみた

ちょっとずつしか手が出せてなかったReact.jsをニートになったのを気に学び直している その過程でReact.lazyとSuspense`をwebpackで試したのでそのログ reactjs.org tl;dr コード自体はここに全部おいてある github.com 動作チェック 動かすための方法はREAD…

dockerでフロントの開発環境を作ろうとした話

こんにちは、ソウルジェムが日々濁っているゆずです タイトル通り今回は開発環境をdocker化しようとした話なんだけど結果的に実現できず妥協したので、いい方法知ってる人はtwitterなりで教えていただけると嬉しいです tl;dr ローカルでyarn installして、ビ…

react-chartjs-2の線の太さを変更する

なんかドキュメントとして載っている箇所を見つけられなかった*1 github.com これをダウンロードしてnpm run examplesを実行した結果で動作を確認する 変更方法 examples/src/components/line.jsの中の、datasetsプロパティの中にborderWidthを設定して値を…

redux始めました

最近ちょっと時間ができたのでreact context api触ってみたり、MobX触ってみたりしてます。 ちゃんと書くとMobXか隙間時間でちょこちょこやってたけど、decorator使えるならめっちゃ楽— ゆず (@yuzu_441) 2018年5月15日 しかし会社ではreact + reduxで作られ…

browsersyncを使ってみたら思った以上に便利だった

browsersync使ってますか?死ぬ程今更ですが、使ってみたら思ってた以上のことをしてくれた browsersync.io 最初は更新してくれるだけだと思ってた 最初はファイルの変更検知してブラウザリロードしてくれるだけでしょと思ってたら、リロードしてくれる以上…

reactのテンプレ作った

GWに予定が初日と最終日にしかなくて、いつも通り映画を見て過ごしているのですが 映画見てるだけだと手持ち無沙汰なのでreactでなんかやってみようと思ったけど、create-react-app使いたくなかったのでwebpackの設定とか入ってるテンプレ作った github.com …

prettier + tslintを使ってみる

今話題のフォーマッターprettierを仕事のプロジェクトに導入したくてtslintとの組み合わせ方について調べた とりあえず必要なものを入れる yarn add -D tslint prettier tslint-plugin-prettier tslint-plugin-prettier github.com Runs Prettier as a TSLin…