JavascriptのChromeでのデバッグ方法個人的まとめ2016 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
小さく始める JavaScript のテスト - Qiita
JavaScript のテスト 書かないと怒られるし、書きたいとは思っているが、書くまでの敷居がやたらと高くなってしまった気がしている人へ。 最小のテスト 本質的にテストを書くのにフレームワークはいらない。 assertion だけあればいい。 isomorphic にしたいなら、 node の assert モジュールすら使わず console.assert だけで書ける。 // assert function assert(actual, expected) { console.log('.'); console.assert(actual === expected, '\nact: ' + actual + '\nexp: ' + expected); } function TestSum() { assert(1+2, 3); } // exec TestSum(); あとは普通に
あのライブラリは何故誕生したの?のまとめ - Qiita
はじめに 最近、フロントエンドのライブラリ乱立問題について盛り上がってました。 自分はnobkzさんの以下の文に全てがまとまっていると思います。 僕の最初の違和感は、「技術的な流行り」に乗ることに何の価値があるのだろうか?ということである。もちろん、最新のツールやフレームワークはより何かが良くなってるかもしれない。しかし、 それをあなたのプロジェクトで採用するには何の価値があるだろうか? 「最近のフロントエンドへの違和感 - nobkzのブログ」より 裏を返せば、新しいライブラリの内容、特に「どのような問題を解決するためにこのライブラリが生まれたのか」という思想を把握しておくことは重要だと言えます。 つまりは、 "How?(ライブラリの使い方)" よりも "Why?(なぜそのライブラリが必要なのか)" を学んでおこう ということです。この記事では どのような既存の問題・要求を どう解決して
フロントエンドへの複雑化について、一つの視点 - mizchi's blog
これらの件 最近のフロントエンドへの違和感 - nobkzのブログ 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。 前提 去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。 僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。 僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記
ギターコードダイアグラム（コード表）の画像を生成するJavascript作りました（β版） - 攻めは飛車角銀桂守りは金銀三枚
実は密かに趣味のアコースティックギターの入門用のサイトを作ろうかと、ちょこちょこ作業をしていたのです。 acoustic-guitar.hatenablog.com で、どうしても必要なものができて探したけれども、なんかシックリくるのがないので、ここはIT技術業界の片隅に住んでる者としては「作るしかない」ということで、作りました。 ギターコードダイアグラム（コード表）の画像を生成Javascript 何が必要だったかと言うとギターコードダイアグラム（コード表）の画像が欲しかった。 どうしてもアコースティックギターを語るのにギターコードダイアグラム（コード表）は必要だろうと。 タダで自由な画像はいっぱいあるんだけど、それを全部ダウンロードしてアップするのが面倒くさい。 ならば、動的に画像を作るスクリプト書けばいいじゃん。 で、結果はこれ。 まぁできてるか。 使い方 使い方は簡単でまずヘッダー
Webブラウザ上で Excel ファイルを作成してダウンロード - Excel Builder (.js) - なんとなくな Developer のメモ
Excel Builder (.js) を使って、Web ブラウザ上で動的に Excel ファイル （.xlsx） を作成し、ダウンロードする方法をご紹介します。 ソースは http://github.com/fits/try_samples/tree/master/blog/20150822/ サンプル作成 まずは、HTML を用意します。 今回は、download というリンク （a タグ） をクリックすると Excel ファイル （.xlsx） をダウンロードするようにしてみます。 Excel Builder (.js) は RequireJS に依存しているため、RequireJS を読み込むようにして data-main 属性へ実行する js ファイルを指定します。 index.html <!DOCTYPE html> <html> <head> <script data-mai
親要素の幅に収まるようにフォントサイズを変更する - ウェブログ - Hail2u.net
Webフォント(@font-face)や均等割付(text-align: justify;)、日本語と英語の間のスペース調節(text-autospace)などCSS3では文字や文章に関わる表現力も大きく向上している。とはいうもののないものはないので、親要素の幅にちょうど収まるようにフォントを拡大、つまりimg要素にwidth: 100%;を指定した時のようにはCSSではできない(少なくとも思いつかなかった)。というわけでふんだんにjQueryを利用したJavaScriptでどうにかしてみた。 Demo: Resize Font Based on Content Width #6 フォントレンダリングの関係上、Firefoxの方が綺麗なのでスクリーンショットはFirefoxで撮影した。 $(window).load(function () { var start = $.now(); $(
Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定)
1年前の記事 JavaScript フレームワークがデータバインディングを実現する４通りの手法 では、Object.observe() について次のように説明した。 JavaScript オブジェクトが変更されたときにコールバックを呼んでくれる API データバインディングの実装が簡単になる Google Chrome には実装済み ECMAScript 7 に提案中 提案が通れば MV* フレームワークの実装がシンプルになってハッピー 将来を期待されていた Object.observe() であったが、2015 年 11 月頭、ES Discuss メーリングリストへの An update on Object.observe という投稿で、ECMAScript からの提案が取り下げられて、V8 エンジンからも年内に削除される予定であることが表明された。 Object.observe()
[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
![[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5062373ec67701c8d65ca6ffdfe6e9cb4dc3565f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110901.png)
さよなら CoffeeScript - mizchi's blog
prototype.js が jQuery に置き換えられた時、開発者が気づいたのは、自分に本当に必要だったのはprototypeのメソッド拡張などではなく、クエリエンジンだったということ。 coffeescriptが当初、熱狂的に支持された背景はなんだっただろう。今思えば、それはアロー記法とクラス構文だったと思う。 javascriptの関数型への憧れ、prototypeベースの限界 javascript は断じて関数型言語ではないが、他の言語と同じぐらい関数型言語に憧れていたのも、また事実だろう。しかしビルトイン関数が高階関数を要求するデザインにしては function というキーワードはながすぎたし、その function が暗黙に作り出す this スコープの複雑な振る舞いも開発者の悩みの種だった。「あらゆる関数スコープで状態を持つことが"できすぎる"」という割れ窓だった。 ES5
ContentLoaded.com - A playground of loading resources into a web page
Content Loaded A playground of loading resources into a web page
JavaScriptの読み込みにおける非同期スクリプト注入の悪影響 | POSTD
Synchronous（同期）スクリプトは効率が悪い。というのも、ブラウザにDOM構築をさせ、スクリプトを読み込ませ、残りのページをリロードする前に実行してしまいます。今さらな話ですが、これがわれわれプログラマがasynchronous（非同期）スクリプトをよく使うようになった理由です。ここに分かりやすい例があります。 <!-- BAD: blocking external script --> <script src="http://somehost.com/awesome-widget.js"></script> <!-- GOOD: remote script is loaded asynchronously --> <script> var script = document.createElement('script'); script.src = "http://somehos
クラスの落とし穴1 - プロパティの初期化 - Qiita
クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
JavaScript 言語概要 - JavaScript | MDN
JavaScriptチュートリアルBeginner's tutorialsYour first website: Adding interactivityDynamic scripting with JavaScriptJavaScript frameworks and librariesJavaScript ガイド入門編文法とデータ型制御フローとエラー処理ループとイテレーター関数式と演算子Numbers and stringsRepresenting dates & times正規表現インデックス付きコレクションキー付きコレクションオブジェクトを利用するクラスの使用プロミスの使用JavaScript 型付き配列イテレーターとジェネレーターInternationalizationJavaScript モジュール中級編Advanced JavaScript objectsAsynchrono
JavaScript で全体のエラーを検知, 捕捉してハンドリングする方法 | tmlife
エラーが起きたい際に, 共通で何か処理をやりたい場面ってよくありますよね？ 例えば console 以外でエラーが起きた行を表示したい エラーの内容を日本語化したい エラーの内容をサーバーに送りたい などなど. 今回は JavaScript で起きたエラーを検知, 捕捉して ハンドリングする方法を紹介します. エラー時に必ず呼ばれる関数を登録しよう JavaScript ではエラーが起きると window オブジェクトの error イベントが発火します. なので下記のように error イベントを登録しておけば エラー時に何か処理を行うといったことを簡単で実現できます. window.onerror = function(msg, url, line, col, error) { console.log(msg); // エラーの内容 }; 引数は msg … エラーメッセージ u
Chrome 43からcutおよびcopyコマンドが使えます - Qiita
Chrome 43から、選択されたテキストをクリップボードにコピーしたり切り取ったりする機能が利用可能になります。Chrome拡張機能からは前から使うことができていましたが、Chrome 43からは普通のWebページからも利用することが可能です。HTML5Rockの更新情報にてアナウンスされていましたので、早速日本語訳してみました。ぜひご活用ください。 原文: http://updates.html5rocks.com/2015/04/cut-and-copy-commands Cut and Copy Commands IE10やそれ以上のバージョンは、Document.execCommand()メソッド（ https://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI
意外と簡単。HTML5のデスクトップ通知を実装してみる - MUGENUP技術ブログ
こんにちは、MUGENUPの倉成です。 最近はWebアプリでもデスクトップ通知が出来るものが増えていますよね。 今日はそんなデスクトップ通知の実装を取り上げてみようと思います。 便利なライブラリ デスクトップ通知はブラウザによって実装が異なり、各ブラウザの対応は手間がかかるので、今回はクロスブラウザ対応を簡単にできるHTML5-Desktop-Notificationsを使います。 他のデスクトップ通知のライブラリにはnotifyもあり、こちらもHTML5-Desktop-Notificationsと同じくらいのStarが付いているようです。 使い方 さて、ここからはHTML5-Desktop-Notificationsの使い方をREADMEにそって ブラウザ対応状況の確認 ユーザーに通知の許可を求める 通知を発行 の3段階で説明していきたいと思います。 なお、本記事はこのコミット時のコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSのパフォーマンスをお手軽に解析する方法 - Qiita
SEO検証！ GoogleはAngularJSを正しくクロールするのか？（2015年2月版）
