Monthly Archives: April 2014

JavaScript:これで脱初心者!クラスの定義と使用方法を分かりやすく説明

最近はどんな小さなアイデアも JavaScript でとりあえず形にするように心がけています。 今回は JavaScript でクラス(のようなもの)を定義する方法を整理してみました。なぜクラスではなく「のようなもの」であるかも説明していきたいと思います。 オブジェクトリテラルでクラスを定義する クラスとは、特定のメソッドとメンバ変数を持つオブジェクトのことです。 JavaScript での単純なクラスの定義は、オブジェクトリテラルを使用しオブジェクトを定義するもので、これはよく目にするパターンだと思います。 クラスの概念とオブジェクトリテラルでの定義 新しいオブジェクトを生成したい場合には、上記の sample を プロトタイプ とすることで実現が可能です。(※プロトタイプについては後述します) コンストラクタでクラスを定義する オブジェクトリテラルではなく、Java や C++ 等のクラスベースでのオブジェクト指向のようにクラスを定義する場合は以下のようになります。 クラスの定義とインスタンスの生成 一見ただの関数定義ですが、クラスなので頭文字を大文字にします。インスタンスの生成には new を使用します。関数内に return を使用してはいけません。その理由は後述します。 コンストラクタと引数の受け渡し そもそも JavaScript にクラスの概念はありません。実は先ほどクラスとして定義したものはコンストラクタです。 コンストラクタとは、インスタンスが生成されたときに実行される関数のことで、それをここではクラスと呼んでいます。コンストラクタは関数なので引数で値を渡すことができます。 メンバ変数の定義とアクセス メンバ変数は this キーワードを使って定義し、インスタンスから . (ドット)でアクセスします。少しクラス感が出てきました(笑) new を使用しインスタンスを生成したとき、JavaScript では暗黙的に関数内で以下ような2行が追加されています。this キーワードを使用しメンバ変数を定義することや、先ほどのreturn を使用してはいけない理由は、return を別のオブジェクトで定義すれば this がリターンされなくなるためです。 インスタンスメソッドの定義と問題点 メンバ変数に無名関数として処理を代入すれば、インスタンスメソッドとして機能します。 ここではメンバ変数へ値を引き渡すセッターメソッドと、メンバ変数を取得するゲッターメソッドを定義します。 ただしこの場合、インスタンスが生成される度にインスタンスメソッドが保持され、メモリの領域を圧迫します。この問題は次に説明する prototype で解決されます。 prototype について prototype とは、関数オブジェクトが定義された時点で自動的に作成されるメンバ変数です。その prototype は空オブジェクトへの参照を保持しています。インスタンス内に存在しないメンバ変数が参照された場合、prototype へ値を探しに行きます。このことから、prototype プロパティは自分の親への参照のような存在と考えることが出来ます。 次の例ではクラスの中身は空ですが、 prototype に対し show プロパティを定義することで、インスタンス sample から show を呼び出しています。prototype は SampleClass クラスの親のような存在なので、prototype 自身にプロパティを定義すれば、SampleClass のインスタンスである sample からも show を呼び出すことが出来ます。 クラス(コンストラクタ)とプロトタイプの使用例 先ほどのメンバ変数へ値を引き渡すセッターメソッドと、メンバ変数を取得するゲッターメソッドを連想配列にし prototype により書き換えると次のようになります。 こうすることでインスタンスが生成される度にインスタンスメソッドが保持されることもなく、クラスのメンバ変数を利用した関数をインスタンスごとに持たせる必要がありません。 JavaScript のクラス定義のまとめ ここで説明したパターンが全てではありませんが、prototype に汎用的な関数を定義し、関数以外の変数はメンバ変数としてクラス内に定義すればいいかと思います。 まとめ Objective-C、C# のようなクラスベースのオブジェクト指向言語と、JavaScript のプロトタイプベースのオブジェクト指向の違いを見てみるとあらためて JavaScript の柔軟さが理解できます。 枯れた技術の水平思考とは JavaScript のことを指すのかも知れません。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:jQueryでHTMLのデフォルト動作(default behavior)を抑止する

HTML5/CSS3/JavaScript は従来のWebページ作成のためだけの仕様ではありません。 Webアプリケーションの開発時に、HTML固有の動作を別のメソッドに置き換えて処理しなければいけないようなとき、今回の preventDefault が必要になります。 更新履歴 [2014.04.17] HTMLサンプルの追加・コンテンツのレイアウトと誤植を修正しました。 jQueryでHTMLのデフォルトの動作(default behavior)を抑止する HTMLでのデフォルト動作(aタグやformのsubmitボタン等)を抑止したい場合には preventDefault() を呼び出す。 サンプルコード HTML JavaScript(jQuery) 次の「こちら」というテキストリンクはHTML sirochro.com のトップページへリンクしているが、クリックしてもページが遷移せず、アラートでリンク先が表示される。 結果 sirochro.comトップページはこちらです。 まとめ preventDafault は ajax 処理のときや form 送信を一旦フロントで処理したい場合は必要な組み込みメソッドです。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

お知らせ:第2弾のiPhoneアプリ制作について

SmartScope のリリースから1年が過ぎてしまいましたが、sirochroの第2弾アプリの開発を開始しました。今度は無料ゲームアプリです。 現在アプリのモックアップを JavaScript で書いてテストを行っています。Webアプリとして iOS と Android への同時リリースも可能なのですが、効果や演出、実行速度等を考慮し、iOS専用アプリとして開発を進めようかと考えています。 第2弾のアプリ制作について 今のところゲームの基本ロジックは出来上がっているのですが、Objective-C への移植と肉付け作業に大半を費やすことになると思います。 アプリの名称 アプリ名はほぼ決定しているのですが、アプリ名だけで露骨に内容が分かってしまうので「sirochro無料ゲーム(仮称)」とします(笑) コンセプト 無料ゲームアプリで広告を表示。アプリ内課金はなし。ゲームのルールは説明不要かつシンプルなもので、効果・演出・ゲームレベルの設定にコストをかける予定。 ローカライズ対応 英語版・日本語版の2か国語に対応予定。演出上英語表記が適切だと判断している部分が多いため、ほぼ英語です。 リリーススケジュール 2014年6月下旬にベータ版完成、7月上旬にアプリ申請、7月中旬リリースを予定。 まとめ 自分の作りたいものと、第3者視点でのエンターテインメント性に関してコンセンサスがとれると判断したものに注力し、なるべく多くの人達が楽しめるアプリを作りたいと思っています。 アプリ制作の進捗状況は sirochro.com で報告していきますのでお楽しみに。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

HTML5:そろそろスッキリさせたい!CSS3 linear-gradient のベンダープレフィックス

CSS でグラデーションを描画する際に使用する linear-gradinet ですが、だいたいこのようなことになっているかと思います。(※IE6,7,8には対応していません) とりあえずこれらを、おまじないのように書いていればいいだろうと何年も放置したままだったので、一旦情報を整理して切り捨てるべき部分と、残していく部分の境界を決めたいと思います。 CSS3 linear-gradient のベンダープレフィックスについて 2つの-webkitプレフィックス 冒頭のサンプルコードを見て分かるように、グラデーション描画のための webkitベンダープレフィックス には -webkit-gradient() と -webkit-linear-gradient() の2つが存在します。 -webkit-gradient() のほうが古く、-webkit-linear-gradient() が新しいwebkitベンダープレフィックスとなります。 最終的にこれらのベンダープレフィックスは linear-gradient に統一されると思うのですが、 次にこれらのプレフィックスが各ブラウザの、どのバージョンに対応しているかをみてみます。 ブラウザごとの linear-gradient とベンダープレフィックスのサポート状況 IE IE10からサポート Chrome Chrome3-9:-webkit-gradient()で先行実装 Chrome10-25:-webkit-linear-gradient()で先行実装 Chrome26以降:linear-gradient をサポート Firefox Firefox3.6-15:-moz-のベンダー識別子で先行実装 Firefox16(2012.10リリース)以降:linear-gradient をサポート Safari safari4.0-5.0:-webkit-gradient()で先行実装 safari5.1から6.0:-webkit-linear-gradient()で先行実装 safari6.1, Safari7.0以降:linear-gradient をサポート Opera Opera11.1-12.0:-o-のベンダー識別子で先行実装 Opera12.1, Opera15以降(2013.7リリース):linear-gradient をサポート iOS iOS3.2-4.3:-webkit-gradient()で先行実装 iOS5.0-6.1:-webkit-linear-gradient()で先行実装 iOS7.0以降:linear-gradient をサポート Android Android2.1-3.0:-webkit-gradient()で先行実装 Android4.0以降:-webkit-linear-gradient()で先行実装 linear-gradient のサポートは未だなし 切り分けるポイント -moz-linear-gradient Firefox は早い段階で linear-gradient を実装していること、最近のシェア比率の低さから -moz-linear-gradient は必要なし。 -webkit-gradient Safari4.0-5.0、Chrome4.0-9.0、iOS4.0.4-5.0、Android 2.1-3.0等に対応するなら必要。バージョンのシェアが低いため切り捨てても問題ないが Android のことを考慮し保留。 -webkit-linear-gradient iOS はともかく Android のことを考えると linear-gradient がサポートされるまでは -webkit-linear-gradient に関しては保留。 -o-linear-gradient Opera に関しても Firefox 同様の考えから -o-linear-gradient は必要なし。 -ms-linear-gradient また、-ms-linear-gradient は対応するブラウザが現在存在しないこと、IE10以降で linear-gradient がサポートされたことから削除。 filter: filter: に関しては IE6-9 でグラデーション実現のために使用するものですが、filterを適用されたボックスは overflow:hidden となるため、子要素をはみ出すことができない、3色以上のグラデーションが効かない等の問題があるため、切り捨てます。さらばIE。 結論 以上のことから、CSS のソースコードは以下のようになります。これでいきましょう! まとめ 今更ですが、Chrome のバージョンを見るだけでも Google のブラウザに対する力の入れ具合が尋常ではないことが分かります。トップシェアを取るのにもそれなりの理由があるということですね。 Firefox も頑張って欲しいですが、こうなってくると難しいですね。かつての Netscape を思い出します。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:自然数から素数を判定するサンプルコード

コーディング中に自然数の素数判定が必要になり、関数を作成しました。 実際の動作確認が出来るサンプルと、ソースコードをメモをしておきます。 自然数から素数を判定する 数値(半角英数)を入力し「素数判定」ボタンをクリックして下さい。 数値入力: 出力結果 ここに結果が表示されます。 スクリプトの詳細 あまりに大きな自然数に対しては、効率のよい処理を追加しないと演算負荷が半端ないですが、とりあえずこれで素数の判定は行えます。 function isPrime(n) { if (n%2 == 0) return n == 2; if (n%3 == 0) return n == 3; var limit = Math.sqrt(n); for (var i=5, d=2; i

JavaScript:簡単!便利なセレクタ querySelector と querySelectorAll の使い方

DOM要素の取得には getElement系(getElementById、getElementsByTagName等)を使用することが多いと思いますが、今回はさらに簡単に要素を取得できる querySelector/querySelectorAll の使い方をメモ。 querySelector と querySelectorAll の使い方 概要 関数名・引数・戻り値は以下となります。 関数名 引数 戻り値 querySelector DOM String Element querySelectorAll DOM String Node List querySelector DOMで指定した要素を1つ取得します。 サンプルコードを実行すると、div要素内をクリックでクラス名をアラート表示します。 サンプルコード 結果 クリックでこのdivのクラス名をアラート表示 querySelectorAll querySelector は一つの要素しか取得できませんが、Allがつくと全ての要素を配列で取得してくれます。 サンプルコードを実行すると、リスト要素内をクリックで内部要素をアラート表示します。 サンプルコード 結果 menu1 menu2 menu3 まとめ querySelectorAll は一発で内部要素が配列化されるので、様々な場面で活躍しそうですね。どんどん使っていきましょう。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。