【徹底解説】JavaScriptでモジュールの作り方 - Qiita
ライブラリとモジュールの違い ライブラリとモジュールは、両方ともコードの再利用を促進するために使用される概念ですが、意味や使用方法においていくつかの違いがあります。 ライブラリ: ライブラリは、特定の機能や機能セットを提供する再利用可能なコードの集まりです。 一般的に、ライブラリは独立して使用され、他のプログラムやプロジェクトで利用されることを目的としています。 ライブラリは、一般的な問題を解決するための関数、クラス、ユーティリティ、データ構造、アルゴリズムなどの要素を含むことがあります。 ライブラリは、プログラム全体に影響を与えることなく、必要な機能を選択的に使用できるようにするため、モジュールやコンポーネントとして提供されることがあります。 モジュール: モジュールは、コードの構造化と組織化を目的とした小さな単位です。 モジュールは、関連するコードのグループ化とカプセル化を容易にします
JavaScript モジュール - JavaScript | MDN
JavaScript のプログラムはとても小さいものから始まりました。初期の用途は、必要に応じてウェブページにちょっとした対話的な機能を追加する独立したスクリプト処理がほとんどであったため、大きなスクリプトは通常必要ありませんでした。そして何年かが過ぎ、今や大量の JavaScript を持つ完全なアプリケーションをブラウザーで実行することはもちろん、JavaScript を他のコンテキスト（例えば Node.js）で使うこともあります。 それゆえ近年は、JavaScript プログラムをモジュールに分割して必要な時にインポートできるような仕組みの提供が検討されるようになってきました。Node.js は長年この機能を提供しており、モジュールの利用を可能にする JavaScript ライブラリーやフレームワークも数多くあります（例えば、他の CommonJS や、AMD ベースのモジュールシ
JavaScriptにおけるモジュールとWebpack - Qiita
JavaScriptにおける「モジュール」の定義 モジュール(module)とは「変数や関数をまとめたもの」で, JavaScriptにおいては1つのモジュールは1つのjsファイルに対応します. 一つの大きなjsファイルにあらゆる機能を書くのではなく, モジュール化を行なって小規模なjsファイルの組み合わせとして表現することにより, コードの可読性が増したり変数や関数名の衝突を防ぐことができたりなどの様々な恩恵が受けられます. importとrequireの違い importとrequireはどちらもモジュールの読み込み方法を表しています. importはブラウザ上で動作するES6のモジュールシステムであり, requireはNode.jsの環境で動作するCommonJSのモジュールシステムという違いがあります. importについて モジュール側では関数やクラスを定義する際に先頭にexp
【JavaScript】exportと importを使ったモジュール化【module】
みなさんこんにちは、現役エンジニアのサメハックです アパレル企業でトップ販売員を経て 未経験からWebエンジニアに転職し、 現在正社員として5年働いています！ JavaScriptの解説シリーズです。 今回はexportとimportを使ったモジュール化について学んでいきましょう！ 駆け出しエンジニアや未経験の方、 また新入社員を指導する先輩社員にとっても わかりやすいように解説していきます！
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
JSON.stringify() - JavaScript | MDN
JSON.stringify() は値をそれを表す JSON 表記に変換します。値は以下のように変換されます。 Boolean、 Number、 String、および (Object() により得られる) BigInt の各オブジェクトは、文字列化の際に慣習的な変換セマンティクスに従い、対応するプリミティブ値に変換されます。(Object() により得られる) Symbol のオブジェクトは、プレーンオブジェクトとして扱われます。 BigInt の値を文字列化しようとすると、例外が発生します。しかし、BigInt が (モンキーパッチ BigInt.prototype.toJSON = ... により) toJSON() メソッドを持っている場合、このメソッドにより文字列化できます。この制約により、適切な文字列化の方法（そして、ほとんどの場合、対応する逆変換の方法）が常にユーザーによって明
[Node.js] JSONをキレイに整形して出力する - ねこの足跡R
小ネタです。 結論から言うと、JSON.stringify()の第2引数にnull、第3引数に数値を指定することで人間がパッと見て分かるよう整形した文字列が返されます。 const data = [ { "season": "202004", "title": "乙女ゲームの破滅フラグしかない悪役令嬢に転生してしまった…", "company": "SILVER LINK." }, ] // 機械に優しい const str1 = JSON.stringify(data); console.log(str1) // 人間に優しい const str2 = JSON.stringify(data, null, 2); console.log(str2) 実際に実行すると以下の通り。str1は直接プログラムから読み込むのに適しています。通常RESTfulAPIなどに渡す場合はこちらを利用します
![[Node.js] JSONをキレイに整形して出力する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/7dfd89aa35a36a9b4f644c2bba616ffee6c0db86/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061406498%2F1701343054)
Array.prototype.forEach() - JavaScript | MDN
標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[@@species]インスタンスメソッドArray.prototype[@@iterator]()Array.prototype.at()Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.findLa
YouTubeのショート動画を連続再生する拡張機能を作ってみた | 日記の間 | あかつきのお宿
この記事を三行にまとめると ショート動画終了時に自動でスクロールしたい なぜかloop属性が消えない timeupdateイベントを使って残り時間を見る manifest.json { "name": "shortscroll", "description": "ショート動画を連続再生する", "version": "1.0.0", "manifest_version": 3, "content_scripts": [{ "matches": ["*://www.youtube.com/*"], "js": ["script.js"] }] } ショート動画終了時に自動でスクロールする function autoScroll() { currentReel = document.querySelector('ytd-reel-video-renderer[is-active]'); cur
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
𝕏(Twitter)のホームで最新ツイートを自動で取得するためのユーザースクリプト
はじめに タイトルのスクリプト自分用に作っていたので共有です。 https://greasyfork.org/ja/scripts/473371-twitter-autoload 取り急ぎ公開用にこまごま変更したので、おかしな動作あればコメントいただければ修正いたします。 なおコードは以下に置いているので好きにいじってもらっても構いません。 https://github.com/natsuyasai/TwitterAutoReloadScript 動作する画面 ホーム画面(/home未指定) https://twitter.com ホーム画面 https://twitter.com/home 通知画面 https://twitter.com/notifications 検索画面 https://twitter.com/search 機能など ステータス 一番左の●印です。 緑なら稼働中 灰
【JavaScript】スクロール位置を取得・設定する
JavaScriptでスクロール位置を取得する scrollYプロパティで縦方向のスクロール位置を取得する windowオブジェクトのscrollYプロパティを取得することで、取得時点での縦方向のスクロール位置を取得することができます。 // スクロールされた時、現在の縦方向のスクロール位置をコンソールに出力する window.addEventListener('scroll', () => { const y = window.scrollY; console.log(y); }); windowオブジェクトにaddEventListenerでscrollイベントを追加することで、ブラウザ上でスクロールされた時に処理を実行することができるようになります。 また、windowオブジェクトのonscrollプロパティに処理を代入することでも実装できます。 window.onscroll =
JavaScript querySelectorAll 複数要素を取得 | ITSakura
引数にCSSのセレクタを指定しNodeList(複数の要素)を取得します。 一致するものがない場合は、空のNodeListを返します。 NodeListのイメージ querySelectorAllでvalue値を取得する <input type="text" class="text1" value="red" maxlength="5" /> <input type="text" class="text1" value="blue" maxlength="5" /> <script> const qs1 = document.querySelectorAll(".text1"); for (let i = 0; i < qs1.length; i++) { console.log(qs1.item(i).value); //red blue } let textid = "text1";
【JavaScript】 追加した要素までスクロールして要素を表示する
例えばdiv要素内に要素を追加して、その要素を表示したいときはdiv要素の最下部まで移動させる必要がある。 div要素の最下部に移動次のようにdiv要素の高さが固定で、overflow属性にスクロール表示可能な値がセットされているとする。 コード
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
this.x is not iterable
jQuery.map() | jQuery API Documentation
JavaScriptのarrayのmap関数でアロー関数を使う - Qiita
TypeScript で例外を throw した方が 良いのか 悪いのか
Element.nextElementSibling
