ブラウザで上にスクロールした時のリロードを制限する方法 - Qiita
はじめに ブラウザの上スクロールでリロードされることを防ぎたいと思ったことはありませんか？特にフォーム入力中やデータ編集中に、意図せずリロードが発生してしまうと、ユーザーの作業が消えてしまいます。この記事では、そのような問題を可能な限り抑える実装方法を紹介します。 実装のポイント 上方向のスクロールのみを制御 この実装の特徴は、全てのスクロール動作を制限するのではなく、上方向のスクロールのみを制御する点です。これにより、通常のスクロール操作に影響を与えることなく、意図しないリロードを防ぐことができます。 CSSによる制御 overscroll-behavior: none; というCSSプロパティを使用することで、ブラウザのデフォルトのオーバースクロール動作を制御します。このプロパティは、スクロールチェーンなどを防ぐために使用されます。 スクロールイベントを使用 JavaScriptのsc
console.logが出力されない？開発者ツールのフィルタ設定が原因かも！対処法を解説 - Qiita
背景 開発を進める中で、console.log が正しく出力されない現象に遭遇しました。コンソールにログが出力されないことで、デバッグが難しく、何が問題なのかを特定するのに時間がかかりました。最終的にはブラウザの開発者ツールの設定が原因だったことが判明したので、その解決方法を共有します。 問題 JavaScriptやjQueryを使った処理が動いているにもかかわらず、console.log が出力されないという現象が発生しました。以下のようなシンプルなログ出力でも、コンソールに何も表示されません。 動作自体は正常に行われているものの、ログが表示されないため、原因の特定に時間がかかりました。 単語（検証ツール）について 開発中によく使用する ブラウザの検証ツール（開発者ツール） には、さまざまなログを表示するための機能が備わっています。以下は検証ツールの主要なタブです。 ・Console:
ユーザー体験重視のSPAアーキテクチャ改 - laiso
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
JavaScript における Object の列挙順は保証されない - Qiita
はじめに 今回、自身の担当するプロジェクトにおいて不具合が見つかり、その要因が 「Object の列挙順は定義順になる、というのを前提としたコードを書いていた」ことにありました。 あまりちゃんと考えずにこうしていたのですが、この認識は誤りです。 これについて少し自分でも動作を確認してみてまとめました。 なおここで保証する・しないというのは ECMAScript の仕様上、保証されるかどうかというコンテキストでの表現であるとご理解ください。 例 どういうことなのかを簡単に例示します。 Node: v20.8.1 const obj = { 3: '3', 1: '1', 9: '9', 5: '5', } // { '1': '1', '3': '3', '5': '5', '9': '9' } 宣言時は key の順が 3, 1, 9, 5 となるように宣言しているのですが、参照すると 1
何故 jQuery ではなく React/Vue/Svelte が流行するのか？
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
Javascript 非同期処理について - Qiita
Javascript初心者であれば、必ずつまずく「非同期処理」についてまとめました。 文中のコードはコピペするだけで実際に以下のサイトでも動くことを確認していますので、 ぜひ、実際にコードをコピペしてデバッグしていただきながら読んでいただけると理解が深まると思います。 非同期処理と同期処理の違い 同期処理・・・上から順番に実行される処理になります。 console.log("A：ボタンクリック") console.log("B：APIを叩いてデータを取得して、加工"); console.log("C：新しい画面の表示"); A → B → Cの順番に処理が実行されたと思います。 それではもっと複雑な処理を考えてみましょう。 もし、Bの処理が非常に重い処理の場合どうなってしまうでしょうか？ 仮のコードで体験してみましょう。 console.log("A：ボタンクリック"); // ここでは「
jQueryは時代遅れなのか？ - Qiita
はじめに おはようございます、しなもんです。 jQuery、使われていらっしゃいますでしょうか。 最近では、Vue.jsやReactなどが登場したことにより やれ「jQueryは時代遅れだ」だの「いや、まだ使えるから学ぶべき」だの、 様々な意見があるライブラリだと思います。 なのでこの記事では、結局jQueryは時代遅れなのか？という問に沿って様々な視点でまとめていこうと思います。 今一度jQueryについて知る jQueryとは、JavaScriptを簡単に扱えるライブラリとして2006年にリリースされました。 当時は使いにくかったJavaScriptのAPIを簡略化するだけでなく、短いコード量で動くこと、当時バラバラだったブラウザによる挙動の違いを吸収できることとして人気を博しました。 現代ではどうか？ 先程述べた通り、jQueryは2006年にリリースされています。 当時はまだJav
JavaScriptで100行で作る！数式言語のインタプリタ
はじめに 皆さんはプログラミング言語を作ったことがあるでしょうか？ おそらく大抵の方は「ない」というのが正直なところなのではないかと思います。背景には、おそらく「プログラミング言語を作るって難しそう」という先入観があるのではと筆者は踏んでいます。 プログラミング言語とは、コンピューターに指示を与えるための特別な言語です。私たちが日常で使う言語と同じように、プログラミング言語にも文法やルールがあります。そして、この言語を理解し実行するのが「処理系」と呼ばれるプログラムです。 しかし、実はプログラミング言語の処理系（インタプリタ）を作ることは非常に簡単なことです。小さなOSを作ることに比べても、ちゃんと動くWebサービスを作ることに比べても本当に簡単です。 というわけで、この記事では「プログラミング言語」を作るための導入として「数式言語」のインタプリタを作ってみます。数式言語とは、数学の式を扱
ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
ソースコードを共有してみんなに見てもらう機会があるでしょうか。そんな時、せっかく見てもらうなら、美しく読みやすいコードを見てもらいたいと思うものです。今回紹介するJavaScript製のツール「Carbon」を使うと、手軽にソースコードを美しい画像に変換して共有できます。 ソースコードを画像に変換するJSライブラリ「Carbon」 見栄えの良いソースコードを共有しよう 昨今、プログラマーであれば、誰しも自分の書いたソースコードを誰かに見てもらう機会があります。プログラミングに関するコラムを書いたり、作成したライブラリの告知のためにSNSで共有したり、プレゼンテーションでプログラムのコードを解説したりと、みんなに見てもらうという場面が多くあります。 そんな機会に、より美しく見栄えの良いソースコードを見せたいと思うことでしょう。今回紹介するJavaScriptのライブラリ「Carbon」を使う
VSCodeでJavaScript / TypeScirptの未使用import文を自動で削除する - Qiita
こうするとファイル保存時に未使用のimport文を削除し、さらにimport文の順番を並べ替えてくれます。順番はimport元のファイルパスをアルファベット順に並べているようですね。 指定できるキーはexplicit以外にもありますので、詳しくはドキュメントをご覧ください。 最後まで読んでいただき、ありがとうございました！
JavaScriptを使ってアイコンをドラッグ&ドロップで変更する - Qiita
はじめに NextとかNuxtで実装すれば簡単に作成ができそうですが、 今回はHTMLとJavaScriptで作成されたサービスでの利用を想定しているため、JavaScriptで頑張って作りました。 ※使用する際は自己責任でお願いします 作ったもの アイコンをドラッグ&ドロップで変更する １．アイコンを用意 ２．アイコンをドラッグ ３．アイコンをドロップ アイコンをクリックして変更する １．アイコンを用意 ２．アイコンをクリックする ３．アイコンを選択する ４．アイコンが切り替わる サンプル See the Pen Untitled by Junya Sato (@aizunoinu) on CodePen. まとめ Webサイトでよく見るあのアイコンを変更する動き。 JavaScriptでもなんとか再現できました。 アイコン上に画像をドラッグ&ドロップしてもアイコンが切り替わるし、 アイ
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
【JavaScript】let宣言は for ループに特化される - Qiita
この記事でのGoの動作は、Go 1.21 の仕様に基づいています。 1.22 で、for の仕様に変更が入っています。 詳しくは、https://tip.golang.org/doc/go1.22 を参照してください。 はじめに 次の記事を読んで、JavaScriptのfor文におけるlet宣言のループ変数が各ループごとに異なる変数としてバインディングされる動作に違和感を覚えました。 以下では、違和感を覚えた理由と、調査を進めた結果たどり着いた結論について書いています。 結論 結論から言うと、JavaScriptの言語仕様において、letはforループに特化されるので、ループ本体のスコープ内でループ変数の作成・値のコピーがされることがわかりました。 初期化ブロックの字句の宣言 初期化ブロックのスコープ効果は、宣言がループ本体の中で行われ、condition部分とafterthought部分
HTMXの正体が分からないので、オレオレHTMXを作ってみた - Qiita
HTMX とは？ の記事を見ればわかるが、Javascript の知識なしで ajax通信や高度なUIの実装ができるライブラリになっています。 賛否両論はあると思いますが、自分はあまり実装がどうなっているか分からず気になったので、ソースコードを少し見てオレオレHTMXを作ってみることにしました（誰にでも分かるように簡易な実装にとどめています）。 ではまずは、ソースコードを見てみましょう！ HTMX のソースコードを読んでみる HTMX のソースコードは、主に の 3900行程度のコード（2024年1月27日現在）になっています。 最初からこのコードを読むのは骨が折れますが、どうやらエントリーポイントは、 // initialize the document ready(function () { mergeMetaConfig(); insertIndicatorStyles(); var
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選
【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用
【2023年最新】JavaScriptのおすすめライブラリとフレームワーク44選 | エンジニアスタイル
はじめまして、エンジニアスタイル編集部です！ コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！ 本記事が、皆様の参考になれば幸いです。 経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。 エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。JavaScriptのフリーランス・副業案件一覧を以下からご覧いただけますのであわせてご確認ください。 JavaScriptのフリーランス・副業案件 JavaScriptのライブラリとフレームワークについて JavaScriptのライブラリやフレームワークは、Web開発において広く使用されて
Javascriptで簡易的にモーダルを実装してみる - Qiita
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index.css"> <title>Document</title> </head> <body> <!-- モーダルを開くボタン --> <button id="modalBtn">モーダルを開く</button> <!-- モーダル本体。デフォルトでは非表示にしている --> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">✖︎</span> <p
JavaScriptビルドツールの整理 各ツールの機能と依存関係
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
JavaScript 押さえておきたい用語集 - Qiita
JavaScriptとは、ウェブブラウザやサーバーサイドで動作するスクリプト言語の一つです。最初はブラウザ上での動的なインタラクションを提供するために生まれましたが、現在ではNode.jsといったサーバーサイドの技術にも広く使用されています。JavaScriptはプロトタイプベースのオブジェクト指向言語で、関数型プログラミングの要素も持っています。 以下、用語の解説です。 オブジェクト (Object) オブジェクトとは、キーと値のペアの集合です。JavaScriptでは、オブジェクトは非常に柔軟で、動的にプロパティやメソッドを追加、削除することができます。 const person = { name: 'Taro', age: 25, greet: function() { console.log('Hello, my name is ' + this.name); } }; プロパティ
【JavaScript】every、someを空配列に対して実行すると... trueを返す？falseを返す？ - Qiita
これが、今回の記事で伝えたいことです！ このような結果になる理由も面白いので、併せて覚えていただけると幸いです。 挙動の解説 every、someの挙動は、それぞれ全称量化子と存在量化子という考え方に基づいています。ややこしそうな言葉なのですが、意外と単純です！ 全称量化子とは、「集合内のすべての要素がある条件を満たすか」を表すものです。 「集合内のすべての要素が条件と合うかチェックする。」というより、「集合内に条件と矛盾している要素が存在するかどうかチェックする。」と考えると分かりやすいと思います。 空の集合には何も存在しないので、もちろん「条件と矛盾している要素」も存在しません。というわけで全称量化子は常に真となる訳です。 これが、空配列に対してeveryを実行した場合にtrueを返す理由になります。 存在量化子とは、「集合内に条件を満たす要素が存在するか」を表すものです。 集合の中に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
