文法

JavaScript

JavaScriptにおける「?(クエスチョン/はてな)」の意味と使い方

以前、『JavaScriptにおける「$(ドルマーク)」の意味と使い方』で、ドルマークの利用シーンについてまとめましたが、本ページでは「?」はてなマーク(クエスチョンマーク)についてJavaScript内でどのように使われるのかシーン別でま...
JavaScript

ブラウザの更新ボタンクリックを検知する方法【JavaScript】

ブラウザの更新ボタンがクリックされた時には、通常はページのリロードが行われますが、その際に特定の処理を行いたい場合があります。例えば、変更が保存されていない場合に確認メッセージを表示したり、特定のデータをサーバーに送信したり等々。 更新ボタ...
JavaScript

DOM(要素)の変更や更新を検知するベストな方法〜MutationObserver APIの使い方【JavaScriptガイド】

最近、仕事でDOMが変更されたときにコードを発火したい場面が多く、クリック時やajaxで内容の更新などのタイミングでその都度似たようなメソッドを仕込むのが面倒になることがありました。特に大量のiframeを扱う必要があったので、1ヶ所1ヶ所...
JavaScript

html2canvasをスマートフォン(iPhone iOS Safari, Android Chromeのレスポンシブページ)に対応させる方法【JavaScript】

先日、『【PNG画像出力&エクセル出力対応】チーム分けWebツール・重複なしで均等に【グループ分けや組み分けを行うランダム生成オススメWebアプリ】』と『【簡易画像キャプチャ機能付き】テキストを比較して差分を表示するdiffツール【Java...
業務効率化

素敵な男性や女性をサイトにお招き出来るようになりました。本当にありがとうございました ~画像生成AIの使用方法~

今回はとある女性が当サイトへ訪問してくださいました。まだ未成年ぽいのに大人なような……なんか不思議な女性です。 今回は画像生成AIのお話。 少し前から盛大に流行りだした画像生成AIですが、思い立ってやってみることにしました。先ほど登場した読...
JavaScript

画面に要素が入ったかを監視したい~Intersection Observer APIの使い方【JavaScript】

以前、IEが消滅してフロントエンドエンジニア的にメリットを強く感じる旨の記事を掲載しました。『IE(InternetExplorer)のサポート終了から生まれるメリット5選!~フロントエンドエンジニアの観点からJavaScriptを考える』...
業界NEWS

Google Chrome 118に追加されたCSSルール「@scope」の基礎知識と使い方

CSSの新機能として実装された「@scope」ルールについてまとめました。デザイナー、コーダー、フロントエンドエンジニアの方は要チェックです。※Google Chrome 118安定版リリース時の記事です @scopeとは? @scopeは...
JavaScript

CDN Vue.js 3系でVCalendarを動作させられないので諦めた話

const { createApp } = Vue createApp({ data() { return { selectedDate: null, } } }).mount('#app') 公式サイトが完全に正しいと鵜呑みにしないように...
Flutter

【Flutter】Dart言語におけるカスケード記法についてのまとめと解説。利用するとこんなメリットがあります

みなさんはDart言語をやっていて「..」といったように、ドットの連続がコード内に登場することはないでしょうか?JavaScriptばかりやっていたので少し目新しかったので、皆さんのお役に立てるかなと思い、この記事をまとめました。「..」(...
Flutter

【VSCodeで便利】StatelessWidgetをStatefullWidetに瞬時に変換&過不足コード追記をするショートカットキー【Flutter】

たとえば何でもいいんですが、 class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext conte...
JavaScript

JavaScript slice: 文字列や配列を切り取る方法と使い方を徹底解説!

本記事では、JavaScriptの slice()メソッドについて詳しく解説します。slice()メソッドは、文字列や配列を切り取るためのメソッドで、JavaScriptの開発において非常に便利な機能です。 slice()メソッドの使い方や...
Flutter

Dart入門:基本的な構文10個のサンプルから学ぶDartプログラミングの基礎【Flutter】

Flutterアプリケーションを構築するためにはDartという言語を習得する必要があります。ここではFlutterでモバイルアプリを作りたい、Webアプリを作りたいという方に向けてDartの基本的な知識と基本スキルを身に着けられるようにまと...
JavaScript

JavaScript for-inの使い方とサンプルスクリプト – 初心者向けチュートリアル

JavaScriptのfor...inループは、オブジェクトのプロパティを反復処理するための構文です。for...inループを使用すると、オブジェクト内のすべての列挙可能なプロパティを反復処理し、それぞれのプロパティのキーを取得できます。f...
JavaScript

JavaScriptのfor文(ループ処理)の使い方:初心者向けチュートリアル

JavaScriptにおけるfor文は、反復処理*を行うための制御構造*の一つです。for文を使用することで、指定した回数の処理を自動化することができます。 *反復処理とは、同じ処理を複数回繰り返し実行することを指します。JavaScrip...
JavaScript

プロトタイプ(prototype)の基礎、メリットやサンプルコードによる実装方法を出来るだけ分かりやすく解説【JavaScript】

JavaScriptのプロトタイプを楽器のギターに例えると、あるギターのプロトタイプは「そのギターが持つ特定の機能や特性を定義するような設計図」のようなものです。 具体的にどういうことかと言うと、例えばギターの形状、音色、使用材料などの情報...