約 4,157,287 件
https://w.atwiki.jp/dotcom/pages/101.html
JavaScript?がエラーになった。。。 どこがいかんのかわからーん！な時にステキなデバッカ発見。 FireFoxのFirebug。アドオンなのでFireFox上で使いますですはい。 何ができるの？インストール方法 使い方 使い勝手 何ができるの？ こちらをご覧になってー http //sir2.jugem.jp/?eid=15 インストール方法 FireFoxを起動する。 FireFox上で下のURLからダウンロード。 http //www.getfirebug.com/ FireFoxの拡張機能ウインドウが開くので言われたとおりにインストール FireFoxの再起動を聞かれるので再起動！ 使い方 FireFoxを起動する。 メニューバーの「表示」→「Firebug」をチェック またはステータスバーを表示して右下の○の中にチェックマークってのがあるのでそれクリック。未使用時は○の中にマイナスマークかも？ ブラウザの下40%くらいがFirebugのウインドウになっちゃうよ あとは検証したいページを開いてJavaScriptを実行。 エラーのときはConsoleタブを見るとエラー箇所を教えてくれます。 エラー場所をクリックするとソースが表示されちゃう。 使い勝手 まだちょとしかやってないからわからない。。。
https://w.atwiki.jp/saicron/pages/67.html
Firebug Firefox Firebug 目次 Official 外部サイト Official FirebugResource - Wiki page top 外部サイト Firefox 3とFirebugで始めるJavaScript開発本連載では，この最新のFirefox 3と，JavaScript開発でのデファクトスタンダードとなりつつある，Firebugを組み合わせた開発手法について解説していきます。 Firebugクックブック #1最も使いやすいJavaScriptの実行環境であるFirebugは現代のコマンドラインです。 そろそろきっちりJavaScript - prototype.jsを読む(1)
https://w.atwiki.jp/saicron/pages/60.html
2011/03/11 10 41/ edit this_page tags (JavaScript Webプログラミング) JavaScript LiveScript Netscape Navigator 2.0 (Netscape Communications) 1995 JavaScript 1996 Internet Explorer 3.0に搭載 1997 通信に関する標準を策定する国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化 page top/ edit this page 目次 未分類 プログラミングリファレンス JavaScriptWeb Tools Tutorials実行 実行キュー 関数型プログラミング言語として Scope Closure tmp ひとめぐり サンプル 実装 DOM page top/ edit this page 未分類 Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009)ECMAScript Language Specification (3rd edition, December 1999) の邦訳 ECMAScript ウィキペディア プログラミング Firefoxの「ツール」→「エラーコンソール」で実行できる。 FirefoxのFirebugの「コンソール」で実行できる。 Aptanaで実行できる。 JavaScriptの()無し関数はやっぱりポインタ(f() → f)。 リファレンス MDN JavaScript Standard ECMA-262 ECMAScript Language Specification 5th edition (December 2009) MDN とほほのJavaScriptリファレンス JavaScriptリファレンス - JavaScriptist 一撃必殺JavaScript日本語リファレンス page top/ edit this page JavaScript EfficientJavaScript - Dev.Opera - 効率的な JavaScript JavaScriptの巧い書き方 JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 JavaScriptの実行キューのお勉強 javascriptは本当にシングルスレッドで実行されているけれど起こるsetTimeout/prompt現象 page top/ edit this page # Web Tools JS Bin JavaScriptオンラインエディタ JSLint The JavaScript Code Quality Tool page top/ edit this page Tutorials jQueryの基礎 実行 DOMの構築が済んだタイミングで実行する(画像の読み込みは終了していない)。 jQuery(document).ready(function(){ // jQuery or JavaScript のコード }); または、 $(document).ready(function(){ // jQuery or JavaScript のコード }); または、 $(function(){ // jQuery or JavaScript のコード }); jQuery関数($関数)は何度書いてもよい。 onLoadと同じタイミング(画像の読み込みを含めて全て終了後)に実行する場合。 $(window).load(function() { // jQuery or JavaScript のコード }); 実行キュー JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 IT戦記 JavaScriptのタイマー処理 setTimeoutとその活用 (function(){})() と function(){}() page top/ edit this page 関数型プログラミング言語として JavaScript の function は lambda かもしれない。 Functional Javascript エレガントな JavaScript を作成するための関数型プログラミングの使用 JavaScriptの巧い書き方 (名前空間) 24 wyas (名前空間) そろそろきっちりJavaScript マイコミジャーナル (関数リテラル/オブジェクト/prototypeチェーン/prototype.jsを読む) page top/ edit this page Scope JavaScript の変数とスコープ JavaScript のスコープに変数を動的に追加する JavaScriptクロージャを完全理解！スコープチェインを知る（前編） JavaScript でブロックスコープを実現する JavaScriptでthisスコープをコントロールする JavaScript のブロックスコープと名前空間 page top/ edit this page Closure JavaScript Closures 101- they're not magic 猿でもわかるクロージャ超入門 まとめ page top/ edit this page tmp prototype.jsを読む(1) Firebugクックブック #1 Firefox 3とFirebugで始めるJavaScript開発 Firebug page top/ edit this page ひとめぐり プログラマのためのJavaScript 初心者でも使えてプログラマでも困惑するJavaScript page top/ edit this page サンプル 新JavaScript例文辞典 JavaScriptテクニックブック page top/ edit this page 実装 JavaScriptは何で動くのか？ 各Webブラウザ +SpiderMonkey… What is SpiderMonkey? SpiderMonkey とは何か? SpiderMonkey は Mozilla の C による JavaScript 実装につけられたコードネームである。 +jslib… jslibs (SpiderMonkeyの拡張?) standalone JavaScript development runtime environment with general purpose native libraries +Rhino… Rhino JavaScript for Java Rhino はすべてが Java で記述された JavaScript のオープンソースな実装です。それは一般的には、Java アプリケーション環境へ組み込まれて、エンドユーザーによるスクリプトの記述が可能になります。J2SE 6 ではデフォルトの Java スクリプティングエンジンとして組み込まれています。 もっともお手軽な対話的JavaScript処理系 page top/ edit this page DOM The DOM and JavaScript - MDN JavaScript DOM リファレンス 文書オブジェクトモデル(DOM)第1水準 仕様書 Version 1.0. The DOM and JavaScript DOMから始めるJavaScriptモダン・スクリプティング JavaScriptでDOMを使う――オブジェクト指向入門の入門 page top/ edit this page { 2011/03/11 10 41/ edit this_page tags (JavaScript Webプログラミング)
https://w.atwiki.jp/javascriptteam/pages/13.html
勉強系 JavaScript例文辞典 ゼロから始める「JavaScriptゲームの作り方」入門 AJAXについて勉強しよう 最後の「Ajaxについて勉強しよう」の内容は使わないかもだから、参考程度に。 -- J (2010-11-24 02 59 51) 名前 コメント
https://w.atwiki.jp/sevenlives/pages/234.html
JavaScript【ジャバスクリプト】 読み：じゃばすくりぷと 英語：JavaScript 意味： Netscape Communicationsが開発したスクリプト言語?。 プロトタイプオブジェクト指向であり主な用途はwebブラウザ(クライアント側)で働く言語。 これによりクライアント側での動きのある柔軟なページが可能となった。 クライアント側で作用するためブラウザさえあれば簡単に動かせる。 当初はLiveScriptと呼ばれていたが当時話題のJava言語の名をつけ、JavaScriptと変更してしまった。Javaとは別の言語。 JavaScriptもオブジェクト指向であるがJavaやC++などのクラスベースのオブジェクト指向ではないためオブジェクト指向を使いこなすにはJavaScript用のプロトタイプベース・オブジェクト指向の理解が必要。実体はハッシュのようにシンプルでプロトタイプ・チェーンなど理解すれば、非常に柔軟な使い方ができます。 ブラウザやバージョンによって実装が微妙に違うためまた、最近の言語に多いエラー表示機能はないのでバグ処理が困難でした。しかしFirefoxのアドオンであるFirebugなどが開発されかなりその環境も大きく改善されています。 容易に書けるためセキュリティホールなどが発生しやすく、１度廃れてしまった経緯がある。 しかしGoogleによってJavaScriptを大いに活用したAjaxという使い方でフレキシブルなページが注目を浴び、一躍注目の言語に復活しました。 時代の変化やWebブラウザの独自機能などのため仕様がどんどん拡張、変更しており DOM、XMLHttpRequestからjQueryなどのライブラリの活用までトレンド変化の激しい言語だとも言えます。 2019年03月07日 ECMAScriptECMAScript 3? ECMAScript 4? ECMAScript 5? ECMAScript 6 ECMAScript 2016? ECMAScript 2017? JScript CoffieScript? Dart? JSS? ダイナミック言語? altJS Toy language? サンドボックス 同一出身ポリシー Dynamic HTML【DHTML】バリアントタイプ【variant type】 イベント・ハンドラ イベント・リスナ(JavaScript) ブックマークレット ロールオーバー ウィジェット ビヘイビア ActionScript? サーバーサイドJavaScript ユーザー・エージェント? クライアント・スニファ? HTA LiveConnect? 関数(JavaScript) スコープ(JavaScript)グローバル変数(JavaScript)? ローカル変数(JavaScript) グローバル・コード リテラル(JavaScript)?関数リテラル 配列リテラル オブジェクト・リテラル strictモード JsTestDriver? JavaScriptシェル? Signed Scripts? JSDoc? JsDoc Toolkit 控えめなJavaScript ■ プロトタイプベース・オブジェクト指向? プロパティ(JavaScript) メソッド(JavaScript)? オブジェクト(JavaScript)? コンストラクタ(JavaScript) for in 構文 プロトタイプ(JavaScript) オブジェクト・リテラル ラッパー・オブジェクト(JavaScript)? レキシカルスコープ スコープ・チェーン コンストラクタ・チェーン? ハッシュ? 匿名関数 高階関数 クロージャ(JavaScript) 変数オブジェクト? 関数オブジェクト 匿名オブジェクト? プロトタイプ・オブジェクト? ビルトイン・オブジェクト グローバル・オブジェクト ホストオ・ブジェクト? プロトタイプ・チェーン? 実行コンテキスト(JavaScript) Activation Object 暗黙の参照? ガーベージ・コレクション JSON DOM(JavaScript) 属性?DontEnum ReadOnly? DontDelete Internal? ■ 型 数値型(Number) 文字列型(String)? 論理型(Boolean)? オブジェクト型(Object)? 配列型(Array)? var? null undefine NaN Infinity? ■ スクリプト・エンジン(JavaScript)? SpiderMonkey ActionMonkey? TraceMonkey JaegerMonkey V8 Carakan? Futhark? Tamarin Rhino JavaScriptCore Chakra? ■ JavaScriptライブラリ prototype.js YUI Library jQuery JSAN? ■ JavaScriptフレームワーク GWT? Adobe Spry? Dojo Toolkit? Ext JS? AngularJS? Backbone.js React.js? Knockout.js? Ember.js? イベントドリブン イベントバブルアップ? XMLHttpRequest ■ クロスブラウザ Internet Explorerキオスクモード? Firefox Unobtrusive Scripting
https://w.atwiki.jp/sunday_notebook/pages/32.html
FireFoxのアドオンであるFireBugはJavaScriptの挙動を知る上でとっても便利なツールです。 私はJavaScriptの記述が苦手なだけにとてもお世話になってます。 ぜひ一度お試しあれ。 参考サイト 意外と知られていない機能が多い！？Firebugの使い方
https://w.atwiki.jp/media-pgm/pages/17.html
すばらしいものをみつけました。 javascript用のデバッガ。しかもお手軽に使えます。 firefoxには、firebugというデバッガがついているのですが、 IEでは使えない。 それをIEで使えるようにしたのがこの IEerbug です。 なんて読むんでしょうね。 アイヤーバグ？あいやー 使い方 上記リンクから「てっく煮」さんに飛び、 「使い方」というところを見てください。 まずはieerbug.zipをダウンロードです。 それを解凍すると、htmlや画像やjsファイルが出てきます。 それらのファイルと同じ階層に適当なhtmlを作ってみてください。 そして、 head ～ /head の間にこう書きます。おまじないみたいなもんです。 script src="ieerbug.js" /script これだけでieerbugが使えます。 エラーが出たときはちゃんとした日本語で教えてくれます（笑） さらに、コンソールにデバッグ表示やログ表示などをする機能もあるようです。 僕が便利だな～と思ったのはこれです。 console.debug(document); これをおまじないのように書いておくと、documentオブジェクトのプロパティ、メソッドが全部見えます。 「オブジェクトを指定してください」だとかの意味不明なエラーが出たときに、これを見て追いかけていくと、なるほどたしかにオブジェクトの指定が１つ抜けていた、ということがわかりました。 （document.id1.style・・・と書いてエラーになったのですが、ieerbugを見ると、documentの下にallというのがいて、その下にid1がありました。つまり、document.all.id1.style・・・という記述が正解とわかりました） よくわかんなかったけど？ はぁはぁ･･･駆け足で説明したので、きっとわからなかったかと思いますが、 とりあえずレッツトライですよ。 習うより慣れよです。 やっぱ人間、できるできないより、やるかやらないかですよ。 毎日やってりゃ下手なりにできるようになるもんです。
https://w.atwiki.jp/ochamemo/pages/13.html
はじめに 自分もなんとなくjavascripを扱ってきたくちで、そろそろjavascriptを本格的にやろうかなと。 この資料も昨日やっつけでつくったものなのでつっこみどころも多いです。 javascriptってなに？ 名前について java とはまったく関係ない。 nestscape者がjavaのブームにのっただけ。 もともとはLivescriptという名前。 現在はECMAScriptという名称で標準化されている。 簡単に始められる！ メモ帳とブラウザでできる！ javascript alert("aaa") 軽く見られがちだけど実は奥が深い！ ライブラリ 現在多くのライブラリが普及しているが、文法がなんだかそれぞれによって違う。 普及してるのはPrototype.jsというライブラリ。このソースの中に多くのクラスが含まれている。とりあえずソースを読むのが一番理解を深めるらしい。 でもソース読むにしても基本がわからないと！ 基本的なことを理解してないとモヤモヤ感がなくならず、なんとなく使うことになる。 そこでこの本！→] 関数の作り方 これだけです。 function hoge() { alert( hello! ) } hoge(); // hello! 無名関数というのもあります。 var hoge = function () { alert( hello! ) }; hoge(); // hello! var fuga = hoge; huga(); // hello! 変数 いきなり代入。これはグローバル変数となる。 hoge = 0; ローカルは？ x = 0; function hoge() { var x = 1; // varを宣言 alert(x); // 1 } alert(x); // 0 上書き注意！ x = 0; function hoge() { x = 1; alert(x); // 1 } alert(x); // 1が表示。 varを宣言しないと、グローバル変数とみなされる。 クラス定義はどうする？ コンストラクタを定義すればよい。コンストラクタとは関数定義のこと。 function Hoge(){}; で、これをnewしたらHogeオブジェクトのできあがり var hoge = new Hoge(); フィールドを定義したい場合は以下のようにthisをつけて代入すればよい var Hoge = function(){ this.field1 = 0; this.field2 = hoge ; }; メソッドはこんな感じ。 var Hoge = function(){ this.field1 = 0; this.mehod = function() {alert( fugaga! );} }; ↑でもこれだとメモリ効率が悪いよ。そこでプロトタイプ Hoge.prototyep.method = function() {alert( fugaga! );} クラスメソッドは？ Hoge.classMethod = function() {alert( classMethod! );} クラス変数は？ Hoge.classProperty = HOGE ; で最終的にはこうなる。 var Hoge = function(){ this.field1 = 0; this.field2 = hoge ; } Hoge.prototyep.method = function() {alert( fugaga! );} Hoge.classMethod = function() {alert( classMethod! );} Hoge.classProperty = HOGE ; このようにjavascriptでの定義は、最初にまとめて定義するのではなく、実行しながらプロパティを増やしていき、少しづつ肉付けしながら定義する。 いうなれば、雪だるまを転がしながらどんどん機能を追加していくような感じ。 プロトタイプってなに？ 雛形となるオブジェクトインスタンスのこと。 ようするにプロトタイプとはjavaでいうインスタンス（多分）。-プロトタイプベースオブジェクト指向とはつまりインスタンスベースクラス指向のこと。-javaのようにクラスの雛形をもとに静的にクラスを生成するのではなく、インスタンスをベースにクラスを量産するというイメージ。 プロトタイプの仕組み（プロトタイプチェーン） コンストラクトした時点では、prototypeは通常、ただの空オブジェクト。 まずオブジェクト自身のプロパティから、該当のプロパティ名を探索 なかった場合、オブジェクトのprototypeオブジェクトのプロパティの中から該当する名前のプロパティを探す。 それでもなければ、そのプロトタイプオブジェクトのprototypeから探索する。 最終的になにもプロパティを持たないprototypeになるまでこれを繰り返す。 見つからなければ、そこで代入になる。参照だったらundefinedのエラーになる これがプロトタイプチェーン。この仕組みを利用してクラスの継承が行われるのだけど、ちょっと複雑なので今回は割愛。 実はなんでもハッシュ javascriptのオブジェクトはハッシュ（連想配列）で表現できる image.width; image.height; image.draw(); これらのプロパティは、実は以下のようにアクセスできる！ image; image; image(); だから、こんな定義＆呼び出しもできる。 var image = {width 100, height 100, disp function(){alert("width "+this.width)}}; 実は、javascriptのオブジェクトとは連想配列なんです。 var o = new Object; これは下のように定義できるのです。なるほど！ var o = {}; ツールの紹介 alertで昔ながらのprintfデバッグでもいいけど、下記ツールを使ったほうが断然効率いいですよ。 FireFox FireBug 「firefox firebug」で検索 WebDeveloper 「firefox webdeveloper」で検索 IE 「InternetExplorer Developer」で検索
https://w.atwiki.jp/aias-jsstyleguide2/pages/17.html
JavaScriptのデータ型 JSDocへのデータ型の記述は、できるだけ具体的かつ正確に行ってください。我々のサポートする型のスタイルはEcmaScript 4 仕様に基づいています。 JavaScriptの型言語 ES4の提案にはJavaScriptのデータ型を定義する言語が含まれていました。この言語をJSDoc内で用い、関数パラメータや戻り値の型を表現します。 ES4提案の進展に伴い、その型言語も変化しています。Compilerは古い構文もサポートしていますが、現在それらは非推奨となっています。 構文名 構文 説明 非推奨の構文 Primitive Type JavaScriptに含まれる5種類のプリミティブ型 {null}, {undefined}, {boolean}, {number}, {string} シンプルな型名称 Instance Type {Object}Objectのインスタンスもしくはnull{Function}Functonのインスタンスもしくはnull{EventTarget}EventTargetインタフェースを実装するコンストラクタのインスタンスもしくはnull コンストラクタまたはインタフェースのインスタンスであることを表します。コンストラクタ関数は@cpnstructorJSDocタグによって定義されます。インタフェース関数は@interfaceJSDocタグによって定義されます。デフォルトで、Instance Typeはnullを許可します。このタイプはnullを許す唯一のものです。この表に含まれる他の構文はデフォルトでnullを許可しません。 Enum Type {goog.events.EventType}goog.events.EventTypeの列挙値で初期化されたオブジェクトリテラルのプロパティのどれか 列挙型の変数はオブジェクトリテラルもしくは他の列挙型変数の別名で、@enumJSDocタグがアノテートされていなければなりません。このオブジェクトリテラルのプロパティが、列挙値の実体となります。列挙型の構文についてはこちらで定義されています。注意：この型は、我々の型システムのうちES4仕様に含まれない数少ないもののひとつです。 Type Application {Array. string }文字列の配列{Object. string, number }キーが文字列、値が数値のオブジェクト 型引数のセットを付記し、型をパラメータ化します。考え方はJavaのジェネリクスによく似ています。 Type Union {(number|boolean)}数値または論理値 値の型がAまたはBであることを表します。この型が最上位の式で使われる場合、丸括弧は省略しても構いません。しかしそうでない場合は、曖昧さを避けるために丸括弧を付けてください。{number|boolean}{function() (number|boolean)} {(number,boolean)}, {(number||boolean)} Nullable Type {?number}数値またはNULL。 Unionの省略形で、何らかの型もしくはnullであることを表します。この型は糖衣構文です。 {number?} Non-nullable Type {!Object}Object型ですが、nullは許されません。 この型がnullを許容しないことを表します。殆どの場合、デフォルトでnullを許すInstance Typeに対して使用されます。 {Object!} Record Type {{myNum number, myObject}}型指定されたメンバを持つ無名オブジェクト 値が指定された型のメンバを持つオブジェクトであることを表します。左のケースでは、myNumは数値、myObjectはどの型でも取れるプロパティです。波括弧は構文の一部であることに注意してください。例えばArrayがlengthというプロパティを持つオブジェクトの配列であることを示すには、Array. {length} のように書きます。 Function Type {function(string, boolean)}2つの引数（文字列と論理値）を取り、戻り値が指定されていない関数。 関数を定義します。 Function Return Type {function() number}引数を取らず、数値を戻り値として返す関数。 関数の戻り値の型を定義します。 Function this Type {function(this goog.ui.Menu, string)}文字列の引数1つをとり、goog.ui.Menuのコンテキストで実行される関数。 関数のコンテキストの型を定義します。 Function new Type {function(new goog.ui.Menu, string)}文字列の引数を1つ取るコンストラクタ関数。 new キーワードと共にコールされるときにはgoog.ui.Menuのインスタンスを生成します。 コンストラクタによって作成される型を定義します。 Variable arguments {function(string, ...[number]) number}引数として文字列を1つと、可変個数の数値を取る関数。 関数に個数の変化する引数を定義します。 Variable arguments (in @param annotations) @param {...number} var_args可変個数の引数を取るようアノテートされた関数。 可変個数の引数を受け取れるようアノテートされた関数を定義します。 Function optional arguments {function(?string=, number=)}省略可能な、nullでもよい文字列型の引数と、省略可能な数値型の引数を取る関数。=は関数型の宣言の中でのみ使います。 関数の省略可能な引数を定義します。 Function optional arguments (in @param annotations) @param {number=} opt_argument数値型の省略可能なパラメータ。 省略可能な引数を受け取れるようアノテートされた関数を定義します。 The ALL Type {*} その変数がどのような型でも取れることを表します。 The UNKNOWN Type {?} その変数がどのような型でも取れ、Compilerはそれを使った型チェックを行ってはならないことを表します。 JavaScriptで使えるデータ型 型名の例 値の例 説明 number 11.0-51e5Math.PI Number new Number(true) Numberオブジェクト string Hello "World"String(42) 文字列値 String new String( Hello )new String(42) Stringオブジェクト boolean truefalseBoolean(0) 論理値 Boolean new Boolean(true) Booleanオブジェクト RegExp new RegExp( hello )/world/g Date new Datenew Date() null null undefined undefined void function f() { return;} 戻り値なし Array [ foo , 0.3, null][] 型指定のない配列 Array. number [11, 22, 33] 数値の配列 Array. Array. string [[ one , two , three ], [ foo , bar ]] 文字列の配列の配列 Object {}{foo abc , bar 123, baz null} Object. string { foo bar } 文字列の値を持つオブジェクト Object. number, string var obj = {};obj[1] = bar ; キーが数値で値が文字列のオブジェクト。JavaScriptではオブジェクトのキーは暗黙的に文字列に変換される点に注意してください。従ってobj[ 1 ] == obj[1]です。また for...in ループの中でもキーは常に文字列です。しかしCompilerはオブジェクトのキーをインデックス化する際、その型を識別します。 Function function(x, y) { return x * y;} Functionオブジェクト function(number, number) number function(x, y) { return x * y;} 関数 SomeClass /** @constructor */function SomeClass() {}new SomeClass(); SomeInterface /** @interface */function SomeInterface() {}SomeInterface.prototype.draw = function() {}; project.MyClass /** @constructor */project.MyClass = function () {}new project.MyClass() project.MyEnum /** @enum {string} */project.MyEnum = { /** 青色 */ BLUE #0000dd , /** 赤色 */ RED #dd0000 }; 列挙型列挙値に対するJSDocコメントは省略可能です。 Element document.createElement( div ) DOM要素 Node document.body.firstChild DOMノード HTMLInputElement htmlDocument.getElementsByTagName( input )[0] DOM要素の型を明示的に指定します。 型キャスト ある式のデータ型を型チェック機能が正確に推測できないケースでは、型キャストコメントを利用できます。型キャストコメントには@typeアノテーションでデータ型を示し、式は丸括弧で括ります。丸括弧は必須です。 /** @type {number} */ (x) そのパラメータ・プロパティは「Nullを許す」のか「省略できる」のか JavaScriptは型に厳格でない言語なので、関数パラメータやクラスプロパティにおける「nullを許す」、「省略できる」、「undefined」の微妙な違いを理解しておくことは非常に重要です。 クラスとインタフェースのインスタンスはデフォルトでnullを許します。例として、以下の宣言をみてください /** * 何かのクラス、何らかの値で初期化されます。 * @param {Object} value 何かの値。 * @constructor */ function MyClass(value) { /** * 何かの値。 * @type {Object} * @private */ this.myValue_ = value; } 上のコードはCompilerに対し、myValue_プロパティが値として持つのはオブジェクトかnullのどちらかだと伝えています。もし myValue_プロパティが決してnullとならないのなら、こう宣言されるべきです /** * 何かのクラス、nullでない何らかの値で初期化されます。 * @param {!Object} value 何かの値。 * @constructor */ function MyClass(value) { /** * 何かの値。 * @type {!Object} * @private */ this.myValue_ = value; } この場合、もしコードのどこかでMyClassがnull値で初期化されていることをCompilerが検出すると、Compilerから警告が発せられます。 省略されたパラメータはおそらくランタイムによってundefinedとして扱われます。それらがオブジェクトのプロパティに代入されるのであれば、プロパティもまたそれに応じて適切に宣言されていなければなりません /** * 何かのクラス、省略可能な何らかの値で初期化されます。 * @param {Object=} opt_value 何かの値（省略可）。 * @constructor */ function MyClass(value) { /** * 何かの値。 * @type {Object|undefined} * @private */ this.myValue_ = value; } 上のコードはCompilerに対し、myValue_の値はオブジェクトかnull、あるいはundefinedのままであると伝えています。 省略可能なパラメータopt_valueの型が{Object=}と宣言されており、{Object|undefined}ではないことに注意してください。それは、省略可能なパラメータが undefined でありうることが定義上明らかだからです。そのことを明示的に宣言しても不都合はありませんが、本来必要ないだけでなく、コードも読みにくくなってしまいます。 最後に、nullを許すことと省略可能であることは直交的な性質である点に注意してください。以下の4つの宣言は全て異なった意味を持っています /** * 4つの引数を取ります。そのうち2つはnullを許容し、2つは省略可能です。 * @param {!Object} nonNull 必須（undefinedは不可）、nullは不可。 * @param {Object} mayBeNull 必須（undefinedは不可）、nullでもよい。 * @param {!Object=} opt_nonNull 省略可 (undefinedでもよい)、しかし値があるなら、 * それはnullであってはならない! * @param {Object=} opt_mayBeNull 省略可 (undefinedでもよい)、nullでもよい。 */ function strangeButTrue(nonNull, mayBeNull, opt_nonNull, opt_mayBeNull) { // ... }; 型定義 時々、型の指定が複雑になってしまうことがあります。例えば、DOM要素のコンテンツを受け取る関数があるとしましょう /** * @param {string} tagName * @param {(string|Element|Text|Array. Element |Array. Text )} contents * @return {Element} */ goog.createElement = function(tagName, contents) { ... }; @typedefタグを使うと、よく使われるデータ型の組み合わせを1つの型として定義することができます。例えばこうです /** @typedef {(string|Element|Text|Array. Element |Array. Text )} */ goog.ElementContent; /** * @param {string} tagName * @param {goog.ElementContent} contents * @return {Element} */ goog.createElement = function(tagName, contents) { ... }; テンプレート型 Compilerが行うテンプレート型のサポートは限定的です。それは関数リテラル内のthisの型を、thisを指定する引数の型と値の有無から推測するだけです。 /** * @param {function(this T, ...)} fn * @param {T} thisObj * @param {...*} var_args * @template T */ goog.bind = function(fn, thisObj, var_args) { ... }; // おそらくプロパティが存在しないという警告が出力されます。 goog.bind(function() { this.someProperty; }, new SomeClass()); // thisがundefinedであるという警告が出力されます。 goog.bind(function() { this.someProperty; }); 列挙型 訳注：2.28版以降列挙型に関する以下の説明は削除されていますが、コーディングルールの理解には必要と考え記載します。 /** * 3つの状態を値にもつ列挙型。 * @enum {number} */ project.TriState = { TRUE 1, FALSE -1, MAYBE 0 }; 列挙型は有効なデータ型の1つである点に注意して下さい。列挙型はパラメータの型指定などに使用できます。 /** * プロジェクトの状態を設定します。 * @param {project.TriState} state 新しいプロジェクトの状態 */ project.setState = function(state) { // ... };
https://w.atwiki.jp/aias-jsstyleguide2/pages/13.html
JavaScriptの言語仕様に関するルール 各項目の左側にある三角ボタンで、詳細情報の表示・非表示を切り替えられます。また下のボタンを使うと全項目を一度に変更することができます。 全て切り替える var 常に、varと共に変数を宣言します。 varの指定がない場合、変数はグローバルコンテキストに置かれ、既存の値を上書きする可能性があります。またもし宣言そのものがなければ、その変数のスコープがどこにあるのか分かりにくくなります（その変数はローカルスコープと同じように、DocumentやWindowの中に存在していてもよいのです）。従って常にvarと共に変数を宣言してください。 定数 定数値にはNAMES_LIKE_THISのような名前をつけます。 変数やプロパティの参照先が固定されている（上書きできない）ことを示すには、@constを使います。 Internet Explorerがサポートしないconst キーワードは決して使いません。 定数値 ある値を一定で変化しないものとして扱いたい場合、名前をCONSTANT_VALUE_CASE.ALL_CAPSのように全て大文字にし、さらに@constによって上書きできないことを示してください。 プリミティブ型（number、string、boolean）はもともと定数値です。 オブジェクトの不変性の判断は、より主観的です － 観察可能な状態変化が起きていない場合のみ、オブジェクトは不変とみなされるべきです。ただしCompilerはこの考え方を強制しません。 （変数・プロパティへの）定数ポインタ 変数やプロパティに付けられた@constアノテーションは、それらを上書きできないことを表します。この規則はCompilerによるビルド時に強制されます。またこの動作はconst キーワードとも矛盾しません。（Internet Explorerがサポートしないため、constキーワードは使いませんが。） メソッドに付けられた@constアノテーションは、サブクラスがそのメソッドをオーバーライドできないことを表します。 コンストラクタに付けられた@constアノテーションは、そのクラスをサブクラス化できないことを表します。（Javaにおける@finalと同じです） 例 @constは、（CONSTANT_VALUES_CASE形式の名前のように）変数の値そのものが一定であることを必ずしも意味しません。一方CONSTANT_VALUES_CASE形式の名前は@constの示す内容を内包しています。 /** * ミリ秒単位のリクエストタイムアウト時間 * @type {number} */ goog.example.TIMEOUT_IN_MILLISECONDS = 60; 大文字だけの名前は@constの内容を含むため、この秒数は定数です。値の上書きはできません。 オープンソースのコンパイラは@constがついていないシンボルの上書きを許容すると思われます。 /** * 文字列を返すURLのマップ * @const */ MyClass.fetchedUrlCache_ = new goog.structs.Map(); /** * サブクラス化できないクラス * @const * @constructor */ sloth.MyFinalClass = function() {}; このケースではプロパティ値であるオブジェクトは上書きされませんが、オブジェクトの値は頻繁に変化し一定ではありません。（このため名前には大文字ではなくキャメルケースが使われています） セミコロン 常にセミコロンを使います。 暗黙的なセミコロンの挿入に依存することは、微妙な、デバッグしにくい問題を引き起こします。もっと良い方法を選びましょう。 次のコードのセミコロンの無い箇所は、その危険性を示す典型的な例です // 1. MyClass.prototype.myMethod = function() { return 42; } // ここにはセミコロンがありません。 (function() { // ローカルスコープを生成する関数の中に書かれた初期化処理。 })(); var x = { i 1, j 2 } // ここにはセミコロンがありません。 // 2. Internet ExplorerかFirefoxかによって処理を振り分けます。 // こんなコードは書かないとは思いますが、とりあえずお許しを。 [ffVersion, ieVersion][isIE](); var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // ここにはセミコロンがありません。 // 3. bash風の条件分岐。 -1 == resultOfOperation() || die(); 何が起きるか？ JavaScriptエラー － 先ず、42を返す関数が2番目の関数を引数として実行されます。次に42が "コール" され、数字なのでエラーが発生します。 x[ffVersion, ieVersion][isIE]()を実行しようとしたランタイムから、おそらく undefined にはそのようなプロパティはありません という風なエラーが返されます。 配列マイナス1はNaNとなり、NaNはどんな値とも一致しないため必ずdie()が呼び出されます（たとえresultOfOperation()の戻り値がNaNだったとしても）。THINGS_TO_EATにはdie()の戻り値が代入されます。 なぜ？ その存在が安全に推測される場合を除き、JavaScriptは文（statement）の末尾にセミコロンを要求します。上の各例では、関数宣言、オブジェクト、配列リテラルは１つの文の内側にいると見なされています。閉じ括弧は文の終了を表すには不十分です。JavaScriptは中置演算子（＋、－など）や括弧では決して文を終了させません。 このことは本当に人々を驚かせます。従って文の末尾は確実にセミコロンで終わらせるべきです。 セミコロンと関数について 関数式の後ろにはセミコロンを付けますが、関数宣言の後ろには付けません。その違いを示す非常に分かりやすい例がこれです var foo = function() { return true; }; // ここにはセミコロンを付けます function foo() { return true; } // ここにはセミコロンを付けません ネストされた関数 使えます。 ネストされた関数は、例えば継続（continuation）の生成やヘルパー関数の隠蔽を行う際に、とても役立ちます。遠慮なく使いましょう。 ブロック内での関数宣言 使わないでください。 次のように書いてはいけません if (x) { function foo() {} } ほとんどのスクリプトエンジンはブロック内での関数宣言をサポートしていますが、それはECMAScript（ECMA-262,13及び14項を参照）の仕様には含まれていません。各エンジンの実装は、互いの間でも将来のECMAScriptに対しても、一貫性が保証されていません。ECMAScriptは関数の宣言をスクリプトのトップレベルか関数内のスコープでのみ許しています。代わりに変数へ関数を代入すれば、ブロック内でも関数を定義することが可能です if (x) { var foo = function() {}; } 例外 使えます。 もし自明でない何かを行うのであれば（アプリケーション開発フレームワークの利用など）、基本的に例外は避けられません。使いましょう。 独自の例外 使えます。 独自の例外を使わない場合、何かの値を返す関数が更にエラー情報も返そうとすると、その方法はトリッキーかつエレガントでないものになりそうです。戻り値をエラー情報への参照にするか、あるいはエラー情報をメンバに持つオブジェクトに変えることになるでしょう。これらは本質的に、原始的な例外ハンドリングのハックと言えます。必要であればどんどん独自の例外を使ってください。 標準機能 標準機能は非標準の機能よりも常に優先されます。 移植性と互換性を最大化するため、常に標準化された機能の方を選択してください。（例えばstring[3]ではなく string.charAt(3)を、DOM要素へのアクセスには特定のアプリケーションが提供する簡略化された機能ではなく、DOMの標準機能を使います） プリミティブ型のラッパーオブジェクト 使わないでください。 プリミティブ型のラッパーオブジェクトは使う理由がないだけでなく、危険ですらあります var x = new Boolean(false); if (x) { alert( hi ); // hi と表示されます。 } このようにしてはいけません！ ただし、型のキャストに使うのは全く問題ありません var x = Boolean(0); if (x) { alert( hi ); // これは決してアラートされません。 } typeof Boolean(0) == boolean ; typeof new Boolean(0) == object ; これは何らかのデータを数値、文字列、論理値に変換するにはとても良い方法です。 多段階のプロトタイプ階層 好ましくありません。 多段階のプロトタイプ階層はJavaScriptが実装する継承手法です。ユーザ定義クラス D のプロトタイプを別のユーザ定義クラス B にすると多段階の階層構造が作れます。しかしこれらの階層構造を正しく把握しておくのは、最初の状態と比べるとかなり難しいことです。 このため、継承にはClosure Libraryのgoog.inherits()のようなライブラリ関数を使うのが最善です。 function D() { goog.base(this) } goog.inherits(D, B); D.prototype.method = function() { ... }; メソッドとプロパティの定義 /** @constructor */ function SomeConstructor() { this.someProperty = 1; } Foo.prototype.someMethod = function() { ... }; "new"によって生成されるオブジェクトにメソッドやプロパティを付け加えるにはいくつかの方法がありますが、メソッドではこのスタイルが推奨されます Foo.prototype.bar = function() { /* ... */ }; その他のプロパティでは、コンストラクタの中で初期化を行うスタイルが推奨されます /** @constructor */ function Foo() { this.bar = value; } なぜ？ 現在のJavaScriptエンジンは、オブジェクトをその「形状」に基いて最適化します。プロパティの追加（プロトタイプに設定された値のオーバーライドも含まれます）はオブジェクトの形状を変化させ、パフォーマンスの低下をもたらします。 delete より好ましいのは this.foo = null の方です。 Foo.prototype.dispose = function() { delete this.property_; }; ではなく、こう書きましょう Foo.prototype.dispose = function() { this.property_ = null; }; 現代のJavaScriptエンジンにおいて、プロパティの数を増減させる処理は、値の再割り当てに比べはるかに低速です。次の場合を除き、deleteキーワードは避けるべきです。 プロパティ名をキーとする反復処理を行なっており、そのキーを削除する必要があるとき if (key in obj)の結果を変更する必要があるとき クロージャ 使えます、しかし慎重に。 クロージャを作成できる能力は、おそらく最も役に立つ、しかししばしば見落とされているJSの特長です。クロージャの動作についての良い解説はこちらをご覧ください。 しかし1つ覚えておいて欲しいのは、クロージャは自身を取り囲むスコープへのポインタを保持しているという点です。このためクロージャをDOM要素ヘ結びつけると、循環参照が発生しメモリリークとなることがあります。例えば次のコードです function foo(element, a, b) { element.onclick = function() { /* a と b を使う */ }; } クロージャ関数は element、a、bへの参照を持っています。elementを使わないとしてもです。elementもまたクロージャへの参照を保持しており、そこでガーベジコレクションが回収できない循環ができてしまっています。この状況では、コードは次のように構成されるべきです function foo(element, a, b) { element.onclick = bar(a, b); } function bar(a, b) { return function() { /* a と b を使う */ }; } eval() コードローダまたはREPL(Read-eval-print loop)にのみ使います。 eval()はセマンティクスに混乱を引き起こします。またユーザの入力を含む文字列をeval()することは危険な行為です。たいていはもっと適切、明確、安全なコードの書き方が存在するため、通常その利用は許容されません。 JSONを用いたRPCの際、データの解釈にはeval()の代わりにJSON.parse()を使います。 以下のような結果を返すサーバがあるとします { "name" "Alice", "id" 31502, "email" "looking_glass@example.com" } var userInfo = eval(feed); var email = userInfo[ email ]; 配信データが悪意あるJavaScriptコードを含むものに改変されていたとして、eval()を使っていたらコードはそのまま実行されてしまうでしょう。 var userInfo = JSON.parse(feed); var email = userInfo[ email ]; JSON.parse()を使うと、（全ての実行可能なJavaScriptを含む）不正なJSONに対して例外が発生します。 with() {} 使わないでください。 withの使用はプログラムのセマンティクスを曇らせます。withで指定されたオブジェクトはローカル変数と衝突するようなプロパティを持てるため、プログラムの意図が大きく変えられてしまうおそれがあります。例えばこのコードでは何が起きるでしょうか？ with (foo) { var x = 3; return x; } 答えは「あらゆることが起きる」です。ローカル変数xはfooのプロパティに乗っ取られます。もしxがsetterだった場合、3の代入は他の多くのコードを実行させる原因となりえます。withを使ってはいけません。 this オブジェクトのコンストラクタとメソッド、クロージャの作成時にのみ使います。 thisのセマンティクスは扱いが難しく、場合によってその参照先はグローバルオブジェクト（ほとんどはこれです）、呼び出し元のスコープ（eval内）、DOMツリー内のノード（要素に追加されたHTMLイベントハンドラ内）、新しく生成されたオブジェクト（コンストラクタ内）、何か他のオブジェクト（call()またはapply()された関数内）と変化します。 thisは容易に間違いの原因になってしまうので、本当に必要な次の場面だけに使用を限定します。 コンストラクタの中 オブジェクトのメソッドの中（クロージャの作成時を含む） for-in ループ オブジェクト / マップ / ハッシュ内をキーによって走査する場合のみ使えます。 for-inループはしばしば 配列（Array）内の要素をループ処理するという、間違った使い方をされています。for-inループは 0からlength-1までをループするのではなく、オブジェクトとそのプロトタイプチェーンに存在するキーを走査するものです。従ってそのような使い方はエラーを起こしがちです。失敗例をいくつか示します function printArray(arr) { for (var key in arr) { print(arr[key]); } } printArray([0,1,2,3]); // これは動作します。 var a = new Array(10); printArray(a); // これは正しくありません。 a = document.getElementsByTagName( * ); printArray(a); // これは正しくありません。 a = [0,1,2,3]; a.buhu = wine ; printArray(a); // これも正しくありません。 a = new Array; a[3] = 3; printArray(a); // これも正しくありません。 配列のループには必ず通常のfor文を使ってください。 function printArray(arr) { var l = arr.length; for (var i = 0; i l; i++) { print(arr[i]); } } 連想配列 決してArrayをマップ / ハッシュ / 連想配列として使わないでください。 Arrayを連想配列として使うことは許されていません..もっと正確に言えば、数字インデックス以外で配列要素にアクセスすることは許されていません。もしマップやハッシュが必要なのであれば、Arrayの代わりにObjectを使いましょう。実際、連想配列に求められている機能はArrayではなくObjectに実装されており、ArrayはただObjectを拡張しているに過ぎません（その他のJSの全てのオブジェクト、つまり Date、RegExp、Stringなども同様です）。 複数行の文字列リテラル 使わないでください。 このような書き方は禁止です var myString = A rather long string of English text, an error message \ actually that just keeps going and going -- an error \ message to make the Energizer bunny blush (right through \ those Schwarzenegger shades)! Where was I? Oh yes, \ you\ ve got an error and all the extraneous whitespace is \ just gravy. Have a nice day. ; 各行の先頭にある空白はコンパイル時にも安全に取り除かれることはなく、バックスラッシュ（\）の後ろの空白は分かりにくいエラーをもたらします。またこの記法はほとんどのエンジンでサポートされているとはいえ、ECMAScriptの標準ではありません。 代わりに、文字列の結合を使ってください var myString = A rather long string of English text, an error message + actually that just keeps going and going -- an error + message to make the Energizer bunny blush (right through + those Schwarzenegger shades)! Where was I? Oh yes, + you\ ve got an error and all the extraneous whitespace is + just gravy. Have a nice day. ; 配列リテラルとオブジェクトリテラル 使えます。 ArrayとObjectのコンストラクタではなく、配列リテラルとオブジェクトリテラルを使って下さい。 Arrayコンストラクタの引数はエラーの原因になりがちです // 配列の長さは3。 var a1 = new Array(x1, x2, x3); // 配列の長さは2。 var a2 = new Array(x1, x2); // もし x1 が自然数であれば、配列の長さは x1 になります。 // もし x1 が数値でかつ自然数でなければ、例外が発生します。 // それ以外なら、配列は x1 を値とする長さ1の配列になります。 var a3 = new Array(x1); // 配列の長さは0。 var a4 = new Array(); このため、誰かが引数の数を2つから1つに変更すると、その配列の長さは想定と合わなくなる可能性があります。 これらの奇妙な事例は、より可読性の高い配列リテラルを使用することで避けられます var a = [x1, x2, x3]; var a2 = [x1, x2]; var a3 = [x1]; var a4 = []; Objectコストラクタには同じ問題はありませんが、可読性と一貫性の面からオブジェクトリテラルを使うべきです var o = new Object(); var o2 = new Object(); o2.a = 0; o2.b = 1; o2.c = 2; o2[ strange key ] = 3; 上は、こう書かれるべきです var o = {}; var o2 = { a 0, b 1, c 2, strange key 3 }; 組込みオブジェクトのプロトタイプの書き換え しないでください。 Object.prototypeやArray.prototypeのような組込みオブジェクトのプロトタイプを書き換えることは、固く禁じます。同じ組込みであってもFunction.prototypeなどはそれほど危険ではありませんが、それでもデバッグの難しい問題を引き起こす可能性があります。よって書き換えは避けるべきです。 Internet Explorerの条件付きコメント 使わないでください。 これは禁止です var f = function () { /*@cc_on if (@_jscript) { return 2* @*/ 3; /*@ } @*/ }; 条件付きコメントはライタイムのJavaScriptシンタックス・ツリーを改変してしまうので、ツールによる自動化の妨げになります。