Sinon.JS - Standalone test fakes, spies, stubs and mocks for JavaScript. Works with any unit testing framework.
Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework. Get Started Star Sinon.JS on Github Get Started Install using npm To install the current release (v17.0.1) of Sinon: npm install sinon Setting up access Node and CommonJS build systems var sinon = require("sinon"); Direct browser use <script src="./node_modules/sinon/pkg/sinon.js"></script> <script> // Ac
JavaScript の async/await の仕様をずっと誤解していた
すごい初歩的なことかもしれないのだけれど、年単位ぐらいで誤解したままコードを書いていたので懺悔のためにも書いておく...。 何が違ったかというと、async function の扱いである。async function も function と同じだとおもっていて、 Promise を返さないと呼び出し側で await できないと勘違いしていた。そのため、今までは
JSサイトのための第4のレンダリング構成としてダイナミックレンダリングをGoogleが発表 #io18 #io18jp
[レベル: 上級] JavaScript で構築されたサイトのために Dynamic Rendering（ダイナミック レンダリング）と呼ぶ仕組みを Google はサポートするようになります。 米マウンテンビューで開催された Google I/O 2018 のセッションで Google の John Mueller（ジョン・ミューラー）氏が発表しました。 Google が現在サポートする JS サイトのための3つのレンダリング構成 JavaScript でレンダリングされたコンテンツを適切にインデックスするために、次の3つのレンダリング構成を Google は現在サポートしています。 Client Side Rendering（クライアント サイド レンダリング）――クライアント側、つまりブラウザまたは Googlebot がすべてをレンダリングする。Googlebot がレンダリングで
Excelに追加されたJavaScriptカスタム関数機能を悪用してさっそく仮想通貨マイニングスクリプトが埋め込まれる
Microsoftは2018年5月7日に、ExcelにJavaScriptカスタム関数を加えることを発表しましたが、この機能を悪用して仮想通貨マイニングスクリプトを仕込む概念実証デモがセキュリティ専門家によって行われています。 JavaScript Coinhive in Excel – Charles Dardaman https://charles.dardaman.com/js_coinhive_in_excel Microsoft Adds Support for JavaScript in Excel—What Could Possibly Go Wrong? https://thehackernews.com/2018/05/javascript-function-excel.html 開発者がExcelの組み込み式関数セットを拡張できるように、InsiderプログラムのExc
何故for文は許されるのか？反省会会場 - Qiita
祖父母記事: なぜfor文は禁止なのか？ポエム版 親記事: でもやっぱりfor文は使っていいと思うよ だって遅いんだもん こんなに遅いとは思いませんでした。 まさか1/6の速度しか出ないだなんて軽くショックです。 折角良いサイトhttp://jsben.chを教えてもらったので速度改善を目指して色々試行錯誤してみましょう。 この記事(反省会)では、速度も意識したメソッドチェーンのあり方を考えていきます。 メソッドチェーンはチューニングでどの程度速くなるのか それによる可読性はどの程度影響するのか 結局JSerはどう生きていけば良いのか 配列を生成するイディオムの速度比較 JSは配列作るのが下手くそですが、 メソッドチェーンや関数型プログラミング的な事をしたければ、 まずは速い数列(配列)を作るイディオムが必要です。 とりあえず4パターン用意してみました。 // length指定: 別の所で
ReactとAngular、使うならどっち？ JavaScriptギークが6つの視点で徹底比較 - エンジニアHub｜Webエンジニアのキャリアを考える！
ReactとAngular、どちらを選ぶべきか？ 使用するJavaScriptフレームワークを選ぶ際、この2つはよく比較対象に挙がります。しかし、両者の特徴をよく理解していなければ、選定は困難でしょう。 今回は、両フレームワークが具体的にどんな強みを持っているのかを、Reactの専門家 小林徹さんとAngularの専門家 稲富駿さんに解説してもらいました。両フレームワークの設計思想から使用において考慮すべき点、今後実装される予定の機能まで、利用者が気になるポイントを網羅しています。 JavaScriptギークである2人のノウハウ、ぜひ選定の参考にしてください！
フロントエンジニア必見！JavaScriptのエラーログ収集方法 - IDCF テックブログ
こんにちは、UX開発部の橋口です。 Webサービスを開発するうえで、JavaScriptは絶対的に使われる技術だと思います。 みなさんもJavaScriptでエラーの調査をする際に、クライアントで実行されるためエラーの内容やどこで発生したかが分からなかったり、問い合わせ内容の再現ができず困ったことがあるのではないでしょうか？ 解決の糸口を作るためには、クライアントサイドで発生したエラーに関する情報を収集してあげる必要があります。 JavaScriptのエラーログも収集できる著名な製品もありますが、クラウド環境への導入の場合には高額になってしまったり、独自に解析する場合でも、環境などを用意するのも大変ですし管理も大変です。 そこで、今回の記事はトレジャーデータサービス by IDCFにJavaScriptのエラーログを収集する方法について紹介します。 課題 JavaScriptのエラーを収集
JavaScriptのクロージャはメモリーリークをちゃんと理解して使おう - Qiita
はじめに 前にブログで書いた記事なのですが、せっかくなのでQiitaにも投稿します。 脱初級者の壁として君臨しているクロージャ。クロージャの使い方はわかったけど、いろんな記事を見るとクロージャは問題点もあるみたい。それに、そもそもクロージャの使い所がいまいちわかんないと思ってクロージャに再度立ち向かおうと思った次第です。同じような悩みを抱えているデザイナーさん、コーダーさん、フロントエンドエンジニアさんの参考になれば嬉しいです。 クロージャとは とりあえずおさらい & 補足をします。 よく見かけるクロージャの見本がこちら。 function closure(initVal){ var count = initVal; var innerFunc = function() { return ++count; } return innerFunc; } var myClosure = clos
なぜfor文は禁止なのか？関数型記述のススメ - Qiita
var totalOfEvenNumberUnder100 = 0; for (var i = 0; i < 100; i++) { if (i % 2 === 0) { totalOfEvenNumberUnder100 += i; } } 命題に、「繰り返す」という文字がないのに、forで繰り返しています。手続き型に慣れたプログラマは、もう違和感を感じなくなってしまっているかもしれませんが、なぜ繰り返すのでしょうか。0から100未満の数字がほしいだけなのに。 また、最初に0で変数を初期化するのも命題にはありません。 さらには、偶数のみを取り出す処理と足す処理が交互に行われることになっています。偶数のみを累計する、という命題とは違う処理になってしまっています。 もちろん答えは一緒ですが、命題とは別の処理になってしまっているともいえます。 推奨 できるだけ処理に名前をつけていきます。 命題
他人に読んでもらうJavaScriptコードを書くために
とりあえず動けばいい、の精神でコードを書ける個人開発とは違い、仕事やオープンソースプロジェクトにおけるコーディングでは、「他人が読むコード」を意識して書く必要があります。 他人が読むのですから、もちろんわかりやすいコードでなくてはなりません。でも、「わかりやすい」とは何でしょう。どうしたら実現できるのでしょう。 この記事では、他人が読む可能性があるコードを書くときに気をつけていた方がいい事項について、いくつか紹介します。 まえがき 私が社会人になって数ヶ月が経ちました。会社では自分でコードを書くのはもちろん、他人の書いたコードをいじるという、今まであまり経験していない作業をすることもあります。 そしてその中で使われている言語にはJavaScriptも含まれます。JavaScriptは平易な言語であり、クライアントサイドでもサーバサイドでも採用できるので、様々な場面で使用されています。 さす
ECMAScript 6のArrayに関わる構文を試す - Qiita
ECMAScript 6 (ECMAScript 2015)のArrayクラスに関わる新しい構文を、いくつかみつくろってご紹介します。網羅的な記事を読んでも、具体的な使い方が思いつかないということはありがちです。そこで、個人的な興味から試してみたコードをご説明してみます。 Array.from()メソッド 静的メソッドArray.from()は、配列型(array-like)あるいは反復可能(iterable)オブジェクトから新しいArrayインスタンスをつくります。文字列も反復可能なオブジェクトのひとつです。 console.log(Array.from('文字列も反復可能')); // ["文", "字", "列", "も", "反", "復", "可", "能"]
[JavaScript]イベントにもasync/awaitを使おう - TES Blog
はじめに ECMAScriptが2015年から毎年バージョンアップするようになり、JavaScriptの仕様は大きく変わりました。 特に非同期処理まわりは、Promise(ECMAScript2015~)、async/await(ECMAScript2017~)が導入されたことで、 コールバック地獄の回避や可読性の向上などを実現できるようになりました。 また、JavaScriptではクリックやマウスホバーなどのイベントを検知する機能があります。 通常、イベント登録時に、イベント発火時に実行される処理をコールバックとして渡します。 実は、この従来の書き方をasync/awaitに置き換えると、一見すると同期処理的に書けるようにできます。 本記事では、以下の例のように、async/awaitへ置き換える話を説明します。 // いままでの書き方 const target = document.q
![[JavaScript]イベントにもasync/awaitを使おう - TES Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/22fb741118876e9b490a9dba2775634052544852/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F8599973812330537278%2F17391345971624909468%2F1521023761)
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
電話番号の正規表現をJavaScriptを使ってチェック
さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回はハイフンありなしどちらでもいけるようにします。 チェックするプログラムはJavascriptです。jQueryでも良いですね。 電話番号正規表現 ハイフンのありなしは値に対してハイフンはカウントしないようにします。ハイフンは空にしてから正規表現で チェックします。以下の通りです。簡単ですね。 <script> var tel = document.getElementById('tel').value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi,''); if (!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/))
JavaScript界隈の基本的な用語を歴史とともにさらにまとめてみた - Heppoko Binbo Yarou no Newbie Nikki
2018/12/23 リンク切れしていたものを削除 & リンクを追加 https://qiita.com/sinsengumi/items/e20342d13cbdd7ac2304 を読んで、すこしだけもやもや感がぬぐえなかったので、適当に自分が思ってる「今のJavaScriptはこんなかんじ」というのを書いた。 EcmaScript だいじなこと EcmaScriptとは、プログラミング言語ではない。 EcmaScriptとは、Ecmaインターナショナルが決めているJavaScriptの言語仕様のこと。 Ecmaとは、European Computer Manufacturers Association の略で、要は世界のコンピュータ関連の仕様を決めてる闇の組織みたいなところ。 （→History of Ecma） なんでEcmaScriptとかいうものがあるのか？ 大昔、JavaScr
JavaScript 界隈の用語まとめ - Qiita
最近、本格的に JavaScript をやろうかな、みたいなノリが出てきたので界隈の意味不明な用語をまとめてみました。 用語 説明 今使う？
配列内の値を検索する
配列内に特定の値があるか検索する方法をメモ。 サンプルコード for文で調べる方法です。 JavaScript // 検索する配列 var arr = ['a', 'b', 'c', 'd', 'e']; // 1つ目のサンプル var serachStr = 'c'; // 検索する文字列 var result = false; // 結果 for (var i = 0; i < arr.length; i++) { // 一致する文字列が見つかった場合は結果をtrueに変更する if(arr[i] === serachStr) { result = true; break; } } console.log('1番目', result); // true // 2つ目のサンプル serachStr = 'f'; // 検索する文字列 result = false; // 結果 for (
スクロールで指定した要素が表示された時にclassを追加する
スクロールで画面内に要素が表示されたらアニメーションを行う実装をすることがよくあるので、指定した要素が画面内に表示された時にclassを追加するという処理を作ってみます。 サンプルコード まずはclass付与の関数を作って実装してみます。 HTML <div class="contents"> <section class="section"> <div class="sample sample1"></div> </section> <section class="section"> <div class="sample sample2"></div> </section> <section class="section"> <div class="sample sample3"></div> </section> </div> .sampleに.is-showというclassが付くとフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで簡単！CSSとJavaScriptで作られた動くオシャレで綺麗なローディング画面アニメーション10選！【ロード画面/画像を使わない】
AlminとFluxやReduxの違い?
