皆さんご存知の JavaScript ランタイム兼開発ツールの Bun が、v1.2.3 でフロントエンド開発のための便利な機能が使えるようになったので取り急ぎ。 現時点(2025/02/06)では Canary build なので試す方は以下のコマンドを実行してください。
Bun がフロントエンド開発でかなり便利になりそう
皆さんご存知の JavaScript ランタイム兼開発ツールの Bun が、v1.2.3 でフロントエンド開発のための便利な機能が使えるようになったので取り急ぎ。 現時点(2025/02/06)では Canary build なので試す方は以下のコマンドを実行してください。
TypeScript 5.8 Ships --erasableSyntaxOnly To Disable Enums
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. In TypeScript 5.8, a new flag is dropping. It's called erasableSyntaxOnly. It disables a bunch of features that I don't think should ever have been part of TypeScript. Let's talk about it. #What Does erasableSyntaxOnly Do? erasableSyntaxOnly marks enums, namespaces and class paramet
型安全にクエリパラメーターを扱う nuqs
この記事では Next.js で nuqs を使用してクエリパラメーターを型安全に扱う方法について解説します。 インストール nuqs@^2 は以下のフレームワークをサポートしています。 Next.js: 14.2.0 and above (including Next.js 15) React SPA: 18.3.0 & 19 RC Remix: 2 and above React Router v6: react-router-dom@^6 React Router v7: react-router@^7 上記よりも古い Next.js のバージョンを使用している場合には nuqs@^1 を使用する必要があります。 以下のコマンドで nuqs をインストールします。 npm install nuqs 続いて nuqs をフレームワークに統合するために <NuqsAdapter> Con
Rust/Tauriに入門したので画像変換デスクトップアプリを開発してみた
こんにちは！某製造業で新米DXエンジニアをしているものです。 先月から Rust の学習を始めました。 学習している理由としては 今までインタプリタ言語を使ってきたので、コンパイル言語に挑戦したい 爆速で動くコードを書きたい ネイティブアプリの開発をしてみたい WebAssembly を使えるようになって、Web アプリ開発の幅を広げたい といったところです。 そんな中、Rust でデスクトップアプリを開発するために Tauri を使ってみました。 正月の暇をつぶすために軽い気持ちで始めましたが、色々苦しんだので備忘録を残しておきます。 今回は長くなりそうなので、目次をご活用ください m(._.)m アプリの概要 今回作ったアプリは、ざっくり言うと 主要形式の画像を次世代拡張子である AVIF,WEBP に圧縮、変換するデスクトップアプリです。⚡️ 制作期間は5～7日くらいです。 GitH
1分でミニマルなThree.js環境をつくる（TypeScript + React)
モチベーション three.jsをサクッと書き始める最小構成を作る方法をまとめました。 もちろん他の方法も色々あると思いますが、この方法は1分でできて、そこそこニーズを満たせて、自由に拡張しやすいです。 ゴールは「Sceneを作ってBoxを置いて簡単なライトで照らすぐらいまで」とします。 ゴールのイメージ ️ ☘️ こんな人にオススメ とりあえずさっさとthree.jsを書き始めたい メンテされてなさそうなあんまりよく分からないテンプレートは使いたくない ホットリロードとかほしい Textureなどをロードするのにdevサーバーは必要 Next.jsなどは若干やりすぎで、SSRやキャッシュ周りでいらない穴にハマりやすい TypeScriptのサポートはほしい おまけ: Reactで書きたい Reactを使う場合と、素のJSの場合を用意しました。 実装 React版 純粋SPAなReact
TypeScript の interface を活用して安全性と拡張性を兼ね備えた型を作る - Techtouch Developers Blog
はじめに 型安全性と拡張性の両立 宣言マージの活用 宣言マージとは？ 宣言マージを使ってメッセージの型を拡張する 型エイリアスと Generics を使った方法との比較 宣言マージを使うことで実装と型の整合性を担保しやすくなる MUI での宣言マージの活用事例 注意点 VS Code 上の型チェックの表示が tsc の型チェックの結果と異なる場合がある ライブラリ側が空の interface のままだと困ることがある なぜ react-redux ではこのアプローチをやめたのか？ まとめ interface の宣言マージを活用することで はじめに こんにちは！Element チームでフロントエンドを担当している all-user です。 Elementチームとは、テックタッチのプロダクト開発の中でも主にDOMとのインタラクション周りの開発を担当しているチームで、Shadow DOM や i
エディタに優しいHonoのコードを考える
本稿はHono Advent Calendar 2024の21日目の記事です。 はじめに Hono RPCを使っていると、アプリケーションが大きくなるにつれクライアント側のコードを書くときにエディタの処理が重くなることが知られています。具体的には、補完候補が表示されるまで秒単位で待たされたりします。Xで「hono rpc 重い」などで検索してみるといくつかひっかかります。現時点での最も効果的なこれの解決策は、事前に型をコンパイルして使うことです[1]。 しかし、クライアント側に関してはこれで解決するものの、バックエンド側も普通に重たくなります。アプリケーションが肥大化してくると、エントリーポイントとなるHonoインスタンスに新しいルートを追加するときにエディタがもたつきます。npm workspaceなどでバックエンドのコードをこまめにパッケージ分割してコンパイルすれば解決するはずですが、
お前らまだ簡単なCRUD処理を実装してるのか？ 〜PostGraphileへの誘い〜
煽りタイトルみたいになってしまいましたが、最近の開発で使ってるPostGraphileがめちゃくちゃオススメなので、紹介記事です。 PostGraphileとは PostGraphileは、Node.jsベースのオープンソースのライブラリで、PostgreSQLデータベースをGraphQL APIに変換するツールです。PostGraphileは、GraphQLサーバーのセットアップやGraphQLスキーマの手動作成などを省略して、効率的にGraphQL APIを生成することができるため、開発をスピードアップできます。 主な特徴とメリット： 自動生成されたGraphQL API: データベースのスキーマを基にして、自動的にGraphQLスキーマとリゾルバーを生成します。これにより、データベースに対してGraphQLクエリを直接発行することができます。 安全性: PostGraphileはセキ
Drizzle x SQLiteで作成日時や更新日時をCustom typesでいい感じにしたい - くらげになりたい。
前回の続き。Drizzle ORMをちょっと触ってみたときに、 いろいろ調べてみたときの備忘録(*´ω｀*) Drizzle ORMに入門してみた with Turso - くらげになりたい。 SQLiteにはdate/time型がない Date And Time Functions 残念なことに、SQLiteにはDate/Time/DateTimeの形がなく、 以下の形式の文字列(text)か数値(integer)で保存する ISO-8601 ... text Unix timestamp ... intager いくつか便利な関数が用意されていて、それを利用する形になる date() ... YYYY-MM-DD形式のtext time() ... HH:MM:SSやHH:MM:SS.SSS形式のtext datetime() ... YYYY-MM-DD HH:MM:SSなどのtex
TypeScriptで実践するドメイン駆動設計（DDD）
初めに モチベーション 私はこれまでドメイン駆動設計で設計されたシステムの開発案件に参画した経験はありますが、1からドメイン駆動設計で設計での設計を行った経験がありませんでした。そのため個人でシステムを開発している際に設計に悩むことがあり、自身で1からドメイン駆動設計ベースの設計ができるようになることを目指して学習を進め、その過程で得た知見をまとめています。 特に以下のような点に焦点を当てています。 ドメイン駆動設計の理論をTypeScriptのコードベースで理解する 既存のドメイン駆動設計システムを理解するだけでなく、新規設計ができるようになるための知識の整理 ドメイン駆動設計(DDD)とは ドメインとは「システムが対象とする業務領域」のことです。 例えばECサイトでは商品管理、在庫、注文、配送などがドメインとなります。 ドメイン駆動設計の本質は、このような現場の業務知識やルールを深く理
Zero
Build absurdly fast web applications with ZeroInstant Queries by Default Gigabugs – Our 1.2 million row bug tracker. Sync engines enable instant UI by downloading data to the client ahead of time. Reads and writes happen locally, and changes are synced in the background. It's a beautiful idea, and one that has been used by some of the world's best software: Linear, Figma, Superhuman, and Dropbox w
GitHub CopilotでTypeScriptの コード生成するワザップ
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
今アツい（気がする）UIライブラリ...?ではないらしい shadcn/uiを使ってみる - Nealle Developer's Blog
この記事はニーリーアドベントカレンダー2024の10日目の記事です。 はじめまして、Nealleのデザイナー音部です。 profile.unotovive.io アドカレでデザインチームのことを書くつもりが、全然思いつかずにフロントエンドの話をします。 タイトルにある通り、shadcn/uiというモノの紹介と、実際に使ってみたレポートです。 shadcn/uiとはそもそも何なのか? ui.shadcn.com shadcn/uiは、2023年のJavaScript rising starで総合1位に輝いたReactエコシステム(?)です。 2位は2022年王者のBunでしたが、10k以上の差をつけて1位に輝いていて、アツいといっても過言ではなさそうです。 最初はMaterial UIやChakuraなどと同じようなUIライブラリかと思っていましたが、どうやら「コピペで使えるUIコンポーネン
TypeScript開発にモジュラーモノリスを持ち込む
■ イベント TypeScriptを活用した型安全なチーム開発 2024 https://sansan.connpass.com/event/337268/ ■ 発表者 技術本部 Digitization部 Bill One Entryグループ 秋山 雅之 ■ Digitizatio…
LAPRASのフロントエンド改善活動ふりかえり [2024年]
LAPRASのエンジニア組織ではフロントエンド専任のエンジニアはいません。皆プロジェクト単位でバックエンドもフロントエンドも（ときにインフラも）触りながら開発しています。 ただそれだけだと個別領域の技術的負債の解消が進みにくいので、フロントエンドに関心のある有志のエンジニアがフロントエンド改善委員会という会を結成し、週1回1時間集まり改善活動を行っています。今回はその委員会メンバーで行ってきた改善活動を紹介します。 🐉 今年行ったフロントエンドの改善活動 時系列、規模は順不同で紹介します。 JestからVitestへの移行 LAPRASのテストは開発当初からJestでした。ただ、JestはES Modulesのサポートやパフォーマンスの問題があり、今年Vitestに移行しました。 結果CIのフロントエンドテスト実行時間が約1/3になり、リリースのリードタイムの短縮にも繋がりました。ES
![LAPRASのフロントエンド改善活動ふりかえり [2024年]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a133741e036a39adf5e07cd67a8423981943754/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--jU4efvfC--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ALAPRAS%2525E3%252581%2525AE%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E6%252594%2525B9%2525E5%252596%252584%2525E6%2525B4%2525BB%2525E5%25258B%252595%2525E3%252581%2525B5%2525E3%252582%25258A%2525E3%252581%25258B%2525E3%252581%252588%2525E3%252582%25258A%252520%25255B2024%2525E5%2525B9%2525B4%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Aryo_kawamata%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzIwMTQ1MDk5ZGQuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ALAPRAS%252520Inc.%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU2N2NiMTI0ZWYuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
TypeScriptで『関数型ドメインモデリング』をやってみよう - Qiita
この記事は、LIFULL Advent Calendar 2024 21日目の記事になります。 はじめに LIFULLでは、技術負債解消のためにレガシーなコンポーネントをいわゆるCleanArchitecture(以降CA)に置き換えるという取り組みをやっています。 内製ソフトウェアアーキテクチャでレガシーシステムを刷新し技術的負債を削減するまでにやったこと クリーンアーキテクチャで構築したプロダクトが2年経過してみて現状どうなっているかを紹介 新卒エンジニアがリファクタを突貫したClean Architectureプロジェクトの舞台裏 CAはいくつかのレイヤに別れていますが、LIFULLではCAのEnitityをドメイン駆動設計(DDD)で言うところのドメインモデルで実装しています。 この記事は、前に読んでいた関数型ドメインモデリングの「型によるドメインモデリング」がこの実装に応用できる
アラフィフでも関数型をあきらめない！「関数型ドメインモデリング」で再入門してみた話 - iimon TECH BLOG
はじめに まずは戦う相手を見定めよう 戦術はいかに まずは関数を知る しゅ、しゅ、出力がないだってぇ！？ 型＝値の集合とはなんぞや？ まとめ おわりに 参考 はじめに 本記事はｉｉｍｏｎ Advent Calendar 2024 21日目の記事となります！ こんにちは！DDDとTDDには熱心だけど、推し活はDD（誰でも大好き）ではなく、とことん一途なエンジニアマネージャー、まつだです。 本日12月21日は私の誕生日ということで、なんと101101歳になってしまいました！（この手のやつ、16進数にしてるのはよく見るけど、2進数は斬新やな⋯） ちょっとでも誕生日を祝ってくれる気持ちのある方は、ぜひ↓のボタンをぽちっとしてブックマークでもしてやってください（笑） 今回は、私もさらに歳を重ねて型にはまった人間にならねば、ということで、「関数型ドメインモデリング」という本を読んで学んだことを普段の業
最近立ち上げたプロジェクトで採用したフロントエンド技術スタック
はじめに こちらは e-dash Advent Calendar 2024 の17日目の記事です。 はじめまして、e-dashのフロントエンドエンジニア、kyonsiと申します。 クリスマスシーズン、皆さんいかがお過ごしでしょうか？ 私は、夜に輝くイルミネーションを眺めながら、「このキラキラのアニメーション、durationは何ミリ秒なんだろう？ CSSで再現できないかな？」なんて、ついフロントエンドエンジニア的な思考が巡っています。 本記事では、最近立ち上げたフロントエンドプロジェクトで採用した技術と、その選定理由を軽くご紹介いたします。「ちょっと攻めすぎじゃない？」「いや、もっと枯れた技術でいいでしょ？」といった社内議論も、クリスマスムードに包まれればスパイス程度。その過程こそが、フロントエンド開発の醍醐味といえるでしょう。 それでは、ホリデームード漂う中、スノードームのようにキラキラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScriptを用いたnpxコマンドの開発とnpm公開手順
Honoで実現するバックエンド開発のイマ
