Next.js個人備忘録④：Next.jsでTypeScriptとJavaScript、どちらを使うか迷ったため、記事にまとめてみた - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
2025-04-03のJS: Next.js LTS Policy、Rsdoctor 1.0、zx@lite
JSer.info #730 - Next.jsがLTSポリシーを公開しました。現在のメジャーバージョンをActive LTSとし、それ以前のメジャーバージョンは最初のリリースから2年間はMaintenance LTSとしてメンテナンスされます。 Next.js Support Policy | Next.js by Vercel - The React Framework このLTSポリシーは、Next.jsのミドルウェアバイパスに関するポストモーテムの一環として公開されています。 Postmortem on Next.js Middleware bypass - Vercel Rsdoctor 1.0がリリースされました。webpack-bundle-analyzerのようにbundle sizeの分析やビルドの分析が行えるツールです。rspackまたはwebpackで利用できます。
JavaScriptで配列を非破壊的に変更するならこうしよう2025 - Qiita
はじめに JavaScriptの配列操作には、元の配列を直接変更する「破壊的（destructive）」なメソッドと、元の配列は変更せず、一部が元と異なる《新しい》配列を生成する「非破壊的（non-destructive）」なメソッドがあります。 「破壊的か非破壊的か」を意識べきケースの例として、React があります。React はオブジェクトの同一性のみによって《画面の状態が更新されたか》を判定するので、配列などのオブジェクトを set 関数で更新する場合には、非破壊的に変更する必要があります。 かつては、非破壊的操作のメソッドが十分にそろっていなかったので、非破壊的操作が必要な場合に「古い配列をコピーしてから、新しい配列に対して破壊的操作をする」ことでしのぐことが多くありました。 しかし、今は違います。 主に ES2023 で「配列の非破壊的な変更」のメソッド群が追加され、サポートが
cssと少しのJavaScriptで、ヘッダー追従要素あっても、それが被らないでスムーズスクロールを実装する - Qiita
まずはじめに ヘッダー部分に追従要素がある時、ページ内スクロールをすると、その追従要素が重なってくることがあると思います。 それをcssと少しのJavaScriptで解決しようという話です。 どう解決するか cssだけでスムーズスクロールとスクロールした時の余白を設定できるようになりました。 scroll-behavior https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior scroll-padding-top https://developer.mozilla.org/ja/docs/Web/CSS/scroll-padding-top これらを使って解決しようと思います。 <div id="content" class="content"> <nav id="nav" class="nav"> <a href="#
CSS だけでフォームバリデーションが超進化！JavaScript不要の裏技公開！ - コハム
Enhance Your Form Validation with Pure CSS — No JavaScript Needed! 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ユーザーが入力フィールドと対話する際にリアルタイムの視覚的フィードバックを提供するなど、フォームに追加のバリデーションを設けることを考えたことはありますか？例えば、正しい入力には緑色の枠線を表示し、不正な入力には赤色の枠線を表示するといった具合です。通常、これを実現するにはJavaScriptやReactなどが必要で、少し複雑になることがあります。しかし、CSSだけでこれを実現できるとしたらどうでしょうか？嘘ではありません — 実際に可能なのです！ シンプルなフォームの作成 有効および無効な状態にCSSを適用する :user-validと:user-inval
RustベースのJavaScriptツールチェーン開発プロジェクト「Oxc」が、ESLint互換のリンター実装を目指すOxlintベータ版をリリースし大きな注目を集める
3月17日、JavaScriptツールチェーンをRustベースで置き換えることを目指すプロジェクトOxcが、Eslintの置き換えを目指す「Oxlint」のベータ版をリリースした。 3月17日、JavaScriptツールチェーンをRustベースで置き換えることを目指すプロジェクトOxcが、Eslintの置き換えを目指す「Oxlint」のベータ版をリリースした。 以下に、その内容を紹介する。 Oxcとは何か Oxcは「JavaScript Oxidation Compiler」の略称であり、Rustで記述された高性能なJavaScript向け開発ツール群の総称である。JavaScriptに不可欠とされるコンパイラツール（パーサー、リンター、フォーマッタ、トランスパイラ、ミニファイア、リゾルバ）を構築することを目的として開発が進められている。プロジェクトの目標は、VoidZeroの一環としてJ
The JavaScript Oxidation Compiler
For more detailed instructions on how to use Oxlint and integrate it with your project or editor, check out the installation guide. Highlight of new features since general availability Significant performance improvements, up to twice as fast compared to the previous releaseIncludes over 500 rules built-in, with no extra installation requiredMany rules from the typescript, unicorn, react, react-p
HonoJSがJavaScriptの未来を変える！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Leapcell: 次世代のサーバレスプラットフォームでWebホスティング JavaScriptランタイムフレームワークHonoの詳細理解 Github上で、JavaScriptランタイムフレームワークのHonoはすでに22,000のスターを獲得しています！ Honoの誕生背景 Honoの誕生は2021年12月に遡ることができます。その作者は、当時Cloudflareの社員として、Cloudflare Workers向けのアプリケーションを作成したいと考えていました。しかし、フレームワークを使用しない場合、コードは非常に冗長になり、要件
【完全理解】JavaScriptの非同期処理 —「待てない人」のための処理術 - Qiita
🤔 はじめに：非同期って何？コーヒーショップで考えよう JavaScriptのような「シングルスレッド」の言語は、一度に一つのことしかできません。想像してみてください： あなたは一人でコーヒーショップを経営しています。お客さんAが注文したラテを作っている間、他のお客さんは全員待たなければなりません。営業は大失敗。破産確定です...😱 非同期処理はこの問題を解決します！あなたは魔法の「後でやる」能力を手に入れました。 お客さんAが注文：「ラテください」 あなた：「かしこまりました！（コーヒーマシンをセット）できあがるまで少々お待ちください」 その間に、お客さんBの注文も受けられる！ コーヒーマシンから「ピンポーン🔔」と音がしたら、ラテを渡す つまり非同期処理とは、「完了を待たずに次の作業に進み、完了したらその結果を使う」テクニックなのです。 👴 第一世代：コールバック関数（2010年
[Javascript] AA.BB.CCの `.` は何を意味するか - Qiita
python, C++と使用してきて，javascript独特な記述方法について困ったので，以下に纏めた． In a nutshell .はドット演算子とよばれる，オブジェクトや配列などのプロパティやメソッドにアクセスするための演算子である． 詳細な説明 JavaScriptにおける .（ドット）は，主にオブジェクトのプロパティやメソッドを呼び出すために使用される．例えば，AA.BB.ccというコードがある場合，それは次のように解釈できる． オブジェクトのプロパティアクセス AA はオブジェクトであり，その中に BB というプロパティが存在する． BB はさらにオブジェクトまたは値を持ち，その中に cc というプロパティが存在する． この場合，AA.BB.cc は，まず AA オブジェクトの BB プロパティにアクセスし，次にその BB プロパティが持つ cc プロパティにアクセスすること
![[Javascript] AA.BB.CCの `.` は何を意味するか - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5d89c9710b471c8be08b0b7b3611006eb2c8ca30/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYzODMwMTg0JTJGM2MzMDczOTM4YzhjYTAzODViMjNjYWRlMDNjOWFmNTMyMDJlZWU2MiUyRnhfbGFyZ2UucG5nJTNGMTczNTcyMDE5Mz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz05MTFhODRhNzM1OWUyMDc0MmQwMWZiYzI1ZjUyZjJmOQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D92058ecb901487e29c956c9c7c673733%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YXNjcmlwdCU1RCUyMEFBLkJCLkNDJUUzJTgxJUFFJTIwJTYwLiU2MCUyMCVFMyU4MSVBRiVFNCVCRCU5NSVFMyU4MiU5MiVFNiU4NCU4RiVFNSU5MSVCMyVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTIxYTllNzkxZTIxZTYzZGQyYzQ4ODJkMTBmOGMyYTVh%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBtb2xlY3VsYXJfcG9vbCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTNmY2Y1YzNiZWM5YTMzY2QwYTE2OWY5MWM3YTA0YTg4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5e7df5b5e6a7686af5b5bf8157c26274)
JavaScriptのDateはなぜ扱いづらいのか
はじめに READYFOR でプロダクトエンジニアをやっている pxfnc(ぴくすふぁんく) です。 本記事は READYFOR Advent Calendar 2024 の 19 日目 の記事です。 JavaScriptの言語仕様にも含まれているDateオブジェクトの扱いは、他の言語の日付時刻処理と比べてたいへん扱いづらいことで有名です(多分)。そのため、外部ライブラリとしてMoment.js date-fnsや、新しいものだとluxon、標準としてIntl.DateTimeFormat や、日付時刻を扱うためのTemporalのプロポーザルもある状態で、みんなかなり苦しんでいるような状況かと思います。 このように現時点でも多くのソリューションがありますが、そもそもDateは何なのか、どうして扱いづらいのか、という点をJavaScript初心者の方や、バックエンドエンジニアの方に知ってい
ESLintがCSSの構文検証など正式サポート、MarkdownやJSONのサポートに加えて
JavaScriptなどのコードを静的に解析し、構文や基本的なエラーのチェックやコーディングスタイルへの統一などを行ってくれる、いわゆるリントツール（あるいはリンティングツール）「ESLint」が、CSSの構文やコーディングスタイルの検証もサポートしたことが発表されました。 ESLint now officially supports linting CSS! Read more:https://t.co/bCK6kFj2B0 — ESLint (@geteslint) February 18, 2025 CSSのサポートは、公式の言語プラグインである@eslint/cssプラグインによって行われます。 CSSのリンティングでは、デフォルトでは可能な限り厳密にコードを解析し、途中で見つかったすべてのエラーを強調表示します。ただし通常、WebブラウザにおけるCSSの解析ではエラーリカバリー機
TS/JSでセミコロンをつけないスタイル（No-Semi）について
TypeScriptやJavaScriptにおいて、文末にセミコロンをつけないスタイル（以下「No-Semiスタイル」）の現在の普及状況について、最近の調査資料が見つからなかったため、独自に調べてみました。コーディングスタイルを検討する際の参考になれば幸いです。 背景 Cursor ComposerやClineなどのコーディングAIを使ってTypeScriptの開発をしていると、Lint設定でNo-Semiスタイルを指定しているにもかかわらず、Composerがセミコロンありのコードを生成してしまうため、毎回Lintエラーが発生することがあります。 この問題は「TypeScriptではNo-Semiスタイルを採用する」とカスタムプロンプトに明記することで回避可能です。しかし、デフォルトのスタイルとしてセミコロンありが採用されていることには少し違和感がありました。 いつからかは定かではありま
JSとCSSで中央寄せがなぜかズレる - Qiita
#はじめに JSを使用して要素の中央揃えを作成した時、なぜかCSSのフレックスボックスと中心がずれる場合があるので調べてみました 検証用コード 要素を3つ用意し 1.CSSのフレックスボックスを使用して中央揃えしたもの 2.JSの window.outerWidth を使用し計算を行い中央揃えしたもの 3.JSの window.innerWidth を使用し計算を行い中央揃えしたもの を作成しどういった場合に中央揃えがずれるのかを検証してみます <style> .frame{ /* height: 10000px; */ } .flex{ display: flex; justify-content: center; align-items: center; } .box{ width: 100px; height: 100px; color: white; } #box1{ backgr
JavaScript用の教材、ぷよぷよプログラミングをPythonでやってみた！ - Qiita
左：JavaScript版 右：Python移植版 はじめに 今回はJavaScript用の学習教材「ぷよぷよプログラミング」を参考に、Pythonでぷよぷよを作ってみたので、その感想を書いていこうと思います。 ぷよぷよプログラミングとは ぷよぷよプログラミングは、セガが出しているJavaScript向けの学習教材で、写経を通じてJavaScriptを学べます。コースが基礎、初級、中級、上級と分かれているので、自分のレベルにあったものを選べます。リンクを貼っておくので、気になる方はご覧ください。（本家の方にPythonは出てきません） この試みについて もともとは、Python以外の言語にも触れて比較したいと思い、JavaScriptの勉強をするつもりでした。しかし、せっかくなら上級をやりたいものの、上級だと無からすべて写経することになるので、流石に時間かかるな～という思いがありました。そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Promise / async-await / Generatorの違いと使い分け：JavaScript非同期設計のための構文戦略 - Qiita
JavaScript getterとsetterに関するまとめ📔 - Qiita
JavaScript constは変更不可という理解を捨てる🚮 - Qiita
JavaScript best practice: use return await
【JavaScript】分割代入いろいろ - Qiita
