ふじこのプログラミング奮闘記
あるボタンにclickイベントを設定してあるのに、クリックしてもそのイベントが起きない・・・なぜだろう？ということってありますよね。設定したclickイベント自体に問題がないならば、他のイベントが悪さをしているのかもしれません。 HTML要素にどんなイベントがついているのかを調べるために、少し前まではVisual Eventというブックマークレットを使っていました。 私のFirefoxに入れているVisual Eventは少しデザインが古いものかもしれませんが、だいたいこんな風に見えます。 イベントがついている要素のところにイベント種類のアイコンが表示され、マウスオーバーするとイベント内容（関数）を見ることができます。ソース上の場所までは分かりませんが、ここに表示されたスクリプトでソース内を検索すれば見つけることができます。 でも現在は、ChromeにもFirefox（Firebug）にも
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
JavaScriptフレームワークの寿命 | POSTD
(注記：9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。本記事は、そうした残念な結果を回避するヒントをまとめたものです。 本記事では以下のことを示したい
Object.create() | JavaScript リファレンス
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における継承のパターン4種類の概要と対比 | POSTD
JavaScriptはとても強力な言語です。強力がゆえ、実はプロトタイプをデザインしたり、オブジェクトのインスタンスを生成したりするのに何種類もやり方があります。それぞれの方法には長所も短所もあります。そこでJavaScript初心者の皆さんのために私がそのあたりを整理して説明したいと思います。今回の投稿は、以前私が書いた 「JavaScriptを分類するな」 の続編です。前回の投稿でたくさんのコメントをいただき、コードの例を出してほしいをいう反応をいただいたので、今回はそれらにお応えします。 JavaScriptはプロトタイプを使って継承 つまり、JavaScriptでは、オブジェクトは別のオブジェクトを継承することができます。 { } 波括弧を使って生成されるJavaScriptの基本的なオブジェクトは、唯一のプロトタイプとして Object.prototype をプロトタイプに持ちま
JavaScript の ジェネレータ を極める！ - Qiita
ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！ ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める！（この記事） また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ジェネレータ、ジェ
JavaScript開発者が一度は読むべきStackOverflow - Qiita
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は値渡しか？共有渡し(参照の値渡し)か？
JavaScriptは値渡しなのでしょうか？共有渡し(参照の値渡し)なのでしょうか？普通のObjectはすべて共有渡しだと思うのですが、プリミティブ型(？)については違うようなのです。しかし、StackOverflow(※)でもまとまっていないようで、よくわかりませんでした。詳細を分かる方がいれば、下記について教えて下さい。 ※参考: StackOverflow: Is JavaScript a pass-by-reference or pass-by-value language? 値渡しになる型はあるのでしょうか？ある場合は、どの型がなるのでしょうか？ 1.の型のうちmutableな型はあるのでしょうか？ある場合は、mutableな型の破壊的メソッドはどのようなものがあるのでしょうか？ 値渡しであることが分かる(共有渡しでは説明できない)コードはありますでしょうか？ C++やC#で言う
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
Tempura：機械学習をJavascriptでやってみる - Qiita
デモ 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)スタイルガイド7選！ - Money Forward Developers Blog
こんにちはー。 フロントエンドエンジニアの平山です。 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スタイルガイドだと有名な感じ
ESDocというJavaScript向けのAPIドキュメントツールを作りました - maru source
こんにちは丸山@h13i32maruです。 昨日、ESDocというツールをリリースしました。GW中になんとかリリースできて一息ついているところです。今回はそのESDocというツールについて紹介します。あと最後に雑談と宣伝があります。 ESDocとは？ ESDocとはJavaScript(ES6)向けのAPIドキュメントツールです。JavaScript界隈ではJSDocがデファクトスタンダードであり、ESDocもJSDocに触発されて作りました。なのでタグの使い方はなるべく互換性を持たせています。とはいえ不要だなと思うタグもかなりあったのでそれらは実装していません。 ESDocの特徴(主にJSDocに比べて)としてはこんな感じです。 詳細なドキュメントを生成する ドキュメントカバレッジを計測する テストコードとドキュメントを関連付ける ES6のclass, import/exportを使った
JavaScriptでクエリストリングをオブジェクトに変換する - みかづきブログ その3
?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("="
クラスの落とし穴1 - プロパティの初期化 - Qiita
クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AST explorer
非同期通信（Ajax）をするときはタイムアウト処理を必ず入れてほしい（切実） - Qiita
JavaScript で言語処理100本ノック2015 第1章: 準備運動 - Qiita
起きる！メモリーリーク（javascriptクロージャー編）
[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita![[JavaScript]使い分けるだけで今すぐデバッグ効率を上げる、consoleオブジェクトの関数 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/29821300e3d9051742e371101d5225ca57231dc5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzYxMDUlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODY5NTU_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjU1N2ZhODFjYTg2ODJkMWY4MGUxZjc0YWJkNmMzMDc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D271d4e0454f7aa6cd5c4d4a370a82b4b%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MiU4QiVFMyU4MSVBMCVFMyU4MSU5MSVFMyU4MSVBNyVFNCVCQiU4QSVFMyU4MSU5OSVFMyU4MSU5MCVFMyU4MyU4NyVFMyU4MyU5MCVFMyU4MyU4MyVFMyU4MiVCMCVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU5MiVFNCVCOCU4QSVFMyU4MSU5MiVFMyU4MiU4QiVFMyU4MCU4MWNvbnNvbGUlRTMlODIlQUElRTMlODMlOTYlRTMlODIlQjglRTMlODIlQTclRTMlODIlQUYlRTMlODMlODglRTMlODElQUUlRTklOTYlQTIlRTYlOTUlQjAmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz03ZDZlYjg2NjE5YTIyNjFlZWMwZDkzNDY1NmZhMDlhMA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrYXNoaXJhMjMzOSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTFiZDAzNjk2MGNlOTM4ODkzNGJiYTFhMTJlZjhjMTAy%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K144Kk44OQ44O844O744OQ44K6%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D0589c8604af2e8ab2a0679424aa9732a)
ECMAScript 6 Tutorial