画面系の複雑な処理をやる場合、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エンコーディングによって画像を画面でアップロードした時に、すぐに表示。
HTML５独自の仕様などは知識がないとハマるので注意しましょう。
その他のネタ
- 動的要素時の連動としてtriggerはかなり便利。一箇所で定義しておけば再度メソッドを書かなくてOK。ただし非同期処理(DBアクセス系があるときは要注意。whenなど)
- 監視+HotReload 作業効率が上がります。
- 要素のプロパティを取得するときはfindだと複数要素を取るのでele[0]などとするのを忘れないこと。あるいはfirstなどの方が良いかも。(DBから値を取る時の問題点と似てます。)
