Posts Tagged “javascript”

stokpic / Pixabay

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

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

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

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

TypeError: factory is not a function

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

続きを読む »

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/

実例はこちら

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

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

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

目次 – Table of Contents

• Javascriptのテンプレートエンジンの候補
• 1. John ResigさんのJavaScript Micro-Templating
• 2. Mustache.js か Handlebars.js

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サービスがつくられてるんだなと感じます。）

続きを読む »

• README.mdファイル。マークダウン記法まとめ
• 一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTP(FTP)で作業効率化する方法。
• 3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating
• Sublime Text 2とCtagsの組み合わせがすごい。開発スピードUP[Mac版]
• MacのApp Storeに接続出来ない場合の対処法
• [CMS]多言語化、翻訳ファイル.po、.mo。
• WordCamp vancouver 2012へ行ってきた、まとめ
• パララックスでのイベントの考察。scroll / throttle / debounce / touchmove / mousewheel
• docker imagesに表示される＜none＞を消す。dangling
• CodaとZen-Codingのショートカットまとめ。極めると早い。

RECENT ENTRY

• javascriptの循環参照、circular dependencies。TypeError
• Reactカスタムフックの設計指針についてページネーションで考える
• Reactで、Array.sortしたデータが、useMemoやuseCallbackに反映されない
• Laradockでホストマシンの変更が反映されない場合の対策
• Interventionで日本語表示対策。imagettfbbox、any2eucjp

PROJECT

CATEGORY

• API (2)
• CMS (8)
  • drupal (2)
  • ECCUBE (1)
  • Wordpress (6)
• CSS (2)
• DevOps (2)
  • Docker (2)
• framework (7)
  • Aura (1)
  • Laravel (4)
  • symfony (1)
• javascript (8)
  • jquery (4)
  • React (2)
• mac (6)
  • SublimeText2 (2)
• other (3)
• Others (3)
• PHP (2)
• SCM (7)
  • git (3)
  • Subversion (4)
• 未分類 (4)
• 開発環境 (5)

ARCHIVE

• 2020年10月 (3)
• 2019年9月 (3)
• 2019年8月 (2)
• 2019年5月 (1)
• 2019年3月 (1)
• 2018年12月 (1)
• 2018年9月 (1)
• 2018年7月 (1)
• 2018年4月 (1)
• 2016年12月 (2)
• 2016年2月 (1)
• 2016年1月 (1)
• 2015年12月 (1)
• 2015年8月 (1)
• 2015年6月 (1)
• 2015年5月 (2)
• 2014年9月 (1)
• 2014年6月 (1)
• 2014年1月 (1)
• 2013年7月 (1)
• 2013年3月 (2)
• 2012年12月 (2)
• 2012年10月 (1)
• 2012年1月 (3)
• 2011年7月 (1)
• 2011年6月 (2)
• 2011年2月 (1)
• 2010年6月 (4)

TAG