Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

あるボタンにclickイベントを設定してあるのに、クリックしてもそのイベントが起きない・・・なぜだろう?ということってありますよね。設定したclickイベント自体に問題がないならば、他のイベントが悪さをしているのかもしれません。 HTML要素にどんなイベントがついているのかを調べるために、少し前まではVisual Eventというブックマークレットを使っていました。 私のFirefoxに入れているVisual Eventは少しデザインが古いものかもしれませんが、だいたいこんな風に見えます。 イベントがついている要素のところにイベント種類のアイコンが表示され、マウスオーバーするとイベント内容(関数)を見ることができます。ソース上の場所までは分かりませんが、ここに表示されたスクリプトでソース内を検索すれば見つけることができます。 でも現在は、ChromeにもFirefox(Firebug)にも
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
(注記:9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。本記事は、そうした残念な結果を回避するヒントをまとめたものです。 本記事では以下のことを示したい
Object.create()はオブジェクトの継承を行うためのメソッドです。 ECMAScript5で追加されたメソッドでIE9から利用できます。 以下のようにして継承元のオブジェクトを引数に指定することで機能が継承された新しいオブジェクトを作成できます。 obj1 = { text1 : "text1", text2 : "text2" } obj2 = Object.create(obj1); console.log(obj2.text1);//text1 以下のサンプルではobj1の機能を継承したobj2を作成しています。作成したobj2の値を変更した場合は元のオブジェクトであるobj1に影響はありません。 obj1 = { text1 : "text1", text2 : "text2" } obj2 = Object.create(obj1) obj2.text1 = "text
JavaScriptはとても強力な言語です。強力がゆえ、実はプロトタイプをデザインしたり、オブジェクトのインスタンスを生成したりするのに何種類もやり方があります。それぞれの方法には長所も短所もあります。そこでJavaScript初心者の皆さんのために私がそのあたりを整理して説明したいと思います。今回の投稿は、以前私が書いた 「JavaScriptを分類するな」 の続編です。前回の投稿でたくさんのコメントをいただき、コードの例を出してほしいをいう反応をいただいたので、今回はそれらにお応えします。 JavaScriptはプロトタイプを使って継承 つまり、JavaScriptでは、オブジェクトは別のオブジェクトを継承することができます。 { } 波括弧を使って生成されるJavaScriptの基本的なオブジェクトは、唯一のプロトタイプとして Object.prototype をプロトタイプに持ちま
ECMAScript 6(2015年6月に公開され、今もなお比較的新しい JavaScript)の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める! ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める!(この記事) また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 (2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table) 1. ジェネレータ、ジェ
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
JavaScriptは値渡しなのでしょうか?共有渡し(参照の値渡し)なのでしょうか?普通のObjectはすべて共有渡しだと思うのですが、プリミティブ型(?)については違うようなのです。しかし、StackOverflow(※)でもまとまっていないようで、よくわかりませんでした。詳細を分かる方がいれば、下記について教えて下さい。 ※参考: StackOverflow: Is JavaScript a pass-by-reference or pass-by-value language? 値渡しになる型はあるのでしょうか?ある場合は、どの型がなるのでしょうか? 1.の型のうちmutableな型はあるのでしょうか?ある場合は、mutableな型の破壊的メソッドはどのようなものがあるのでしょうか? 値渡しであることが分かる(共有渡しでは説明できない)コードはありますでしょうか? C++やC#で言う
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
デモ tempura/demo/index.html (もしくは http://mil-tokyo.github.io/tempura/demo/index.html ) をブラウザで開くとデモを見ることができる。 ここで行われているデモは ・パーセプトロン ・SGD-SVM ・Nearest-Neighbor ・GMM の四種類である。これらに引き渡すパラメータをブラウザ上で編集して試すことができ,またそのデモにおいて用いられているソースコードを確認することができる。 使い方 compile.pyを実行した時に生成される tempura/bin/tempura.js を読み込むだけで様々な識別器を使えるようなので試してみた。 サンプルデータを用意しパーセプトロンを使って学習,識別を行うコードが下記である。 // トレーニング用の行列と答を用意する var train = Sushi.Ma
こんにちはー。 フロントエンドエンジニアの平山です。 JavaScript(CoffeeScript)の役割が増えてきた昨今。 ここいらで一度、有名なスタイルガイドを追ってみたいと思います。 一緒にスタイルガイドを策定したり、あーやこーや語らいながらよりよいスタイルガイドを考えたいフロントエンドエンジニアの方は、とりあえず一緒に開発しましょう! 【採用サイト】 ■『マネーフォワード採用サイト』 https://recruit.moneyforward.com/ ■『Wantedly』 https://www.wantedly.com/companies/moneyforward JavaScript AirBnB Airbnb JavaScript Style Guide Airbnb JavaScript Style Guide(es5) 和訳(非公式) JSスタイルガイドだと有名な感じ
こんにちは丸山@h13i32maruです。 昨日、ESDocというツールをリリースしました。GW中になんとかリリースできて一息ついているところです。今回はそのESDocというツールについて紹介します。あと最後に雑談と宣伝があります。 ESDocとは? ESDocとはJavaScript(ES6)向けのAPIドキュメントツールです。JavaScript界隈ではJSDocがデファクトスタンダードであり、ESDocもJSDocに触発されて作りました。なのでタグの使い方はなるべく互換性を持たせています。とはいえ不要だなと思うタグもかなりあったのでそれらは実装していません。 ESDocの特徴(主にJSDocに比べて)としてはこんな感じです。 詳細なドキュメントを生成する ドキュメントカバレッジを計測する テストコードとドキュメントを関連付ける ES6のclass, import/exportを使った
?hoi=1&hohoi=2みたいなクエリストリングを、 { hoi: "1", hohoi: "2" } 的なオブジェクトに変換するスクリプトです。 逆に、 { hoi: "1", hohoi: "2" } 的なオブジェクトを、 hoi=1&hohoi=2に変換することもできます。(あえて先頭に?はつけていません) JavaScript (function (win, doc) { "use strict"; function convertQueryToObject() { var obj = {}, query = location.search, params = query.split(/[?&]/), p, key, val; for (var i = 0, len = params.length; i < len; ++i) { p = params[i].split("="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く