JavaScript の this は関数定義時に決まるのではなく、関数の呼び出し方によって変わることを解説します。
What's this -- いまさら聞けない JavaScript の this
JavaScript の this は関数定義時に決まるのではなく、関数の呼び出し方によって変わることを解説します。
superキーワードについて - JS.next
概要 長らく予約語であったsuperキーワードが、継承元の関数を呼ぶためのキーワードとして機能するようになった。 ２種類の使い方 superキーワードは場所によって２種類の使い方があり、それぞれ違う振る舞いをする。 １つ目はコンストラクタ内で使う場合、２つ目はメソッド内で使う場合である。 コンストラクタ内で使う場合 ここでいうコンストラクタとは、Class構文中のconstructorメソッドのことである。 この場合、「super()」や「new super」などとすることにより、その関数のプロトタイプである関数を呼ぶことができる。 そして、 呼び出し先が返した値が以後呼び出し元のthisとして使われる。 つまり、Animalコンストラクタを継承したCatコンストラクタを定義したい以下の例だと、 function Animal( name ) { this.name = name } fu
Class構文について - JS.next
概要 待ち焦がれた人も多いことだろう。ES2015の一番の目玉機能とも言えるクラス構文が、ついにV8でサポートされた。 Class構文は、『関数（コンストラクタ）定義』＋『.prototypeへのメソッド定義』の糖衣構文である。 JSで今まで様々に工夫されてきたクラスの書き方を、綺麗に統一してくれる可能性を秘めている。 クラスを作る 従来、Catクラスを作ろうとした場合このように書いてきた。 function Cat(name) { this.name = name } Cat.prototype.meow = function () { alert( this.name + 'はミャオと鳴きました' ) } しかしこの書き方だとどうしても、コンストラクタとメソッドの定義が分離されているため、クラスとしてまとまりがなく分かりづらく感じる。 メソッドが増えてきた時も、Cat.prototyp
JavaScriptでリンク先URLがhttp/httpsか確認する方法 - 葉っぱ日記
JavaScriptで動的にリンクを生成する際に、DOM-based XSSを防ぐためにリンク先がhttpあるいはhttpsに限定されていることを確認したい場合がある。典型的には以下のようなコードとなる。 var div, elm; // 変数 url は攻撃者がコントロール可能な文字列 if( url.match( /^https?:\/\// ) ){ div = document.getElementById( "info" ); elm = document.createElement( "a" ); elm.setAttribute( "href", url ); elm.appendChild( document.createTextNode( url ) ); div.appendChild( elm ); } この場合、変数urlに「http://example.jp」や「
小さいライブラリを採用する - mizchi's blog
僕がJavaScriptでライブラリを選定する際、迷ったら小さいものを使う。その理由について。 前提 前提として、枯れた環境で大きいフレームワークができるのは理解できるし、メリットも大きい。あるいは言語それ自身と区別できないぐらいに発達したフレームワークに依存するのも理解できる。RubyにとってのRailsとか、ErlangのOTPとか(いや、これは詳しくないけどそうなんだろうなっていう予想なんだけど)。 危険信号 今のJS界隈は動きが早すぎて、何に依存するのも危ない。とくにフレームワークと銘打たれたものは、でかすぎてどれも危険信号を放っている。 数年後、廃れてしまったフレームワークで開発し続けるのは、僕個人としてもあまり関わりたくないし、現場の離職リスクとして数字に出るだろうし、採用後の教育コストの問題になる。だいたいそういうものは元の設計者もいなくなるものだ。プロダクトの死を意味する。
JSLint Multiを知っていますか？ - Intelligent Technology's Technical Blog
こんにちは、石尾です。 JSLintを利用して、JavaScriptの構文チェックを行っている人は多いかと思います。 JSLintサイトで、JavaScriptをコピペして利用したり、 http://www.jslint.com/ jslint.vimやjslintを開発環境に設定して利用している人もいるでしょう。 jslint.vimで正しいJavaScriptを書く | monoの開発ブログ MacでJSLintをの実行環境をいい感じに整える。 - modifiedの日記 また、JSLintが組み込まれたエディタやeclipseプラグインでJSLintの構文チェックを行っているかも知れません。 Komodo Edit: Free Editor for Perl, Python, Tcl, PHP, Ruby, HTML, CSS, Javascript http://marketpla
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
JavaScriptプログラミング講座【フルスクリーンについて】
// ------------------------------------------------------------ // フルスクリーン表示が可能か調べる関数 // ------------------------------------------------------------ function DocumentIsEnabledFullscreen(document_obj){ return ( document_obj.fullscreenEnabled || document_obj.webkitFullscreenEnabled || document_obj.mozFullScreenEnabled || document_obj.msFullscreenEnabled || false ); } // ----------------------------
最近のjsテスト/ビルド環境 - lxyuma BLOG
最近のテスト環境 最近、ブログ書かないうちに、また、 自分のjs周りのテストやビルド環境が変わってきた。 具体的には、karmaとかgulpとかに変わった。 今日は、 その環境にしてどうだったか？とか、 設定ファイル(gulpfile)とか書いてみる。 去年と今年と 去年、勉強会等でyeomanとかgruntの話をしていて、このblogでもどこかに書いてた。 テストはmocha chaiが良いのかなーと思ってた。これもblog書いた。 所が、世の中どんどん変わっていく。 最近の環境 今はこんな感じ。 build tool gulp test jasmine2 sinon karma gulp vs Grunt gulpどうなんだろう？と思いながら色々試していくうちに、かなりしっくりきた。 stream baseで書き易いので、カスタマイズし易い。 gruntは、設定ファイルが何画面にも渡っ
話題かもしれないReactを使って簡単なアプリケーションを作ってみた。 - Qiita
数年前からjavascriptのフレームワークが数多く出てきたけど、その中でも最近話題かもしれないreactについて勉強してみた。 Facebook製で、Facebook、Instagram、GitHub (Atom) という大御所たちに使われたりしている。 作ったアプリケーション Qiitaのタグを取得してタグごとに記事一覧を表示するもの。 トップは新着記事一覧を表示。 デモ トレンド Googleのトレンドで見てみるとじわじわと人気が出てきているのがわかる。 backboneはいわずもがな、angularも直近だけ見ると落ち込んでいるように見えるが、reactはじわじわと伸びている。 https://www.google.co.jp/trends/explore#q=react.js%2C%20backbone.js%2C%20angular.js%2C%20vue.js&cmpt=q
<script async>でJavaScriptの非同期読み込みを - fragmentary
JavaScriptファイルをスクリプトから非同期で読み込むパターンは古い、という話を目にしたのはもう半年前のこと。 言ったのはIlya Grigorik。月末のGoogle Japanでのイベント、月初のHTTP2ConferenceにくるWebパフォーマンス界のすごいひとですよ。 Script-injected "async scripts" considered harmful - igvita.com 件のパターンは、スクリプトで動的に script を生成して、そこに読み込みたいJavaScriptファイルをぶっこんで読み込むというもの。 <script> var script = document.createElement('script'); script.src = "//somehost.com/awesome-widget.js"; document.getEleme
【JavaScript】 MutationObserverの使い方 個人的まとめ - はりをきば
DOMの変更を検知するイベントが非推奨になり 代わりに新しく作られたMutationObserverなるもの。 MutationObserver - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/MutationObserver DOM変更検知は結構よく使うもの（特にユーザースクリプト）なのに 日本語の解説サイトが↑のMDNとMSDN、ここくらいしかなく その都度ググったり手探りで片っ端から試すのが面倒なので以下に自分用にまとめる。 コンストラクタ まずインスタンスを作る。 window.MutationObserverコンストラクタの引数に、DOM変更を検知した際に実行する関数を渡す。 function omega(data1, data2) { alert("ﾜﾚﾊﾒｼｱﾅﾘ"); consol
JavaScriptでメンバへアクセスする方法は２つある - ぶろぐ
ドット記法と括弧記法の二種類がある。 ごく普通のドット記法 document.form1.txt1.value="コメント"; 括弧記法 document.form1["txt1"].value="コメント"; ふつーのドット記法が用意されているのに、括弧記法が存在する理由はメンバをプログラム上の文字列で指定するため。 括弧記法を使ってよくやること。 <span style="font-size:small;">var i; while(i<5){ var txt = "txt" + i; document.form1[txt].value=i+"番目のテキストボックス。"; i++; }</span>とかよくやったりするけど、括弧記法でオブジェクトのメンバにアクセスしている、ということだったのか。 ということは <span style="font-size:small;">documen
Get Started React.js
React.jsについての簡単な紹介 Component化、Prop、Stateの使い分け、イベント、addon、mixin、アーキテクチャ、ServerSide Renderingなどについての説明。 一部v0.12で変わった部分の対応もしています。
カッコで括るJavaScriptの無名関数 (function(){/*処理*/})();
JavaScriptで、変数名を省略する記法 無名関数について説明する前に、JavaScriptで変数名を省略する書き方を説明します。 例えば、JavaScriptで今年の西暦を調べるには、次のようにします。
ベストなユーザエクスペリエンスを実現するJavaScriptの課題と可能性 - ワザノバ | wazanova
https://www.youtube.com/watch?v=p2F-128e3sI 1 comment | 2 points | by WazanovaNews ■ comment by Jshiike | 33分前 Socket.ioのクリエーターとして知られるGuillermo RauchのBrazilJS 2013での講演です。理想のシングルページアプリをつくろうとすると、JavaScriptが損なってしまうケースはあるとしながらも、一方で、多いに可能性を感じさせるトレンドもあるとして、最優先であるユーザエクスペリエンスを向上させるポイントを紹介しています。 1) 課題 スクリプトやCSSにブロックされることで、レンダリングの際にブランクページを表示してしまう。 Webスクレイピングというコンセプトを壊してしまう。サーバレンダリングしない限りは、フロント側はスムーズにスクレイピ
[JavaScript] ECMAScript6のMapとSetを使ってみよう - YoheiM .NET
こんにちは、@yoheiMuneです。 今日は、ECMAScript6で定義されているMapとSetを使ってみたいともいます。Chromeはver.38から使えるので、すぐそこまできている技術です。 Special Thanks to https://flic.kr/p/aBtMu5 目次 多くのプログラミング言語でサポートされているMapが、とうとうJavaScriptでも使えるようになりました。 Mapはコレクション型の1つで、データを格納するためのデータ構造です。 JavaScriptではオブジェクトリテラルを用いて、以下のようにデータを保持することができます。 var data = { name: 'Yohei', sex: 'male', contry: 'JP' }; Mapでも似たようにKey-Value構造でデータを格納することができます。 // Mapオブジェクトの作成
![[JavaScript] ECMAScript6のMapとSetを使ってみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/5dcc0513954e1663d28cfa213e031bd6db5588f8/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F340.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Windows 10におけるMicrosoft JavaScriptエンジンの仕組み
alertの代替手段を提供するSweetAlert
www.javascriptbattle.com