Hono × Inertia.js が作る新しい型貫通体験に触れてみた
// サーバー側（Hono） app.get('/posts/:id', (c) => { const post = findPost(c.req.param('id')) return c.render('Posts/Show', { post }) }) // クライアント側（React） export default function Show({ post }: PageProps<'Posts/Show'>) { return <h1>{post.title}</h1> } post の型は Post として完全に推論される。間に API 定義も DTO も tRPC もスキーマ生成もない。サーバーで c.render() の第2引数に渡したオブジェクトが、そのまま React の props として、しかも完全に型付きで届く。 「API なし SPA」を謳う Inertia.j
1分でミニマルなThree.js環境をつくる（TypeScript + React)
モチベーション three.jsをサクッと書き始める最小構成を作る方法をまとめました。 もちろん他の方法も色々あると思いますが、この方法は1分でできて、そこそこニーズを満たせて、自由に拡張しやすいです。 ゴールは「Sceneを作ってBoxを置いて簡単なライトで照らすぐらいまで」とします。 ゴールのイメージ ️ ☘️ こんな人にオススメ とりあえずさっさとthree.jsを書き始めたい メンテされてなさそうなあんまりよく分からないテンプレートは使いたくない ホットリロードとかほしい Textureなどをロードするのにdevサーバーは必要 Next.jsなどは若干やりすぎで、SSRやキャッシュ周りでいらない穴にハマりやすい TypeScriptのサポートはほしい おまけ: Reactで書きたい Reactを使う場合と、素のJSの場合を用意しました。 実装 React版 純粋SPAなReact
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
今アツい（気がする）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コンポーネン
【2024年12月】Next.jsで新規アプリの構成と開発でのLLM活用
選定の方針 ログイン機能があるような、ユーザーが極端に多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリ開発に集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 EditorはCursorがおすすめ 開発用のエディタはCursorがおすすめです。 LLMへの質問や修正を依頼する時に、修正対象と一緒に関連しそうなコードも送ってくれるので質問に対する回答の精度が高くなる (既存のコードに合わせた回答・修正をしてくれる) コードをLLM側の学習に使わないようにしてくれる設定もあるのでセキュリティ的にも安心 (1) エディタ右上の歯車のマークをクリック (2) Privacy Mode を enabled に変更する より詳細な機能の解説はこちらの記事がわかりやすかったです。 (僕は契約できていませんが、GitHub
【2024年1月】Next.js での新規アプリの構成 & Next.js ディレクトリ構成(features)
この記事をアップデーしました！ 👇 選定の方針 ログインしての利用がメインで、ユーザーがあまり多くないサービスを想定しています。 開発効率の重視して、出来るだけWebアプリに集中できる構成を目指しています。 コスト理由で中断しないように、個人でも支払える費用感を意識しています。 Next.js ライブラリ構成 メインで使っているライブラリです。Next.js + Vercelの開発体験が良すぎるので、できる限り活用して開発することを意識して作っています。 フレームワーク Next.js メインで使うライブラリ SWR tRPC React Hook Form Jotai Style/CSS に関して Vercelがリリースしたv0をいいなと思って、v0の出力で使われているTailwind CSS + shadcn/uiを使うようにしています。(v0活用は検証中です) よく使うインフラ系サ
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまったので、気になる部分だけ読んでみても良いのだ！ フロントガチ初心者の方は読んでるだけでも勉強になると思うので、暇な時にのんびり読むことをお勧めするのだ！ 対象読者 フロントを勉強し始めた初学者さん フロントがメイ
MantineのuseFormでzodを活用する場合のtips
MantineのuseFormでzodを活用して開発をする中で、注意点や便利な活用方法を記事にします。 transformValuesでparse（) useFormでzodを活用する場合は、基本的に毎回useFormで以下のコードを入れるようにしています。 parseを行うことで、不要な値が削除された結果が返却されます。 stripはschemaにstrictを付与していた場合でも、結果を返却するデフォルトの挙動に戻すオプションです。 strictだと不要な項目がある場合はエラーとして扱われます。 これの恩恵を受けるのは具体的に2点あります。 不要な項目をリクエストに設定しない trimなどが反映された状態になる １点目に関して、useFormのinitialValuesにはAPIで取得したデータ（それを画面用に変換したもの）を設定することが多いと思いますが、必ずしもその全てを更新リクエ
Thinking in React Query
Thinking in React Query07.06.2023 — ReactJs, React Query, Talk, TypeScript, JavaScript — 1 min read #1: Practical React Query#2: React Query Data Transformations#3: React Query Render Optimizations#4: Status Checks in React Query#5: Testing React Query#6: React Query and TypeScript#7: Using WebSockets with React Query#8: Effective React Query Keys#8a: Leveraging the Query Function Context#9: Place
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 -｜たまにゃん📘 Next.js実践本7/25発売
1年以上にわたる初めての技術書の商業執筆活動を終えての感想と今後挑戦したいという方へ -TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発 - 2022年7月25日より「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」が技術評論社より発売されました。3人の著者（@tejitak, @Kourin1996, @tamanyan55）、編集者（@nodawep）、レビュワーの方々が1年以上にわたり執筆に携わった本で紆余曲折しながらもゴールした技術書となっています。本を手にとっていただいた皆様のおかげで非常に好調な滑り出しとなり、早くも増刷が決定となりました。Amazonでの評価もよくソフトウェア開発・言語のカテゴリーで1位を取ることができました。 私自身初めての商業執筆という事で勝手が分からないながらも最後までやり遂げ
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
input[type="number"]をやめた話
ファンタラクティブのエンジニアの 太田 です。 数値入力コンポーネントを作成する際に type="number" を使用するのをやめたことについて書きます。 input[type="number"]とは input[type="number"] (PC) input[type="number"] (スマホ) 数値を入力するためのinputで半角数値以外の入力を除外する 問題 validな数値しか受け付けない 数値以外の値が入力できないためTypeScriptでも扱いやすくよさそうに思えますが、使用するユーザーは戸惑うことがあるようです。 実際にあった問い合わせや、問い合わせから想像する状況は以下のようなものです。 入力できない (全角入力してる) 確定したら値が消えた (全角入力してる) ペーストできない (全角でペーストしてる) キーボードではなく、UI上の▲▼で入力しないといけないと思
![input[type="number"]をやめた話](https://cdn-ak-scissors.b.st-hatena.com/image/square/cff967c044ae47754e68264f97d3ac3370f53536/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fy7q8dkG--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Ainput%25255Btype%25253D%252522number%252522%25255D%2525E3%252582%252592%2525E3%252582%252584%2525E3%252582%252581%2525E3%252581%25259F%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AHidetoshi%252520Ota%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I4YmI2YjY4NDMuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%252595%2525E3%252582%2525A1%2525E3%252583%2525B3%2525E3%252582%2525BF%2525E3%252583%2525A9%2525E3%252582%2525AF%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252596%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2IxZWY4MWQxNDUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT)
全てを書き換え続ける。N予備校Webフロントエンド実装6年のあゆみ - ドワンゴ教育サービス開発者ブログ
はじめに ドワンゴ教育事業 Web フロントエンドチームの berlysia です。 ドワンゴ教育事業が提供するオンライン学習サービス『N予備校』は、この 4 月でリリース 6 周年を迎えました。N 予備校の Web フロントエンドはリリース以来、全面的な書き換えを行い、今も続けています。 この記事では書き換えに伴う N 予備校の Web フロントエンド実装の変遷を説明し、これら書き換えの経験やWebフロントエンドという領域の性質を踏まえて、すべてを書き換え続ける選択をしていることを述べます。 この記事は berlysia が他社様イベント*1にて発表させていただいた話題を元に再構成しています。 speakerdeck.com ※JSConf JP 2021 で発表させていただいた事例とは異なるコードを対象にしています。 はじめに 実装の 5 つの世代 v1 v2 v3 v3(TypeSc
個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog
ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や
React with TypeScript Cheatsheet
Build in AI speed — Compose enterprise-grade applications, features, and componentsHow to type React propsSince React props are used to send transmit data between one React component to another, there are many types that you can use to type React props. To write the types of your props, you need to add a colon and the object literal notation (: {}) next to the destructuring assignment of the child
Next.js + TypeScript + AWS Amplify でアプリケーション開発 - 虎の穴ラボ技術ブログ
こんにちは、虎の穴ラボのNSSです。 最近ReactやTypeScriptを勉強中なのですが、Reactで作ったアプリケーションを簡単にデプロイして公開できるツールとして、AWS Amplifyがあります。 AWS Amplifyとは、AWSが提供するモバイルやWEBのアプリケーションを素早く開発することができるプラットフォームです。 AWS Amplifyは、たった数クリックでアプリケーションをデプロイできる他、 コマンドラインツールを使ってユーザー認証やAPIなど、あらゆる機能を簡単にアプリケーションに追加することができます。 今回は、ReactベースのフレームワークであるNext.js と AWS Amplifyを使ったアプリ開発をご紹介します。 環境 Node.js (v16.4.1) Next.js (v10.2.0) TypeScript Node.jsはインストール済みである
2021年現在Vueを選択すべきでないと思う理由
使ってわかる、Vueへの恨み、つらつらと（随時更新） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い 後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OneJS - JavaScript for Unity
2022年秋版 最新React/Typescript開発環境の作成 - Qiita
GitHub - ixkaito/nextsss: Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.
