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

JavaScript の this は、(他のプログラム言語から見ると) ちょっと面白い挙動に見えることがあります。 先日、この this の挙動について、会社の同僚が説明してくれたのですが、これまで聞いた説明の中で一番分かりやすいと感じたので、頑張って日本語で説明してみます。 分かりにくかったら、多分それは私の技量不足。 this と function の関係 function が基準スコープになるのがまず一点。 その function をどう呼ぶかで変わるのかがもう一点。 それを踏まえて…… this は function を呼んだ時の . の前についているオブジェクトを指している と理解できるというのが、同僚の説明でした。 . が省略された場合はグローバルオブジェクトになります (non-strict モード時)。 strict モードでは undefined になります。(@ryo
あらまし ArrayBufferに格納された比較的サイズの大きいデータ(バイナリファイルなど)をリモートへ送信や受信したり、ウェブワーカーに渡す際に、UIのブロックを防ぐために小さな単位に分割したい場合がある。ここではArrayBufferを指定のサイズのセグメントに分割する方法と、複数のArrayBufferを単一のArrayBufferに結合する方法を紹介する。 分割 分割はArrayBufferのslice関数で行う。slice関数は、指定の開始から終了位置までのデータを保持した新しいArrayBufferオブジェクトを返す関数である。sliceされたデータは、もとのArrayBufferとは共有されず、新たにコピーされる。 function segmentation(arrayBuffer, segmentSize) { var segments= []; var fi = 0;
この記事は JavaScript2 Advent Calendar 2018 の1日目の記事です。 こんばんは。@diescake です。 今年は、JavaScript 経験の浅い新人さんや外注さんをリードする立場として、 とにかく幅広いメンバーのコードレビューをする機会に恵まれたのですが、 事ある毎に Array.prototype.forEach を利用する人が多かったため、初心者向けに要点を整理してみました。 以下 ES2015 以降のバージョンをサポートするブラウザ、あるいは polyfill を利用していることを前提としています。 結論 配列に対して何らかの操作を行う際は、 filter, find, map, reduce などのメソッドを利用できないか検討し、 いずれのメソッドでも実現ができない場合の最終手段として forEach を選択しましょう。 下記に、いくつかのサンプ
Jestで始める! ユニットテスト 第1回 環境の準備とテストの実行 JavaScriptのユニットテストのためのツール、Jestの特徴や基本的な使い方を解説します。「そろそろテストを書く習慣を付けたい」、そう思う人のための始めの一歩です。 Jestとは Jestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツールです。 Jest · 🃏 Delightful JavaScript Testing 日本語のドキュメント Jestは日本語のドキュメントもあります。日本語で基本的な部分を知るのに役立ちますが、情報が追いついていない場合もありますので、最新情報は英語ドキュメントを参照するようにしてください。 公式ページで「Zero configuration testing platform」と謳っているように、あれこれ設定をすることなく、他
関数内で、その関数自身の情報を得たいなと思っていました。 次の方法で可能となります。 var functionA = function(){ console.log(arguments); } argumentsというオブジェクトは、本来名前の通り関数に渡された引数を参照できる配列に似たものです。 もし関数に3つの引数が渡されたなら、arguments[0], arguments[1], arguments[2]という具合に参照ができます。 arguments.callee さて、argumentsにはlengthとcalleeというプロパティがあり、lengthは引数の数、calleeは現在実行している関数の関数本体を示します。 今回用いるのは、まさしくこのarguments.calleeというプロパティです。 このarguments.calleeにはいくつかプロパティがあり、関数名など
const URLJoin = (...args) => args .join('/') .replace(/[\/]+/g, '/') .replace(/^(.+):\//, '$1://') .replace(/^file:/, 'file:/') .replace(/\/(\?|&|#[^!])/g, '$1') .replace(/\?/g, '&') .replace('&', '?'); URLJoin('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo'); // 'http://www.google.com/a/b/cd?foo=123&bar=foo'
JavaScriptにおける非同期処理は一種の悪夢です。非同期処理は容易にコードを複雑化させ、品質の低下を招きます。そこでこの問題を解決するため、非同期処理を簡単に扱うことができる、Promiseやasync/awaitという機能が導入されました。この記事では、Promiseとasync/awaitを用いた非同期コードの単純化について簡単な解説をします。 実行順序がコード通りにはならない非同期処理 非同期処理とは何でしょうか。非同期な処理は、コードの順番通りには実行されません。どういうことか、簡単な例を見てみましょう。 setTimeout(() => console.log('hello'), 500); console.log('world!'); このコードでは500ミリ秒後に「hello」と表示し、その後に「world」を表示しようとしています。ですが、実際には「world」の後に
Moment.js has been successfully used in millions of projects, and we are happy to have contributed to making date and time better on the web. As of September 2020, Moment gets over 12 million downloads per week! However, Moment was built for the previous era of the JavaScript ecosystem. The modern web looks much different these days. Moment has evolved somewhat over the years, but it has essential
■ つかいかた(基礎編) ダウンロードしたmoment.jsをscriptタグで読み込ませたら準備完了です。 あとは下記のような実装で使用できます。 // momentオブジェクトを初期化して・・・ var m = moment(); // formatで出力! var output = m.format("YYYY年MM月DD日 HH:mm:ss dddd"); console.log(output); // => 2013年05月15日 12:34:56 Wednesday // 現在時刻 moment(); // ミリ秒で指定 moment(1368543600000); // タイムスタンプ(秒)で指定 moment.unix(1368543600); // Date.parseで解析可能な文字列を指定 moment("May 15, 2013"); // Dateオブジェクトか
次のページ JavaScript では、文字列や配列などの JavaScript のコア機能から、JavaScript の最上部に構築されたブラウザー API まで、ほとんどのものがオブジェクトです。関連する関数や変数を効率的なパッケージにカプセル化して、便利なデータコンテナーとして動作する独自のオブジェクトを作成することもできます。 JavaScript のオブジェクト指向の性質を理解することは、言語に関する知識をさらに深め、より効率的なコードを書く場合に重要です。したがって、このモジュールを用意しました。ここではオブジェクトの理論と構文を詳しく説明し、独自のオブジェクトを作成する方法を見ていきます。
JavaScript の関数オブジェクトには、「bind」という便利なメソッドがあります。このメソッドは関数内で参照できる this を指定のオブジェクトに束縛できるものです。この関数を使うと、this に関連した良く有る問題をスマートに解決できます。 this にまつわるよくある問題 次の例は、実行後に「こんにちわ ぷんちゃん」とアラートするコードです。 var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('こんにちわ ' + this.name); } var punchan = new Person('プンちゃん'); punchan.sayHello(); //「こんにちわ プンちゃん」と表示される
この記事(JavaScript .(ドット)つなぎのキー文字列でオブジェクトの値にアクセスする)の最後に、 ただ、どうすれば obj['world.japan.greeting'] でウィッス!出来るのかが分かりませんでした。 プロパティへのアクセスについてカスタマイズする方法をご存知の方がいたら教えてもらえると嬉しいです(・ω<) とあったので書いてみます。 まぁ、Proxies APIを使うだけなんですが。 Proxies API Proxies APIというのは、 オブジェクトにアクセスしたり (obj.a) in演算子を呼び出したり ('a' in obj) deleteを呼び出したり (delete obj.a) したとき、予め設定しておいた関数を実行して挙動を乗っ取れるというECMScript 6で予定されている機能で、僕が好きなものです。 まだ策定中の仕様の中の機能の一つなの
LotusNotesな日々Lotus/IBM/HCL社のLotusNotes/Dominoに関係する何かを日々語ってるようなきがしないでもないブログです。 結論から言えば連想配列です。 JavaScrpiptの連想配列は var ary = { hoge : "hogehoge" , notes : "123" }; といった記載方法をします。 さらに、100とか"aaa"とかtrueとかの値だけでも 一つの文として認識させることができます。 (文と式では意味が違うのですがここでは省略します) よって、 function(){ var x = 100; var y = 200; var z = function(){}; } は、 function(){ x: 100; y: 200; z: function(){}; } でも同じ意味となります。 ここで、カンのよい方なら 既にお気づきか
高度情報化社会やビッグデータ時代と呼ばれている現代において、データビジュアライゼーション(データの視覚化)は注目されている分野の一つです。 アプリだけでなくWebサイトにおいても、ダッシュボード画面などで、大量のデータの中から意味のある情報を、分かりやすいUIを使って表示する機会が増えています。 ホームページにこのようなデータを表示するときに役立つのが、JavaScriptベースのチャート・グラフライブラリです。 操作性が優れていたり、さまざまな種類のチャートやグラフを表示したり、レスポンシブ対応していたりと、さまざまな機能を持つチャートライブラリが存在します。 今回は、2017年に試してみたい、いざという時に活躍するJavaScriptライブラリを集めました。 ほどんどのライブラリが商用利用も可能で、汎用性があります。 次のプロジェクトで採用できそうなライブラリをぜひ探してみてください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く