The most comprehensive authentication framework for TypeScript.
Better Auth
The most comprehensive authentication framework for TypeScript.
GraphQL Code Generator v3 Roadmapで推されているclient-presetを紹介する
こんにちは。皆さんはGraphQL Code Generatorを利用していますか？ 筆者は普段React/TypeScript/Apollo Client(またはurql)といったスタックでWebフロントエンドを書いており、その際にはGraphQL Code Generatorをほぼ必需品と言えるほど愛用しています。 サーバー側から提供されたスキーマやクライアント側が必要なデータを宣言したオペレーションから型やコードを生成し利用することで、ロジックに関する実装量が大きく削減でき、ミスを減らすことにもつながります。GraphQLを使う理由の1つと言っても過言ではないでしょう。 そのGraphQL Code Generatorではv3 Roadmapとして今後の方針が公開されており、client-presetという新しいプリセットが紹介されています。そこでは「GraphQL Code Gen
TypeScript+clasp+esbuildでGASのローカル開発をもっと便利に
はじめに 本記事では、TypeScript+clasp+esbuildを用いたより便利なGoogleAppScriptのローカル開発環境の構築方法を紹介しています。 claspについて GoogleAppScriptで開発しようとすると、規模によってはgitを使って複数人でのバージョン管理やTypeScriptを利用した開発環境を準備したくなります。 そこで、@google/claspという開発ツールを用いることで、TypeScriptの利用やCLIでGoogleAppScript上にdeployが可能になりローカルでのコード管理が容易になります。また、必要に応じてprettierやeslintなど開発を便利にしてくれる機能なども導入可能になります。 しかし、clasp単体を利用したやり方ではTypeScriptのコンパイルはよしなにやってもらえるものの、ESmoduleの機能が使えずファ
Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。
Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）
初めに 最近自分がNext.jsをやる案件がとにかく増え、ディレクトリ構成が固まってきたのでここに置いておきます。 何か意見あれば是非いただけると嬉しいです。 個人的に最近流行りのfeaturesはやりすぎだと思っていたのですが、結局開発していくとfeaturesのようなディレクトリを切った方が合理的な場面が多々出てきたのでこうなった次第です。 設計時に参考にした記事 こちらのReact TypeScript Cheatsheetに、Recommendationとして載っているbulletproof-reactを参考にしました。 構成 例として飲食店のウェブサイトで、コース（course）という機能を持たせるとする。 ├─ components/ │ ├─ elements/ │ │ └─ Button │ │ ├─ Button.stories.tsx │ │ └─ Button.tsx
JavaScript／TypeScript向け静的解析ツール「Oxlint」が正式に公開、Rustの採用で大幅に高速化
Oxlintは、JavaScriptやTypeScriptのコードを調べ、エラーにつながりやすい書き方となっている部分や、必要のない部分を指摘する機能を持っている。この用途では「ESLint」が事実上の標準となっているが、100％JavaScriptで記述してあるため、実行速度が問題となっている。 Oxlintでは、プログラムを記述する言語にRustを選ぶことで処理速度を大きく引き上げた。さらに、並列処理に対応し、コンピュータのプロセッサが搭載するコアの数が増えるに従って性能が上がっていく設計になっている。さらに、テスト結果のメッセージをシンプルかつ分かりやすいものにした点も特徴として挙げられる。 正式版になる前からOxlintを試験的に使っていた米Shopifyの担当者は、ESLintを使っていた頃は自社開発のコードをテストするのに75分かかっていたが、Oxlintを使ったところ、10秒
Vue RouterとTransitionで画面遷移の実装したときにハマった
はじめに Vue RouterとVueのビルトインコンポーネントであるTransitionで画面遷移時のアニメーションを適用することにした。 しかし、一部のコンポーネントの読み込みが以上に遅くなってしまったので、調査〜解決まで行ってみた。 TL;DR <Transition>は子要素として単一ノードでなければならない。 <component>を<div>で囲って一つの要素にする必要があった。 ただ、<Transition>のアニメーションを発火させるため、<div>にkey属性を追加する必要がある。 Transitions require single children nodes. Therefore you can wrap the <component> tag inside a <div>, however, a plain <div> inside a <transition>
Svelteでコンポーネント作るときにHTML属性のtype補完を効かせる方法
import { ButtonHTMLAttributes, FC } from 'react'; type ButtonProps = ButtonHTMLAttributes<{}> export function Button(props: ButtonProps) { return <button {...props}>hello</button> } <script lang="ts"> import type { HTMLButtonAttributes } from "svelte/elements"; interface $$Props extends HTMLButtonAttributes {} </script> <button {...$$props}> hello </button>
Jestを使ってReact Hook Form + Yupのテストをする
React Hook FormとYupを使ったフォームのテストをJestで書いてみました。 Reactを使ったフォームのレンダリングは行わずに、フォームのロジックのみをテストします。 フォームに値をセットして、フォーム送信時に使われる handleSubmit で出力される最終データをチェックします。 スキーマ定義によって出力データが意図しない結果になるバグがあり、コンパクトに検証するために作成したテストです。 testing-libraryのrenderHookを使って React Hook Form のフォームへのアクセスを得る 今回は Testing Libraryを使って React Hook のテストを行います。 React Hook Formはフォームの状態管理を行う useForm というカスタム・フックを提供しています。 renderHookでuseFormをレンダリングし
Next.jsでCSRF対策を簡単に実装する方法 - 動かざることバグの如し
環境 Nextjs 13 edge-csrf 1.0.3-rc1 TypeScript 5 やりたいこと 今日は、Next.jsの開発について書こうと思います。Next.jsは、開発がとても便利であることがよく知られています。 しかし、CSRFトークンの機能がRailsのようにネイティブで用意されていないため、自分で実装する必要があります。 これは面倒ですが、edge-csrfというライブラリを使えば簡単にCSRFトークンの実装ができます。先日、私自身もこのライブラリを使ってCSRFトークンの実装を行い、スムーズに開発を進めることができました。 今回はそのメモ https://github.com/amorey/edge-csrf インストール npm install edge-csrf yarn add edge-csrf ミドルウェアの追加 APIのエンドポイントごとにCSRFの実装す
TypeScriptの型安全を高める魔法 keyof と typeof の使い方
今回はTypeScriptでよく見かける keyof と typeof について分かりやすく具体的なコードを使って解説します。 これらはTypeScriptの強力な型システムの一部でより柔軟で安全なコードを書くときに役立ちます！ keyof とは？ 🤔keyof は、オブジェクト型のキーを取得するTypeScriptの型演算子です。 オブジェクト型に対して使うことで、その オブジェクトのすべてのキーを文字列リテラル型のUnion型として取得 できます。 実際のコードを見てみましょう。 type Person = { name: string; age: number; }; type PersonKeys = keyof Person; この例では PersonKeys は "name" | "age" という型になります。 このようにオブジェクトからキーの型を取得できるわけですね。 k
画面遷移時に不要なAPI通信を中止してパフォーマンスを向上させる
事前準備 実際にコードを動かす前に不要なリクエストを打ち切った場合とそうでない場合の違いをわかりやすくするためにブラウザの開発者ツールから通信速度の調整をします。 ネットワークタブを開いて以下の画像のように No throttling をクリックし Slow 3G を選択してください。こうすることで通信速度が遅くなり、不要なレンダリングが発生しないことがわかりやすくなります。 リクエストを中止しない場合とする場合のレンダリングの違い 実際に実装したものはこちらです。 リクエストを中止しない場合の挙動を見たい時：Not Cancel Fetch をクリック リクエストを中止する場合の挙動を見たい時：Cancel Fetch Fetch をクリック /1の URL にアクセスした場合、ユーザー ID が 1 のものを取得しブラウザに表示しています。4 つのボタンがありますが、それぞれのボタンの
Next.jsで戻る厨を満たすrecoil-sync-next
以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー
Axios で良い感じにリトライ機能を実装する
こんにちは。ぬこすけです。 axios は JavaScript 界隈では有名で http 通信をするのに便利なライブラリですが、タイムアウトで通信に失敗した時にリトライする機能はありません。 リトライ機能を追加するためのライブラリ、例えば axios-retry もありますが、簡易的であればライブラリを導入せずともサクッとリトライ機能は実装できるので紹介したいと思います。 実現する機能 この記事で紹介する機能は次のようになります。 リクエストしてタイムアウトになった時にリトライをする。 指定した回数、成功するまでリクエストする。 リトライする時は指定した時間、間を空けてリクエストする。 リクエストに成功、または指定した回数分リトライを実行したら、リトライ回数はリセットする。 URL ごとでリトライ情報を保持する。 例えば、 /hoge と /fuga にリクエストした時に、 /hoge
Vuexのstateはundefinedで初期化しちゃダメ？ - kk-web
条件付きではありますが、あまりよくないらしいです、全然知らなかった… ちなみに、undefined で初期化という表現自体おかしいですが、今回はわかりやすさ重視でこう書いちゃいます。 なぜ気づいたか Vuex に対し jest でテストを書いていたところ、undefined で初期化した state が更新されないことがあったため。 根拠 vue-class-component#undefined-will-not-be-reactive To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make a property reactive if it has undefined as initial value. You should
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to check if a given value is in a union type array
Next.js Practical Introduction Pt. 3: Navigation and Routing
Bun — A fast all-in-one JavaScript runtime
zxcvbnライブラリを使ったサインアップフォームのデモ | ISSUE
Debounce async function and ensure sequentiality