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ライブラリ sugar

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

no image

vueについてのポイントその3(主に親子関係について)

最近またvueにポチポチ触っているので再度復習。 主に値の監視に関して。コードは一切なく主に概念的なものに関して。 コンポーネント間では基本的にダイレクトに値のやり取りができない というかコンポーネン …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

アーカイブ