【JavaScript】桜舞うプログラム
HTML・CSS・JavaScript を用いた「桜が舞うアニメーション」の仕組みの解説。SVG を利用して花びらを生成し、CSS アニメーションで落下と揺れを表現。JavaScript により、ランダムなサイズ・位置・速度を設定した継続的に花びらの生成。メモリ負荷を抑えるため、アニメーション終了後に要素を削除する工夫。動的なエフェクトの作り方。
【JavaScript】VoskJsで音声ファイルを音声認識する。
音声認識の技術は、スマートスピーカーや音声入力のアプリケーション、さらには自動字幕生成などさまざまな分野で活躍しています。そんな中、Vosk.js は Web ブラウザ上で動作する軽量な音声認識ライブラリとして注目されて […]
【JavaScript】ページ間でデータの保持・受け渡し
JavaScriptでページ間のデータを保持・受け渡しする７つの方法を紹介します。
① sessionStorage、② localStorage、③ URLパラメータ、④ window.name、⑤ Cookie、⑥ IndexedDB、⑦ Service Worker
【JavaScript】three.jsで360°画像＋GLTF＋影を表示する
本記事では、three.jsを使用して360度背景画像とGLTFモデルを表示し、さらに影をリアルに描画する方法を解説します。OrbitControlsによるカメラ操作、DirectionalLightによる影の設定、GLTFモデルの読み込みと影の適用など、基本的なテクニックを紹介。マウスホイールでのズームやウィンドウリサイズ対応も実装しています。初心者から中級者向けに、実践的なサンプルコード付きで詳しく解説！
【JavaScript】three.jsで360°画像を表示する
three.jsを使用して360°画像をブラウザ上で表示する方法を解説します。モジュール形式での実装方法として、importmapを使ってCDNからthree.jsとOrbitControlsを読み込み、シーンを設定して360°画像を球体にマッピングします。さらに、OrbitControlsで画像をドラッグして回転させる機能を追加し、インタラクティブな表示が可能です。これにより、ユーザーはブラウザで簡単に360°画像を楽しむことができます。
【JavaScript】要素へのイベントリスナーの追加（addEventListener）
JavaScriptにおけるイベント処理の基礎から応用まで、addEventListenerの使い方を豊富な実例とともに解説しています。クリック、マウス、キーボード、フォーム、タッチなど、さまざまなユーザー操作に対応する方法を紹介。さらに、イベント委譲や伝播制御、カスタムイベント作成など高度なテクニックも説明し、保守性と再利用性に優れたWebアプリケーションの実現を目指します。
【JavaScript】配列（追加・削除・ループ他）ガイド
JavaScriptの配列は、複数の値を効率的に管理・操作できる基本かつ強力なデータ構造です。本記事では、リテラル記法やArrayコンストラクタでの作成、push/pop、spliceなどの基本操作に加え、forループ、for…of、forEach、map、filter、reduceなどの反復処理、多次元配列やToDoリストの実例を通して、初心者にも分かりやすく応用テクニックを解説しています。
【JavaScript】Webブラウザで動くAR動画の作り方・使い方
はじめに AR（Augmented Reality、拡張現実）技術はエンターテインメント、教育、マーケティング、産業用途など、さまざまな分野で注目を集めています。スマートフォンやタブレット、PCなどの普及に伴い、Webブ […]
【JavaScript】の【mapメソッド】を徹底解説
JavaScriptのmap()メソッドは、配列の各要素に対して関数を適用し、新しい配列を作成する強力なメソッドです。本記事ではmap()の基本から応用まで、豊富なサンプルコードを交えて解説します。forEach()やfilter()などの類似メソッドとの違い、パフォーマンスの考慮点、ネストされた配列の処理方法など、初心者から上級者まで役立つ内容を網羅。map()を活用して効率的なコードを書く方法。
【CORSエラー】JavaScriptにおける対策
JavaScriptでAPI通信を行う際、ブラウザはセキュリティ上の理由から異なるオリジン間のデータ共有を制限し、CORSエラーが発生することがあります。CORS（Cross-Origin Resource Sharing）は、サーバー側が明示的に許可した場合のみアクセスを認める仕組みです。この記事では、基本概念、エラー原因、プリフライトリクエストの流れ、そして対策方法を具体例と共に詳しく解説しています。