Next.js App Routerにおける設計やベストプラクティスを、筆者なりにまとめました。
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある(過激)。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
はじめに Reactの人気はどんどん加速しています。これからフレームワークを学ぶならReactを選ぶのは賢い選択でしょう こんにちは、Watanabe Jin(@Sicut_study)です。 今回はReactをこれから学んでいこうと思っている方に向けて、初心者チュートリアルを作成しました。 このチュートリアルではReactを書く上で欠かせないことを紹介しています。 実際にアプリを作りながらReactの機能について学ぶことによってより深く理解することが可能です。 このチュートリアルを最後までやったら、次に自分で習ったことを活かして簡単なTODOアプリなどを作れば基本がしっかり身につくようになっています。 またこのチュートリアルではJavaScriptではなくTypeScriptを採用しています。 モダンな会社ではTypeScriptが採用されることが多いはずだなので、少しでも慣れていただけ
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか? R
以下の記事、内容がひどくて空いた口が塞がらなかったのだが、 (はてブで)ブックマークして下手にホッテントリにでもなったら嫌だなと思いそっとブラウザのタブ閉じた。 が、しばらくすると残念ながらホッテントリ入りしてしまったので、はてブにコメントを軽く書こうとしたが100文字に収まらなかったので増田にした。 技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL まず、「特定条件下では MySQL は我々のプロダクトには不向き」を「MySQLを使うと会社は潰れる」なんて表現するのおかしいでしょ。 以下の記事からの引用だが Uber のエンジニアは「PostgreSQLではアーキテクチャに制限がありすぎてUberのシステムを支えきれない、MySQL+InnoDBに変えたら全部解決した」と主張している。 UberエンジニアがブログでPostgre
生SQLを扱う $queryRaw TypeScript向けのORMライブラリとしてPrismaがあります。Prismaは直感的で型安全なAPIを提供し、TypeScript向けのORMとしては第一に名前が上がることが多いライブラリです。 しかしそんな人気なPrismaでも、裏側では少しクセのあるSQLが発行されていたり、欲しいSQLがPrismaのAPIでは実現できない場合があります。 そういった場合のために $queryRaw というメソッドが用意されており、これを使うことで生SQLを書いてその結果を受け取ることができました。他のORMにもよくある機能です。 例えば以下のように実装することができます。 const users = await prisma.$queryRaw` SELECT id, name FROM "Users" WHERE id = ${userID} `; co
TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク
ソート順の選択プルダウンがある一覧系ページを実装するとき、選択肢たちの管理方法に頭を悩ませることが多いと思います。 商品一覧ページの概要 ソート順プルダウンの選択肢たち 上の画像に示したような場合だと、 《クエリパラメータ》と《選択肢》の間の相互変換 ?sort=price&order=desc <--> 「価格が高い順」 《select の状態に使うための文字列》と《選択肢》の間の相互変換 <option value={id}>{label}</option> クエリパラメータが sort order の2つあり、それらをそのまま流用できないので 最低限でも、これらの変換ロジックを用意しておく必要がありますね。 この記事では、このような「選択肢と、それにまつわる変換ロジック群」を整理する方法を、高凝集・SSoT (Single Source of Truth; 信頼できる唯一の情報源)
ここで言う「Web標準のバックエンドアプリ」とはCloudflare Workers、Deno、BunなどのWeb標準をサポートするランタイム上で動くWebアプリです。もしくは、Node.jsでもWeb標準のAPIをサポートしているので、これから紹介するアプリとテストコード自体はNode.js上も動きます。 これらのテストを書く、実行するのは実にシンプルで、拍子抜けしてしまうほどです。ですが、現在、20,000行あるHonoのテストコードは、これらのやり方と全く同じ方法を取っています。注目すべき点は、実際のサーバーを立ち上げることがなく、抽象化されたリクエストとレスポンスのやり取りを試験するだけで、品質が保たれる点です。Honoのテストでは、ランタイムによっては一部実サーバーを立ち上げますが、コアの20,000行ではサーバーを立ち上げていません。この抽象化はPythonのWSGI、Ruby
Node.js で型安全な環境変数を扱うスニペットを作りました。 next devのようなアプリケーションの起動、Playwright でのテストなどコマンドごとに渡したい環境変数のセットが異なるケースがあります。 この場合に環境変数をまとめたものを定義して、それをコマンドごとに読み込むセットを変えたいことがあります。 次のようにベタ書きしてもいいのですが、渡したい環境変数が増えると管理が大変になります。 NEXT_PUBLIC_LOCALHOST_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:3001 NEXT_PUBLIC_IS_TEST_MODE=false FOO="bar" next dev そのため、.envのような環境変数をまとめたファイルを使いたくなります。 Node.js は--env-fil
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
Generate query functions by using the --sql flag on prisma generate: Import the query function from @prisma/client/sql … … and call it inside the new $queryRawTyped function to get fully typed results 😎 If your SQL query has arguments, they are provided to the query function passed to $queryRawTyped The Prisma Client API together with TypedSQL provides the best experience for both CRUD operations
はじめに この記事はTypeScript初心者に向けて基本を一通りハンズオン形式で学べる教材となっています。 世の中にTypeScriptの教材は多くありますが、どれも文法ごとに文法紹介するためのコードを教えているだけで、学んだあと実際どのように自分のアプリに適応すべきなのかイメージがわきません。 これがTypeScriptの難しいところだと思っています。 このハンズオンではJavaScriptのアプリケーションをTypeScriptに移行しながら学んだことを活かしていくことで実践的に学ぶことが可能です。 ハンズオン動画と一緒に活用 こちらの記事をさらに活用できるハンズオン動画を用意していますのでご活用ください JavaScriptの怖い振る舞い JavaScriptはタイプセーフ機能が存在しません。 タイプセーフとは、コンパイラやランタイムがデータ型をチェックし、型が互換性のない操作に使
ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint や typescript-eslint の公式ドキュメントを前提として, 副読本的に参照してください. Getting Started with ESLint - ESLint - Pluggable JavaScript Linter Getting Started | typescript-eslint Flat Config のしくみ Flat Co
8月17日、海外のエンジニア向けメディアInfoQが「es-toolkit, a Modern Lodash Alternative」と題した記事を公開した。 この記事では、JavaScriptのモダンなユーティリティライブラリであるes-toolkitについて詳しく紹介されている。es-toolkitは、Lodashに代わるライブラリとして注目されている。 es-toolkitの特徴 es-toolkitは新たに登場したJavaScriptライブラリであり、LodashやUnderscore.jsの直接的な競合であり、以下のような特徴を持つ。 es-toolkitは、 debounce、delay、chunk、sum、pickなど、日常的に使用するユーティリティ関数を提供する es-toolkitは、最新の JavaScript 環境で2~3倍のパフォーマンスを実現する es-toolk
This leverages a starter sample available from https://github.com/microsoft/minecraft-scripting-samples/ with a simple build process and TypeScript compilation for Minecraft. From it, you can build out and expand simple gameplay styles. You can also use this project as a starter for your own scripting projects. Important Just getting started with JavaScript? You may want to check out the Scripting
こんにちは。ファンと共に時代を進める、Web3スタートアップのGaudiyでエンジニアをしているkodai(@r34b26)です。 Gaudiyでは、以前からフロントエンド(Next.js)とGateway(Node.js)の通信においてGraphQLを使用しています。 techblog.gaudiy.com その際に、GraphQLスキーマからコードを自動生成するツールとしてGraphQL-Codegenを活用してきましたが、開発者体験やユーザー体験においていくつかの課題を抱えていたため、今回、gql.tadaに移行しました。 この記事では、課題背景から実際の移行プロセスを紹介してみるので、gql.tadaが気になっている人やGraphQLの運用に課題感のある人の参考になれば嬉しいです。 1. GaudiyとGraphQL 2. GraphQL-Codegenにまつわる課題 3. gql
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
TypeScriptの標準ライブラリとは、TypeScriptに組み込みで備わっている型定義のことです。ECMAScript仕様で定義されているJavaScriptの言語機能に対する型定義が含まれています。また、ブラウザに組み込まれているWeb標準のAPIに対する型定義も含まれています。 TypeScriptの標準ライブラリでは、declaration mergingというテクニックが使われています。皆さんが普段書くアプリケーションコードではあまり使う機会がないかもしれませんが、TypeScriptの型定義、とりわけ標準ライブラリの型定義においては重要なテクニックです。 この記事では、declaration mergingの概要と、TypeScriptの標準ライブラリでどのように使われているかについて解説します。 declaration mergingとは Declaration merg
みなさん、Full-Stack TypeScript と呼びませんか! みなさん、こんにちは! アセンド株式会社で取締役CTOを務めている丹羽(@niwa_takeru)です。「物流の真価を開き、あらゆる産業を支える」をミッションに、運送会社向けSaaSの開発・提供をしています。また、個人としては今年5月に開催された TSKaigi の運営理事も務めております。 この記事で、みなさんにお伝えしたいことはただ1つ。↓↓↓ 「Full-Stack TypeScript という名称に統一しませんか?」 最近、フロントエンドやバックエンド、その他の領域を TypeScript で統一したアーキテクチャを採用する企業やプロダクトが増えています。私たちアセンドでも、フロントからバックエンド、IaC まで TypeScript で統一しており、1日に6回以上のデプロイを実現するなど高い生産性の恩恵を受け
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828 自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、2024年現在最も銀の弾丸に近いフロントエンド構成 これに勝てるのは remix を qwik に置き換えたときぐらい 今
はじめに こんにちは、畑田です。 最近、RDBを使用しているプロダクトをリプレイスする機会がありました。 このプロジェクトの目標は今現在の使用や実装方針をできるだけそのままに、インフラと技術だけをリプレイスするというものでした。 もちろん、インフラや技術を刷新するということはその上に乗るアプリケーションの実装にも必ず影響を及ぼします。その中で出来るだけ現状の仕様に寄せる試みを行いました。 元のプロジェクトはPHPで書かれており、DBのへの通信においても、文字列とsprintfなどを使用し、生のSQLを書いてpg_queryで実行していました。 私はこれを再現する最も安全な方法を探しました。 Prismaなどを用いたactive record形式のORMを使用するより、SQLに近い書き味のクエリビルダーを求めてkyselyに辿り着きました。 あまり情報が第三者からの情報が出てきていないように
登壇者 TypeScriptでバックエンドのテストを書くときの課題早速なんですが、みなさんテストを書いてますでしょうか? 昨今では、TypeScriptでバックエンドを書けるのが普通になってきました。バックエンドで利用できるORMやフレームワークも充実してきています。 バックエンドはフロントエンドに比べてデータベースを扱ったり、重要なロジックが含まれているので、しっかりとテストを書きたいというモチベーションが湧いてくると思います。 そこで課題になるのが、テストデータの準備ですね。 例えば、Prismaで「ユーザーが管理者ならtrueを返す」というシンプルな関数を作ったとします。テスト対象のコードがシンプルなので、テストもシンプルに書けると思うかもしれません。 しかし、上記のテストコードを見てもらうとわかるとおり、ユーザーデータの作成する処理で数行のコードを書く必要があります。テストと関係の
こんにちは teppeis です。普段は開発本部長をやってますが、ブログフェスに駆り出されました! 本日は Node v22.3.0 に続いて v20.16.0 にもバックポートされた process.getBuiltinModule(id) について解説します。 問題: 同期的な条件付き require を ESM 化できない Node v22 にて、フラグ付きで CJS (CommonJS Modules) から ESM を require できるようになりました。いわゆる require(esm) です。これにより、今までは互換性の懸念で ESM 化を足踏みしていた著名ライブラリも ESM 化を試みる動きが出てきました。 TypeScript もその一つで、TypeScript チームは TypeScript 自体を ESM 化しようと試みました。しかしながら、今回の主題である条件付
はじめに API設計のアーキテクチャスタイルには、REST API、GraphQL、gRPC、tRPCなど、複数の選択肢があります。 私はこれまでに、実務や個人開発でREST API、gRPC、tRPCを使用してきました。その上で今回は、それぞれの特徴と開発の流れについて紹介します。さらに、それぞれのメリット・デメリットを挙げ、特定のケースに適した選択について考察してみました。 API設計のアーキテクチャスタイルの選択に悩んでいる方に、少しでも参考になれば幸いです。 REST API RESTとは まずRESTとはシンプルなWEB全体のアーキテクチャスタイルのことです。RESTには4つの原則があり(6つとも言われている)それらを満たすもののことをRESTfulと言います。 ※それぞれの原則の詳細は省略します。 統一インターフェース アドレス可能性 接続性 ステートレス性 REST APIは
JSer.info #702 - typescript-eslint v8がリリースされました。 Announcing typescript-eslint v8 | typescript-eslint ESLint 9のサポート、projectServiceをStableに変更、プリセットのルール変更などが行われています。 jQuery UI 1.14.0がリリースされました。 jQuery UI 1.14.0 released | jQuery UI Blog jQuery UIはすでにメンテナンスモードとなっていますが、このリリースでは今後のメンテナンスのしやすさに向けた変更が行われています。 Plans for jQuery UI 1.14, dropping support for UI <1.12 in the Download Builder | jQuery UI Blog
Moonbit が Component Model に対応した。 これはずっと自分がほしかった機能で、これによって moonbit が実用言語に一つ近づいたと思う。やっていきたい。 何が可能になったか できることになった例 Moonbit で書いたコードを TypeScript で型をつけて呼び出せる rust-wasm で生成した wasm コードを moonbit で呼べる wasi で CLI, wasi-http でサーバーが書けるようになる component-model とは wasm はそのままだと数値の関数呼び出ししかインターフェースを持てない。 component-model は wit という IDL でインターフェースを宣言して、wasm バイナリにインターフェースを埋め込む。 利用側(guest)は埋め込まれたインターフェースから 自分の言語用の呼び出しコードを生成
はじめに TL;DR CLI 開発で UnJS の unbuild、citty、consola、giget、pkg-types、jiti を使ってみたらめっちゃ便利だった。 本記事の内容と対象読者 本記事は、Vue.js v-tokyo Meetup #21にて筆者が LT 登壇した内容を記事化したものです。 筆者が最近取り組んでいた CLI 開発において UnJS を導入したところ、非常に便利と感じたため発表することとなりました。発表資料はGitHub Pages に上げています。 本記事では CLI 開発に便利な UnJS のライブラリをいくつか紹介し、どのように使ったのかの解説もします。UnJS に興味があり、どんなライブラリをどのように使うのか気になっている人を対象にしています。 前提知識として Node.js/TypeScript の基礎的な理解があると読みやすいでしょう。 検証
typescript-eslint is the tooling that enables standard JavaScript tools such as ESLint and Prettier to support TypeScript code. We've been working on a set of breaking changes and general features that we're excited to get in front of users. And now, we're excited to say that typescript-eslint v8 is released as stable! 🎉 We'd previously blogged about v8 in Announcing typescript-eslint v8 Beta. Th
03 Aug, 2024 Last year, I wrote a blog post called Goodbye, Ruby on Rails. One year later, after creating my own business, I decided to be back to Ruby on Rails. I’m withdrawing my previous statements on DHH and Rails. Though I still have some concerns about the directions of Ruby on Rails, especially the rejection of TypeScript, I still believe that Ruby on Rails is a great framework for web deve
Today we are excited to announce the availability of the release candidate of TypeScript 5.6. To get started using the RC, you can get it through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.6! Disallowed Nullish and Truthy Checks Iterator Helper Methods Strict Builtin Iterator Checks (and --strictBuiltinIteratorReturn) Support for
TypeScriptチートシート(TypeScript(JavaScript)の文法を学び,フロント・バック両方開発できるようにしよう[プログラミング文法,配列操作関数,React,クリーンアーキテクチャ,API])JavaScriptNode.jsTypeScriptDockerReact みなさんTypeScript(JavaScript)でどんなことができるかご存知ですか?初学者向けの言語や大規模開発でよく使う言語だというイメージがあると思います.TypeScript(JavaScript)はフロントの開発からバックの開発までなんでもできる非常に有用な言語です.本記事ではプログラミングをしたことのない人やTypeScript(JavaScript)を触った人のステップアップのためなど幅広い方向けに書きました.また,Node.jsの仕組みやReact,Vue.jsでの応用例やAPI作成
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く