JavaScript

超入門 JavaScript ～基本から将来性まで解説と考察

JavaScript（通称JS）は、Webページを動的に作成するためのプログラミング言語の1つです。JavaScriptは、HTMLとCSSとともにWebページを構成する主要な要素の1つであり、ユーザーとWebページとの対話や、ページの動的...
2023.04.01
JavaScript
JavaScript

JavaScript オブジェクトとは何か？概要と記述方法を基礎から解説

オブジェクトは、プログラム内でデータと機能をまとめた複合的なデータ構造です。オブジェクトは、プログラム内で表現する実世界の概念や事物、またはプログラムの内部状態を表すことができます。 オブジェクト型については『JavaScriptにおけるO...
2023.03.31 2023.04.02
JavaScript
JavaScript

jQuery無しでスムーススクロールをJavaScriptで実装する最も簡単な方法を検証～これでいいんじゃ……

IE（Internet Explorer）が去った今、スムーススクロールってめっちゃ簡単に書いてもいいのでは？と思い検証を兼ねてコードを実装してみます。 スムーススクロールをするにはちょっと文章量が多くないといけないので大変ですね。特に書く...
2023.03.31
JavaScript業務効率化
JavaScript

JavaScriptでCanvasに波紋のエフェクトを描画するサンプルスクリプト

波紋を描画するサンプルコードです。水たまりに雨粒が落ちるような感じになっています。 #canvas { background: #333; width: 100%; } // Canvas要素を取得する let canvas = docum...
2023.03.31
JavaScript
JavaScript

【JavaScirpt】DOM要素の指定方法まとめ

JavaScriptでDOM（Document Object Model）要素を指定する方法にはいくつかありますが、代表的な方法を以下に紹介します。 （１）getElementById()メソッドを使用する方法 document.getEl...
2023.03.30 2023.04.14
JavaScript
JavaScript

JavaScriptでCanvasに雨を降らせるギミックサンプル【jQuery無し】

// Canvasの要素を取得する var canvas = document.getElementById("myCanvas"); // Canvasの描画コンテキストを取得する var ctx = canvas.getContext(...
2023.03.29 2023.03.30
JavaScript
JavaScript

泡が下から出るJavaScriptギミックをCanvasで描画するサンプル【jQuery無し】

// Canvas要素を取得する const canvas = document.getElementById('myCanvas'); // Canvasのコンテキストを取得する const ctx = canvas.getContext...
2023.03.28 2023.03.29
JavaScript
JavaScript

【JavaScript】Fetch APIとは何か？fetch()メソッドの使い方と解説

JavaScriptのFetch APIは、Webブラウザー内でHTTPリクエストを送信してレスポンスを取得するためのAPIです。Fetch APIを使用すると、Webアプリケーションはサーバーと通信し、データを受信したり送信したりできます...
2023.03.28
JavaScript
JavaScript

【JavaScript】イベント処理関数addEventListener()の使い方、引数の使い方

addEventListener()は、JavaScriptでイベントリスナーを追加するためのメソッドです。イベントリスナーとは、特定のイベントが発生した際に呼び出される関数であり、ユーザーのアクションやWebページの状態の変化など、様々な...
2023.03.27 2023.03.28
JavaScript
JavaScript

JavaScriptにおけるイベントオブジェクトとは何か？引数eについても解説【function(event)】

JavaScriptにおけるイベントオブジェクトとは、ユーザーがブラウザ上で起こしたアクション（例えば、クリック、キー入力、マウス移動など）に関する情報を含んだオブジェクトのことです。 と、このように説明しても何が何やら分かりにくいと思いま...
2023.03.25 2023.03.28
JavaScript
JavaScript

クリックイベントで要素の中に含まれる特定の要素を除外したいときの対処法【JavaScript】

JavaScriptでclickイベントを検知するには要素.addEventListener('click', function(){…を使いますね。ですが要素の中にある特定の要素では発火して欲しくない場合が時々あります。 たとえば AB ...
2023.03.24
JavaScript
JavaScript

JavaScriptで最も近い子孫要素を取得・操作・判別する方法（closest()の逆メソッド）【querySelectorAll()】

先祖要素を指定するclosest()メソッドとは反対に、子孫要素を指定するメソッドは何でしょうか？「それはfind()メソッド」です、と書いてあるサイトはすぐさま読むのを止めましょう。 2，3歩譲歩すれば完全に間違ってはいませんが、find...
2023.03.24
JavaScript
JavaScript

JavaScriptで先祖要素の取得や操作、有無を判別する方法を初心者にも分かるように解説【closest()メソッド】

JavaScriptで自身の要素よりも上の階層に特定の要素があるかどうかを判別したり、その要素を指定してDOM操作することがよくあります。そのような場合にはclosest()メソッドを利用するのが一般的です。 closest()メソッドの使...
2023.03.22 2023.03.23
JavaScript
JavaScript

JavaScriptでタイプライターのようなエフェクトを実装する方法と解説【サンプルコード付き】

ChatGPTをお使いになった方は多いと思います。ChatGPTは対話型のAIで質問を送信すると回答がタイプライターのように返ってきます。今回はこのChatGPTのように1文字ずつ文章を表示させるエフェクトを実装してみます。 以下のデモの基...
2023.03.20
JavaScript
JavaScript

Web Speech API（ウェブ音声API）の最もシンプルなサンプルコード【2024】

Web Speech APIとは？ Web Speech APIは、W3C（World Wide Web Consortium）が策定したAPIです。ブラウザのネイティブAPIなので料金も認証キーも不要です。JavaScriptの知識さえあ...
2023.03.13 2024.05.13
JavaScript
次のページ