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

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …

no image

JavaScriptライブラリ sugar

去年、JavaScriptの仕事をがりがりやった時にお世話になったライブラリsugar。 JavaScriptのライブラリというとunderscore.jsが有名ですが、こいつも結構使えるライブラリで …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …