【TypeScript】ReactとCRXJS Vite Pluginで作るChrome拡張機能サンプルアプリについて 今回サンプルとして Zenn の閲覧履歴を管理できる Chrome 拡張機能を作成しました。 メッセージパッシングやストレージなど基本的な Chrome 拡張 API を使用しているので学習の補助などにご活用ください。 ソースコードは MIT ライセンスで公開しています。
ReactでChrome拡張機能を作るメモ
はじめに Chrome拡張機能を作る機会があったのでその時のメモです。 ライブラリ選定 以下のライブラリを使用する。 React TypeScript Vite Material-UI prettier 選定基準は新しすぎず古すぎない。 プロジェクトの作成 プロジェクト作成は以下のサイトを参考に行う。 vite3がbeta版なので、vite2を使用する。 プロジェクトの設定 MUIは以下のサイトを参考にインストールする。 prettierは以下のコマンドでインストールする。 . ├── manifest.json ├── package-lock.json ├── package.json ├── src │ ├── background.ts │ ├── content.ts │ └── popup │ ├── App.tsx │ ├── index.css │ ├── index.ht
Chrome ExtensionsをVite + TypeScriptで開発する - ひよこまめ
最近、Vite + TypeScriptの構成でマニフェストV3のChrome拡張を作った。 今後もChrome拡張を作る機会は何度もありそうなので、未来の自分のために、この記事では次のことが参照できるようにする。 Vite + TypeScriptで作る場合のファイル構成Chrome拡張でよくある処理をどう実現するか以前Chrome拡張をwebpackで開発する話を書いたことがあるが、この記事は、その記事のVite版である。 Chrome Extensions を wepback + TypeScript で開発する 動作を確認した環境 Typescript v4.6.4Vite v3.2.3@crxjs/vite-plugin v2.0.0-beta.17CRXJS Vite Plugin 今回は、CRXJS Vite PluginというChrome拡張を作るためのViteのプラグイン
Next.js × NextAuth × Prisma × VercelPostgresで構築するモダン認証機能システム
はじめに 認証機能を一から作成したいと思い、Next.jsとNextAuthを使ったGithub認証機能の実装を行ったので、その手順を記事していきます。ユーザーデータ管理にPrismaを、データベースはVercelPostgresを使用しています。 ソースコード 実装したサンプルデータは下記リポジトリに格納しています。 バージョン情報 今回実装したバージョン情報のです。 next.js: v13.4.1 next-auth: v4.22.1 prisma/client: v4.14.1 vercel/postgres: v0.3.0 typescript: v5.0.4 技術詳細 Prisma PrismaはNode.jsとTypeScriptによる、オープンソースORM(Object Relational Mapping)です。SQL(select, insert, update, de
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript）
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
次世代のFormatter「dprint」を試してみた
何のプラグインを使うか聞かれるので、スペースで選択します。 対応する設定が書かれた dprint.json が作成されます。 TypeScriptの例 下記プレイグラウンドから設定をコピーして、dprint.json に貼り付けます。 { "typescript": { "lineWidth": 80, "indentWidth": 4, "useTabs": true, "semiColons": "prefer", "quoteStyle": "alwaysDouble", "quoteProps": "preserve", "newLineKind": "lf", "useBraces": "whenNotSingleLine", "bracePosition": "sameLineUnlessHanging", "singleBodyPosition": "maintain", "
EmacsでTypeScript/React開発する2023 - たごもりすメモ
世間に死ぬほど色々な方法があるのはわかっているがとにかくまっさらな状態から最短手順でEmacsでJSX/TSXが書けるようになりたい! という話。VSCodeとかそういう話には目を背ける。 tsxファイルはweb-modeで起動するようにすればシンタックスハイライトとインデントはうまくいくので、あとはlspを起動するようにすれば快適です！— つかもとたけし (@itometeam) 2023年1月23日 自分で調べつつ試行錯誤したんだけど、最終的にはこのtweetで教えてもらった通りになった。メジャーモードとしてweb-modeを使いつつflycheckとLSPで開発支援。 macOSにインストールしたEmacs*1、およびMELPAにあるパッケージだけで、以下のようになった。 (require 'web-mode) (add-to-list 'auto-mode-alist '("\\.
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
Prismaのfindをラップしたときに、include周りで拡張性を持たせたい！
きっかけ みなさんNestJS×Prismaでサービス層を書いてるときこんなことに困ったことありませんか？ findMany(classId: number): Promise<Student[]> { return this.prisma.student.findMany({ where: { classId }, }); } findManyWithClass(classId: number): Promise<(Student & { class: Class })[]> { return this.prisma.student.findMany({ where: { classId }, include: { class: true }, }); } 引数は全部一緒なのに、includeしたい要素が違うから同じようなメソッドを複数作らないといけない... この2つのメソッドを一つに
[Next.js] Storybook
TypeScriptベースのNext.jsプロジェクトでStorybookを使ってコンポーネント主導開発をしてみましょう。 概要今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトにStorybookを入れてコンポーネント主導開発(Component Driven Development)をやってみましょう。 Storybookここで紹介するソースコードは下記のリンクで確認できます。 GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/6.storybookブログリストこのブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。 [Next.js] 始まる[Next.js] TypeScript[Next.js] Prettier[Next.js] 絶対パスでコンポ
![[Next.js] Storybook](https://cdn-ak-scissors.b.st-hatena.com/image/square/42c65e8db30c6c67f722dab5a657df0845bb84a3/height=288;version=1;width=512/https%3A%2F%2Fdeku.posstree.com%2Fassets%2Fimages%2Fcategory%2Fstorybook%2Fbackground.jpg)
[Next.js] MUI
TypeScriptベースのNext.jsにUIライブラリであるMUI(Material UI)を追加して使う方法について説明します。 概要今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトでUIライブラリであるMUI(Material UI)をインストールして、使う方法について説明します。 MUIここで紹介するソースコードは下記のリンクで確認できます。 GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/8.muiブログリストこのブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。 [Next.js] 始まる[Next.js] TypeScript[Next.js] Prettier[Next.js] 絶対パスでコンポーネント追加[Next.js] テスト[
![[Next.js] MUI](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56373db1eec167d81178ce358ce2ada3a0e1516/height=288;version=1;width=512/https%3A%2F%2Fdeku.posstree.com%2Fassets%2Fimages%2Fcategory%2Freact%2Fnextjs%2Fbackground.jpg)
Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それを使う 本番と同じスキーマを持つ DBMS に対して、実際に insert したり select してテストする DBMS は docker-compose upとかで事前に立ち上げておく 双方にそれぞれ良さがあって、プロダクトによってどっちでやるか変わってくると思います。 この記事では 2 の手法を Prisma でどうやるかについて紹介します。 前提 実際のテストコードの例 テストヘルパーを作る 別解: ヘルパーを自動生成する je
TypeScriptのゾッとする話 ~ Zodの紹介 ~
現在( 2021/09/13 )、この記事の情報は古くなっている可能性があります！ そのため、なるべくは公式ドキュメントを参照してください。 参照: 公式ドキュメント この記事について 先日、「 エンジニアとして一番怖いモノは何？ 」と知人に尋ねると、 「 実は、TypeScript が一番怖い 」 と言ってきました。 そんな訳ないだろうと思っていたのですが、どうやら知人は本気の様子。 「 TypeScript が嫌いならまだしも、TypeScript が怖いとは、これはナニかあるな 🤔 」 と思った私は、TypeScript First なライブラリである Zod を知人に紹介して、事の真意を確かめようとしたのでした。 怖いならもっと怖がらせてやろうと思ったのは内緒 🤫 しかし、知人に紹介するだけでは勿体ないので、今回は皆さんに知見を交えながら Zod の事を紹介していこうと思います
jest mock 調査まとめ
jestのモックの基本 モック関数と引数や呼ばれた回数の記録(sinonで言うところのspy機能) 基本はモック関数であるjest.fn を利用する。 jest.fn() の返り値自体にmock というプロパティがあり、それにアクセスすることで、何回呼ばれたとか、引数の値はなんだったのかとかわかる。 const mockCallback = jest.fn(x => 42 + x); forEach([0, 1], mockCallback); // The mock function is called twice expect(mockCallback.mock.calls.length).toBe(2); // The first argument of the first call to the function was 0 expect(mockCallback.mock.cal
Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう | fwywd（フュード）powered by キカガク
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
ESlint で import を自動ソートする
import が増えてくると、その順序が気になってきます。 外部ライブラリからのインポートは上にあって欲しいし、reactからのインポートはさらに上に固定したくなりませんか？ ESlint のeslint-plugin-importというプラグインを使えば簡単にソートできます。 使うのはeslint-plugin-importのimport/orderというルールです。 設定も色々あって、ある程度の自由度で順序を決めることもできます。このルールは fixable なのでeslint --fixコマンドで自動ソートが可能です。 公式の解説もあるのですが分かりにくい個所や誤っている個所もあるためこの記事を作成しました。 ソートした例 早速eslint-plugin-importのimport/orderを使ってソートした例です。 上が下のようにきれいになります。 ソート後はreactからのイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - wxt-dev/wxt: ⚡ Next-gen Web Extension Framework
TypeScript | Bedrock Wiki
GitHub - vanjs-org/van: 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.
ReactではじめるChrome拡張開発入門
