空じゃないけど空の配列の話。（配列とかおれおれAdvent Calendar2018 – 22日目） | Ginpen.com配列とかおれおれAdvent Calendar2018 – 22日目 コンストラクターに要素数を与えると、その「要素数」を持った配列が作られます。しかし、「その数の要素」は持っておらず、配列の中身が undefined すら入っていない「空き枠」の状態になります。 const arr = new Array(3); console.log(arr.length); // => 3 console.log(arr); // => [ <3 empty items> ]
スプレッド演算子……じゃなくて、スプレッド構文の使える場所とか使い方とかそういう。（配列とかおれおれAdvent Calendar2018 – 20日目） | Ginpen.com
const arr1 = [11, 22, 33]; const arr2 = [44, 55]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // => [ 11, 22, 33, 44, 55 ] const arr4 = [0, ...arr1, 0, ...arr2, 0]; console.log(arr4); // => [ 0, 11, 22, 33, 0, 44, 55, 0 ] 次の個所で利用可能です。 配列初期化子 [] オブジェクト初期化子 {} 関数呼び出し時の引数 () 分割代入 = 、関数の仮引数 () 配列初期化子 [] ... に続けて反復可能 (iterable) なオブジェクトを置きます。まあ普通は配列ですね。 ECMAScript® 2018 Language Specification 12
Google Apps Scriptを使って簡易APIをサクッと作る - Qiita
今回、クライアント側のみでフォームに入力されたコードを事前に決められたコードかどうかを判断したい、という要望がありました。 が、適切なコードかどうかをクライアントサイドに埋め込んでしまうと問題があるので、どうしたらいいかを考えた結果、Google Apps Scriptを使ってSpreadSheetに記載されたコードとのマッチングを行う、という方法に辿り着きました。 今回はその方法と簡単なコードのメモを残したいと思います。 実際の動作デモ jsdo.itの動作デモ Google SpreadSheetデータサンプル jsdo.itのサンプルに、SpreadSheetに記載されてるコードを入力してCheckボタンを押すと、バリデーションしてくれます。 手順 実際の手順については以下のフローを踏みます。 Google Spreadsheetを新規作成 Spreadsheetのスクリプトエディタ
非同期に繰り返すならfor-await-of構文が使える、けど使わない方が良いかも。（配列とかおれおれAdvent Calendar2018 – 16日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 16日目 繰り返しにもいろいろあるよ。 for, while → for文を仕様からじっくり見てみる。あとwhileとか。（配列とかおれおれAdvent Calendar2018 – 13日目） for-in → for-inの仕様も見てみたよ。使う機会なさそうだけど。（配列とかおれおれAdvent Calendar2018 – 14日目） for-of → for-ofで配列も普通のオブジェクトも反復しよう。（配列とかおれおれAdvent Calendar2018 – 15日目） for-await-of → 別稿 forEach() → 別稿 for-of の亜種で、非同期に繰り返すやつに対応します。 const sleep = (ms) => new Promise((f) => setTimeout(f, ms)); as
JavaScript中級者向けHelloWorld - Qiita
この記事は、JavaScript2 Advent Calendarの9日目の記事です。「javascript に関することなら初心者〜玄人まで歓迎」と書いてあったので、間を取って中級者向けの記事を書きます。(そもそも玄人向けの記事は私には書けませんが…) 内容は、HelloWorldです。中級者の方は、もちろん分かりますよね。 初心者の方はヒントを見ながら(ちょっと厳しいかもしれませんが)、上級者の方は鼻で笑いながら、最後まで読んで頂けると幸いです。 このコードの振る舞いを完全に説明できれば、あなたはJavaScript中級者です。 コード ((_, ...args) => Function.prototype.call.call(...args))`${ function() { console.log(this.valueOf()) } }${ String.raw({ raw: {
配列を空にするにはlength=0で十分。（配列とかおれおれAdvent Calendar2018 – 02日目） | Ginpen.com
配列とかおれおれAdvent Calendar2018 – 02日目 JavaScriptの配列のインスタンスを保ったまま中身を全て削除したい場合、 length に 0 を設定するだけで実現できます。 仕様 length の変更で要素が削除されることについて、配列特殊オブジェクト Array Exotic Objects の項に記載があります。 9.4.2 Array Exotic Objects … whenever the value of the length property is changed, every own property whose name is an array index whose value is not smaller than the new length is deleted. This constraint applies only to own
👻globalThis👻と🌏global🌏と🌝this🌝 - Qiita
皆さんこんにちは。今回はJavaScriptの👻globalThis👻について解説しようと思います。globalThisはJavaScript (ECMAScript) の新機能です。現在TC39プロセスのStage 3にあり1、このまま何事もなければ近いうちにECMAScript2に正式採用されることになります。 この記事はJavaScript2 Advent Calendar 2018の5日目の記事です。 さて、皆さんはこのglobalThisを使ったことがあるでしょうか。私はありません。というか、現在のところglobalThisが利用可能なのは、つい今日安定版がリリースされたばかりのGoogle Chrome 71のみです。この記事にはglobalThisを使ったコード例が出てきますが、実際に動かしたい場合はちゃんとGoogle Chromeが最新版になっているか確認してください
switch文が実はもう少し使える子だった？ - Qiita
はじめに JSに関する小ネタです。 以下のように感じる人はもしかしたらこの記事を読む価値があるかもしれません。 if-elseの羅列はやっぱ読みづらいし面倒だなー switch文でパターンマッチみたいなの使いたいなー ただしパターンマッチを実現するという内容の記事ではないので期待はしすぎないでください。 注意 サンプルコードはNode.jsの10.13.0で試してます ほとんどのブラウザで使える内容だとは思いますが、検証しきれていません 間違ってるとこがありましたら指摘お願いします switch文が使いにくいと感じる場面 "/hoge/fuga"のような URL パスっぽいものがあったときに、その値に応じて処理や返り値を変えたいとする。 単純に完全一致だけで扱えるケースであればswitch文を使える。 function returnSomething(path) { switch (pat
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
JavaScript のスクリプトインポートを正しく使い分けようという話
JavaScript の文脈で「スクリプトをインポートする」といった場合、色々な可能性が考えられます。現場での混乱を避けるためにも用語を正しく使い分ける必要があります。そこで本記事では JavaScript のスクリプトインポートについて整理します。 更新履歴 2019/12/05 Dedicated Worker の ES Modules サポートについて追記しました。 2018/09/08 Worklet の type とその上での dynamic import について追記しました。 Service Worker 上での importScripts について追記しました。 Classic Script と Module Script スクリプトインポートを理解するには、スクリプトについて正確に理解する必要があります。HTML の仕様では、スクリプトには Classic Script
ちゃんと理解するCode Splitting - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Code Splitting、サボってきたのですが、必要になりそうだったので真面目に調べてみました。 これからCode Splittingやりたい方の入口的な役割になれれば幸いです。 Code Splittingとはなにか Code Splittingはその名の通り「コードを分割すること」を指します。分割されたコードはユーザのアクションに応じて非同期に読み込まれます。 ちなみにWebpackでentry point分けることとかもCode Splittingと言えばそうなのですが、本記事では触れません。また、別にSPAでなくともCode
Nodeでプライベートな(exportsされてない)メソッドのテスト - ぶれすとつーる
だいたいこの記事のまんまですが大雑把な訳記事だと思ってください。 こんなファイル(app.js)があったとする。 //app.js exports.testableMethod = function () { complicatedMethod(untestableMethod); }; var untestableMethod = function (a, b) { return (a + b); }; testableMethodはexportsされてるのでテストできますね(まぁ参照エラーでるけど) こういう時untestableMethodのテストって結構至難の業でexportsされてるメソッド経由でテストしてたり、テスト用に var local ; exports.test = local = {}; local.privateMethodA = fucntion () {}; と
JavaScriptのパッケージマネージャ「npm」の開発元が、JavaScriptの仕様を策定するECMA TC39に参加 － Publickey
JavaScriptのパッケージマネージャ「npm」の開発元が、JavaScriptの仕様を策定するECMA TC39に参加 Node.js/JavaScriptのパッケージマネージャnpmの開発元であるnpm.incが、JavaScriptの仕様策定に参加する。npmが培ってきたパッケージ管理の知見が、将来のJavaScript仕様に反映されることが期待される。 標準化団体のECMA Internationalでは、データフォーマットのJSONやプログラミング言語のC#やEiffel、Open XMLファイルフォーマットなど、さまざまな仕様の策定を行っています。 ECMA Internationalが策定する標準のなかで、もっとも知名度が高いものといえばECMAScript、通称JavaScriptでしょう。ECMAScript/JavaScriptの仕様策定は、ECMA Interna
DataTables example - DOM positioning
When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialisation parameter which can be set to indicate where you wish particular features to appear in the DOM. You can also speci
Webブラウザからハードウェアにアクセス！WebUSB APIを使ってログイン認証を実装してみよう
Webブラウザからハードウェアにアクセス！WebUSB APIを使ってログイン認証を実装してみよう ちゃんとく（dotstudio株式会社） 近年「IoT」がバズワードとなっていますが、「WoT（Web of Things）」というワードを聞いたことがあるでしょうか？ 「WoT」はごくごく簡単にいうと、既に普及しているHTMLやJavaScriptなどのWeb技術を使ってIoTの開発を標準化しよう、という考え方です。WebBluetooth APIやWebNFC APIなど、みなさんが慣れ親しんでいるWeb技術を使ってハードウェアを制御する方法も増えてきています。 今回は、WebページからPCに繋がれたUSBデバイスを制御することができる「WebUSB API」の概要とサンプルを紹介します。 HTMLと簡単なJavaScriptで試せる内容になっていますので、Webデザイナーやディレクター
CSSとJavaScriptのインライン化
CSSやJavaScriptをインライン化してみている。速い。ラスター画像もBase64で埋め込めみたくなる。しかしインライン化はやはり気持ちが悪く、落ち着かない。この気持ち悪さはウェブサイトと言う単位に意味が薄くなってしまうことにあるのではないか。 ウェブサイトは全体で一冊の本になっているようなイメージが漠然とある。フレーム全盛期を体験していることが大きい。このイメージではそれぞれのウェブページはその本のページにあたり、それぞれから参照されるCSSやJavaScriptファイルはそのページ群を留める接着剤やひもにあたる。それらをインライン化してしまうと、本のページそれぞれを切り離し、ペラペラな紙にしてしまっているような印象を持ってしまう。 実際にはそれぞれのウェブページは半ば独立したもので、ユーザーからも様々なウェブサービスからもそう扱われるようになって久しい。直帰率が限りなく100%に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
配列風オブジェクトをArray.from()で本物の配列へ変換。（配列とかおれおれAdvent Calendar2018 – 05日目） | Ginpen.com
Array(3)の代わりにArray.of(3)を使おう。（配列とかおれおれAdvent Calendar2018 – 03日目） | Ginpen.com
GitHub - google/clasp: 🔗 Develop Apps Script projects locally.
Hexagons grid - responsive