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の勉強をするつもりでした。しかし、せっかくなら上級をやりたいものの、上級だと無からすべて写経することになるので、流石に時間かかるな～という思いがありました。そ
2025-02-24のJS: Create React Appが非推奨に、Deno 2.2、Bun 1.2.3、ESLintのCSSサポート
JSer.info #726 - Create React Appが非推奨となりました。 Sunsetting Create React App – React create-react-appは非推奨となり、Reactを使ったフレームワークやVite/Parcel/Rsbuildなどのビルドツールへの移行が推奨されています。 Deno 2.2がリリースされました。 Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite lintのビルトインルールの追加、JavaScriptで書けるLint Plugin APIの追加、deno taskがwildcard(*)指定に対応しています。 また、deno outdatedにinteractive modeを追加、deno compileの改善なども含まれています。 unstableな機能としてOpe
JavaScript で関数はオブジェクト? なにそれ?
はじめに JavaScript をある程度書いていると、「関数はオブジェクトでもある」という話を耳にしますよね。そして、「そんなの知らないよ。はいはい。」と右から左に聞き流しているあなたのためにこの記事を書きました。 Function オブジェクトのプロトタイプチェーンや内部スロット、コンストラクタとしての使い方、bind/call/apply の仕組み、Arrow Function や Generator Function、Async Function など、JavaScript の関数が持つさまざまな特徴を解説します。 関数がオブジェクト?? まず最初に、JavaScript の関数は Object を継承した「呼び出せるオブジェクト(callable object)」です。つまり関数として呼び出し可能であるだけではなく、プロパティを持つことができます。関数名を変数のように扱ったり、他
HTML / CSS / JavaScript 制作 Tips 番外編 - Qiita
HTML / CSS / JavaScript 制作 Tips 番外編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編・上級編として次の３０項目を教えていただきました。 初級編のTips 10個： HTMLタグは必ず閉じるように心掛けてや。メンドクサイけんど、閉じ忘れが原因でエラー起こることもあるんじゃ。 CSSは外部ファイルで管理する方が整理整頓やし、保守や改修も楽よ。ほなら、あんたのコードもすっきりと！ やはよう使うけど、セマンティックなタグを使うとSEOにも好影響よ。シンプルでも、意味をもったタグがあるけん、活用しとき。 CSSのセレクタ優先度を理解しとき。この順なら、「ID」「クラス」「タグ」よ。覚えておき。 JavaScriptでDOM要素を扱うときは、getElementByIdやquerySelector
JavaScript: 接尾辞Automatonで高速に文字列を扱う - Qiita
接尾辞Automatonとは、接尾辞を効率的に表現するData構造です(Wikipediaより)。今回はこれを利用して高速に部分文字列とその出現回数を求めます。 このprogramの主な特徴は以下の通りです class State：各状態を表現し、以下の情報を保持します 部分文字列の長さ suffix link 次の状態への遷移 その状態が終端状態かどうか その状態を通過する部分文字列の出現回数 class SuffixAutomaton：以下の主要なmethodを提供します extend: 新しい文字を追加してAutomatonを拡張 build: 文字列からAutomatonを構築 calculateCount: 各状態の出現回数を計算 enumerateSubstrings: 部分文字列とその出現回数を列挙 第1引数: この値を超える出現回数(既定値=1)の部分文字列のみ列挙 第2引
わずか数行のコードで1つの要素を別の要素にスムーズに遷移させる、フレームワークに依存しないJavaScript -Blendy
数行のコードと外部スクリプトを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptを紹介します。 フレームワークやライブラリなど他のスクリプトに依存することなく、単体で動作し、もちろん他のフレームワークと一緒でも動作します。 Blendy Blendy -GitHub Blendyとは Blendyのデモ Blendyの使い方 Blendyとは Blendyはわずか数行のコードを記述するだけで、1つの要素を別の要素にスムーズに遷移させるJavaScriptです。依存関係はなく、単体で動作し、React, Vue.js, Angularをはじめ、ほぼすべてのフレームワークと一緒でも動作します。 MITライセンスで、商用プロジェクトでも無料で利用できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript getterとsetterに関するまとめ📔 - Qiita
JavaScript constは変更不可という理解を捨てる🚮 - Qiita
JavaScript best practice: use return await
【JavaScript】分割代入いろいろ - Qiita
