Object structure in JavaScript enginesFrom a developer's perspective, objects in JavaScript are quite flexible and understandable. We can add, remove, and modify object properties on our own. However, few people think about how objects are stored in memory and processed by JS engines. Can a developer's actions, directly or indirectly, impact performance and memory consumption? Let's try to delve i
Stage 0 Authors: Rob Eisenberg and Daniel Ehrenberg This document describes an early common direction for signals in JavaScript, similar to the Promises/A+ effort which preceded the Promises standardized by TC39 in ES2015. Try it for yourself, using a polyfill. Similarly to Promises/A+, this effort focuses on aligning the JavaScript ecosystem. If this alignment is successful, then a standard could
はじめに Import Assertions は現在 Stage 3 の ECMAScript のプロポーザルである。2020 年 9 月に行われた TC39 のミーティングで Stage 3 になった(ミーティングノートは https://github.com/tc39/notes/blob/master/meetings/2020-09/sept-22.md#import-assertions-for-stage-3 にて公開されている)。 Babel では 先日リリースされた 7.12 から Import Assertions を使えるようになった。 この記事では現時点での Import Assertions について解説する。 概要 このプロポーザルは従来の import 文 にインラインの構文を追加し、モジュール指定子とは別に詳細情報の指定を可能にする。主に想定される用途は Ja
イントロダクション JavaScript における Promise は失敗か成功のどちらかを表し、どちらの場合も何らかの値を持つことができる。さらにメソッドチェーンによりパイプラインのようなものを作ることができ、失敗すると short-circuit する。この点において Promise は Either monad の async 版のような感じがする。ここでは JavaScript の Promise と Scala の Either の対応関係を示す。 Note: 筆者は関数型プログラミングに詳しくない。 constructor Promise の constructor である Promise.resolve と Promise.reject はそれぞれ Scala の Right と Left に対応している。
クラス 「クラス」と一言にいってもさまざまであるため、ここでは構造、動作、状態を定義できるものを指すことにします。 また、この章では概念を示す場合はクラスと呼び、クラスに関する構文(記述するコード)のことをclass構文と呼びます。 クラスとは動作や状態を定義した構造です。 クラスからはインスタンスと呼ばれるオブジェクトを作成でき、インスタンスはクラスに定義した動作を継承し、状態は動作によって変化します。 とても抽象的なことに思えますが、これは今までオブジェクトや関数を使って表現してきたものです。 JavaScriptではES2015より前まではclass構文はなく、関数を使ってクラスのようなものを表現して扱っていました。 ES2015でクラスを表現するためのclass構文が導入されましたが、このclass構文で定義したクラスは関数オブジェクトの一種です。 class構文ではプロトタイプベ
!!! 注意 この文章は偏差値の低い人間が書いてます。 ・厳密な解釈を求める方 ・頭の悪い人間の文章を読みたくない方 ・低偏差値の人間が書いた文章を見るとデカめの蕁麻疹が全身にできるという方 は下の便利なリンクからちゃんとしたドキュメントをお読み下さい。 github Ecmascript MDN ES6 誤りのご指摘はどんどんお待ちしております。 追記: ES6の継承の欄が抜けてたので直しました。 JavaScriptの表記が間違ってたので直しました inoinojp さんありがとうございます リンクの仕方を修正 Texと混ざってました gaogao_9さんありがとうございます 「そもそもES6ってなんやねん。エントリーシートか?」 って方も多いと思います。僕も詳しくは知りません!!でも、一言で言えば、 ESは JavaScriptのオシャンティな言い方 (ES = Ecmascrip
I want to implement constants in a class, because that's where it makes sense to locate them in the code. So far, I have been implementing the following workaround with static methods: class MyClass { static constant1() { return 33; } static constant2() { return 2; } // ... } I know there is a possibility to fiddle with prototypes, but many recommend against this. Is there a better way to implemen
(function (param1, param2) { //処理 }('hoge', 'fuga')); var result = (function (param1, param2) { return param1 + param2; }(1, 2)); console.log(result); //3が出力される。 ズバリ、スコープの汚染を防ぐため。 JavaScriptのスコープ JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ」のみ。すなわち関数は任意にスコープを作るための唯一の手段である。 関数スコープの中でvarを使って定義された変数は関数の中でローカルな変数になるので、関数の外側の変数を上書きしたりすることはない。 なるべく変数の有効範囲をせばめる 一時変数を使用する一連の処理があった時に、それらの変数をすべてグローバル変数にしてしまうのはアンチパタ
オブジェクトのプロパティにアクセスする方法は2種類ある。 ドット記法 .(ドット)を使ってプロパティにアクセスする。 var obj = new Object(); //nameというプロパティに"はらこ"という文字を格納する。 obj.name = "はらこ"; //nameというプロパティから値を取得してコンソールに表示する。 console.log(obj.name); ブラケット記法 []を使ってプロパティにアクセスする。 var obj = new Object(); //nameというプロパティに"はらこ"という文字を格納する。 obj["name"] = "はらこ"; //nameというプロパティから値を取得してコンソールに表示する。 console.log(obj["name"]); 違いについて ブラケット記法は、プロパティ名に変数を使うことが出来る。 ※ドット記法は変数
組み込み端末のアプリケーションに Electron を採用し開発・運用を行っています。 継続的な機能追加やトラブルサポートを行いながら 3 年が経過したので、Electron を採用した経緯や結果を経験を交えながら共有したいと思います。 組み込み案件自体が初めてでしたのでその話も入っています。 約 700 台ほど導入されており、なかなか大きな案件での採用と思いますので参考になれば幸いです。 ※Electron の基本的な説明は割愛します。 システムについて 一般的に「受付精算機」などと呼ばれ、店頭に何台か並べて設置して自動で受付・精算を行うシステムです。 ホテルの受付端末のイメージです。ハード的にはセルフレジにも近いです。 筐体自体は他社が用意し、弊社はその上に載せる GUI アプリケーションのみを担当しました。 機能 主な機能として 来店受付・整理券発行 予約チェックイン チェックアウト
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く