JavaScript

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web Speech API(ウェブ音声API)の説明と使い方とサンプルコード【2023】

Web Speech APIとは? Web Speech APIは、W3C(World Wide Web Consortium)が策定したAPIです。ブラウザのネイティブAPIなので料金も認証キーも不要です。JavaScriptの知...
2023.03.15
JavaScript

【Chrome拡張】background内でlocalStorageを使おうとしてドンハマリした【Chrome Extensions】

本番環境・開発環境・テスト環境のURLのサイトパスを維持したままドメインを切り替えて表示させる『The Switcher』をアップデートしようとしているんですよね。詳しくは実装後にお話ししますが、拡張のアイコンを押すだけではなくて、右クリ...
JavaScript

JavaScriptの三項演算子が分かりにくくて発狂するかたへ~三項演算子とはなにか、覚え方とメリットは何か

(条件) ? 真/trueの場合 : 偽/falseの場合; プログラムの書き方は最適解は存在するものの絶対正であることはあまりない(構文以外の話)と個人的には考えています。その最たるものが三項演算子を使うか使わないかや、アロー関数...
JavaScript

Web Share APIとは?どんな時に使うの?【PC/SP シェア機能の呼び出し】

案件対応が必要になりそうなので先回りしての実証実験になります。うまく出来るかぁ、ワクワク。本当は少し話題になったpicture-in-pictureの記事にしようと思っていたんですが、実作業で使う可能性があるものを優先します。 We...
2023.03.06
JavaScript

テスト/本番(複数環境)ドメインのブラウザの比較検証を効率化するChrome拡張機能 『The Switcher』 – テスト環境・本番環境の切り替えにお使いください

2024/03/21 Thu. ユーザーが1,000を超えました!ありがとうございます! ドメインのスイッチや切り替え表示はそのままやると非効率 コーディングやサイト構築の仕事では、テスト環境と本番環境が分かれていることが非常...
2024.03.21
JavaScript

来年(2024年)まであと何日?何時間?何分?何秒?【カウントダウンタイマーJavascript】

今年(2023年)もわずかになりました。カウントダウンタイマーをつくりましたのでご査収ください。※2023/10/27 追記:すみません、JSにエラーがあり表示されない状態でした。修正しておきました。 2024年01月01日00:0...
2023.10.28
JavaScript

Pinterest風のグリッドレイアウトをCSSのみで実装?乗り越えられない壁、代替策はないのか?Pinterstレイアウトを考察

Webに携わっている方は必ず一度は「Pintarestっぽく出来ませんか?」的なことを言われると思います。僕個人としてはPintarestのようなグリッドレイアウトはあまり好みではありません、なんせ「めんどくさい!」から。 Pint...
2022.09.14
タイトルとURLをコピーしました