attrでcheckedが動かせない!?

こんばんは、有村です!
また期間…が……ま、まあゆっくりペースで更新ってことで!!

本日のテーマは、「attrでcheckedが動かせない!?」です!
jQuery使う方であれば、attrは属性をいじいじするのに馴染み深いメソッドですよね…。
であるからこそ、謎の挙動に翻弄された事件があったのです。

チェックボックスをオンにするという、いたって単純な挙動です。
「prop使えや」というネタバレは置いておいて……だいぶ昔に実装されたコードだったので、こういうやり方もアリだったんですね。
普通に動いていたんです。

それが、別のjQueryのバージョン(1.11.X でしたかね…)で↑を使ったところ……う、動かない〜〜〜!?

同じ使い方、同じHTML構造なのに、なんでだろう!?となりました。
サイトの都合で異なるjQueryバージョンが混在しており、どちらのバージョンでも使用するものなので、困りました…。

そこで調べてみたところ、jQueryのあるバージョン(他の方の記事だと1.9以降…?)を起点に、attrにおけるcheckedの挙動が変わったみたいですね…。

それまでは、「checkedを属性かつプロパティとして設定する」だったものが、
「checkedという属性をつけようとする(しかも実際には動かない)」
に変わったようです。

…でふと浮かんだのは、
プロパティってなんなのさ?
という疑問。

調べてみたら、プロパティ == 属性、だという。
じゃあ何故、attrとpropが存在するのでしょうか…

自分なりに噛み砕くと、どうやら
属性 → HTMLに現れている属性
プロパティ → JavaScriptとして扱う属性
と、微妙な違いがあるそうで…
ん〜、表に見えるものと、表には出ないけどその実態、みたいな感じでしょうか?

「チェックされている状態」と言われたら、確かに見た目だけ「チェックしたでー!」となっても、
実態が「いやいや、見た目だけで結局は未チェックやねん…」となっていたら、意味がないですよね。

かつてのjQueryはそこらへんを上手く補ってくれていたけれど、属性は属性、プロパティはプロパティで分けようや、と方針が変わったんでしょうね。
使う側としては混乱しますが、そう考えると納得のアップデートです。

…というわけで…冒頭で述べた問題については、propを使用することで、旧・新バージョンどちらでも動くようになりました!!

バージョン毎の違いって難しいですね〜…でもいい気付きになりました!
それでは、きょうはこのへんで。

offメソッドがとても便利だった話

こんばんは。有村です。

さて今日は、jQueryのoffメソッドについて記録を残します。
実装中、ある状態によって発火する・しないの処理分けをしたかったのですが、変数でのフラグ管理以外の解決法が思いつかなくて。どうしようもなくて禁忌に手を出そうとしていたところを、颯爽とoffメソッドが解決してくれたんですよね。こいつマジイケメン。

実際のものから略してますけど、なんとなくのソースはこちら。

仕様としては、
・ヘッダの一部(グロナビ)がスクロール量に応じて固定される(いわゆるスティッキー)
・グロナビ内のボタン押下でサブナビ表示
・サブナビ表示中はメインコンテンツ部のスクロールを防ぐため、メインコンテンツをスクロール量に応じてfixedにする
みたいな感じです。

そこで起こった問題が!
スティッキーはうまくできた…でもそのスティッキー部が固定された状態からメニュー表示ボタンを押下すると、サブナビ表示と共にグロナビが吹っ飛んでどっか行くという現象が起きたのです…。
DOMの状態を見てみたら、サブナビ表示と同時に #hoge からactiveが外れてしまっていました。
なぜだ…と調べていたところ、#main_pageをposition: fixed; 状態にした時に、windowのスクロール量が「0」とされてしまうことが分かりました。スクロール量が変化したことでonscrollが発火し、activeがすっ飛んでしまった、という顛末です。

ので、「サブナビを表示させる時は、windowのonscrollイベントに紐付いた処理を実行させたくない。」が今回の課題となりました。

で、早速ですが、これで解決しました。

・はじめにonメソッドで、windowのスクロールイベントのコールバックに「checkScroll」を紐付ける。その際に「check」という名前空間を付与しておく。(スティッキーの実装)
・fuga押下でサブナビを表示する際はcheckScrollを動かしたくないので、click直後にcheckの名前空間に紐付くコールバックを破棄する。

名前空間を付与しなくても実装はできるのですが、ただoffするだけではwindowのスクロールに紐付くコールバックが全て外れてしまうので、他にコールバックが設定されていることを考慮して特定の名前を付けています。

まとめると、「onで付与してoffで外した」って感じです。
もちろんこれだけでは、サブナビを閉じた後にスティッキーが効かなくなってしまうので、再度onメソッドでコールバックを設定する必要があるんですけど…いうてもそれもたった1行ですからね。らくちん。

「onは使ったことあるけどoffはないな〜」という方も多いと思いますが、便利なのでぜひ記憶の片隅に置いておいてください!

それでは、今日はこのへんで。

原則を知る ーDRYー

こんばんは、原田です。

さっき地元の知り合いから電話がきて、地元に帰りたくなりました。はい。

 

 

最近、上司に「どれが良い実装で、どれが悪い実装なのかが分からない」と相談しました。

すると、「原則を知るといい。」という助言を頂きました。

原則  …特別な場合は別として、一般に適用される根本的な法則。

確かに、原則を知ることは、いいコードが分かる導きになるかもしれないと思い、これからちょいちょい原則を書いていこうと思います!!!

 

ではでは、

今日の原則は〜・・・・

DRY

です。

乾燥という意味ではありません。(知らなかったのは私だけですかね?)

DRY(Don’t  Repeat Yourself)

重複を防ぐ考え方。

Single Source of truthとも言うそうです。

 

なぜ重複を防いだ方が良いのか?

重複が多い→変更時に変更箇所が増える→時間がかかる

情報量が多い→明確でない→不一致が生じる可能性がある

という点があるからだそうです。

 

ということで、今後はまとめることができたり、同じような実装が複数ある場合は、関数化したりしてDRYに努めようと思います。

GASを使ってtrelloとslackを連携させる。

原田です。

 

Trelloとslackを連携させてます!

slackやTrelloの機能で簡単にできることもあるらしいですが、

あえて最近ハマってるGASつくってみました。

GASがあればサーバいらずで便利ですね:D

APIって素晴らしいですねえ!!!

 

・こんなの作る

→Trelloのあるボード内のカードで、期限がその日のものをおしらせしてくれるslackBot

 

・使うもの

slack  /  Trello / GAS

 

・作業

ソースはこんな感じです(ソース汚いのは大目にみてください…)

https://github.com/kin29/Trello—GAS—Slack-/blob/feature-remainder_bot/remainderBot.gs

 

これをトリガー設定で毎日朝に発動させれば完璧です!

 

 

ここで疑問が・・・・・

ってなにしてんだろ?

 

  ↑ 引数のurlにGETリクエストしてるらしい。

 

↑ POSTリクエストしてるらしい。

 

 

・response.getContentText()

取得したコンテンツをとり出しています

 

・JSON.parse()

引数として渡されたJSON文字列をオブジェクトに変換します。

※パース=解析

いまいち、よくわかりませんが、

 

parseしないとjsonデータは特定の文字列を取り出すことができない!

 

ということらしいです。

 

オブジェクトいまいちまだわかんないですね・・・。

オブジェクト指向とかとか・・・

jQueryのきほん

jQueryのきほん。

使ってたらいつの間にかできたー!
みたいな天才型とかならいいのですが、そうではないので。

きほん的なことから。振り返りつつ文章化してみる。

※基本の書き方

jQuery(セレクタ).メソッド(パラメータ)

セレクタ→操作する要素
メソッド→操作する命令
パラメータ→操作内容

「jQuery」を「$」に置き換えOK

$(document).ready(function(){
//処理内容はここ
});

短く下記でもOK

$(function(){
//処理内容はここ
});

次はセレクタについてかなー。

jQuery勉強会

梅雨の時期は髪がうねるし、広がるし困るー。
でも、紫陽花は綺麗だし、少しずつ夏になる感は好き。

今日はjQuery勉強会での内容を。

「9マスの中で押したパネルの周りの色が反転。
すべての色が揃ったらクリア!!」な内容がこちら。

仕様は理解できても、全ての色が揃うように揃えるのは難しいですね。

今回出てきている「Toggle」系メソッドに関しても、もっと理解しなきゃだな。
それはまた、次の題材。

jsfiddleが楽しい!

jQueryを始めるにあたって、とっても便利だなーと思ったのが「jsfiddle

https://jsfiddle.net/

ちゃんと動くのかブラウザ上ですぐに確認できるからとっても良いですよねー。

気楽にコード書いてみて試せるから楽しいし、WPにコード載せる時も楽だし「embed」で埋め込みコードを簡単に作成できるし✨

って、ことで、on clickで色が変わるように書いてみた!w

※本当は「ここを押すと」って所にマウスオーバーしたら、矢印になるようにしたいけど一旦そこは、無視!w

「jsfiddle」使ってみて思ったんですが、

jQueryとかってHTMLやCSSに動きをプラスするイメージなんですねー。

どう動かしたいかイメージできる事とか、言語化できる事大切そうですね。

「jsfiddle」たくさん遊んでjQueryおぼえよーっと。

jQueryはじめました。

記念すべき初投稿!

「冷やし中華はじめました」の季節に、

 

「jQueryはじめました」( ´ ▽ )ノ

(まだ右も左もわかっていないけど、ブログ立ち上げた時点ではじめた気になっているだけw)

 

 

 

 

「エンジニア✨」ってなんかかっこいい!!!っと思って業界入りしたもものの、

毎日わからないことだし、周りの人は忙しそうだし、冷たくあしらわれるし、、、(´Д )

挫けそうなんだけど…。

 

 

 

ブログはじめたら、勉強頑張れるかなーって思って立ち上げてみました!!✨

 

 

 

意識低くて「おブス」になるよりは、

意識高めで「キラキラ✨」している方が絶対いい!!!

が、モットー。

 

 

 

 

ってことで、jQueryキラキラ女子目指してがんばりまーす!!!✨

 

 

お手柔らかに見守っていただければ幸いです(^ ^)