[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定についてJavaScripttips ※本家はこちらのブログエントリーになります. 毎日 html, css, js についてのエントリーを公開しているのでよかったらRSS登録してください♪ null とか undefined とか 0 とか 空文字('') とか false とかの 判定について書いてみました. 各型, 値の評価 各型, 値が条件式でどう評価されるのかを見てみましょう. value type result

mongooseのconnect実行時、mongodが上がっていなくてもthrowされないので、そのあたりのハンドリングがしたくてmongooseのソースを呼んでみました。（非同期IOだから当たり前ですが・・） たぶん、コールバックを指定すれば良いとかそのくらいの事なんだろうなーと思いつつも、せっかくなのでちゃんとソースを呼んでみる。 mongooseのconnect connectが定義されているのは、 mongoソースの「index.js」です。 （場所：自分はnpmインストールなので/usr/local/lib/node/.npm/mongoose/1.3.7/package/lib/mongoose） まずはcocnnect定義の大元から。 index.js 103〜106行目 Mongoose.prototype.connect = function (){ this.conne

node.js + MongoDB はイイ感じです．というわけで Mongoose ネタの続き． 見出し connect と disconnect 明示的にコネクションを扱う Connection とイベント connect と disconnect require で取得する Mongoose オブジェクトには connect と disconnect があります． var mongoose = require('mongoose'); var Schema = mongoose.Schema; // スキーマ登録 var HogeSchema = new Schema({ label: String, value: Number }); mongoose.model('Hoge', HogeSchema); // デフォルトコネクションを開く mongoose.connect('mon

問題提起 React.jsでSingle-Page-Applicationを作るときに、どんな構成にしたら捗るのか？を考えてみました。 ReactでSPAといったときにざっと問題として考えられそうなのは、 サーバーサイドを実装しなくても、クライアントだけで動作確認したい。 再利用できそうなコンポーネントと、そのページでしか使わないコンポーネントを分けたい。 コンポーネントは独立しているべき（グローバル依存しない） Reactコンポーネントだけじゃ足りないので、古いライブラリやCSSも扱いたい。 開発時のビルドが遅いのはイヤだ。（差分ビルド欲しい） 全体をテストするのは重たいから部分的にテストしたい。 設定ファイルがあちこちに散らばるのはイヤだ。 ES6のフィーチャーを使いたいが、下位互換性も担保しないと。 あたりでしょうか。 今回は、この辺の問題をある程度汎用的に解決する案を考えてみました

問題提起 Why React? Many people choose to think of React as the V in MVC. で語られている通り、一般的にはいわゆるViewの部分（仮想DOM）だけを担うライブラリと思われているようです。 「仮想DOMは描画が速いんだ」などと言う人が多くいますが、React.jsによるDOM操作の効率化（差分反映の仕組み）で劇的に改善されるケースってそこまで多くないんじゃないかと思っています。 「じゃぁ、Reactって学習コストに合わなくね？」と僕は思っていましたが、このスライド（React JS and why it's awesome）を見て、実際に学習してみて納得しました。 これはクライアントサイドの設計をひっくり返すフレームワークだと。 何がいいのか？ Reactは以下の機能を持っています。（ざっくり過ぎて意味不明かもしれませんが、機能

react-skeleton 使い方 リポジトリのREADMEを読んで下さい。 特徴 ファイル変更を監視して差分ビルド（watchify） dev環境下ではソースマップを出力 Motivation React（に限らないけど）開発環境を毎回一から整えるの辛すぎ スケルトンっぽいものを作るタイミングがなかったので満を持して。 Note 既存の運用アプリからぶっこ抜く形で無理やり作った。 memoは @mizchi さんの影響を受けて今日追記した。備忘録。 感想 結構雑なところがありますがご愛嬌。 gulpfileが一番の肝だと思いました。ビルド大切 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back

メリークリスマス！ いよいよ最終日です！ ここまでReact.jsについて紹介してきましたが少しでも参考になって使ってみようと思ってもらえると幸いです。 React.jsはfacebook、instagramやGitHubのAtomEditorもちろん、↓を見てもらえればわかる通り「AirBnB」、「Atlassian」、「Netflix」、「Reddit」、「The New York Times」、「Yahoo」など多くのところで使われているようです。 また、来年の1月後半にはReact.js Confがあるので色々な知見が出てますます盛り上がっていくと思うので来年も楽しみです！ React.jsについての情報は、公式のブログでも色々紹介されますし、#reactjsのハッシュタグ追ってると色々情報集めることが出来ます。 このAdvent Calendar読んで興味を持ったら是非↓のリンク

Reactが最近騒がれてるので、 よくわからないからReactjs tutorialを少しこなしてみた。 Reactとは ぐぐるとmizchiさんのブログエントリが出てくる。 Facebook製リアクティブプログラミングライブラリ React を試してみた + 感想 VirtualDOMという技術を使っているようだ。 [JavaScript] 仮想DOMを提供する『React』について少し調べてみた VirutalDOMだけ切り出した成果物も存在する。 https://github.com/Matt-Esch/virtual-dom Virtual DOMのアルゴリズムが知りたくてvirtual-domのコードを読んだ話 react-toolsのインストール React、type=“text/jsx” なコンテンツについてXHRで取りに行くようだ。 Chromeで開発することが多い、という

2014-12-25 React.jsを触った感想 Javascript React.js Virtual DOM クライアントサイドJS ここ二週間ほどReact.jsを触っていて、業務でも今の案件で使うことにしたので、簡単な紹介と、触ってみた感想。 React.jsについて A JavaScript library for building user interfaces | React React.jsは、Facebook製のクライアントサイドJSフレームワーク。 Angular.jsなどの並べられがちだけど、ああいう俗にいう「MV*」でフルスタックなものとは違って、View層に特化している。 3つの特徴 UIに特化 ここでいうUIとは、UI部品のことで、つまりは複数のDOMを内包する1つの部分的なDOMツリーのこと。これをReactではComponentと呼んでいる。 このComp

これ facebook/react https://github.com/facebook/react 使ってみる サンプルそぎ落として、最小構成で組んでみた gist8208430 モジュール定義 -> 引数をJavaScriptで受け取って処理 -> renderという流れ。jsxという拡張子はjavascriptにxmlリテラルを追加したものっぽい。(この拡張子かぶりすぎてるので本当にやめてほしい) render毎にDOM構築してるから激しくパフォーマンス悪いのでは…　と思ったら次のような記事があった。 Performance Calendar » React’s diff algorithm http://calendar.perfplanet.com/2013/diff/ どうも毎回innerHTMLで突っ込むんじゃなくて、既にrender済みのものはスキップして最適化している模

数年前からjavascriptのフレームワークが数多く出てきたけど、その中でも最近話題かもしれないreactについて勉強してみた。 Facebook製で、Facebook、Instagram、GitHub (Atom) という大御所たちに使われたりしている。 作ったアプリケーション Qiitaのタグを取得してタグごとに記事一覧を表示するもの。 トップは新着記事一覧を表示。 デモ トレンド Googleのトレンドで見てみるとじわじわと人気が出てきているのがわかる。 backboneはいわずもがな、angularも直近だけ見ると落ち込んでいるように見えるが、reactはじわじわと伸びている。 https://www.google.co.jp/trends/explore#q=react.js%2C%20backbone.js%2C%20angular.js%2C%20vue.js&cmpt=q

ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して

It is to introduce the development process using the yeoman, in particular, angular. I am writing at the discretion of its own relationship of angular and Web components in the second half.

Riot.js 2.2 情報まとめ とりあえず、気付いたものをメモしていきます。随時更新。 本家 公式ドキュメント(英語) 公式ドキュメント(日本語) GitHub リポジトリ From React to Riot 2.0 - 背景説明のブログ記事 Gitter 公式フォーラム サンプル集(準備中) 開発情報 インストール riotはツールごとにリポジトリが分かれていません。 ブラウザ用のライブラリ コンパイラ CLIツール の3つが一緒くたになっています。各人のスタイルに合わせて、インストールしましょう。(追記・次のv2.3に向けて、サブモジュール化が進んでいます) ライブラリとして CDNから最新版。他のパターンはこちら。 コンパイラなし: https://cdn.jsdelivr.net/riot/2.2/riot.min.js コンパイラあり: https://cdn.jsdeli

Reactで消耗しているmizchiです。 とりあえず一通り動かしてみた。webpack上でtag-loader使ってtagを動的にコンパイルすると便利だった。 https://github.com/mizchi-sandbox/webpack-riot-skeleton Overview 軽量仮想DOM実装 Vue風の独自文法 riotが軽量なのは独自の文法に対してプリコンパイラを持っててパーサがランタイムから切り離されてることと、仮想DOM実装が本当に最低限で結構サボってるようにみえる。 仮想DOMの実装部分はここ https://github.com/muut/riotjs/blob/master/riot.js#L348-L413 一通り書いてみた結果、独自シンタックスが最大の特長で、イベントハンドラ周りで基本的にDOMべったりのコードを要求されるといった印象。 JSとHTMLを並

Help us understand the problem. What is going on with this article?

Emergencies wait for no one, which is why bad credit is available 24 hours a day, 7 days a week. Instead of waiting for your bank or credit union to submit your loan application, the online loan networks listed below can process your application in minutes. If you are eligible, you can choose from several […]

今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R

このAdvent Calendarについて 今年になって急に盛り上がってきたように感じるReact.jsですが、「ちょっと前まではAngular.jsって言ってたのに！」っていう人も多いと思うので、Advent Calendar形式で簡単に紹介していきたいと思います。 React.jsの重要な要素であるVirtualDOMについては別にAdevent Calendarがありますのでそちらも是非見てください。 ※既に↑のAdvent Calendarがあったため、これは1人で書くように作ったものなので書く人が誰もいなかったわけではないです。 React.jsについて なぜ盛り上がってきたのかは正直よくわかっていないのですが、個人的にはgithubのatomがパフォーマンス向上のためにReact.jsを使うことにしたという記事を見て興味を持つようになりました。 React.jsはFaceboo

server-side renderingとは文字どおりサーバーサイドでHTMLを生成してrendering出来るようにするものです。SinglePageApplicationのようなJavaScriptでDOMを組み立てるようなアプリケーションの場合、サーバーから返されるHTMLには空のdivだけがあってそこからJavaScriptを読み込んでtemplateを描画することになり、これには2点の問題点があります。 初期のロード時間 HTMLが返されてJavaScriptを評価してそこからtemplateの表示になるので、サーバーサイドからHTMLが返される場合と比べて当然時間が掛かります。なので別途ローディングを見せるなどの工夫が必要になります。 SEO 最近だとGoogleのクローラーがJavaScriptを解釈するようになったのでGoogleについては問題ないと言えるかもしれませんが

Captcha security check ectjs.com is for sale Please prove you're not a robot View Price Processing

JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで

Browserify を触ってみたメモ。 Browserify とは CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。 やりたいこと 複数の js ファイルの依存関係を記述したい 最終的に、依存関係を考慮した順番で、ひとつの js ファイルに結合したい 作りたいのは第三者のサイトに埋め込んでもらうスクリプト (サードパーティスクリプト

YoutubeとVimeoの検索結果のRSSをまとめてOPMLで取得できるサイトを作った | Web scratch で公開した Tech Video RSS Searcher はbrowserifyを使って作ったので、その辺の開発フローについての記事です。 browserify って何? browserify はNode.jsスタイルで書かれたモジュール(CommonJS)を ブラウザで利用できるように変換するコマンドラインツール(Nodeモジュール)となっています。 又、node.jsのCore Modulesのshimが用意されていて、 npmで公開されているnode.js向けのモジュールも一緒に変換してブラウザで動かすことが出来るようになっています。(普通に require で読みこめば勝手に変換されます) 原理的に無理だったり全てのモジュールが動くわけじゃないですが、 その辺の互

React.jsのserver-side レンダリングを試す React.js Tutorialではフロントエンドでの実例が用いられていた。 githubリポジトリ上には、React.jsを使ってDOM(Virtual DOM)をサーバサイド側で構築し、 フロントエンド側にはレンダリング結果を返す、というサンプルがある。 このサンプルを試用して react-bootstrapを使ったりGrunt 使ったりして 自分なりにReact.jsでのserver-sideレンダリングに対する理解を深めるため コードを書いてみよっかなと思った。 以下記録。 まずreact-server-exampleを試す をgit cloneし、動作確認をしてみた。 プロジェクトソースを手元に持ってくる

それほど新しい話題でもないが、FacebookがReact | A JavaScript library for building user interfacesというDOMを抽象化したようなView操作のライブラリをリリースした。 Githubが出してるエディタのAtomが実験的にReactを採用したり、Instagramが採用していたり、エディタでReactのシンタックスがサポートされ始めたり、海外では実際に使われはじめていて、実際に使ってみたら思いのほか使いやすかったので、簡単に使い方を書いていこうと思う。 まず、ReactにはJSXという、htmlをJS内で書ける言語がある。オプショナルなものだが、使ったほうがコードが綺麗になるので、この記事では使っていく。下記コードはEdit fiddle - JSFiddleなどでコンパイルなしにそのままテストできるので、適当にコピーしながら確

elm-lang/html : Html elm-lang/htmlパッケージは、ElmでHTMLを作るときの基本のパッケージになります。 HTMLのような自然な記述で書くことが出来ます。 使用例ハローワールド import Html exposing (div,text) main = div [] [text "Hello World"] Htmlライブラリはvirtual-dom（仮想DOMのライブラリ）をElm用にそのままラップしたものなので、仮想DOMの機能を使うことが出来ます。 クリックできるHTMLなど、イベント系を使うときはElm Architectureのドキュメントも参考にしてみてください。 使い方の参考になるよい作例として、Elm公式のexsampleページや、Elm公式のTODOリストevancz/elm-todomvcがあります。 パッケージのインストールコマンド

私はかつて自分はアーキテクトだと名乗ったことがあります。これを裏付けるため、今やウソだらけの複雑な話を設計しなくてはならなくなっているので、ある意味これは本当のことですね。冗談はさておき、2015年を目前としてJavaScriptコミュニティのアプリケーションアーキテクチャの状況について目を向けてみるのは有益なことだと思います。合成、関数型の境界、モジュラリティ、不変データ構造、CSPのチャネルと、その他に関連するいくつかのトピックについて書いてみたいと思います。 合成 アーキテクチャのレベルでは、JavaScriptで大規模なアプリケーションを作成する方法に関してここ数年で少なくとも一つの根本的な変更がありました。機械の細かい違いにより生み出される単一指向性の データバインディング、不変データ構造と、仮想DOM （どれも興味深い問題ですね）などを除けば、多くの開発者が一つのキーコンセプト

最近node-webkitアプリを書く時、何かしらのMV*やデータバインディングライブラリと言われるものを試しているのですが、floating-memo.appではRaynos/mercuryを使いました。 mercury は小さなモジュールを組み合わせたライブラリとも言えますが色々特徴的です。 完全にモジューラーな実装 Virtual DOM FRP ファイルサイズが小さめ モジューラーな実装とは何かというとmercuryのindex.jsを見ると面白い事が書かれています。 /* Pro tip: Don't require `mercury` itself. require and depend on all these modules directly! */ require("mercury") しないで、直接それぞれのモジュールを読み込んで使えるという事が書かれています。 (これ

—もはやOOP（オブジェクト指向プログラミング）は”クラウドモンスター”から私たちを守りきれない おそらくあなたは、”Clojure”、”Scala”、”Erlang”といった言葉や、”Javaにラムダ式が導入された”という話を聞いたことがあるでしょう。そしてそれらの言葉が”関数型プログラミング”と関連があるのをご存じかもしれません。プログラミングコミュニティに参加していれば、おそらく既にこのテーマが議題に上がっているでしょう。 Googleで”関数型プログラミング”を検索しても、目新しいものは何も見つかりません。言語の中で2番目に古い言語は、関数型プログラミングを利用しています。1950年代に登場した、Lispという言語です。では一体なぜ人々は、今になって関数型プログラミングに沸き立っているのでしょうか？　およそ60年も経っているのに？ 初期の頃、コンピュータは実に遅かった 信じられない

表示 こんな感じでHtmlモジュールに定義されている、divやらのhtml要素の第一引数にAttributesを、第二引数に子ノードを与える形でDOMを構築していきます。 この例では100x100のdiv(elmのElementの制約により、サイズ指定が必要。Window.dimensionsを使用して常に全画面にして使用出来るのでそれ程気にならない)の中にテキストノード"Hello!"を持つdivが構築されます。 例では静的なページですが、勿論Signalやclickなどのイベントを使用して動的なページを作ることも出来ます。 TheSeamau5/GraphicsEngine WebGLを使用して3Dグラフィックスを扱うためのハイレベルライブラリです。 johnpmayer/elm-linear-algebraも一緒に使うように設計されているので一緒にインストールするべきでしょう(elm

最近フロントエンドでfacebook/reactをずっと使っている。世界的には一部のエンジニアの間で流行っているのだが、国内だとqiitaのタグ等を見てもどうも少ない。みんなもっと使うべきだと思うので、宣伝かねて意見をまとめてみる。 複雑化するデータバインドに対する懸念 MVWのVに対して思いを馳せると、だいたい次のことに行き着く。すなわち、「ある構造体の入力に対して、必ず一意なビューを生成したい」 {items: [1, 2, 3]} を入力とすると、 1, 2, 3のli要素になってほしい。これは単純な例だから問題に成り得ないように見えるが、アプリケーション全体の状態を一つのjsonとして定義し、 そこから常に0から組み立てればアプリケーションの健全性が確保できると考えたことはないだろうか？ 現実の問題 UIのだいたいの状態は遷移で表現される。遷移の差分をプログラマが記述する。jQue

この記事は VirtualDOM Advent Calendar 2014 - Qiita のネタが切れた時にどこからか指定されるやつです。中の人なんであんまり行儀悪いことすると怒られるんだけどな！ やりたいこと UXとSEOのためにイニシャルビューはサーバーサイドで生成し、再描画時にクライアントで同じテンプレートから生成するも、一旦画面を捨てて再構築するのを避けたい。 具体的には、サーバーサイドで何かしらの方法(nodeやreact-railsを想定)で実行して生成されたReactのId付きのDOM React.renderToString(Component({})) して生成したreactId付きHTMLに対して、再描画せずにReactを適用できるようにする(イベント注入含む) 手法 reactのid付きDOMはこんなもの。 > React.renderToString(React.

新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか？　Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに比べ処理速度が極端に速いという結果が出ています。 elm-html とMercuryは、どちらも virtual-dom プロジェクトを基にしているので、パフォーマンスが優れています。この記事では、前半で“仮想DOM”とは何か、 純粋性 と 不変性 によっていかに処理速度が上がるかということについて詳しく検証します。この検証によって、なぜOm、Mercury、Elmがベンチマークでこのような素晴らしい数字を出したかが分かるでしょう。 パフォーマンスは人

追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative

virtual-domという、（その名の通り）仮想DOMの生成とdiffを行うシンプルなJavaScriptのライブラリがあります。 GitHubのexampleを見るとわかるのですが、このライブラリのみでも、シンプルな形で動的なビューを実現することができます。 このシンプルさがとても魅力的で、実際に使ってみたのですが、 分かったことをまとめたいと思います。 仮想DOMって？ Reactなどで以前から採用されていて、最近流行している感じの 仮想DOM ですが、 重い本物のDOMとは別に、仮想のDOM（ただのJSオブジェクトなので軽い）のツリーを構築する 仮想DOMの構築を状態が変更されるたびに行って、前回の仮想DOMとのdiffをとって実DOMに適用する という形で動的なビューの実現に利用されます。 仮想であるので、ブラウザ上だけではなくサーバーサイドのHTMLレンダリングにも使えます。