Mochaを使ってJavaScriptのテストをブラウザで実行してみよう
対象読者 JavaScriptの基本をある程度理解している方 テストコードをこれから書こうと考えている方 JavaScriptのテスティングライブラリの分類 JavaScriptには、テストを記述するためのライブラリが多く用意されています。ライブラリには、大きく分けて「テスティングフレームワーク」と「アサーションライブラリ」があります。まずはこの2種類の違いについて説明します。 テスティングフレームワーク テストを記述する関数群を提供し、それらの関数を使って書かれたテストの結果を判定、集計した上で結果を表示する機能を持ちます。ブラウザでのテストの場合、ブラウザ上でグラフィカルにテスト結果を表示することもありますし、サーバサイドのJavaScriptであるNode.js向けにはコマンドラインで実行し、結果を表示する機能も持ちます。 アサーションライブラリ テスティングフレームワークは、テスト
JavaScriptのテスト環境の参考URLメモ(2015-03時点) - msakamoto-sfのはてなブログ
2015-03-30 JavaScriptのテスト環境の参考URLメモ(2015-03時点) JavaScript TDD JavaScriptのテスト環境、テストライブラリってどうなってるのか、参考URLをまとめてみました。 結論：ライブラリが数種類あり、それぞれがどこのレイヤーをカバーするのか異なる。そのため、組み合わせはもとより出力形式、CI環境との連携、なにをどこまでテストするのか、開発者のスキル、アプリケーションのライフサイクルなど多数のパラメータのバランシングが必要となる。ライフサイクルの短い使い捨てなら、バランシングのためのコストも無視して「えいやっ」で決めても良いが、そもそもテスト環境の整備が必要なプロジェクトであれば、ライフサイクルもそれなりの規模が想定される。技術者の自己満足や、流行り廃りに焦って拙速な判断を下さないよう厳重な注意が必要とされるだろう。数年後、流行り廃り
SPAがネイティブアプリをぶっ壊す：HTML5/Javascriptが変えるWebの未来 - Qiita
はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh
第4回 運用開発におけるJavaScriptのフレームワークの選定 | gihyo.jp
はじめに みなさんこんにちは、技術系Q&Aサイトのteratail開発チームの本橋佑介です。 WebサービスでJavaScriptを利用する際にフレームワークを使うことがスタンダードになって来ていますが、運用中のサービスに適用するのはなかなか難しくためらっていませんか。フレームワーク自体の比較ではなく運用中のサービスにフレームワークを適用する際に何を選定すればいいのか、そこにフォーカスをあてて紹介したいと思います。 なぜJavaScriptフレームワークを使うのか 通常Webサービスを作る場合、RubyではRails、PHPではLaravelなどのフレームワークを利用すると思います。MVCモデルを導入する目的としてビジネスロジックや画面描画などの分離、コンポーネント化ももちろんですが、チーム開発をする上ではコーディングルールの統一や部品の統一化、画面の切り離しによりフロントエンドエンジニア
CodeIQについてのお知らせ
2018年4月25日をもちまして、 『CodeIQ』のプログラミング腕試しサービス、年収確約スカウトサービスは、 ITエンジニアのための年収確約スカウトサービス『moffers by CodeIQ』https://moffers.jp/ へ一本化いたしました。 これまで多くのITエンジニアの方に『CodeIQ』をご利用いただきまして、 改めて心より深く御礼申し上げます。 また、エンジニアのためのWebマガジン「CodeIQ MAGAZINE」は、 リクナビNEXTジャーナル( https://next.rikunabi.com/journal/ )に一部の記事の移行を予定しております。 今後は『moffers by CodeIQ』にて、 ITエンジニアの皆様のより良い転職をサポートするために、より一層努めてまいりますので、 引き続きご愛顧のほど何卒よろしくお願い申し上げます。 また、Cod
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
JSONとJSONPのContent-typeに書くMIMEタイプ - kanonji’s diary
ファイル 正しいMIMEタイプ RFC IE用 json application/json http://www.ietf.org/rfc/rfc4627.txt RFC通り jsonp application/javascript http://www.ietf.org/rfc/rfc4329.txt text/javascript JSONの場合はapplication/jsonだけど、JSONPって実体はコールバック関数でJSONを包んだ単なるJavaScriptなので、MIMEタイプはJavaScriptと同じです。JavaScriptのMIMEタイプは、以前はtext/javascriptだったけど、2006年4月にRFC4329が出てapplication/javascriptになったんだとか。 IEって使えない Internet Explorer 7 では applicati
JSONPで悩むある程度の人々へ
JSONPって、クロスドメインでデータをとってこれて、Web APIとかはこれで実装されているんでしょ。 なんとなくわかる気がするんだけど、自分で作ってみるとなんかうまく動かない。 あるいはその手前で、どういう風に実装していいかわからない。 とくに自分がAPIを提供する側になると、よけいよくわからない。 Wikipediaの解説なんか、わけがわからないよ。 こんな感じの方はいませんか。 というか、ちょっと前の自分はこんな感じでした。 いろんなサイトを調べまくって、ある程度わかってきた気がしますので、後のためにここに残しておきます。 ああ、あのころの自分に教えてあげたかった。 まずJSONって何さ？ JSONPにたどり着いた人はJSONのことは知っていると思いますから、簡単に。 こんな感じの「テキスト」のことですよね。 { "key1": "value1", "key2": "value2"
JavaScript の過去と現在、ガチな JS アプリケーション設計
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
キーコード一覧
キーコード一覧 アルファベット 数字 テンキー数字 テンキー記号 記号 A 65 O 79 0 48 T0 96 T* 106 :* 186 B 66 P 80 1 49 T1 97 T+ 107 ;+ 187 C 67 Q 81 2 50 T2 98 ,< 188 D 68 R 82 3 51 T3 99 T- 109 -= 189 E 69 S 83 4 52 T4 100 T. 110 .> 190 F 70 T 84 5 53 T5 101 T/ 111 /? 191 G 71 U 85 6 54 T6 102 @` 192 H 72 V 86 7 55 T7 103 [{ 219 I 73 W 87 8 56 T8 104 \| 220 J 74 X 88 9 57 T9 105 ]} 221 K 75 Y 89 ^~ 222 L 76 Z 90 \_ 226 M 77 N 78
Mac OS XにSpiderMonkey 1.8.5 をインストールする | developer's blog
MacにSpiderMonkeyをインストールする方法はいくつかある。 1. Homebrewでインストール(ver.1.8.5) 2. macportsでインストール(ver.1.7.0) 3. ソースでインストール brewインストールを使う場合は非常に簡単にインストールできる。 homebrewが入っていない場合はインストールから $ ruby -e "$(curl -fsSLk https://gist.github.com/raw/323731/install_homebrew.rb)" SpiderMonkeyを入れる。 $ brew install spidermonkey !! Error: MD5 mismatch が出るときは $ brew update してから再度インストールを実行して下さい。 次にMac Portsの場合。これも簡単。 $ sudo port
【追記：2018 01/25】配列の連結(concat vs Array.prototype.push.apply) - Qiita
こちらに追記しようとしたのですが見にくかったので別記事にしました ES6での配列の連結方法になります https://qiita.com/kaz2ngt/items/c03625587bf398b6f81a 以下過去記事 投稿テストも兼ねたメモ 一般的に配列の連結はconcatを用いるが、配列に配列を継ぎ足していくような処理だとconcatでは毎回配列を生成しているのがきになり、他の手段を調べてみるとArray.prototype.push.applyというものがあったためメモ 実行ファイル var a = [0, 1, 2, 3], b = [4, 5, 6, 7], i, count = 10000; console.time(); for (i = 0; i < count; i++) { a = a.concat(b); } console.timeEnd();
AngularJS 1.3のフォームまわりの機能強化
こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n
Javascriptで配列にある値が存在するかどうかを確認する方法について - プログラミングを勉強するブログ
以前配列にある値が存在するかどうかをfor文を使わずに調べる方法を考えてみたという記事を書きました。この記事は「やろうと思えばこういう方法でもできるなぁ」というアイデアについて書いた記事だったのですが、Javascriptで配列にある値が存在するかどうかを確認する一般的な方法を探して当該記事を訪問していただくことが多いので改めてこの方法について書いてみたいと思います。 といってもJavascriptには"Array.contain"のような「まさにそのためにある」というメソッドが用意されているわけではないのでいずれにしろ方法の紹介ということになってしまいますが。 次の3つのパターンに分けて書きたいと思います。 ECMAScript 5が使える場合 jQueryが使える場合 上記のどちらも使わない場合 1.ECMAScript 5が使える場合 ECMAScript 5では配列に"indexO
AngularJSでアコーディオン(toggleボタン仕様)のサンプル
クリックできる範囲 テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 <dl class="accordion"> <dt ng-click="flag = !flag">クリックできる範囲</dt> <dd ng-class="{hide: flag}">テキストが入ります。テキストが入ります。テキストが入ります。</dd> </dl> .accordion, .accordion dt, .accordion dd { margin: 0; padding: 0; } .accordion { width: 300px; margin-bottom: 10px; border: 1px solid #CCC; } .accordion dt { padding: 5px 10px; } .accordion dt { background-color:
Dateオブジェクト (日付と時刻) | JavaScript プログラミング解説
Dateオブジェクトが扱える範囲は、1970年1月1日の前後273,785年です。よって275755年まで扱えることになります。 オブジェクトの生成 new Date() 引数を指定しないと、現在の日時でDateオブジェクトが生成されます。 new Date( milliseconds ) 1970/1/1 UTCからmillisecondsミリ秒経過した日時と解釈されます。 new Date( year, month, day [, hour, minute, second, millisecond] ) Date - JavaScript | MDN monthは0が起点のため、1月ならば0、12月ならば11のように指定します。 newを省略すると、引数が無視され現在の日時が文字列で返されます。 文字列からの生成 (new Date()) Date.parse( datestring
CSS, JavaScriptで実装された、チェックしておきたいUIデザインの最近のテクニックのまとめ
実用的なテクニックから、こんなこともできるんだ！とワクワクするすごいアイデアまで、Web制作者はチェックしておきたいUIを実装するテクニックをCodePenから紹介します。 JavaScriptは最小限にして、アニメーションなどCSSでできることは全てCSSで、というのが実装の傾向ですね。
オブジェクトでの作業 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
getting Refused to execute script from '*' because its MIME type ('application/json') is not executable, and strict MIME type che
http://www.frattv.com/refused-to-execute-script-from-because-its-mime-type-application-json-is-not-executable-and-strict-mime-type-checking-is-enabled/