文法

JavaScript

JavaScriptで出来ること【超初級】

さて、珍しく初学者・もしくはこれからJavasScriptを勉強しよう、JavaScriptに興味があるんだけど、実際どういうところで使われてるの？というユーザーさんに向けて、簡潔に要点をおさえてお伝えしようと思います。この記事がきっかけで...
2023.04.07
JavaScript
JavaScript

JavaScriptのオブジェクトのプロパティに変数を指定する方法と取得する方法

Javasciriptのオブジェクトのキー値に変数を指定したい場合が多々あります。キー値に同じ文字列を毎回指定するとメンテナンスが煩雑になったり、手間が増え非効率です。 そこでオブジェクトのキー値を一括で変数にまとめてしまう方法を解説します...
2023.04.02 2023.04.03
JavaScript
JavaScript

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

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

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

JavaScriptでDOM（Document Object Model）要素を指定する方法にはいくつかありますが、代表的な方法を以下に紹介します。 （１）getElementById()メソッドを使用する方法 document.getEl...
2023.03.30 2023.04.14
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で最も近い子孫要素を取得・操作・判別する方法（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

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
JavaScript

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

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

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

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

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

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

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

やむを得ずHTML内の文章をCSSで入れ込むことが稀にあります。その方法こそ「content: "～"」です。これはおなじみなので特に説明の必要もないかと思います。 しかし、このcontent内の文章に改行や空白を入れたいときは少しトリッキ...
2023.02.06 2023.02.14
react-native業務効率化
JavaScript

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

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