当社はIT技術のオンライン教育を得意としたセミナー専門会社です。 | 一戸英男

ITエンジニアの技術力UPをお約束します。

マルチFormページでの個別Form毎のボタンをjavascriptでイベントスキャンし対応する。

マルチFormページでの個別Form毎のボタンをjavascriptでイベントスキャンし対応する。


講習でアプリ開発を行わせている傍ら、受講生から1ページに複数のFormエントリーが存在していた場合どうやって個別にjavascriptで制御したらよいか質問された。 普段あまりjavascriptをコーディングする機会がないため、即答できず考え方の説明でその場は終わったが 改めて時間を作って実験してみた。 今回はjQueryを使わない方法と使う方両方でやってみました。 テストなのでactionのスクリプトは指定なしとしました。

サンプルHTMLページ

javascriptのコード

e.preventDefault();を入れないと直ぐにエラーメッセージの表示が消えてなくなるため使用します。この機能はaction=””でやると自分自身のページに 戻るためリロードをかけた状態になりエラーメッセージが直ぐに消えてなくなるための対処です。つまりエラーが生じたときはsubmitさせないための処置。

jQueryを使った場合のHTMLコード

jQueryを使った場合のjavascriptコード

タグ: , , , ,

備忘録:Javascript実行メモリが足りなくなる問題


node.jsとか使っている環境でたまに聞く問題。メモリーリークが発生して動作しなくなるというもの。たまたま、困ったお客さんから依頼され相談されたので調べてみることに。今回はVueのアプリケーションでした。普段Vueとか使うこと無いのであまり詳しくないんだがとりあえず対処できるか試行錯誤してみました。原因はvueの問題ではなく内部で呼び出しているnodeのissueです。

console.logでメモリ割付状況を表示しサーバ側のメモリー状況を調べると、確かに供給可能なのに割当をしてくれない状況が確認できた。npxコマンドで割当を変更する処理を行い対処ができた。どうやら、この問題はOSの環境とnode関連のバージョンがちょっと古いと問題がでるみたいだ。

対処方法

基本的にクライアント端末OSはメモリ制限はないはず。メモリに余力がある範囲で超過することなく動作するように設計しているはずです。しかしブラウザにおいては200MBの制限(ブラウザウィンドウ単位)があるので制限は結局の所ある。この設定を変更するための設定をサーバ側の方では指定することで拡張が行なえます。下記は4096MBに拡張する設定ですが、よほどウィンドウ(タブ)開いているかJavascriptバリバリのコンテンツを沢山見なければ下記の値の1/4も設定すれば十分な気がします。なお、修正はweb appのドキュメントルートにあるpackage.jsonを編集します。環境変数でNODEのオプション設定する方法もありますがプロジェクト単位で割り付けるならpackage.jsonを編集するのが良いと思います。

タグ: , , , ,