JavaScript– category –

現代のウェブ開発、とくにReact.jsを使用する際に、JSXによく出会うことになるでしょう。この強力な構文拡張を理解することは、直感的で保守しやすいReactアプリケーションを開発するうえで極めて重要です。本記事では、JSXとは何か、なぜReact.jsがこれを...

次のようなコードを書いて、JavaScriptのhide()が効かないと悩んでいませんか？ const image = document.querySelector("img"); const button = document.querySelector("button"); button.addEventListner("click", () => { image.hide(); }); この記事で...

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <!-- Slider main container --> <div class="s...

let h = document.querySelector("#xxx"); h.append(this.responseText); // HTMLが文字列として出力される let h = document.querySelector("#xxx"); h.insertAdjacentHTML("afterbegin", this.responseText); 参考：https://developer.mozilla.org/ja/do...

JavaScriptでAJAX（非同期通信）の使うには、JavaScript APIの1つであるXHR (XMLHttpRequest)を利用します。 function reqListener() { console.log(this.responseText); } const req = new XMLHttpRequest(); // オブジェクトの作成 req.addEventListener...

即時関数（IIFE→Immediately Invoked Function Expression） (function () { // … })(); (() => { // … })(); (async () => { // … })(); 参考：https://developer.mozilla.org/en-US/docs/Glossary/IIFE 補足：自己実行無名関数 参考：https://developer....

ディベロッパーツールを開く 設定（歯車アイコン）を開く デバッガ欄にあるJavaScriptを無効にするにチェックを入れる

function doSomething() { return new Promise((resolve, reject) => { resolve("WWW"); }); } function doSomething2() { return new Promise((resolve, reject) => { reject("XXX"); }); } doSomething().then((data) => { console.log(data); // WWW })...

ctx.drawImage( img, WIDTH, HEIGHT, IMG_WIDTH, IMG_HEIGHT ); img.onload = function () { ctx.drawImage( img, WIDTH, HEIGHT, IMG_WIDTH, IMG_HEIGHT ); };

ウィンドウが閉じていても、windowオブジェクトが残っている時がある。 if (windowObj != null && windowObj.closed) { windowObj = null; }