【完全理解】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ライセンスで、商用プロジェクトでも無料で利用できます。
【海外記事紹介】Web開発者向けのWebAssembly活用法5選
2月17日、海外のテクノロジーメディア「The New Stack」が「Top 5 Uses of WebAssembly for Web Developers」と題した記事を公開した。この記事では、WebAssemblyがWeb開発にもたらすメリットと具体的な実装例を含む5つの活用法について詳しく紹介されている。以下に、その内容を紹介する。 2月17日、海外のテクノロジーメディア「The New Stack」が「Top 5 Uses of WebAssembly for Web Developers」と題した記事を公開した。この記事では、WebAssemblyがWeb開発にもたらすメリットと具体的な実装例を含む5つの活用法について詳しく紹介されている。以下に、その内容を紹介する。 1. ブラウザ内での高パフォーマンス演算 JavaScriptは柔軟性が高い反面、複雑な数値計算やアルゴリズ
🚀 「Solid.js」入門！高速リアクティブUIの新時代が来た⚡ - Qiita
Solid.jsで実現する高速リアクティブUI開発 ⚡️ こんにちは、現役エンジニアの@YushiYamamotoです。 今回は、最新のリアクティブUIライブラリ Solid.js について、初心者にもわかりやすく、かつ専門的な内容を解説します。Solid.jsは、その優れたパフォーマンスとシンプルなAPIで注目されており、多くのプロジェクトで採用されています。本記事では、Solid.jsの基本概念、導入方法、コード例、そして動作の仕組みについて詳しく解説します。 Solid.jsとは？ 🤔 Solid.jsは、Solid公式サイト で紹介されている通り、「コンパイル時にリアクティブ性を確保する」次世代のWeb UIライブラリです。 主な特徴は以下の通りです： Fine-grained reactivity (細粒度リアクティブ性) → Solid.jsは、仮想DOMを使用せず、直接DO
HTML / CSS / JavaScript 制作 Tips 中級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
HTML / CSS / JavaScript 制作 Tips 上級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 上級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編について教えていただき、ありがとうございました。今日は上級編として、次の１０項目について詳しく教えてください。 パフォーマンス最適化のために、クリティカルCSSの使用や画像の遅延読み込みを検討しとき。 JavaScriptを使ってデバッグ作業を効率化する方法を覚えるのがええし。コンソールAPIとかね。 RESTやGraphQLによるAPIの設計と使用
バグバウンティにおけるJavaScriptファイルの監視ツールの事例 - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティの脆弱性調査で使われている JavaScript ファイルの監視ツールについて少し紹介します。 1. 始めに 免責事項 2. バグバウンティにおける JavaScript ファイルの監視 3. JavaScript ファイルの監視ツール JSWatch DiffScript URL Tracker JSMon jsmon.sh BLACKBIRD 4. その他 Monitoring JS files to know first about new features feat. Testing JavaScript files for bug bounty hunters Blog「バグバウンティ入門(始め方)」 Blog「バグバウンティにおける JavaScript の静的解析と動的解析まとめ」 5. 終わりに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript best practice: use return await
【JavaScript】分割代入いろいろ - Qiita
JavaScriptで「HTMLファイルに直接JavaScriptのコードを記述する」の動作を確認してみた。 - Qiita
