ar-note

【JavaScript】桜舞うプログラム

2025年3月24日2025年3月24日

HTML・CSS・JavaScript を用いた「桜が舞うアニメーション」の仕組みの解説。SVG を利用して花びらを生成し、CSS アニメーションで落下と揺れを表現。JavaScript により、ランダムなサイズ・位置・速度を設定した継続的に花びらの生成。メモリ負荷を抑えるため、アニメーション終了後に要素を削除する工夫。動的なエフェクトの作り方。

【JavaScript】VoskJsで音声ファイルを音声認識する。

2025年3月23日2025年4月7日

音声認識の技術は、スマートスピーカーや音声入力のアプリケーション、さらには自動字幕生成などさまざまな分野で活躍しています。そんな中、Vosk.js は Web ブラウザ上で動作する軽量な音声認識ライブ...

【JavaScript】ページ間でデータの保持・受け渡し

2025年3月21日2025年3月29日

JavaScriptでページ間のデータを保持・受け渡しする７つの方法を紹介します。
① sessionStorage、② localStorage、③ URLパラメータ、④ window.name、⑤ Cookie、⑥ IndexedDB、⑦ Service Worker

【JavaScript】three.jsで360°画像＋GLTF＋影を表示する

2025年3月20日2025年4月1日

本記事では、three.jsを使用して360度背景画像とGLTFモデルを表示し、さらに影をリアルに描画する方法を解説します。OrbitControlsによるカメラ操作、DirectionalLightによる影の設定、GLTFモデルの読み込みと影の適用など、基本的なテクニックを紹介。マウスホイールでのズームやウィンドウリサイズ対応も実装しています。初心者から中級者向けに、実践的なサンプルコード付きで詳しく解説！

【JavaScript】three.jsで360°画像を表示する

2025年3月19日2025年3月19日

three.jsを使用して360°画像をブラウザ上で表示する方法を解説します。モジュール形式での実装方法として、importmapを使ってCDNからthree.jsとOrbitControlsを読み込み、シーンを設定して360°画像を球体にマッピングします。さらに、OrbitControlsで画像をドラッグして回転させる機能を追加し、インタラクティブな表示が可能です。これにより、ユーザーはブラウザで簡単に360°画像を楽しむことができます。

【JavaScript】要素へのイベントリスナーの追加（addEventListener）

2025年3月18日2025年3月18日

JavaScriptにおけるイベント処理の基礎から応用まで、addEventListenerの使い方を豊富な実例とともに解説しています。クリック、マウス、キーボード、フォーム、タッチなど、さまざまなユーザー操作に対応する方法を紹介。さらに、イベント委譲や伝播制御、カスタムイベント作成など高度なテクニックも説明し、保守性と再利用性に優れたWebアプリケーションの実現を目指します。

【JavaScript】配列（追加・削除・ループ他）ガイド

2025年3月13日2025年3月13日

JavaScriptの配列は、複数の値を効率的に管理・操作できる基本かつ強力なデータ構造です。本記事では、リテラル記法やArrayコンストラクタでの作成、push/pop、spliceなどの基本操作に加え、forループ、for…of、forEach、map、filter、reduceなどの反復処理、多次元配列やToDoリストの実例を通して、初心者にも分かりやすく応用テクニックを解説しています。

【JavaScript】Webブラウザで動くAR動画の作り方・使い方

2025年3月13日2025年4月11日

はじめに AR（Augmented Reality、拡張現実）技術はエンターテインメント、教育、マーケティング、産業用途など、さまざまな分野で注目を集めています。スマートフォンやタブレット、PCなどの...

【JavaScript】の【mapメソッド】を徹底解説

2025年3月12日2025年3月12日

JavaScriptのmap()メソッドは、配列の各要素に対して関数を適用し、新しい配列を作成する強力なメソッドです。本記事ではmap()の基本から応用まで、豊富なサンプルコードを交えて解説します。forEach()やfilter()などの類似メソッドとの違い、パフォーマンスの考慮点、ネストされた配列の処理方法など、初心者から上級者まで役立つ内容を網羅。map()を活用して効率的なコードを書く方法。

【CORSエラー】JavaScriptにおける対策

2025年3月9日2025年3月24日

JavaScriptでAPI通信を行う際、ブラウザはセキュリティ上の理由から異なるオリジン間のデータ共有を制限し、CORSエラーが発生することがあります。CORS（Cross-Origin Resource Sharing）は、サーバー側が明示的に許可した場合のみアクセスを認める仕組みです。この記事では、基本概念、エラー原因、プリフライトリクエストの流れ、そして対策方法を具体例と共に詳しく解説しています。