JavaScriptクリックイベントで要素の中に含まれる特定の要素を除外したいときの対処法【JavaScript】
JavaScriptでclickイベントを検知するには要素.addEventListener('click', function(){…を使いますね。ですが要素の中にある特定の要素では発火して欲しくない場合が時々あります。 たとえば AB ...
吉村 ケンイチ
JavaScript
JavaScriptJavaScriptで最も近い子孫要素を取得・操作・判別する方法（closest()の逆メソッド）【querySelectorAll()】
先祖要素を指定するclosest()メソッドとは反対に、子孫要素を指定するメソッドは何でしょうか？「それはfind()メソッド」です、と書いてあるサイトはすぐさま読むのを止めましょう。 2，3歩譲歩すれば完全に間違ってはいませんが、find...
JavaScriptJavaScriptで先祖要素の取得や操作、有無を判別する方法を初心者にも分かるように解説【closest()メソッド】
JavaScriptで自身の要素よりも上の階層に特定の要素があるかどうかを判別したり、その要素を指定してDOM操作することがよくあります。そのような場合にはclosest()メソッドを利用するのが一般的です。 closest()メソッドの使...
JavaScriptJavaScriptでタイプライターのようなエフェクトを実装する方法と解説【サンプルコード付き】
ChatGPTをお使いになった方は多いと思います。ChatGPTは対話型のAIで質問を送信すると回答がタイプライターのように返ってきます。今回はこのChatGPTのように1文字ずつ文章を表示させるエフェクトを実装してみます。 以下のデモの基...
JavaScriptWeb Speech API（ウェブ音声API）の最もシンプルなサンプルコード【2024】
Web Speech APIとは？ Web Speech APIは、W3C（World Wide Web Consortium）が策定したAPIです。ブラウザのネイティブAPIなので料金も認証キーも不要です。JavaScriptの知識さえあ...
SEOGoogle検索にチョイ足しクエリで仕事が捗る【URL付与パラメーターの一覧】
Webライティングをやっていると、専門技術に関しては日本語サイトはかなり遅れていると皆さんお考えではないでしょうか。海外の先端情報をどうやって集めるか、という問題が出てきますが、とりあえずGoogleで英語検索するのが定石ですね。 プログラ...
JavaScript【Chrome拡張】background内でlocalStorageを使おうとしてドンハマリした【Chrome Extensions】
本番環境・開発環境・テスト環境のURLのサイトパスを維持したままドメインを切り替えて表示させる『The Switcher』をアップデートしようとしているんですよね。詳しくは実装後にお話ししますが、拡張のアイコンを押すだけではなくて、右クリッ...
JavaScriptJavaScriptの三項演算子が分かりにくくて発狂するかたへ～三項演算子とはなにか、覚え方とメリットは何か
(条件) ? 真/trueの場合 : 偽/falseの場合; プログラムの書き方は最適解は存在するものの絶対正であることはあまりない（構文以外の話）と個人的には考えています。その最たるものが三項演算子を使うか使わないかや、アロー関数にするか...
JavaScriptWeb Share APIとは？どんな時に使うの？【PC/SP シェア機能の呼び出し】
案件対応が必要になりそうなので先回りしての実証実験になります。うまく出来るかぁ、ワクワク。本当は少し話題になったpicture-in-pictureの記事にしようと思っていたんですが、実作業で使う可能性があるものを優先します。 Web Sa...
JavaScriptテスト/本番（複数環境）ドメインのブラウザの比較検証を効率化するChrome拡張機能 『The Switcher』 – テスト環境・本番環境の切り替えにお使いください
2024/04/20 Sat. 1,500ユーザーの皆様ありがとうございますm(__)m 2024/03/21 Thu. ユーザーが1,000を超えました！ありがとうございます！ ドメインのスイッチや切り替え表示はそのままやると非効率 コー...
react-native【CSS 疑似要素】before, afterのcontentプロパティ内で文章を改行する方法
やむを得ずHTML内の文章をCSSで入れ込むことが稀にあります。その方法こそ「content: "～"」です。これはおなじみなので特に説明の必要もないかと思います。 しかし、このcontent内の文章に改行や空白を入れたいときは少しトリッキ...
JavaScript来年（2025年）まであと何日？何時間？何分？何秒？【カウントダウンタイマーJavascript】
今年（2024年）もカウントダウンタイマーをつくりましたのでご査収ください。※2023/10/27 追記：すみません、JSにエラーがあり表示されない状態でした。修正しておきました。 2025年01月01日00:00まであと、 let now...
JavaScriptPinterest風のグリッドレイアウトをCSSのみで実装？乗り越えられない壁、代替策はないのか？Pinterstレイアウトを考察
Webに携わっている方は必ず一度は「Pintarestっぽく出来ませんか？」的なことを言われると思います。僕個人としてはPintarestのようなグリッドレイアウトはあまり好みではありません、なんせ「めんどくさい！」から。 Pintares...
FlutterYoutube Data API APIキー発行手順と有料か無料かを解説・セキュリティ対策も【2022年9月】
今回はYoutubeのAPIの中でも王道となり得る、Youtube Data APIを使う下準備をしていきましょう。YoutubeにはYoutube iFrame Player APIというAPIもありますが、こちらのData APIに限っ...
JavaScriptYoutube iFrame Player APIの使い方。無料で使えるの？メリットは？自動再生の方法は？【2022, 2023年JavaScript】
WebページにYoutubeを埋め込む場合に、埋め込み用iframeのソースを張り付けるのが一般的です。特段にAPIを使う必要が無い場合にはYoutubeページにある埋め込み用iframeを張り付ければOKですね。例えばこんな感じのソースに...