skillup

技術ブログ

JavaScript

JavaScriptでのDom操作に関して

投稿日:2019年6月30日 更新日:

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。

ES6のクラス化

プログラムをモジュール化できるメリットは大きいです。特にスコープのコントロールができるのが嬉しい・・・

なおモジュール化するためにもアロー演算子は必須になります。これによりthisの範囲をコントロールして、同一クラス内のメソッドを使うことができます。

DOM要素取得のポイント

jQueryで要素を取るときDom要素に依存してしまうのが難点です。Vue.jsなどはそういった悩みを解決してくれるんですが、jQueryで頑張る時のポイントとしては

class自体でのスコープコントロール

これが大事になってくると思います。

うまいぐらいにclassでラッピングして、parents('比較的大きなクラス').find('目的の要素')で取得すればそのクラス内でのDOMの入れ替えは気にならなくなります。parent().parent()nextなどはDom要素の変更をもろに受けます。

CSSフレームワークの活用

職場のリーダー的な方に進められてtailwindというCSSフレームワークを使っています。汎用的な処理が全てクラス(display:flex;justify-content:space-betweenなど)で用意されています。

何度も書く処理はこれがあるといちいち定義したり、style=""などと書かなくていいので楽です。

HTML5がらみ

完全知識系ですが、

FIleAPI+base64エンコーディングによって画像を画面でアップロードした時に、すぐに表示。

HTML5独自の仕様などは知識がないとハマるので注意しましょう。

その他のネタ

  • 動的要素時の連動としてtriggerはかなり便利。一箇所で定義しておけば再度メソッドを書かなくてOK。ただし非同期処理(DBアクセス系があるときは要注意。whenなど)
  • 監視+HotReload 作業効率が上がります。
  • 要素のプロパティを取得するときはfindだと複数要素を取るのでele[0]などとするのを忘れないこと。あるいはfirstなどの方が良いかも。(DBから値を取る時の問題点と似てます。)

-JavaScript
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

途中入力離脱防止処理 JavaScript

WordPressの入力画面なんかでは実装されていますが、途中で文字入力をしてページりだすをしようとするとブラウザのアラートがでます。これも一般のお問い合わせフォームなんかでも実装可能です。 この場合 …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

GoogleMapのカスタマイズ

GoogleMapの埋め込みってよくある要件だと思うのですが、先日、GoogleMapに色(企業カラー)をつけたいという要望がありました。 てっきり埋め込み1行で解決すると思いましたが、色々と調べるこ …

no image

JavaScriptのthisについて

今回はJavaScriptのthisについて。 JavaScriptのthisの場合、呼び出し方によってthisの参照先が変わります。 4種類あるとされていますが、使われ方で分類すると私の場合、下記の …