読者です 読者をやめる 読者になる 読者になる

「パーフェクトJavaScript」メモ 12章 ライブラリ

JavaScript

ほとんどjQueryの紹介。

イベントリスナの登録・削除には
bind(), unbind()
live(), die()
delegate(), undelegate()

bind()はググって調べてるときによく出てくるんだが、イベントリスナ自体がよくわかっていないので使ったことがない。
イベントリスナはイベントハンドラに比べ、ひとつの要素に複数のイベントを付与することができるので便利とかなんとか…….。
しかしjQueryだとメソッドチェーンによって複数の処理をくっつけられるので関係ないような?あれ、何か根本的に見落としがあるな(でないとbindの有用性がないことになってしまう)。
ここは知識の欠落が明確にあるところなので、どうにかせな

clickメソッドとかselectメソッドとかはそもそもイベントリスナ登録メソッドだよ

……まじか。じゃイベントリスナを私は知らず知らずのうちに使っていたのか。
で、bindいつ使うんだ

ラッパー関数

(たぶん)ラッパーの説明なしにいきなり出てきたけど、よく使う設定の束ってことでよさそうですね
新しい何かを生み出すものではないが、便利。Gペンとケント紙と定規が入った漫画家スターターキットみたいなものか。

Deferred
非同期処理を直列に記述、実行するための仕組み

これもググったらたまに出てくるが自分で使ったことはないので、そういうものがあることを思い出せるようにメモしておく。

終わり。

「パーフェクトJavaScript」メモ 11章 実践クライアントサイドJavaScript

JavaScript

クライアントサイドJavaScriptで覚えておくべきことは
・DOM操作
・イベントの扱い
・スタイルの操作
AJAX
・フォームの取り扱い
の5つだそうで、DOMとイベントは大きい話なので章1つぶんで、残りの3つは1章にまとめました、というのがこの章。
章が増えすぎるのも問題ということか。
(PANICSMILE聴きながら新しいことを学ぶのは無理なのではないか?)
(いや、このまま続けよう、挑戦だ)

(jsの)styleプロパティで指定した内容はCSSで!importantが付与されているものを除いて最優先で適用される

ブラウザごとにCSSの優先順位の付け方が違う(ある場面で、親要素のCSSを優先するブラウザもあれば子要素のCSSを優先するブラウザもある)ので、jsで上から書き換えることによってこの辺をうまく統一することができ……たりしないかな。それも強引で微妙かもだけど。

AJAXの項はさらっと流して、次に使うときに再読します

フォームはsubmitすると必ずページ遷移が発生するのでAJAXの思想とは相反する部分がある
submitでページ遷移させないようにする方法はあるにはあるが、そうしてまでフォームを使う必要があるかどうか考えましょう
たとえばtwitterのツイート欄ではフォームは使っていない。

form タグでくくらないでinputタグだけ使うというのをよくやるけどそれはいい方法なのかどうか。

input要素、select要素、button要素、textarea要素などのことをフォームコントロール要素という

「form-control」というクラス名がbootstrapでも使われるけど、入力受付欄(空欄やチェックボックス自体)を指すというのをよく忘れる(忘れてもあまり支障はなかったけど)。fom-controlという言葉とこれらの入力受付欄をリンクさせるため、一応メモっておく。

次章、ライブラリ。
jQueryとかが登場する。

「パーフェクトJavaScript」メモ 10章 イベント

JavaScript

前章のDOMとこの章のイベントは、ほぼjQueryでやるけどjQuery自体は実際jsのこういうのをいじってるので知らなくていいわけはないし、自分で使うこともあるだろうという認識で読んでいる。

イベントハンドラ
onclick
ondbclick
onmousedown
onmouseup
onmousemove
onmouseout
onmouseover
onkeydown
onkeypress
onkeyup
onchange
onblur (input要素のフォーカスが他に写った)
onfocus
onselect
onsubmit
onreset
onload
onunload
onabort
onerror
onresize

これら並列なのか(何を今さらという感じだが)、onclick以外はjQueryでやる、という感じが多かったのでなんとなくonclickを特別視していた。
onclickの出現頻度が圧倒的に高いというだけで、皆おなじ仲間なんだね

aタグのonclickイベントでfalseを返すとページ遷移しなくなる

href属性にjavascript:void(0)書くのと同じなのか、使い分けとか優劣とかあるのかな

イベントの伝播
キャプチャリングフェーズ→ターゲットフェーズ→バブリングフェーズ
イベントリスナの引数で、キャプチャリングフェーズとバブリングフェーズのどちらで実行するか決められる。
stopPropagation()メソッドはそいつが書かれたターゲットに設定されている他のイベントは実行されるが、それ以降は実行されない
そいつが書かれたターゲットの他のイベントも実行注意させるときはstopImmediatePropagation()を使う

stopPropagation()は使ったことあるが、イベントの伝播を止める、という認識はなかったのでメモった。
イベントの伝播自体はわかりやすい概念だと思われる。

10章終わり。

「パーフェクトJavaScript」メモ 9章 DOM

JavaScript

DOMは(中略)APIです。

DOMってAPIだったのか。
まあ Application Programming Interface っていわれたらそうだよなあ。なんでも Application Programming Interface といえば Application Programming Interface な気もするので、なんとも、だけど。

コラム、DOM LEVEL 0 の記述

ブラウザが先行実装したDOM機能にはプレフィクスがついている
それがFirefoxのmozとかChromewebkitとかだ。

読み飛ばそうかなと思ったコラムだが読んだら眼から鱗というほどでもないがそれに近いことが書いてあった。
mozとかのこと正直うざいなーと思ってたけど、このコラムを読んで親しみが少し沸きました

DOMツリーの中のひとつひとつのオブジェクトのことをノードと呼ぶ

つまり、ノードとはオブジェクトの一種である

要素とノードは混同しやすい。
要素とノードは継承関係。ノードがスーパータイプ。
ノードの中で、属性nodeTypeの値がELEMENT_NODE(1)のものが要素。

この本は用語の整理をかなり意識的にやっているので、自分ととても相性がいいと思って読んでます。
要素とノードの違いはかなり重要な気がする。

(getElementByTagNameとかで取得できる)NodeListオブジェクトは、ライブオブジェクトである
ライブオブジェクトは、常にDOMツリー実体への参照を持っている
なので、要素を追加したり削除したりすると、どんどん値が変わることもある

意識はしていたと思うが、どっちだっけと思うこともあるので書いておく。

ライブオブジェクトだと色々不便なので
Array.prototype.slice()
で配列に変換してから使うとよい

やばい、一度も使ったことない

NodeListをforループで使う場合はArrayオブジェクトに変換してから使うとよい
断然速い(1000個で比べてみました)

そんな大量のNodeListをループで回したことはない……100個くらいならあるかも

XPathとかはjQueryでほぼ代替できるということで今まで触れる機会がなかった、これからはどうなのか。
innerHTML は使うけど

あ、9章おわった

「パーフェクトJavaScript」メモ 8章 クライアントサイドJavaScriptとHTML

JavaScript

突然やる気がなくなって止まっていたが幸い再開。いつも同じメンバーで再開

jsの記述方法と、よくハマりやすい実行タイミングでまとめ。

記述方法 実行タイミング
scriptタグ 書いてある場所で実行。body閉じタグ直前に書いたとてbodyをいじれない。
外部jsファイルの読込 やはり書いてある場所のタイミングで実行。
onload 画像含めページが全て表示されてから実行。体感遅い。
DOMContentLoaded DOMができたら実行。
動的ロード 他の処理と並列で実行。

実行タイミングとか利便性とかで使い分けます

JavaScriptの実行タイミングから考えると、もっとも適切な方法はDOMContentLoadedです

使ったことない。
が、IEの昔のバージョンで使えないとかどうでもいいし(いいんだっけ)本当に便利なのでは。動的でさらに入れ子になってるページでも全DOMができてから実行されるのだろうか、だとしたら便利

デバッグ方法

console.debug で何行目で書かれたやつからの出力かわかる

え、じゃあconsole.log完全にやめてconsole.debug使います

console.dirはいいよね
console.dirxml(DOM要素をHTMLとして表示)もあるのか
console.traceは結局何が表示されるんだ、使ってみるか
console.timeなんてあるのか、便利だな
ああなんと色々知らなかったな。

クロスブラウザ対策には
ユーザーエージェントによる条件分岐か
機能の有無による条件分岐

ああ、AにはBかCなんだな

クライアントサイドJavaScriptではWIndowオブジェクトがグローバルオブジェクトになる

ではサーバサイドJavaScriptでは何がグローバルオブジェクトになるでしょうか、
ページをめくってカンニングしたところ、例えばNode.jsではglobalオブジェクトがグローバルオブジェクトになるそうです。

WindowオブジェクトのnavigatorプロパティはNavigatorオブジェクトです。
WindowオブジェクトのdocumentプロパティはDocumentオブジェクトです。

なんてことはない文章だが、ぱっと見ぜんぜん意味がわからない。
しかし、ある項の最初の一文なので、重要なことを言っているに違いない。
しかし一見、何も言っていないようにも見える。

◯◯オブジェクト、という言い方はよく出てくるのでわりとわかる。
しかし◯◯プロパティは……いや、◯◯プロパティという言い方もよく出てくる。
ということは、わかりにくいところはひとつもないのか。

乱暴に上記の文章を返還すると、こういうことでいいのか

Windowオブジェクト{
navigatorプロパティ:Navigatorオブジェクト,
documentプロパティ:Documentオブジェクト,
……
}

なんだ何も難しいこと言ってないな。
「WindowオブジェクトのnavigatorプロパティにはNavigatorオブジェクトが値として設定されています。」
だと少し親切か。
それにしてもこれだけではやはり何も訴えかけるものがないな。

「Windowオブジェクトは、プロパティとしてNavigatorオブジェクトを持っています。」
これだと「ほう、そういうのもあるのか」と思える。

情報を出す順番とタイミングがポイントなのかな。
より端的には、「主語に新情報を入れない」かな。「新情報は後置」は英会話の鉄則だったかな。

「私の弟子である毒霧吹き三郎は、毒霧を吹きます。」
だと「そりゃそうだろうな」と思うけど、
「私の弟子には、毒霧吹き三郎という、毒霧を吹く奴がいます。」
だと「ほう、そういうのもいるのか」と思える。

(待て、最後の文の主語述語って「毒霧を吹くやつが」「います」じゃないの、どうなってんの文法体系)

この章はWindowオブジェクトのdocumentプロパティには「DOM」というものがあって……というところで終わり、次の章が、DOM。

「パーフェクトJavaScript」メモ 7章 データ処理

JavaScript

データ処理の章。
配列、JSON,日付、正規表現の4つを紹介。

配列のlengthは要素の数ではなく配列の最後日の要素のインデックスに1を足した数

間違えないようにしよう。

イテレータとジェネレータについては読んだけどありがたみはまだわかってない。

この章は特筆すべきことがなかった、上記4つについての知識を再確認。
まだ調べないと使えないレベルなので頭から湧き出る状態にしたい。

「パーフェクトJavaScript」メモ 6章 関数とクロージャ

JavaScript

関数宣言文で宣言した関数は、宣言した行より前のコードから呼べます。(巻き上げ)

いつも律儀に不安がっている

argumentsオブジェクトで実引数にアクセスできる

仮引数(parameter)、実引数(arguments)。
argumentて議論とか口論という意味だけど、論拠という部分が意味の元なのか?
数学分野では独立変数のことか。論理学での意味「項」からの転用かな

にしても、実引数にアクセスしてるんではなくて仮引数にアクセスしているように見える。

jsではローカル変数のスコープは関数内で宣言した後の領域ではなく、その関数全域にあたる。そのため、関数内で変数を宣言するときは関数の先頭でまとめて行うことを推奨する

これは何も考えず先頭に書けばいいのということならありがたい。

jsにはブロックスコープはないが、letを用いてブロックスコープを使うことができる(独自拡張)

まったくお目にかからない。for文の初期化式で使うと普通に便利だと思うのだが

入れ子が面倒な配置になって「どちらの関数が外側かわからず名前解決がうまく動作しない」ということはないのだろうか。

シャドーイングはバグの元なので避けよう

基本的に変数は毎回唯一無二のものをつけようということでいいか。
iとかよく重複しそうだけど。

関数はオブジェクト

関数はプロパティの集合。プロパティの読み書きもできる(そうか)

オブジェクトには本質的に名前がない

頻出するセンテンスなのでメモっておく。

クロージャ

出た

クロージャは状態を持つ関数である(表層的な理解その1)
クロージャは関数を抜けた後にも生きているローカル変数である(表層的な理解その2)

JavaScriptでは関数を呼ぶ度にCallオブジェクトが暗黙に生成されます。(中略)Callオブジェクトは関数呼び出しが終わると消滅します。

急に原文ママ
関数オブジェクトはg()とかカッコつきのときにCallオブジェクトが生成される(関数が実行される)が括弧つきじゃないとCallオブジェクトは生成されないし単に関数オブジェクトの参照を返すのみ。

(前略)g2とg3の呼び出し結果は異なります。これは同じコードから異なる状態を持つ関数を作れたことを意味します。

いまのところ表面的には、引数に値を入れた状態で変数として保存できる、というだけに見えるが。

クロージャのイディオムとして関数リテラル式をそのままreturn文に書くことが多い

全てがそうだとは限らない

クロージャ名前空間の汚染を防ごう

実用的具体例をありがとうございます

コールバック

動きは理解できたと思うが実践例をもっと見たい。
jQueryとかのライブラリでよく出てくるコールバック関数は内部的にはこんなかんじになっているということか。


6章終了。5章に比べ短かかった。