「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
JavaScriptの配列のパターン
JavaScriptの配列をどう解説するかを考えていて、配列って普段どういう風に使ってるけ?みたいなことを書き出してみました。 Arrayオブジェクト · Issue #49 · asciidwango/js-primer 皆さんは配列をどう使いますか? 追記: 次のページでこの記事をブラッシュアップした話をhttps://jsprimer.net/で公開しています。 配列 · JavaScriptの入門書 #jsprimer 配列の作成 配列の作成には配列リテラル（[]）を使います。 配列リテラルには初期値も指定できます。 var emptyArray = []; // 空の配列を作成 var array = [1, 2, 3]; // 値をもった配列を作成 Arrayオブジェクトをnew演算子でインスタンス化する方法は基本的には使いません。 こちらは配列リテラルとは異なり、初期値ではな
レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない
レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
JavaScriptの「this」は「4種類」？？ - Qiita
javascriptの「this」は「4種類」？？ この記事ではベースとなる４種類の「this」を紹介します。 実際は４種類ではないのですが、 このベースの４種類を理解できれば他もすぐに理解できます。 thisの４種類のパターン １：メソッド呼び出しパターン ２：関数呼び出しパターン ３：コンストラクタ呼び出しパターン ４：apply,call呼び出しパターン ここで重要なのは「呼び出し元」をみることです。 なぜなら「呼び出し元」に「this」は左右されるからです。 メソッド呼び出しパターン これはもう一番直感的にわかりやすいです。 説明はいらないんじゃないかという感じなのですが、 一応ソースを。。 //メソッド呼び出しパターン var myObject = { value: 10, show: function() { console.log(this.value); } } myObj
継承とプロトタイプチェーン - JavaScript | MDN
JavaScript のオブジェクトはプロパティ（自身のプロパティを指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。 メモ: ECMAScript 標準に従い、 someObject.[[Prototype]] という表記を someObject のプロトタイプを示すのに使用しています。内部スロット [[Prototype]] には Object.getPrototypeOf() と Object.setPrototypeOf() 関数でアクセスすることができます。これは、標準
関数 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
関数を理解すればクロージャは難しくない！｜もっこりJavaScript｜ANALOGIC（アナロジック）
クロージャとは クロージャの本質 なぜクロージャを使うのか？ まとめ JavaScriptを学んでいく過程で必ず耳にする単語「クロージャ」 すごく難しいものではないと思うのですが、どことなくつかみどころがない、うまく説明できない、そんな存在ではないでしょうか？ 私自身、正直なところクロージャについては「なんとなく使ってはいるが、使い方をうまく伝えられない」といった程度です。 これから先、クロージャについてモヤモヤしながら仕事をしていくのもどうかと思ったので、この機会に私もクロージャについて理解を深めるべく記事を書くことにしました。 クロージャは、それ自体が難しいというよりは、説明が難しいものだと思います。 そのため、ネットでクロージャのことを調べていくと、（もちろん大変参考になる情報も多いのですが）少し本質ではない部分について語られているものも多い気がします。 このエントリではクロージャの
即時関数のメリットと主な用途｜もっこりJavaScript｜ANALOGIC（アナロジック）
即時関数の構文 即時関数はスコープを汚染せずに新たなスコープを作成するための唯一の手段 即時関数が使われるケース まとめ JavaScriptには「即時関数」という構文があります。即時関数は関数を定義すると同時に実行するための構文で、この即時関数を使ってコードを書いたことのある方も多いのではないかと思います。 JavaScriptに慣れている方にとっては「何を今さら」といった書き出しかもしれませんが、私はこの即時関数を初めて知った時、その必要性がイマイチ見出せませんでした。それは、「関数を定義と同時に実行するのは分かるけど、別に普通に関数を定義して、その関数を呼び出せばいいじゃん」って思ったからです。 確かに、一度しか使われないような関数をいちいち名前付きで定義してそれを呼び出すというコードは冗長的かもしれません。そのような場合は即時関数を使った方がよりスマートなコードになるでしょう。です
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
戻り値で関数から値を返すreturnを今一度勉強しなおしてみた
JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強＆復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。 まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの？使いどころは？どうなるの？いろいろやってみた。 とりあえず、Firebugを使って色々入力してみることにします。 return; //SyntaxError いきなりreturnだけしてもエラーだよということですね。何かに値とか返すよ～って時に使うものとのこと。 それならってことで、関数の中に入れてみた。 function test(){ return; }; test(); //undefined でも、returnだけしても、何も返すものがないので、undefined。 じゃあ、trueってのをいれ
知らないと怖い「変数の巻き上げ」とは？｜もっこりJavaScript｜ANALOGIC（アナロジック）
概要 とりあえず問題 なぜこうなるのか？ まとめと予防策 JavaScriptには、他の言語ではあまり聞かない（あるいは存在しない）「変数の巻き上げ(hoisting)」という概念があります。これは（たぶん）JavaScript特有のもので、かつ重要なポイントです。 この「変数の巻き上げ」が原因でコードが思った通りの動作をしなかった場合、この概念を知らないと、いくらコードを見直しても問題を発見することができません。ドツボにはまります。 そういう意味でも、この「変数の巻き上げ」の概念をおさえておくことは重要です。 とりあえず問題 変数の巻き上げを説明するには、文章で説明するよりもコードを見てもらった方が理解できると思います。 まずは次のコードを見てください。 var myname = "global"; function func() { console.log(myname); //出力内
JavaScript - MDC
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
JavaScriptのオブジェクトという考え方について | taccuma note
JavaScriptで扱えるデータ型には文字列（strings)、数値（numbers）、真偽値（true or false）、undefined、null、配列（Array）など色々ありますが、オブジェクト（Objects）もそのデータ型の1つです。 オブジェクトというとちょっと分かりにくいですが、要するに「物」です。ドットインストールでは田口さんが「JavaScriptがあらかじめ用意してくれているよく使う便利な命令群、材料」だと言ってました。オブジェクトの後ろにあらかじめJavaScriptさんが用意してあるプロパティやメソッドをくっつければ色々便利なことがゴニョゴニョ出来るわけです。 JavaScriptに出てくる代表的なオブジェクトといえば・・・ 日付オブジェクト 文字列オブジェクト 数値オブジェクト などがありますね。 しかし、こういった出来合いのオブジェクトだけじゃなく、オブ
オブジェクト指向なJavaScriptプログラミングのススメ(1) | ゆっくりと…
どちらも物事を的確に捉えようと努力することに変わりはありません。現在ではオブジェクト指向の方に軍配が上がるわけですが、そもそも問題領域を構造化して捉えようというアプローチは、人間の論理的な思考にとって自然な事ですし、歴史的に見ても、構造化分析・設計の手法は一定の成果を上げてきたといえるでしょう。 しかし、システムの規模と量の拡大に伴い、構造化分析・設計手法には次のような問題点が出てきました。 検証が困難、バグがなくならない 典型的にはデータフローやフローチャートを用い、次々に変わり行く様をモデリングするため、 複雑になればやがて人間には追跡が困難となります。さらに仕様変更が加われば、予期せぬバグ が発生するのも仕方のないことでしょう。 再利用できる範囲が非常に狭い 上位のプロセスが下位のプロセスを手続き的に呼び出すため、構造的に上位が下位に依存します。 再利用できるのは最下位の、それ以上依
5種類の .length（JavaScript おれおれ Advent Calendar 2011 – 11日目） | Ginpen.com
JavaScript おれおれ Advent Calendar 2011 – 11日目 オブジェクトによりちょっとずつ意味が違います。 配列 文字列 関数 引数 一般 配列の .length これはご存知ですよね？ 一般に .lengthといえばこれです。 配列の要素数を得られます。また設定する事もできます。 配列の .lengthは代入できる（JavaScript おれおれ Advent Calendar 2011 – 10日目） 文字列の .length 文字列の長さを得られます。バイト数ではなく（Unicodeでの）文字数である点に注意してください。 例えば「あ」等日本語はしばしば「2バイト文字」という表現が用いられてきましたが、Unicodeではあくまで「1文字」と数えます。（ちなみに3バイトだったり4バイトだったりするみたいです。） また、JavaScriptの文字列は不変である
JavaScript初心者脱却への道のりを考える - Qiita
最も誤解されているプログラム言語として名高いJavaScriptの誤解を解きつつ、中級者（プログラム開発においてある程度戦力として計算できる）になるためには何から抑えればいんだろう、というのを考えた記録とリンク集です。 考えたというか、自分が勉強中です。 ※追記 KENJUさんが完全に上位互換な内容の投稿を公開されていましたので紹介。 中上級者になるためのJavaScript【知識編】 対象 何かしらのプログラム言語は書ける 多少JavaScriptを書いたことはあれど、言語の仕様はよく知らない レベルの基準 中級ってどんな人なのさ？ JavaScriptの業務スキルレベル 判別表 （５段階） あなたはJavaScriptを知らない JavaScriptでよく使われるクロージャやプロトタイプの考え方を理解すること 代表的なライブラリ（jQueryとか）が使えること、最近ならNode.jsな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PixiJS v4
anime.js
JavaScriptのプロトタイプからオブジェクト指向を学ぶ - Qiita
