文法

JavaScript

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

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

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

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

【CSS 疑似要素】before, afterのcontentプロパティ内で文章を改行する方法

やむを得ずHTML内の文章をCSSで入れ込むことが稀にあります。その方法こそ「content: "~"」です。これはおなじみなので特に説明の必要もないかと思います。 しかし、このcontent内の文章に改行や空白を入れたいときは少し...
2023.02.14
JavaScript

JavaScriptで特定の処理の速度計測のやり方3選~処理時間を計測する方法

JavaScriptの処理がどれくらいかかっているのか調査する方法をご紹介します。スクリプトが重い気がする、処理速度を改善したい、などなどJavaScriptの速さを計ってみたい場合などに有用です。 特定のメソッド間で何ミリ秒かかっ...
2022.09.22
JavaScript

【コピペOK】JavaScriptの汎用メソッド「formatDate」全コード掲載!日付フォーマットなんて簡単です

いわゆる「formatDate」はJavaScriptのDateオブジェクトを指定したいフォーマットに変換する際に非常に便利な汎用コードです。JavaScript標準の関数ではなく、自前で宣言し実行する流れとなります。 たとえばYY...
JavaScript

【JavaScript】アロー関数とは!?たった6つのポイントをおさえて、分かりやすく解説!

よく他人のソースコードを見ている時にギョっとなる関数の書き方がありませんか??それ、大概はアロー関数式でかかれたJavaScriptの関数です。 アロー関数がどういうものかを理解できていればキョっとなる必要はほぼ無くなります。普通の...
2022.07.21
JavaScript

配列内の検索・判定・判別をするJavaScriptのメソッド(find, some, every, includes)を解説~初心者~中級者向け

Arrayオブジェクトのメソッド判定・判別の用途isArray()配列オブジェクトであるか?find()条件を満たす値を取得するsome()条件を満たす要素がひとつでもあるか?every()全要素が条件を満たすか?includes()任意...
2022.07.19
JavaScript

【疑似クラス】nth-childとnth-of-typeの違いを徹底検証!

フロントエンドエンジニアやコーダーが結構おざなりにしているnth-childとnth-of-typeの違いを解説します。知人の中にも「必要になったら毎回ググってる」人が多く、あまりきちんと理解しきれてないことがよくあります。 今回の...
SEO

サーチコンソールで複数のキーワード(クエリ)でフィルターをかける方法。「または(or)」の利用法。

Google Search Console、いわゆる「サチコ」でキーワードを複数でフィルタリングするにはひと手間かける必要があります。 単純に「インスタ」という単語を含むだけで良ければ、「次を含むクエリ」ボタンを使ってサクサクできま...
JavaScript

JavaScriptの予約語一覧

初心者をターゲットとしてこの記事を下記ますが、JavaScriptに慣れてきた、もしくはJavaScriptは空気のような存在だ、というかたも今一度確認しておいた方が良いかもしれません。 予約語とは定数や変数や関数・クラスの名前に利...
JavaScript

【2022, 2023年】JavaScript入門ガイド~初心者のためのポイント解説

JavaScriptに興味を持ってこのページをご覧になっている方は、HTMLは理解できたけどJavaScriptが分からない、もしくはデザイナーだけどプログラミングを始めてみたい、といったような初心者さんだと思います。 はじめに言っ...
2023.04.03
タイトルとURLをコピーしました