31:T7fe,md`# Observableのアンチパターンとよくないコード ## Original: [Observable anti-patterns and code smells / Tom MacWright / Observable](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells) Japanese translation: SUGIMOTO Tatsuo 訳者より：誤訳があればご指摘ください。ジェネレータの部分はまだ理解していません！ここでは、JavaScriptで「一般的に」行われていることが、Observableではうまくいかない例を紹介しています。 **目次** 1. **タイマー**: 使わないようにします 2. **ミューテーション**: 避けましょう 3. **ジェネレータ**: 戻り値は重要ではありません 4. **要素の再選択**: ノートブック内の要素を参照するには、クラスやタグ名で参照するよりも、変数を使うほうがはるかに便利です ## タイマー 1つ目はタイマーです。 JavaScriptではいろんな形をとります。 \`\`\`js // setTimeoutは、指定したミリ秒の後に関数を実行します。 setTimeout(() => console.log('hi!'), 1000); // setIntervalも同じですが、指定したミリ秒ごとに関数を「繰り返し」実行します。 setInterval(() => console.log('hi!'), 1000); \`\`\` タイマーはObservableでも動きますが、あまりうまくいきません。セルは何度も再評価されるため、セルが実行するものはすべてリセットされてしまうからです。タイマーはただページにはりついているだけになりがちです。インターバルを指定したJavaScriptを評価し、さらに10回評価すると、10個のタイマーができてしまいます。たとえば、1秒ごとに増え続ける数字のセルがほしいとします。もっとも「イディオム」的にやる方法は、Promises.delayを使う方法です。詳細は、[標準ライブラリのノートブック](https://observablehq.com/@observablehq/stdlib)を参照してください。`32:[] 2f:{"title":"Observableのアンチパターンとよくないコード","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"{\n let i = 0;\n yield i;\n while (true) {\n yield Promises.delay(1000, ++i);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`上の例は、自分で言うのもなんですが、なかなかいい感じです。\nタブから離れると一時停止しますし、コードも簡潔で、セルを再評価するとリセットされて再始動します。\n\nsetIntervalではどうするのでしょうか。\nいくつか方法はありますが、どれもきれいではありません。\n1つ目の方法は、私が思いあたるもっとも素朴な方法ですが、大きな欠点があります。\n1秒刻みの間に、常に同じ値を生成しつづけるのです。\n1にたどりつくまでに大量の0を生成します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"{\n let i = 0;\n yield i;\n let interval = setInterval(() => {\n i++;\n }, 1000);\n try {\n while (true) {\n yield i;\n }\n } finally {\n clearInterval(interval); // ただし、再評価時に破棄されます。\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`次の方法は技術的には優れています。\n値が変化したときだけ値を生成しますが、うまく動かすには標準ライブラリのメソッドを使用する必要があります。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"Generators.observe(notify => {\n let i = 0;\n notify(i);\n let interval = setInterval(() => notify(++i), 1000);\n return () => clearInterval(interval);\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"mutation = md`## ミューテーション\n\nノートブックは、ミューテーションを最小限におさえることで、うまく動作しわかりやすくなりまります。\nミューテーションとは、「その場で変数を変更すること」です。\nつまり、古い変数を書き換えた新しい変数を作成せずに、元の変数の値を変更することを指します。\nJavaScriptにおける一般的なミューテーションのもとは次のようなものです。\n\n- その場で配列を変更する.sort()や.splice()などの配列メソッド\n- カスタムオブジェクトを変更する同様のメソッド\n- ステートフルな正規表現メソッド\n\nたとえば、このノートブックは配列を定義しているセルと、その配列の要素を取り除いて配列をその場で変更しているセルがあります。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"// このセルを実行してください\na = [1, 2, 3, 4]","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"// 次に、このセルを数回実行してください\na.splice(0, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"// 最後に、このセルを実行してください\na.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"md`2番目のセル（\\`.splice\\`を実行するセル）を実行しても、3番目のセル（\\`a.length\\`を表示するセル）は自動的に更新されないことに注意してください。\n\\`.splice\\`メソッドはその場で配列を変更しても新しい値を返していないので、この場合にはノートブックは\\`a\\`がいつどのように変更したのか知ることができないからです。\n\nこれは厄介です！\nObservableノートブックの良いところは、__セルが評価される順序を気にしなくてよい__ところにあります。\nノートブックは、上から下へと実行するのではなく、値が必要になったときや更新されたときに実行されます。\nミューテーションはそれを台無しにしてしまいます。\n\n幸いなことに、この問題を避けることができます。\nデフォルトでミューテーションするメソッドを使う場合、次のようにコードを「イミュータブル」（不変なもの）にできます。\n\n- データをミューテートしない別の方法を使う。たとえば、配列をその場で変更する[Array#push](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push)の代わりに、新しい配列を返す[Array#concat](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)を使います。\n- データのコピーを作成してからデータを変更する。たとえば、[Array#slice()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)を使います。\n\n以下は、先ほどのよくないコードの例を置き換えた後者の例です。\n配列に対して直接\\`.splice\\`を呼びだすのではなく、まず\\`.slice()\\`を使って配列の浅いコピーを作成してから、新しい値を新しい変数に代入しています。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"b = [1, 2, 3, 4]","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"c = {\n let copy = b.slice();\n copy.splice(0, 1);\n return copy;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"c.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"md`これで、セルを何度再評価しても、最終的にまったく同じ値になります。\nその場でデータをミューテートしていないからです。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"md`オブジェクトについても説明しましょう！\nオブジェクトがあり、そのオブジェクトのプロパティに代入すると、追跡できないミューテーションになってしまうので、通常よくありません。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"myObject = ({hi:'Tom'})","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"(myObject.key = Date.now())","pinned":true,"hidden":false,"mode":"ojs"},{"id":284,"value":"myObject","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`実行してわかるとおり、これらのセルは相互作用していますがノートブックからは追跡できません。\n2番目のセルを実行しても、3番目のセルの結果は更新されません。\nなぜなら、これらのセルは静的なミューテーション追跡をしていないからです。\n\n幸いなことに、これを回避する簡単な方法があります。\n「オブジェクトを変更したい場合は、現在のオブジェクトを変更するのではなく、新しいオブジェクトにする」というルールに従います。\nコード中に \\`...\\` と書かれている[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)で実現できます。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"myObjectWithKey = ({ key: Date.now(), ...myObject })","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"md`この新しい変数（myObjectWithKey）は、myObjectに新しいプロパティを__追加__しています。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`ほとんどの場合、ライブラリは必要ありませんが、オブジェクトや配列の変更をたくさんやるのなら、[lodash](https://lodash.com/docs/4.17.5)のようなものを使うとよいかもしれません。\nlodashは、便利な関数を多数提供していてミューテーションを避けることができます。\nつぎの例では、lodashを使い、myObjectWithKeyを元に、プロパティを__取り除いた__別のオブジェクトを作成しています。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"myObjectWithoutHi = _.omit(myObjectWithKey, 'hi')","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`ミューテーションを回避することはObservableで作業する上では重要です。\nこれは、このシステムに限らず、一般的に良い習慣です。\nこの原則を守ることで、Webアプリケーション、サーバプログラミング、モジュールのAPIなど、どんな場面でもより良いコードを作れるようになります。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`## ジェネレータ\n\n- セルの境界を超えたジェネレータで \\`return\\` を使わない\n\nジェネレータは多くのことができるJavaScriptの機能で、たくさんのテクニックがあります。\nしかし、Observable上では「間違った」使い方をされることがあります。\nまず、**ジェネレータの戻り値は無視される**ので、ジェネレータから\\`return\\`してはいけません。\nここでは、10まで数えるカウンタを例にあげています。\n\n\\`for\\`ループの各反復で、0, 1, 2...を生成し、最後の式\\`return i\\`で\\`10\\`を表示すると予想するかもしれません。\nしかし、そうはなりません。\nこれはreturnで、yieldではないからです。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"{\n let i = 0;\n for (; i < 10; i++) {\n yield i;\n }\n return i;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`一方、こちらは期待どおり、0から始まって10で終わる数字を表示します。\nここでは、最後の値を出力するのに、returnではなかくyieldを使っているからです。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"{\n let i = 0;\n for (; i < 10; i++) {\n yield i;\n }\n yield i;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`このアドバイスは、**セル境界を超える**ジェネレータについてです。\nJavaScriptの感覚では、セル境界は\\`generator.next()\\`を呼び出し、\\`done\\`がtrueの場合はその値を無視するものと考えます。\nそれが内部的に行われていることです。\n\nセル境界を**超えない**ジェネレータでは、つぎの例のように戻り値が重要な場所を使うことが**できます**。\n\\`yield*\\`文がlvalueとして戻り値を生成しています。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"{\n function* hasReturnValue() {\n yield \"a\";\n yield \"b\";\n return \"The result\";\n }\n let finalValue = yield* hasReturnValue();\n yield finalValue;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"reselectingElements = md`## 要素の再選択\n\n多くのノートブックで、ページに要素を追加し、後でそれらの要素を操作することがあります。\nd3チャートなら、\\`\\`グループを追加して、その中に棒や線などのグラフィック要素を配置します。\n\n要素を作成した後に、別のセルからその要素を参照するには通常2つの方法があります。\n\n1. 割り当てておいた変数を使用する。\n2. クラス、ID、タグ名をもとに再選択する。\\`d3.select()\\`、\\`document.querySelector()\\`など、要素を検索する関数を使う。\n\n**このアドバイスが適用されるのは、いきなり要素を取得する場合に限ります。\nすでに参照している要素の内部を選択するには、サブセレクタを使うことになります。\n\\`d3.select()\\`の引数に変数を指定する場合も適用されず、文字列を指定した場合のみを対象としています。**\n\nほとんどの場合、後者よりも前者を使うことが望ましいでしょう。\nここでは、あまりよくない方法の例を紹介します。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"document.querySelector('#my-fun-element').innerText = 'What a fun element!'","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`残念！\nこれは、一般的なJavaScriptでは使えますが、ここではうまくいきません。\nObservableの挙動を思い出してください。\n**セルの順序は、Observable以外の世界でのコードの順序と同じ意味ではありません。**\n\nセルは上から下へではなく、依存関係の順に実行されます。\n2つのセルに依存関係がない（一方のセルが他方のセルの名前に依存していない）場合、特定の順序で実行される保証はありません。\nこれは**よいこと**です。\n数学の授業で、先生が「aとbの和は何ですか。aが5でbが4だとします。」と言っても、問題の最初の部分を聞く**前に**、aとbの値を知らないからといって、脳がクラッシュすることはありません。\n数学と同じように、bの値が後からわかっても問題なく、その情報を統合して答えを出すことができます。\n\nそのため、水星が逆行したときなどには、上の例がうまくいくことがあるかもしれませんが、何の保証もありません。\n\nここでは、代わりに、2つの間の依存関係を使って順序を維持する例を紹介します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"myElement = html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"(myElement.innerText =\n \"これは私の要素で、常に永遠に機能し続けることが分かっています。\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`以下は、d3でこのテクニックを使った例です。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"chart = {\n const svg = d3.select(DOM.svg(width, 100));\n const x = d3.scaleLinear().domain([0, 500]).range([0, width]);\n const y = d3.scaleLinear().range([20, 80]);\n\n svg\n .append(\"path\")\n .datum(d3.range(500).map(() => Math.random()))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\n \"d\",\n d3\n .line()\n .x((d, i) => x(i))\n .y(y)\n );\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof randomize = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"randomize, d3.select(chart).select('path').attr('stroke', `hsl(${Math.random() * 100}, 100%, 50%)`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`チャートへの参照を得るのに**d3**.selectを使っていることに注意してください。\nsvg要素であることや、要素のIDに基づいて選択するのではなく、セル変数である\\`chart\\`を使っています。\n**d3**.selectはよくないコードではありませんが、これを広く使うのは問題です。\nまた、内部を選択するのに\\`.select('path')\\`を使っています。\nこれで、ページ内の別の場所や他のセル内ではなく、このチャート内の\\`path\\`ノードのみを選択することができます。\n\nセレクタを使用しない利点はほかにもあります。\nセレクタは、**一意性（ユニークネス）**の罠に陥りやすいのです。\n\\`d3.select('g')\\`のような大まかなセレクタを書いて、チャート内の\\`\\`だけを選択できると思いがちです。\nしかし、後でチャートを追加すると、誤ってそれらも選択されてしまいます。\nクラス名で選択する場合も同様で、将来おなじクラスの要素を追加するかもしれません。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"sytle = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}