もっこりJavaScript(JavaScript Tips)

[Knockout.js基本編]View側での関数の使い方まとめ

2014年06月25日

カテゴリー:

Knockout.jsでは、View(HTML)側のバインディングに対してViewModelオブジェクトのプロパティだけではなく、JavaScriptの関数を用いることもできます。例えばtextバインディングに関数の実行結果を渡したり、clickバインディングにイベントハンドラを関連付けたりすることが可能です。

今回は、そのようなView側での関数の使い方についてまとめてみました。

[Knockout.js基本編]Viewから参照できるのはViewModelオブジェクトとグローバルスコープのみ(っぽい)

2014年06月03日

カテゴリー:

Knockout.jsではView(HTML)側からko.applyBindingsメソッドの引数として渡されるViewModelオブジェクトのプロパティやメソッドを参照することが可能ですが、場合によってはViewModelオブジェクトにはない(ViewModelオブジェクトの外部で定義されている)関数などを使いたくなるケースもあるかと思います。

そのような関数やプロパティをView側参照するにはどうすれば良いのでしょうか?そもそもView側からは何が参照可能なのか?という部分がよく分かっていなかったので、そのあたりを少し調べてみました。

[Knockout.js基本編]ko.observableメソッドでプロパティの変化をリアルタイムでDOMに反映させる

2014年04月16日

カテゴリー:

knockout.jsのobservableメソッドはViewModelオブジェクトのプロパティを監視可能な状態にします。これにより、監視対象のプロパティの値が更新された際に更新内容をView側に反映させることができるようになります。

[Knockout.js基本編]最低限の構成で「Hello World」してみる

2014年03月10日

カテゴリー:

前回はKnockout.jsの概要について書きましたが、今回はKnockout.jsの基本的な使い方の紹介と簡単なサンプルの作成をしてみます。

MVVMフレームワーク「Knockout.js」が超絶便利!!その概要と使いどころなどについて

2014年01月20日

カテゴリー:

ページの再読み込みではなくJavaScriptによるDOMのリフローを頻繁に行うようなWEBアプリケーションを作成する場合、アプリケーションの規模が大きくなるにつれHTMLマークアップとJavaScriptコードが随所で絡み合ってしまい、次第にコードのメンテナンスや機能拡張が困難になっていきます。そんな経験をしたことのある人は結構多いのではないでしょうか。

ここで紹介する「Knockout.js」はそんな問題を劇的に改善してくれるJavaScriptフレームワークです。

JavaScriptにおける命名規則の個人的まとめ

2014年01月07日

カテゴリー:

本エントリは、JavaScript全体に関わるコーディング規約ではなく、あくまでも「命名規則」に絞った内容になっています。自分用のまとめ色が強いエントリになっていますので、ここに書いたことが正解というわけではありませんが、少しでも皆さんの参考になれば幸いです。皆さんも色々な情報を参考にしながら、一番しっくりくるものを採用していくのが良いと思います。

ループ処理を最適化する

2013年10月31日

カテゴリー:

配列(またはコレクション)をループで処理する際、ループ中にこれらの要素の数が変わらないのであれば、要素の数(配列の長さ)をキャッシュさせた方が良いでしょう。特に、ループの対象がHTMLCollectionである場合は重要度が高いです。
実行環境(ブラウザ)や、JavaScriptフレームワークの使用により、これらのメリットが享受できない場合もありますが、デメリットは無いはずですので、ループの最適化が適用できるのであれば積極的に適用した方が良いと思います。

JSLintオプション考察「Google Closure」

2013年09月25日

カテゴリー:

「Google Closure」は、Googleの提供するJavaScriptライブラリである「Closure Library」の使用を許可するかどうかのオプションです。「Closure Library」を使用している場合に有効(true)にしておけば良いでしょう。それ以外の場合はデフォルト(false)のままで良いと思います。

JSLintオプション考察「messy white space」

2013年09月17日

カテゴリー:

「messy white space」は、JavaScriptコード中における空白文字(スペースやタブ)の取り扱いを厳密にチェックするかどうかのオプションです。デフォルト(false)では、正しく空白文字が使われていないと警告が表示されます。
このオプションが有効な場合、JavaScriptコード内の空白文字の扱いは正しいフォーマットで統一されていなければなりません。正しいフォーマットとは、半角スペースの挿入位置や、インデントが適切であるということです。
また、このオプションが有効な状態ではタブによるインデントが使用できなくなります。
タブをつかったインデントを許可するような個別オプションはありませんので、どうしてもインデントにタブを使用したければ、「messy white space」オプション自体を無効(true)にするか、JSLintではなく、別のチェックツールを使わなければなりません。

JSLintオプション考察「many var statements per function」

2013年09月11日

カテゴリー:

「many var statements per function」は、関数内に複数のvar文を使用することを許可するかどうかのオプションです。デフォルト(false)では、var文は関数につき1つまで許可され、2つ以上のvar文を用いると「Combine this with the previous ‘var’ statement.」という警告が表示されます。
複数の変数宣言を1つのvar文に集約する書き方を「単独varパターン」と言いますが、JSLintのデフォルト設定では、この単独varパターンを推奨(というか強制)しています。
単独varパターンを用いることに(メリットはあるものの)デメリットはありませんので、この強制に従うのが良いアプローチだと思います。ですので、このオプションはデフォルト(false)のままにしておいた方が良いでしょう。

2 / 512345