https://watashi.xyz わたしの情報をわたします Mon, 27 Apr 2026 13:12:22 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://watashi.xyz/wp-content/uploads/2024/03/cropped-Watashi-32x32.png https://watashi.xyz 32 32 https://watashi.xyz/phaser/ Sun, 26 Apr 2026 10:14:29 +0000 https://watashi.xyz/?p=7074 Phaser 4の使い方を知りたい方向けにPhaser 3との違いを解説。Viteを使った最小サンプルでの動かし方から、SceneやPhysicsなどの基本概念、入力処理の実装まで網羅しています。さらに実践的な設計や開発効率化、Phaser 3からの移行ポイントやよくあるエラー対策も紹介します。

The post Phaser 4の使い方入門｜Vite + TypeScript環境を構築してゲームを動かす方法 first appeared on WATASHI.xyz.]]> https://watashi.xyz/maplibre-usage/ Mon, 13 Apr 2026 16:41:59 +0000 https://watashi.xyz/?p=7007 MapLibre GL JSの使いかたを、徹底解説！商用利用が無料なライセンスの魅力や、Mapbox・Leafletとの違いを分かりやすく整理。CDNやnpmでの導入手順はもちろん、コピペで即動く最小構成のサンプルコードも掲載。最新の地図ライブラリを活用して、コストを抑えた高品質なWeb地図アプリを作り始めましょう！

The post MapLibreの使い方入門｜コピペで動くサンプルコードで学ぶ地図表示とleafletやMapboxとの違いとは first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-favorite-button/ Mon, 09 Mar 2026 15:00:00 +0000 https://watashi.xyz/?p=6866 JavaScriptでお気に入り機能を作る方法を解説します。楽天やAmazonのようなお気に入り機能の仕組みから、HTMLのbuttonタグとdata-id属性を使ったお気に入りボタンの作り方、LocalStorageを使った保存・復元方法まで丁寧に紹介。コピペで試せる実装手順を知りたい方におすすめです。

The post JavaScriptでお気に入り機能を自作！LocalStorageでリロードしても消えない実装法【コピペOK】 first appeared on WATASHI.xyz.]]> https://watashi.xyz/typescript-vs-javascript/ Thu, 12 Feb 2026 14:02:37 +0000 https://watashi.xyz/?p=6752 TypeScriptとJavaScript、どっちから勉強すべきか迷う初心者さんへ。型の有無・コンパイル・VSCode補完の違いをコード例で比較し、メリット（型安全・バグ削減）とデメリット（学習コスト）を解説。React/Next.js志望者向け移行手順と挫折回避法もご紹介いたします。（152文字）

The post 「TypeScriptとJavaScriptどっちから？」迷ったら読む記事｜型・コンパイル・React実務まで徹底比較 first appeared on WATASHI.xyz.]]> https://watashi.xyz/popup-modal-difference/ Mon, 09 Feb 2026 15:37:41 +0000 https://watashi.xyz/?p=6720 ポップアップとモーダルの違いが曖昧で、仕様書や実装で迷っていませんか。本記事では定義の違いから、別ウィンドウと画面上に重なるUIの判別、alertやtoastとの関係、HTML/CSS/JavaScriptでの実装注意点、UXを踏まえた使い分け判断まで分かりやすく解説します。現場ですぐ役立ちます。初心者向け。

The post ポップアップとモーダルの違いを定義・実装・判断フローまで完全網羅｜Web制作の混乱を今すぐ解消 first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-choice-quiz/ Sun, 08 Feb 2026 13:44:30 +0000 https://watashi.xyz/?p=6692 JavaScriptで3択クイズを自作したい初心者必見！jQueryを使わない素のJSでスマホ対応クイズを作る方法を解説します。HTMLのUI設計、配列でのデータ管理、正解判定まで丁寧に紹介。診断機能への応用やWordPressへの埋め込みも網羅し、ポートフォリオ制作にも最適。この記事だけで一通りの機能を実装できます。

The post JavaScript 3択クイズをゼロから作る！初心者向け完全ガイド（HTML/CSS/JSのみ） first appeared on WATASHI.xyz.]]> https://watashi.xyz/typescript-array-merge/ Wed, 04 Feb 2026 13:43:23 +0000 https://watashi.xyz/?p=6655 TypeScriptで配列を結合する方法を、concatとスプレッド構文の違いから解説。string配列や異なる型の配列結合、Union型の考え方、readonly配列やnull・undefined混入時の安全な対処法まで網羅。さらに、オブジェクト配列の結合や重複排除、joinを使った文字列結合など、具体例も紹介。

The post TypeScriptで配列を結合する完全ガイド｜concatとスプレッド構文の違い・型安全な正解パターンを徹底解 first appeared on WATASHI.xyz.]]> https://watashi.xyz/view-transitions-api/ Thu, 18 Sep 2025 15:00:00 +0000 https://watashi.xyz/?p=6480 View Transitions APIの使い方を、基本概念から最小実装、MPAでのページ遷移アニメーション実装まで解説します。コピペ可能なサンプルコード、対応ブラウザやCan I useでの確認方法、Core Web Vitals・SEOへの影響、実務で使ってよいケース／注意すべきポイントまで紹介します。

The post View Transitions APIの使い方完全ガイド｜SPA・MPA実装からブラウザ対応・SEOへの影響まで first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-diagnostic-test/ Tue, 09 Sep 2025 15:00:00 +0000 https://watashi.xyz/?p=6120 JavaScriptで診断テストを自作したい方必見！この記事では、HTML＋JavaScriptで作る基本構造から、得点式・条件分岐型ロジックの実装方法まで解説します。性格診断や適職診断などに応用できるコード例や、初心者でもコピペで動かせるテンプレート付きで、すぐに魅力的な診断コンテンツを公開できます。

The post JavaScript診断テストの作り方：コピペで複雑な性格診断・得点ロジックを実装！応用まで完全解説 first appeared on WATASHI.xyz.]]> https://watashi.xyz/postcss-configjs-example/ Mon, 08 Sep 2025 15:00:00 +0000 https://watashi.xyz/?p=6079 PostCSSの設定ファイルであるpostcss.config.jsの正しい書き方や基本構造、設置場所、環境別の具体的な設定例を解説します。Autoprefixerやcssnano、Tailwind CSSなど主要プラグインの設定方法、CommonJSとES Modulesの使い分け、設定反映トラブルの解決策まで

The post postcss.config.jsの正しい書き方と実用サンプル｜プラグイン活用術｜環境別設定まで first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-module/ Sun, 31 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=406 JavaScriptのモジュール化について基礎から完全解説。import/export構文の使い方、従来のスクリプトとの違い、モジュール化で得られる保守性・再利用性・可読性の向上について詳しく説明。既存コードのリファクタリング手順、フォルダ構成の設計方法、よくあるimportエラーの原因と解決策まで紹介。

The post JavaScriptをモジュール化して保守性UP！初心者でもわかるimport/exportの使い方と注意点 first appeared on WATASHI.xyz.]]> https://watashi.xyz/line-move-animation/ Thu, 28 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=5658 SVGやCSS、JavaScriptを使って「線が動く」アニメーションを表現する方法を詳しく解説！描線アニメーションの基本から、スクロールに連動して線が伸びる演出、手書き風の動き、フェードイン効果との組み合わせまで紹介。Web制作でローディング演出やトランジションを取り入れた実装テクニックと最適化ノウハウがこちら

The post 線が動くアニメーションの作り方｜描くように伸びる手書き風・スクロール連動演出まで解説 first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-event-listener/ Wed, 20 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=5368 JavaScriptのイベントリスナーを理解したい方へ。addEventListenerの基本、第3引数オプションの解説から、マウス・キーボード・フォーム・タッチ・DOMイベントなどの主要イベント一覧までを網羅。さらにremoveEventListenerによる削除方法やデリゲーションの仕組みも詳しく解説します。

The post 【完全保存版】JavaScriptイベントリスナー一覧｜addEventListenerの使い方・主要イベント first appeared on WATASHI.xyz.]]> https://watashi.xyz/dialog-modal-window/ Sat, 16 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=1108 HTMLのdialogタグを使えば、モーダルや確認ダイアログをシンプルに実装できます。本記事では基本的な使い方から、show()やshowModal()の違い、閉じるボタンやESCキー対応、背景ぼかし・z-index調整などのデザイン方法まで丁寧に解説。初心者から実務で使いたい方まで幅広く役立つ内容です。

The post HTMLのdialogタグでモーダルダイアログを実装！基本・構造・閉じ方までわかる完全ガイド first appeared on WATASHI.xyz.]]> https://watashi.xyz/smooth-scroll-pagetop/ Thu, 14 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=722 本記事ではscrollIntoViewの基本的な書き方や便利なオプション、スムーズスクロールの実装方法を解説します。さらに固定ヘッダーで要素が隠れる問題やスクロール位置ずれの対処法、よくある不具合のチェックポイントも紹介。ページトップへ戻るボタンやフォームエラーへの自動スクロールなど活用例まで網羅しています。

The post 【保存版】scrollIntoViewの使い方｜基本構文からページトップボタン・フォームエラー対応まで first appeared on WATASHI.xyz.]]> https://watashi.xyz/fetch-cors-error/ Tue, 12 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=2645 fetchで困るCORSエラーを解説！「なぜ？」の仕組み、ブラウザ開発者ツールでのデバッグ、サーバー/クライアントでの具体的解決策（Access-Control-Allow-Origin設定など）、よくある失敗例、ローカル環境対策まで網羅。この記事でCORSエラーを理解し、自信を持って対処できるようになりましょう。

The post fetchでCORSエラーが出る原因と解決法まとめ｜初心者でもわかる仕組みと対処法 first appeared on WATASHI.xyz.]]> https://watashi.xyz/html-darkmode-toggle/ Mon, 11 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=5088 HTMLでダークモード切り替えを実装する方法を丁寧に解説。prefers-color-schemeでの自動連動、CSS＋JavaScriptでの切り替えボタンやlocalStorageでの保存方法を紹介。配色設計やアクセシビリティの注意点、SEOやユーザー満足度への影響もあわせて理解できます。

The post HTMLで簡単にダークモード切り替え ｜prefers-color-scheme対応＆保存機能付き first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-uncheck-radio-button/ Sat, 09 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=5037 ラジオボタンをJavaScriptで未選択状態に戻す方法を分かりやすく解説します。なぜHTML仕様では解除できないのかという基礎から、実際に使えるコード例、jQueryでの簡潔な書き方、クリックでオンオフ切り替えや特定のボタンだけ解除する方法まで幅広く紹介。実務のフォーム制作にすぐ役立つ内容になっています。

The post 【JavaScript】ラジオボタンを選択解除する方法まとめ｜クリック解除・リセット・React/Vue対応まで first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-map-function/ Wed, 23 Jul 2025 15:00:00 +0000 https://watashi.xyz/?p=4607 JavaScriptのmapメソッドとMapオブジェクトの使い方を、基本構文から解説。配列加工やネスト構造の処理、forEach・for文との違い、アロー関数での省略記法、filter/reduceとの連携方法も網羅。new Map()の基礎操作や通常のオブジェクトとの違いまで、初心者から中級者まで役立つ内容です。

The post 【map関数の使い方】配列の基本からMapオブジェクトまで徹底解説！forEachとの違いも first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-zero-padding/ Sun, 20 Jul 2025 15:00:00 +0000 https://watashi.xyz/?p=4562 JavaScriptで数値や日付を0埋めする方法を解説。padStart()の使い方から、slice()などの代替手法、日付や小数のフォーマット実装例まで網羅。ReactやVue、TypeScriptでの活用法、リアルタイム入力やバリデーションとの連携方法も紹介。ゼロ埋め処理の「なぜ」と「どうやって」がわかります。

The post 【保存版】JavaScriptで0埋めする方法まとめ｜padStart・slice・実用コードまで完全網羅！ first appeared on WATASHI.xyz.]]>