JavaScriptで文字列が含まれているかどうか判別する方法 javascriptにて特定の文字列が含まれているかどうか判別するにはいくつかの方法が存在します。 indexOfを使用する var str = 'marooon'; if ( str.indexOf('ooo') != -1) { //strにoooを含む場合の処理 } indexOfは、呼び出す String オブジェクト 中で、指定された値が最初に現れたインデックスを返します。値が見つからない場合は -1 を返すため、-1が返ってこなかった場合マッチしたことになります。 matchを使用する var str = 'marooon'; if ( str.match(/ooo/)) { //strにoooを含む場合の処理 } matchは正規表現を利用してマッチングを行います。

ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。 validateメソッド実装する前に、まずは判定を行うvalidation patternのメソッドをプロトタイプで実装します。 // 空かどうか AppModel.prototype.required = function(){ return this.val !== ""; } // 数値がnum以上かどうか AppModel.prototype.maxlength = function(){ return num >= this.val.length; } // 数値がnum以下かどうか AppModel.prototype.minlength = functio

JavaScriptでリアルタイムバリデーションを実装する その１Model（モデル）の実装 ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。 Modelの属性に値を追加する まずはModelを作成していきます。Modelの役割は以下の２つです。 Viewから値を受け取って、その値に対してバリデーションを実行する バリデーションの結果に応じてイベントを通知する まずはModelのコンストラクタを作成します。 function AppModel(attrs){ this.val = ""; } 次に前回とりあげたオブザーバの機能を追加します。 function AppModel(attrs){ this.val = ""

JavaScriptでリアルタイムバリデーションを実装する その１Model（モデル）の実装 ブレイクスルーJavaScriptのChapter-01を参考にリアルタイムで入力チェックしてくれるフォームを実装してみます。この書籍は解説がシンプルでわかりやすく、中級者を目指すJavaScript初級者におすすめです。 Modelの属性に値を追加する まずはModelを作成していきます。Modelの役割は以下の２つです。 Viewから値を受け取って、その値に対してバリデーションを実行する バリデーションの結果に応じてイベントを通知する まずはModelのコンストラクタを作成します。 function AppModel(attrs){ this.val = ""; } 次に前回とりあげたオブザーバの機能を追加します。 function AppModel(attrs){ this.val = ""

thisとは関数が呼び出された際に、その関数が属していたオブジェクトを指します。 function Person (name){ this.name = name; }; Person.prototype.sayName = function(){ console.log("hello "+ this.name); }; var taro = new Person("Taro"); taro.sayName(); // hello Taro; 上記のtaro.sayName()の場合saynameはtaroに属していることになるので、taroがこの関数内のthisになります。このときtaro.sayNameを渡しているのではなくsayNameに入っている関数オブジェクトを渡して実行しています。 また下記のように単なる関数呼び出しの際は、thisはグローバルオブジェクトを返します。 func

JavaScriptのデザインパターン オブザーバについて オブザーバとは？ オブザーバとはデザインパターンの一種で、JavaScriptではよく使用されるパターンの一つです。 オブザーバまたはリスナーと呼ばれる1つ以上のオブジェクトを、サブジェクトと呼ばれる対象オブジェクトが発生するイベントを観察するために登録します。 実装をサブジェクトとオブザーバに分けることでイベントの対象とイベントの発行が疎結合に出来ます。 オブザーバの定義 // コンストラクタの生成 function Observer(){ this.listeners[]; // 監視者の格納場所 } // this.listenersにイベントを通知したい関数を追加するメソッド Observer.prototype.add = function(func){ this.listeners.push(func) } // 指定

変数のスコープ JavaScriptのスコープについてで説明したようにJavaScriptには変数にアクセスできる範囲が存在します。クロージャでは関数の中に関数を定義して、その関数の中で変数を定義することで変数を隠蔽します。 カウンターの実装例を見てみましょう。 普通のカウンター var count = 0; function counter(){ count++; console.log(count); } counter(); // 1 counter(); // 2 クロージャを使ったカウンター function createCounter(){ var count = 0; return function(){ count++; console.log(count); } } var counter1 = createCounter(); counter1(); // 1 coun

入門 React.js その２ JSXについて ReactではJSXというHTMLによく似たマークアップ言語がオプションで使用できます。 JSXを使用することで以下の利点があります。 HTMLと同様の方法で要素のツリーをマークアップできる 意味のわかりやすいセマンティックな記述ができる アプリケーションの構造が可視化できる Reactの内部表現が抽象化される マークアップとそれを生成するコードが一箇所にまとまる 最後にJavaScriptに変換される JSXとは？ JSXはJavaScript XMLの略であり、Reactのコンポーネント内でマークアップ言語を記述するためのXML風のシンタックスです。 React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!') JSXでは、これは次のようになり

http://facebook.github.io/react/ React.jsは現在注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供します。 公式サイトには、特徴として以下の3つが挙げられています。 JUST THE UI MVCのViewであり、既存のアーキテクチャと容易に結合することができます。 VIRTUAL DOM DOMを模した中間オブジェクトをあらかじめ生成し、更新差分のみを本物のDOMに反映することにより、ハイパフォーマンスを実現します。 DATA FLOW データフローを一方向に保ち、データと画面（DOM）の対応をを宣言的に記述することによって、可読性を向上させます。 今後、詳しい使い方について一つずつ説明をしていきます。 次回はJSXについて。 入門 React.js その２ JSXについて 入門 React.js

ブラウザオブジェクトの最上位に位置しているのはWindowオブジェクトです。 Windowオブジェクトは、ウィンドウ操作のための機能だけでなく、ダイアログ表示やタイマーの設定などの機能を提供します。 タイマー機能を実装する setInterval / setTimeoutメソッド 一定時間が経過するごとに処理を実行したいというケースがあります。この場合に利用できるのがsetInterval、setTimeoutです。 それぞれの使用方法は下記の通り。 setIntervalは指定の時間間隔で処理が実行されます。 // setInterval // 変数 = window.setInterval(任意のコード, 任意の時間) // 1000ミリ秒ごとにlogに'test'が書き出されます。 window.onload = function(){ var timer = window.setI

ブラウザに表示されるドキュメントや画像、フォームなどブラウザを構成する各部品をブラウザオブジェクトといいます。ブラウザオブジェクトは階層構造になっており、最上位に位置しているのがWindowオブジェクトです。 ブラウザオブジェクトへのアクセス ブラウザオブジェクトへアクセスする際には、最上位に位置しているWindowオブジェクトを意識する必要はありません。配下にあるdocumentやhistory、locationなどにアクセスする際には省略することができます。 // 下記の記述は2つとも同じ結果 window.document.write("hello marooon!"); document.write("hello marooon!");

JavaScriptとイベント駆動型モデル（イベントドリブンモデル） JavaScriptはブラウザ上で起こる様々なイベントに応じて実行するコードを記述します。このプログラミングモデルのことをイベント駆動型モデル（イベントドリブンモデル）といいます。またイベントに対応してその処理内容を定義するコードをイベントハンドラと呼びます。

クラスの数が多くなってくるとオブジェクトの名前が競合する可能性が高くなります。そこでクラスライブラリを作成する場合には名前空間（パッケージ）の配下にまとめることが推奨されます。 名前空間の定義 名前空間を定義するには空のコンストラクタ関数を生成します。 var Marooon = function(){}; Marooon.Member = function(Name, Ruby){ this.name = Name; this.ruby = Ruby; ｝ Marooon.Member.prototype = { getName: function(){ // 処理 } } var mem = new Marooon.Member("java", "script"); console.log(mem.getName); 上記ではMarooon名前空間を定義しています。Marooonオブジ

JavaScriptのオブジェクト指向について JavaScriptはれっきとしたオブジェクト指向言語です。しかし、一般的なJavaやC++、C#などの言語とは根本的に異なっています。 JavaScriptにはインスタンス化、インスタンスという概念はありますが、クラスがなくプロトタイプ（ひな形）という概念が存在しています。 関数で簡単なクラスを定義してみる var Person = function(){}; // クラス var p = new Person(); // インスタンス化 コンストラクタで初期化 new演算子によってオブジェクトを生成することを想定した関数オブジェクトのことをコンストラクタと言います。 var Person = function(name, ruby){ this.name = name; this.ruby = ruby; this.getName = f