JavaScriptの記事

【Vue.js】propsの値を検知してコンポーネントを再レンダリングさせる方法

概要 Vue.jsでは、親コンポーネントから子コンポーネントへデータを渡すためにpropsを使用します。しかし、親コンポーネントでpropsの値が変更されたとき、その変更が子コンポーネントにすぐに反映されない場合がありま […]

【JavaScript】value値からJSONにデータが存在するか判定する

jsonデータにてvalue値が存在するか判定したい場合の方法を残しておきます。 value値からJSONにデータが存在するか判定する Object.entries(obj)関数によって、[key, value]のペアが […]

Vue I18n で翻訳がある時とない時で処理を変える

vue-i18nを使って多言化に対応する際にen.jsonなど言語毎の辞書ファイルを用意することになるかと思いますが中には翻訳漏れで対応できていない箇所等もあるかと思います。それを画面上で文言等を出力して確認できたらいい […]

JavaScriptで1000を1Kに1000000を1Mに省略する方法

よくYouTubeの再生回数などで100万は1M(ミリオン)に1000は1K(キロ)に省略して表示されることがあります今回は1000を1Kに変換する方法を紹介します。 1000を1Kに1000000を1Mに変換する まず […]

【Vue2系】computedで引数を渡す

Vue2系では通常、computedに引数を渡すことができません。 それを忘れて上記のように引数を書いてしまうと以下のようなエラーが出ます。 computedで引数を渡す方法 computedの処理の中に関数を書くことと […]

React-toastifyを使用してアラート機能を簡単に実装する

React-toastifyをインストールすると、アラート機能を簡単に実装することができます。 React-toastifyをインストール 使い方 基本的にはドキュメントに書かれている通りに実装すれば問題なく動きます。ス […]

【React】react-swipeableライブラリを使用してスワイプイベントを取得する

スマホ向けのWebアプリで、右にスワイプしたか左にスワイプしたかなど指で操作する際のイベントを取得したい時に使用したライブラリを紹介します。 最初スマホのタッチジェスチャーを実装する際に検索で引っかかったライブラリは「H […]

【Laravel9系】 Laravel Sail Viteを使ってVue.js3系の開発環境を用意する。

Laravel9系でViteが公式プラグインとして使えるようになったということでVue.js3系の環境をサクッと構築したいと思います。 環境 Laravel 9x Vue.js 3x Vite 3x Laravelをイン […]

ReactのHooksで動的にwindowサイズを取得する

管理画面などでウィンドウサイズによってサイドバーの開閉を調節したいときにReactのHooksで動的にwindowサイズを取得を取得できたら便利です。今回はReactのHooksで動的に画面サイズを取得し処理を実行する方 […]

JavaScriptでInvalid Dateを判定する

フロントエンドの開発で日付操作にdate-fnsを使用しています。今回日付を年・月・日と別々のselectボックスから選択させて検索をするという仕様でUIを作成していたのですが、この状態ですと存在しない日付を選択できてし […]