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

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

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

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

アーカイブ