javascript

【Salesforce】【LWC】LWC では keydown イベントを取得できない

厳密には、LWC では keydown イベントは制御できないようです。 検索すると対応方法の事例は見つかりますが、私が確認する限り再現できませんでした。 developer.mozilla.org 事例 例えば、テキストエリアでEnter キーを押した時に発火するイベントを作ると…

【javascript】非同期通信を同期処理する

フロントエンドで初期データを外部APIから取得したい場合があります。 データ通信はajax を用いるのは一般的です。 ajaxでデータを取得して画面内の要素を更新したり、スクリプト内の変数に変更を加えたりという事をします。 この通信をあらかじめ済ませてお…

【Vue】Vueインスタンスに初期値を渡す

個々のコンポーネントにバックエンドから初期値を追加する方法は以前記載しました。 blog.websandbag.com 個々のコンポーネントの場合は、props に直接値を設定すれば解決できます。 しかし、コンポーネントの種類に関わらず共通で使いたい値の場合がありま…

【javascript】関数で可変長引数を扱う

処理の中で関数の引数の総数が定まらない場合があります。 これを可変長引数と言います。 ja.wikipedia.org 可変長引数を扱いたい場合は、追加したい要素を配列にしてしまう方法もあります。 // 指定された数字の合計値を返す function sum(args) { return a…

【javascript】動的なパラメータを含むURLを生成する

外部データをやり取りする際、データの取得はGETメソッドで行う場面が多いと思います。 GETメソッドの場合、特定の文字や情報を検索したり、データ形式を指定したりするためにパラメータを用いる事があります。 パラメータが少なければ、一つ一つ結合しても…

【Vue Router】ルートのプロパティの型を変換して取得する

プレーンなVueのプロジェクトでルーティングを行いたい場合、Vue Routerモジュールを使用します。 router.vuejs.org このモジュールでは、静的なURLはもちろん、動的なURLを扱う事ができます。 動的なURLというのは、例えば次のような使い方です。 ユーザー…

【Vue】エラー解決備忘録:TypeError: loaderContext.emitError is not a function

webpackで環境を作っている時に発生したエラーについて解決策を記録しておきます。 現象 Vueの設定をしてビルドした所、下記のエラーが発生しました。 ビルド自体は正常に完了しました。 TypeError: loaderContext.emitError is not a function ソース ハブ…

【webpack】ビルドするとimport宣言したcssファイルが0.jsになってしまう件の解決

webpackの構成を作成していた時の備忘録です。 今回は、stylusからcssにコンパイルする過程で発生する現象ですが、cssでもsass(scss)でも発生しうる事象です。 また、mini-css-extract-pluginでcssファイルを外部出力する場合でも同じ現象が起こります。 web…

【javascript】aタグの無効化

フロントエンドで遷移するイベントを実装する時があります。 最近では、イベントを発火させるボタン要素をdivタグで用意するドキュメントを見ます。 もちろん、全てdivでも何ら問題はありません。 しかし、何かしら遷移が発生する場合は、(好みの問題ではあ…

【Vue】エラー解決備忘録:The "data" option should be a function that returns a per-instance value in component definitions.

Vueでアプリケーションを実装していた時に発生したエラーについて記載します。 状況 ボタンが2個あるページを作成しました。 ボタンが1個だったときはオブジェクトでも動いていたのですが、2個にしたところ次のエラーが発生しました。 The "data" option …

【js】キーボードの入力を特定のテキストボックスに集約させる

Webアプリケーションを作っていて、テキストエリアを介さずに入力を送信したい場合があります。 例えば、バーコードリーダーのような外部デバイスの入力を受け付けてそのまま送信をしたい時などです。 今回は、テキスト入力を特定のテキストボックスに入力さ…

【DataTables】独自の検索機能を追加する

Webサービスを構築する際に、通常のサービスとは別に管理画面が必要になる場合があります。 管理画面は利用者が限られていますので、派手でインタラクティブである必要はありません。 しかし、使いやすく見やすい管理画面は、本サービスとは違うベクトルで作…

【javascript】押されたボタンから先祖の要素を取得する

プレーンなjavascriptで、押されたボタンを基準に同じグループ内の特定の要素を取得する方法。 とても初歩的ですが、久しぶりにプレーンなjsを触ると忘れているので備忘録として。 See the Pen parent selecter by shibainu (@websandbag) on CodePen.

【javascript】連想配列から特定のキーに紐づく1配列のみ抽出する

連想配列から特定のキーが指定した値に合致した配列のみ取得する方法です。 また、重複しない要素(例えばID等)の場合、結果は0か1のはずです。 そのため、最初一件のみ変数に代入する方法についてまとめます。 元データ [ { "id": 1, "name": "name_1" }, …

【はてなブログ】長いコードを折りたためるようにする

技術ブログを書いていると、コードが長すぎてブラウザいっぱいにコードが表示される場合があります。 おそらく、この技術ブログにたどり着いた人はソースコードを読むために来ていただいているとは思いますが、 初見の圧迫感は利用者にとって苦痛なのかなと…

【pug】javascriptを直接書く方法

htmlテンプレートにpugを選んだ場合、素のscriptを書こうとすると迷います。 今回は、pugでjavascriptを書く方法について記載します。 また、本記事で記述するコードは、以前投稿したコードです。 blog.websandbag.com 期待される出力結果 下記のように記述…

【javascript】【php】原始的な方法でフロントエンドとバックエンドのデータ連携について考える

PHPとjavascriptを扱う案件の場合、フロントエンドとバックエンドの連携が必要になる事があります。 「バックエンドの結果によって表示を出し分ける」程度であれば大した問題ではありません。 <p>有効</p> <p>無効</p> しかし、フロントエンドで、バックエンドの値をに…

【Vue.js】テンプレート内で静的な画像を読み込む

Vueのコンポーネントを作成する時に、imgタグを使って画像を読み出したい時があります。 動的に画像を指定する前提の場合は、v-bingにパラメータを渡して画像名(画像ファイルのパス)を指定します。 この記事では、静的な画像の指定方法についてまとめます…

Hot Module Replacement is disabled.の対処方法

フロントエンドの開発にwebpackを使用する場合、一緒に開発用にwebサーバーも立てる場合があります。 サーバーの建て方も色々ありますが、webpackの公式のライブラリであるwebpack-dev-serverを使う機会が多いのではないでしょうか? GitHub - webpack/webpa…

©︎2017-2018 WebSandBag