Posts Tagged “javascript”

javascriptの循環参照、circular dependencies。TypeError

by codechord. 0 Comments

Staircase Spiral Architecture  - stokpic / Pixabay

stokpic / Pixabay

javascriptを書いていて、requireの書き方で、ちょっとハマったのでメモ。

次のような要件を実装していくとします。

  • 子要素を生成することができるclass Person{}をつくる。
  • 要素を生成する機能は、class外に別途factory()メソッドを用意する。
  • Personにはchild()関数があり、factory()を実行して、子要素を作れる。

この仕組みを1ファイルですべて記述すると成功するのだけど、
ファイルを分割して、双方の関数をお互いがrequireしあうようにすると、
書き方によっては、そんな関数無いですよ!?と怒られます。

TypeError: factory is not a function

では。そのコードを紹介します。

続きを読む »

Reactで、Array.sortしたデータが、useMemoやuseCallbackに反映されない

by codechord. 0 Comments

Monsterkoi / Pixabay

Reactで処理が複雑になれば、useMemoやuseCallbackなどを使い、描画コストがかからないよう効率化していくわけでが、
ページネーションを作っていて、その際、useMemoの値が更新されない症状が発生したのでそのメモ。


Immutableであれ

結構、Reactなどで重要な、immutabuleであることがポイントで、破壊的な関数をつかってたのが原因。Immutableじゃないぞ!っていうエラーが出るわけもなく、ちょっとハマった。
immutableをわかったつもりでわかっていなかったんだと思う。

immutabuleについては、こちらの記事が、完結でわかりやすい。
https://noah.plus/blog/007/

配列/オブジェクトの正しい加工

具体的には、並び替えをする処理に、Array.sortやArray.sliceを、そのまま使って加工していた。

だめなコード例は、次のような感じ

items.sort(並び替えの関数);
items.slice(start,end);

次のように、加工前に、あらたなオブジェクト(配列)を作ってしまうことで、元のオブジェクトを壊さないで済む。

[...items].sort(並び替えの関数);
[...items].slice(start,end);

その他の例についても、先のページがやっぱりわかりやすいので、一読をオススメ。

https://noah.plus/blog/007/


実例はこちら

実際、この操作は、カスタムフックでページネーションを作っていて、この症状が発生したのだけど、
別エントリにしまとめてみたので、よかったら合わせてどうぞ。

カスタムフックの設計指針についてページネーションで考える

3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating

by codechord. 0 Comments

140bytes @ hhjs

多忙きわまりない2013年初夏でございます。
最近あんまりコードらしいもの書けてなくって、vagrantとかshefとかpjaxとかnodeとか理解するために時間つくりたい、コード書きたい!ってなってます。今回ちょっとajaxまわりのものの実装でjavascriptのテンプレートエンジンに調べる必要あったので、javascriptのテンプレートエンジンに触れてみようかなと。
phpのテンプレートだとsmartyだとか、rubyだとERBとかなんかそういうのですけど、javascriptのテンプレートエンジンについて知らなかったんで。

目次 – Table of Contents

Javascriptのテンプレートエンジンの候補

はじめに申し上げますが、いっぱいあります。ここみるといいです。

癖とかいろいろあって、今回選んだのは3つ(内2つはほとんど似ている)

  1. Microtemplating
    (すごく軽くて、すごく手軽で、すごく早い。作者はjQueryのリードプログラマーだって。はい、すごい。)
  2. Mustache.js
    (Mustacheの書き方を覚えたらたら、いろんな言語でMustache使えますよ。便利ですよっていうやつ。開発者はgithubのcofounder。はい、すごい、すごい。
    ただ、Mustacheだとif文だとかロジックを入れたい場合には非力なため、Mustacheと互換性のあってロジック部分も強化できるhandlebars.jsというものを使う。)

その他候補にあがったのは、

  1. pure.js
    (書き方に癖があるし、雛形となるDOMが生成してある必要があるっぽいので、Ajaxの動的生成には向かないのかな?ということで、今回パス)
  2. underscore.js
    (Ruby使いな人にとってはunderscore.jsでよかったりするのかな。今回は手をだせなかった。)
  3. JsRender
    (簡単そうでjQuery無しで動くけど30kと重い。殆どの場合jQuery導入してるから恩恵がない。ただ、jQueryの本命テンプレートエンジンとして開発されてるっぽいので、jQuery版リリースされたら導入を検討しようかと思ったり。)

(ごく数名の天才エンジニアが提供してくれてるライブラリのおかげで、ほとんどのwebサービスがつくられてるんだなと感じます。)

続きを読む »