並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 43件

新着順 人気順

jsの検索結果1 - 40 件 / 43件

  • 巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32

    (WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク(といえそう) そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】

      巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
    • Node.js の進化に伴い不要となったかもしれないパッケージたち

      tl;dr はじめに 2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。 こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッケージを使用して実現することが一般的であった機能が Node.js のみで実現可能となり、当該パッケージが不要となるような場合があります。冒頭に引用した Ben Holmes の動画では、そのように不要となったパッケージとして dotenv node-fetch chalk mocha が挙げられていますが、この記事では「これら

        Node.js の進化に伴い不要となったかもしれないパッケージたち
      • Next.js 型安全なルーティングを使う

        Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim

          Next.js 型安全なルーティングを使う
        • ほぼJSなしで完璧なReactフォームをつくる

          import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else

            ほぼJSなしで完璧なReactフォームをつくる
          • Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita

            Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ

              Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
            • GitHub - cezaraugusto/extension.js: 🧩 Plug-and-play, zero-config, cross-browser extension development tool.

              You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                GitHub - cezaraugusto/extension.js: 🧩 Plug-and-play, zero-config, cross-browser extension development tool.
              • Next.jsのSSRF脆弱性 CVE-2024-34351

                Next.jsでSSRF(=Server Side Request Forgery)の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。 脆弱性の概要 SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です。 今回のNext.jsの脆弱性はhttpヘッダーのHostを書き換えることで、self hostingなNext.jsサーバーから任意のhttpリクエストを送信できてしまうというものです。これは、外部には公開してない内部APIに対するリクエストも可能になるため、SSRF攻撃になりえます。 今回の脆弱性の対象は、以下の条件を満たしている必要があります。 Next.jsをself hostingで運用している Next.jsアプリケーションがServer Actionsを利用して

                  Next.jsのSSRF脆弱性 CVE-2024-34351
                • Next.js App Router

                  MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit

                    Next.js App Router
                  • CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs

                    This post details CVE-2024-4367, a vulnerability in PDF.js found by Codean Labs. PDF.js is a JavaScript-based PDF viewer maintained by Mozilla. This bug allows an attacker to execute arbitrary JavaScript code as soon as a malicious PDF file is opened. This affects all Firefox users (<126) because PDF.js is used by Firefox to show PDF files, but also seriously impacts many web- and Electron-based a

                      CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs
                    • JSのデザインパターンライブラリを試作した話と、それをJSRにアップロードしたら無茶苦茶簡単で感動した話

                      デザインパターンライブラリを作った JSRの話だけ読みたい人は読み飛ばしてもOKです。 JavaScriptのtry-catchはC++の影響を受けており、以下の特徴があります。 (A) throwは大域脱出的である。 (B) try-catchはブロック内の全ての例外副作用に対して一括で作用する。 (C) try-catchは文であり、値を返せない。 (D) TypeScriptにおいて、例外型は明示されない。 このうち (B), (C), (D) の問題を解決するため、RustのResultや類似のパラダイムをJSに輸入する試みがしばしば行われています。しかしこの解決手段にはいくつかの問題があり、 (E) rethrowの専用構文がないためボイラープレートが増える。 (F) 出力ストリームに対するwriteなど、戻り値を持たない副作用関数に対するエラーハンドリングが抜け落ちないようにL

                        JSのデザインパターンライブラリを試作した話と、それをJSRにアップロードしたら無茶苦茶簡単で感動した話
                      • GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.

                        You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                          GitHub - openai/openai-assistants-quickstart: OpenAI Assistants API quickstart with Next.js.
                        • Cloudflare WorkersのJS RPCを理解する

                          前置き 4月の第1週に行われたCloudflare Developer Week 2024でAIやデータベース関係のアップデートの影に隠れ、WorkersをつくってるKenton氏のブログが2つ投下されました。 そして「JS RPC」という機能が追加されました。 これが一見地味なんですが、非常に楽しい未来を想像できるので、書いてみます。というか以前chimameさんが書いた記事でだいぶ理解できるのですが、もう少し噛み砕いて書いてみます。 Bindings Cloudflareにはいくつもプロダクトがあります。ストレージのR2、データベースD1、KVストアのKVなどです。そしてそれらに繋ぐ方法が「Bindings」という方法です。このBindingsで繋げられるものはたくさんあります。 AI Analytics Engine Browser Rendering D1 Environment

                            Cloudflare WorkersのJS RPCを理解する
                          • PHPやNode.jsなどに任意コマンド実行の脆弱性、原因はWindows仕様の理解不足

                            多くのプログラミング言語の処理系に、攻撃者が任意のコマンドを実行できる深刻な脆弱性が見つかった。JPCERTコーディネーションセンター(JPCERT/CC)と情報処理推進機構(IPA)が共同運営する脆弱性対策情報ポータルサイト「JVN(Japan Vulnerability Notes)」で2024年4月15日に公開された。 脆弱性が確認されたのは「PHP」「Rust」「Haskell」の各言語処理系とJavaScript/TypeScriptの処理系「Node.js」、音声や動画をダウンロードできる高機能なコマンド「yt-dlp」である。ただし、この脆弱性の影響を受けるOSはWindowsだけで、LinuxやmacOSなどの他のOSには影響しない。 多くのプログラミング言語は、プログラムの中からOS上でコマンドを実行する機能を持つ。Windowsでは言語処理系が「CreateProces

                              PHPやNode.jsなどに任意コマンド実行の脆弱性、原因はWindows仕様の理解不足
                            • Next.js で React Compiler を試しつつ出力コードを見てみる

                              React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur

                                Next.js で React Compiler を試しつつ出力コードを見てみる
                              • Next.js breaking change - disable router/fetch cache by default

                                Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて

                                  Next.js breaking change - disable router/fetch cache by default
                                • 「PDF.js」に任意コード実行の脆弱性 ~多くのWebサイト・アプリに影響/「Firefox」内蔵PDFビューワーでも用いられているPDF表示ライブラリ

                                    「PDF.js」に任意コード実行の脆弱性 ~多くのWebサイト・アプリに影響/「Firefox」内蔵PDFビューワーでも用いられているPDF表示ライブラリ
                                  • Node.js、ロケットに乗った亀「Rocket Turtle」が正式マスコットに

                                    Node.jsのマスコットキャラクターが2月に決まり、発表されていました。 先週発表されたNode.js 22の記事を書くに当たり、資料を調べているうちに気がつきましたので紹介したいと思います(「Node.js v22 で変わること - Speaker Deck」というスライドで知りました。ありがとうございます)。 Node.jsのマスコットキャラクターはGitHubのIssue「Have a mascot · Issue #828 · nodejs/admin」で議論されて……

                                      Node.js、ロケットに乗った亀「Rocket Turtle」が正式マスコットに
                                    • Next.js 15 RC

                                      The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an

                                        Next.js 15 RC
                                      • 次のLTS版となる「Node.js 22」正式リリース。WebAssembly GCがデフォルトで利用可能に

                                        次のLTS版となる「Node.js 22」正式リリース。WebAssembly GCがデフォルトで利用可能に JavaScriptランタイム「Node.js」の最新バージョンとなる「Node.js 22」正式版がリリースされました。 Node.jsは偶数バージョンがリリースされてから6カ月の後に、30カ月の長期サポート期間(LTS:Long Term Support)に入ります。Node.js 22も、6カ月後の2024年10月にLTSとなる予定です。 Node.js 22 is here Featuring: require()ing ESM graphs, WebSocket client, updates of the V8 JavaScript engine, and more. Big thank you to @_rafaelgss and @satanacchio for t

                                          次のLTS版となる「Node.js 22」正式リリース。WebAssembly GCがデフォルトで利用可能に
                                        • Next.js 15 RCまとめ

                                          基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable

                                            Next.js 15 RCまとめ
                                          • Google、フルスタックのWebアプリホスティング環境「Firebase App Hosting」パブリックプレビュー開始。AngularとNext.jsをサポート

                                            Googleは日本時間5月15日と16日に開催したイベント「Google I/O 2024」で、Webアプリケーションのホスティング環境を提供する新サービス「Firebase App Hosting」のパブリックプレビューを発表しました。 Firebase App HostingはGitHubと接続することで、開発者がコードをGitHubにプッシュすると自動的にFirebase App Hostingにコードが取り込まれます。 取り込まれたコードはCloud Buildで自動的にビルドが行われて静的なコンテンツがレンダリングされ、動的なコンテンツはCloud Runにデプロイされ、Cloud CDNでコンテンツがキャッシュされることで、自動的にWebアプリケーションがデプロイされます。 対応するフレームワークはAngularとNext.jsです。いずれも手動での設定をすることなく、Fire

                                              Google、フルスタックのWebアプリホスティング環境「Firebase App Hosting」パブリックプレビュー開始。AngularとNext.jsをサポート
                                            • Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す

                                              先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「?SSRどうやって動かすんだ?」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。 これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮

                                                Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す
                                              • 【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ~大草原不可避~」を作りました【Next.js×Rails】 - Qiita

                                                【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ~大草原不可避~」を作りました【Next.js×Rails】Rails未経験個人開発Next.js はじめに こんにちは、とぴ(@topi_log)と申します。 オンラインプログラミングスクールにてRuby on Railsをメインに学習しつつ、自主学習としてフロントエンドも勉強しています。 4/26にメモ帳感覚で使えるGitHub草生やしアプリをリリースしたので、アプリ紹介と技術、感想をまとめさせていただきます。 目次 作成経緯 Webアプリ紹介 技術スタック こだわったところ UI/UX 技術面 その他 改善点・不具合 追加したいと考えている機能 ブラッシュアップの方針 感想 1. 作成経緯 オンラインプログラミングスクールにて、「ミニアプリweek」という短期間でアプリを作るイベントがあります。バグOK

                                                  【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ~大草原不可避~」を作りました【Next.js×Rails】 - Qiita
                                                • Firebase App HostingにNext.jsがデプロイされる仕組み

                                                  「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt

                                                    Firebase App HostingにNext.jsがデプロイされる仕組み
                                                  • ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう

                                                    ソースコードを共有してみんなに見てもらう機会があるでしょうか。そんな時、せっかく見てもらうなら、美しく読みやすいコードを見てもらいたいと思うものです。今回紹介するJavaScript製のツール「Carbon」を使うと、手軽にソースコードを美しい画像に変換して共有できます。 ソースコードを画像に変換するJSライブラリ「Carbon」 見栄えの良いソースコードを共有しよう 昨今、プログラマーであれば、誰しも自分の書いたソースコードを誰かに見てもらう機会があります。プログラミングに関するコラムを書いたり、作成したライブラリの告知のためにSNSで共有したり、プレゼンテーションでプログラムのコードを解説したりと、みんなに見てもらうという場面が多くあります。 そんな機会に、より美しく見栄えの良いソースコードを見せたいと思うことでしょう。今回紹介するJavaScriptのライブラリ「Carbon」を使う

                                                      ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
                                                    • 2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023

                                                      JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React

                                                        2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
                                                      • Node.js v22の主な変更点 - 別にしんどくないブログ

                                                        引用元: https://nodejs.org/en/about/branding 2024年4月24日にリリースされたNode.js v22の主な変更点を紹介します。 Node.js v22はLTS(長期サポート)のバージョンになります。10月の後半にLTSとしてサポートが始まります。 nodejs.org require()がESMをサポート V8 12.4 アップデートによる JavaScript の機能 Array.fromAsync() Set methods union() intersection() difference() symmetricDifference() isSubsetOf() isSupersetOf() isDisjointFrom() Iterator Helpers map() filter() reduce() --runオプションによるpacka

                                                          Node.js v22の主な変更点 - 別にしんどくないブログ
                                                        • 2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC

                                                          JSer.info #691 - Bun v1.1.5がリリースされました。 Bun v1.1.5 | Bun Blog bun build --compileがクロスコンパイルに対応し、Windows/Linux/macOSに対応したSingle Executable Binaryを出力できるようになっています。 また、package.jsonの末尾カンマを許可するようになる変更やbun.reportが追加されています。 その他には、Import Attributesで任意ファイルをtext/json/toml/fileとしてインポートできるようになるといった変更があります。 React v18.3.0がリリースされました。 Release 18.3.0 (April 25, 2024) · facebook/react React 19 Betaもリリースされていますが、React 1

                                                            2024-05-03のJS: Bun v1.1.5(cross compile)、React 18.3.0、Svelte 5 RC
                                                          • Introducing Pigment CSS: the next generation of CSS-in-JS - MUI

                                                            In the era of React Server Components and the Next.js App Router, component libraries like Material UI must make some paradigm-shifting changes to reap the potential performance gains by moving more of the work of rendering UIs from client to server. Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the React context API only works on the client

                                                              Introducing Pigment CSS: the next generation of CSS-in-JS - MUI
                                                            • Next.jsでMiddlewareが大量に実行される場合の対処法

                                                              Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。 Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。 諸々調査した結果、解決したので記載しておく。 環境 Vercel Supabase Next.js(14.x) App Router 解決方法① PreFetchではMiddlewareをパスするように設定 <Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。 RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。 export async function middleware(req: NextRequest) { ... } // En

                                                                Next.jsでMiddlewareが大量に実行される場合の対処法
                                                              • Ruby on RailsのサービスをNext.js+GraphQLに置き換えした話

                                                                はじめに こんにちは!マイベストで入社してから2年目になるtkeita1024 です。現在は、Frontendのエンジニアをしています! 今回は、新卒で入社してから1年かけてRuby on Railsで表示されているページをNext.js + GraphQLへ置き換えした話について書きたいと思います。 背景 マイベストでは、2022年~2023年にグローバル化対応というプロジェクトでRuby on Railsで表示されているページをNext.js + React + TypeScriptにし、APIをGraphQLを使用するように一部置き換えました。入社した当時は、主要なページのみしか置き換えが完了しておらず、管理画面(Admin)や新規事業(Favlist)の画面の置き換えは完了していない状況でした。そこで、新卒のタスクとして、置き換えが完了していない画面を全て置き換えるというのを取り組

                                                                  Ruby on RailsのサービスをNext.js+GraphQLに置き換えした話
                                                                • 「PDF.js」に任意コード実行の脆弱性 ~多くのWebサイト・アプリに影響(窓の杜) - Yahoo!ニュース

                                                                  オランダのセキュリティベンダーCodean Labsは5月20日(現地時間)、「PDF.js」に任意のJavaScriptコードを実行できる脆弱性(CVE-2024-4367)があることを明らかにした。 【画像】実証コード(PoC)が成功した様子 「PDF.js」は、HTML5で構築されたPDFビューワー。「Firefox 19」以降に搭載されている内蔵PDFビューワーなどに用いられている。 PDF形式は複雑なことで有名で、これまでも攻撃のターゲットになってきた。しかし、その多くはC/C++実装のメモリ破壊バグを狙ったものであり、低レベルなメモリアクセスを扱わないJavaScriptで構築された「PDF.js」はそれと無縁に思える。 しかし、Codean Labsによると「PDF.js」でフォントをレンダリングするコードには見落としがあるという。「PDF.js」はパフォーマンスに最適化する

                                                                    「PDF.js」に任意コード実行の脆弱性 ~多くのWebサイト・アプリに影響(窓の杜) - Yahoo!ニュース
                                                                  • Next.js の Middleware で Hono を使う

                                                                    株式会社 CoeFont でフロントエンドエンジニアをしている uzimaru です。 Next.js の Middleware で Hono を使ってみたのでそれについて記事にまとめます。 モチベーション Next.js の Middleware はアプリケーションに1つだけしか設定出来ず、どの path で実行するかの設定も config を使って正規表現や Header, Cookie を指定して設定するかリクエストの pathname を見て処理を分岐する必要があります。 シンプルな実装のみなら良いのですが、path によってログインしているか確認したい、いくつかの処理を Middleware で適応したい、というように要件が複雑になると管理が大変になっていくと思います。 そこで、Hono のようなシンプルなフレームワークを Middleware で動かして実装をシンプルにしようと

                                                                      Next.js の Middleware で Hono を使う
                                                                    • GigaViewer for AppsにVivliostyle.jsが採用されました

                                                                      GigaViewer for AppsにVivliostyle.jsが採用されました 小形 克宏 (理事、業務執行役員) 株式会社はてなは今年3月29日、自社のマンガビューワ「GigaViewer for Apps」が、「少年ジャンプ+」(株式会社集英社)のアプリ版に採用されたことを発表しました。 はてなのアプリ専用マンガビューワを集英社が採用。2,700万ダウンロードを超える「少年ジャンプ+」に提供開始(2024-03-29) これにともない「GigaViewer for Apps」に組み込まれた小説用ビューワのレイアウトエンジンとして、Vivliostyle.jsが採用されたことをお知らせします。 もしかしたら、「なぜマンガアプリにVivliostyleが?」と不思議に思われる方もいるかもしれません。じつは集英社はマンガ作品のノベライズにも力を入れており、「少年ジャンプ+」もたくさんの

                                                                        GigaViewer for AppsにVivliostyle.jsが採用されました
                                                                      • 2024-05-12のJS: Headless UI v2.0 for React、Astro v4.8、外部パッケージに依存せずにNode.jsで使えるようになった機能

                                                                        JSer.info #692 - Headless UI v2.0 for Reactがリリースされました。 Headless UI v2.0 for React - Tailwind CSS Floating UIのanchor指定をサポート、Checkboxコンポーネント、Fieldsetコンポーネント、Comboboxがvirtual propsをサポートなどの変更が含まれています。 Astro 4.8がリリースされました。 Astro 4.8 | Astro 実験的な機能としてAstro Actions、Request Rewritingの追加が行われています。 また、パフォーマンスの改善やinjectRouteのバグ修正などの変更が含まれています。 Node.js の進化に伴い不要となったかもしれないパッケージたちという記事では、外部パッケージで提供されていた機能の一部がNode

                                                                          2024-05-12のJS: Headless UI v2.0 for React、Astro v4.8、外部パッケージに依存せずにNode.jsで使えるようになった機能
                                                                        • Node.js — Node v22.2.0 (Current)

                                                                          2024-05-15, Version 22.2.0 (Current), @targos Notable Changes [fb85d38e80] - (SEMVER-MINOR) cli: allow running wasm in limited vmem with --disable-wasm-trap-handler (Joyee Cheung) #52766 [23a0d3339f] - doc: add pimterry to collaborators (Tim Perry) #52874 [7d7a762156] - (SEMVER-MINOR) fs: allow 'withFileTypes' to be used with globs (Aviv Keller) #52837 [8748dd6477] - (SEMVER-MINOR) inspector: intr

                                                                            Node.js — Node v22.2.0 (Current)
                                                                          • 口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました - LIVESENSE ENGINEER BLOG

                                                                            転職会議事業部エンジニアの佐藤です。 転職会議の口コミ投稿にはガイドラインがあり、ガイドラインに違反する内容が含まれた口コミを投稿しようとすると、該当する内容がハイライト表示されます。 例えばこのような内容で投稿しようとすると、 ガイドラインに違反する文字列がハイライトされます。 このような内容が含まれた口コミは削除する運用のため、そもそも投稿不可にする仕様となっています。 そのため、なぜ口コミが投稿できないのかユーザーに視覚的に知らせる文字列のハイライトは必ず提供したい機能となっています。 このハイライト機能はこれまでDraft.jsを使って実現していましたが、自前実装に置き換えました。 本記事では、置き換えをした経緯と自前での実装の詳細をご紹介します。 Draft.jsの利用をやめた経緯 ユーザーから口コミ投稿ができないという問い合わせを受けていた Draft.jsがアーカイブになった

                                                                              口コミ投稿のハイライト機能をDraft.jsから自前実装に置き換えました - LIVESENSE ENGINEER BLOG
                                                                            • <JS>矢印付き迷路:問題19 - アーシの考える迷路

                                                                              <JS>矢印付きの問題です。 矢印のところで壁をすり抜けられる迷路です。 操作して攻略してください。 上へ移動 左へ移動   右へ移動 下へ移動 dummy スタートに戻る 詳しいルールはこちら www.arsmaze.com 解答はこちら 【6/1公開予定】

                                                                                <JS>矢印付き迷路:問題19 - アーシの考える迷路
                                                                              • 🌊 mizu.js

                                                                                Peaceful island in an ocean of bloats. Coming soon. Some 🍵 matcha.css while waiting? @lowlighter

                                                                                • ビジュアル作成向けライブラリ「p5.js」でJavaScriptを学べる入門書が発売/『p5jsで学ぶJavaScript入門』【Book Watch/ニュース】

                                                                                    ビジュアル作成向けライブラリ「p5.js」でJavaScriptを学べる入門書が発売/『p5jsで学ぶJavaScript入門』【Book Watch/ニュース】