JavaScriptで密かに誤解されていること5選 - Qiita
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; func(...arr1, ...arr2); また、ES2018からはオブジェクトの中でも...が使えます。 当初この...を「スプレッド演算子」（spread operator）と呼ぶ向きがありましたが、よく見るとこれは全然演算子ではありませんね。 演算子の定義は人によって異なるかもしれませんが、「いくつかの式から式を作る働きをする構文」というのが一般に受け入れられている定義だと思います。例えばx + 1という式は、xという式と1という式を+で繋げる事でx + 1という式を得ています。この働きをする+が演算子です。 こうしてみると、...は式を作るのではありません。つまり、const arr2 = ...arr1;のようなものは受け付けられないということです。...が使えるのは配
Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript
???Javascript is weird. Don’t believe me? Try converting an array of strings into integers using map and parseInt. Fire up your console (F12 on Chrome), paste in the following, and press enter (or run the pen below). ['1', '7', '11'].map(parseInt);Instead of giving us an array of integers [1, 7, 11], we end up with [1, NaN, 3]. What? To find out what on earth is going on, we’ll first have to talk
![Why ['1', '7', '11'].map(parseInt) returns [1, NaN, 3] in Javascript](https://cdn-ak-scissors.b.st-hatena.com/image/square/a72f1bb5be6a9d91b8e2649394cfc871da9ab24b/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1112%2F1%2Auq5ZTlw6HLRRqbHaPYYL0g.png)
高速化の観点から new Array(100) を使わない方が良い理由
別件で V8 の JIT コードの逆アセンブルを眺めている時に気づいたのですが、JavaScriptで new Array(100) という形で配列を作るのは、高速化の観点から言うと V8 においては避けるべき書き方です。 高速化を求める方は、 new Array() や [] で作成して Array#push で追加していくのが良いでしょう。この記事では、その理由を説明します。 今回の記事は、以下の V8 のブログ記事を参考にしております。 https://v8.dev/blog/elements-kinds 「詰まった配列(Packed Array)」と「穴あき配列(Holey Array)」 v8 は内部的に、その配列がどういうタイプの配列であるかの状態を記録しており、その情報を利用して最適化を適用します。状態は内部的には21個あるのですが、今回話題にするのは、その中でも「詰まってい
2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
JavaScriptの「コールバック関数」とは一体なんなのか
近年のフロントエンドの盛り上がりはすごいですね。プログラミング初心者がJavaScript（最近ではTypeScriptも）から学び始めるなんて昔ではなかなか考えられなかったことです。 そんな世界中で大人気のJavaScriptですが、プログラミングに慣れていても困惑する部分が結構あります。特に初心者にとっては、非同期処理、this、コールバック関数、あたりが難しいのではないかと思います。 非同期処理については前に解説しましたし、thisの解説はネットに大量に転がってるので、今回はコールバック関数について解説します。 コールバック関数ってなんなんだ コールバック関数というとsetTimeoutなんかで使われるアレですね。Node.jsでもたくさん使われます。setTimeoutだと以下のような使い方になります： setTimeout(function() { console.log('He
新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita
概要 今風の手法でJavaScriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウザで動作するJavaScriptアプリをゼロから作っていきます ブラウザ上で動作するフロントエンドアプリを作ったら、ライブラリ化してnpmモジュールとして公開します 対象読者＝今風のJavaScript開発の入門者、初心者 11年前からタイムトラベルしてきたひと ブラウザ用アプリを作りたいが今風の手法の初心者(jQueryだけでなんとか生きてきた人とか） Node.jsの環境をつかってフロンドエンドアプリかいているけど、「何となく」理解している人 来年の新人教育係 キーワード 本投稿では、以下のようなキーワードが出てきます。 Node.js、npm、ES6(ECMAScript6
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
Node.jsにおけるプロトタイプ汚染攻撃とは何か - ぼちぼち日記
1. はじめに 最近わけあってNodeのセキュリティ調査をしているのですが、今年の5月に開催された North Sec 2018 でセキュリティ研究者の Olivier Arteau 氏による 「Prototype pollution attacks in NodeJS applications」という面白い発表を見つけました。 この発表の論文や発表資料、デモ動画などもgithubで公開されていますし、ちょうどタイミングよくセッション動画も最近公開されました。 github.com Olivier Arteau -- Prototype pollution attacks in NodeJS applications この発表で解説されているのは、悪意のある攻撃者が、JavaScript言語固有のプロトタイプチェーンの挙動を利用して、Webサーバを攻撃する方法です。 発表者は、npmからダ
JavaScriptでデッドロックを作ってみた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? いきなりですが、皆さんは排他制御をご存知でしょうか。排他制御は並列コンピューティングにおける概念であり、複数のプロセスが資源を共有して使用する際に、複数のプロセスが同時に資源を使用している状況（競合）が発生しないように制御する手法です。（この分野にはあまり詳しくないのでまさかり等は歓迎します）。 排他制御の一手法としてロックが知られています。この手法では、ある資源を使用するためにはまずその資源のロックを取得する必要があります。そして、資源を使い終わったらロックを解放します。あるプロセスがロックを取得している間は、別のプロセスは同じロック
JavaScriptのオブジェクト指向は、逆の順番で学んだほうが理解しやすいと思うので…
※この投稿は 2011/03/10 に こちら に投稿した記事の転載です。 これを書いた経緯 事の発端というか、きっかけは、id:perlcodesampleさんとid:gfxさんの下のポストを見て、 JavaScriptで一番簡単にオブジェクト指向プログラミングを行う方法 (id:perlcodesampleさん) JavaScriptにおけるオブジェクトの定義 (id:gfxさん) new とか prototype を使うのが推奨されてないとか、直接代入するほうが楽とかじゃなくて、挙動が違うんだよなぁ、と思ったこと。 挙動が違うんだから、もちろん使いどころも違うんですよね。 でも実際、JavaScriptのオブジェクト指向は混乱しやすいと思います。 自分もご多分にもれず、さんざん混乱させられたクチですしね。 わかってしまえば、どってことなくて、とってもシンプルなんですけどね。 せっかく
素のJavaScriptで書くPOSTメソッドにおける二重送信対策
はじめに 現在とあるチームプロジェクトにおいてフロント(Vue.js)を担当しております。しかしバックエンドをNode.jsで組んでおり、ちょくちょくそちら側も勉強しております。 今は「Node.js超入門」を使って勉強を進めています。 とても親切に優しく書かれているので、初学者の方にはお勧めですねー。 チャプター３で「超簡単掲示板を作ろう」とあるのですが、個人的に追加で機能を実装しながら遊んでいましたところ、とある問題に気づきました。 それが、「フォームの二重送信問題」 特に「ページリロード時に発生する」ものについてです。 対策としては、PRGパターンの活用や、トークンの発行など色々あるのですが、 調べても調べても出てくるのはPHPにおける対策例ばかり。 確かに以前私もPHPを使ったことがあるので、そちらについては分かるのですが、今回はNode使ってるし、しかも送信後の表示ページは元のホ
LKL.js: Linux kernelを直接JavaScript上で動かす - Blog posts by @retrage
Linux kernelを直接JavaScript上で動かした． つまり，JSLinuxのようにEmulatorをJavaScriptで作成し， その上でLinuxを動かすのではなく， JavaScriptで書かれたLinuxを生成し，それを動かす，ということである． LKL.js Architecture リポジトリは以下の通り． https://github.com/retrage/linux/tree/retrage/em-v2 なお lkl.js Demo にデモを用意した． SharedArrayBufferを有効にして試してみてほしい． Linux Kernel Library (LKL) ここでは，Linux kernelをLibrary OSの形態の1つであるAnykernelにする Linux Kernel Library (LKL)を利用する． LKLはLinux ke
クライアントサイドのモデルとは何か 後編 ~ 単方向データフローと参照透過性 - mizchi's blog
この記事は クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog の後編。 前提として、今回の出す例で、「Web フロントエンドで、そこまで複雑な状態を考慮するなんてそもそも間違ってる」という意見があると思う。これに関して、そもそも「SPA というものが、いかに実現可能になったか」という視点の話であり、また、自分の経験上「フロントエンドなんて雑でシンプルでいいでしょ」というものが、複雑な構成を取っていくのを、何度も目にしてきた、という2つの前提がある。 適切な粒度に応じた適切な構成をとるべし、というのは別の話で、今回、対象が複雑なアプリケーションなのは前提とする。 Flux 以前 先の記事で ActiveRecord を前提にしたサーバーサイド ORM をクライアントで輸入しようとすると、クライアントでは Storage 層が存在し
クライアントサイドのモデルとは何か 前編 ~ クライアントサイド MVC の死 - mizchi's blog
前置き この記事、本来は Flux には Model がないのではないかと思った覚書 - ナカザンドットネット と Flux の Store が ViewModel かって話からの MVW とかどうでもいいって話 - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く のアンサーとして書き始めた記事だが、前置きだけで別テーマとなったので、前後編に分割する。 僕は元々がゲームクライアント屋だったときの発想を引きずってるのと、既存の Web の開発の文脈に対して距離を置いていることを明言しておく。あとこういうテーマでとある原稿書いていたので、頭の整理も兼ねて。 ActiveRecord の功罪を振り返る このテーマを語るにあたって、まず Rails の MVC について述べなければならない。なぜなら、フロントエンドのアーキテクチャとは、サーバーサイドの MVC の模倣に始まり、破綻し、結果として
何故for文は許されるのか？反省会会場 - Qiita
祖父母記事: なぜfor文は禁止なのか？ポエム版 親記事: でもやっぱりfor文は使っていいと思うよ だって遅いんだもん こんなに遅いとは思いませんでした。 まさか1/6の速度しか出ないだなんて軽くショックです。 折角良いサイトhttp://jsben.chを教えてもらったので速度改善を目指して色々試行錯誤してみましょう。 この記事(反省会)では、速度も意識したメソッドチェーンのあり方を考えていきます。 メソッドチェーンはチューニングでどの程度速くなるのか それによる可読性はどの程度影響するのか 結局JSerはどう生きていけば良いのか 配列を生成するイディオムの速度比較 JSは配列作るのが下手くそですが、 メソッドチェーンや関数型プログラミング的な事をしたければ、 まずは速い数列(配列)を作るイディオムが必要です。 とりあえず4パターン用意してみました。 // length指定: 別の所で
JavaScriptのクロージャはメモリーリークをちゃんと理解して使おう - Qiita
はじめに 前にブログで書いた記事なのですが、せっかくなのでQiitaにも投稿します。 脱初級者の壁として君臨しているクロージャ。クロージャの使い方はわかったけど、いろんな記事を見るとクロージャは問題点もあるみたい。それに、そもそもクロージャの使い所がいまいちわかんないと思ってクロージャに再度立ち向かおうと思った次第です。同じような悩みを抱えているデザイナーさん、コーダーさん、フロントエンドエンジニアさんの参考になれば嬉しいです。 クロージャとは とりあえずおさらい & 補足をします。 よく見かけるクロージャの見本がこちら。 ここで簡単にクロージャについて説明します。ちなみに、最近読んだ本で何となくJavaScriptを書いていた人が一歩先に進むための本が説明としてわかりやすかったので、そちらを引用させていただきながら。 まずクロージャとは ローカル変数を参照している、関数の中に定義している
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの関数名の全て - Qiita
setTimeout()の0秒は4ミリ秒 - Qiita
JavaScript初心者にclassを伝える - Qiita
オブジェクトの比較に JSON.stringify() を使ってはいけない —— プロパティには順序が無い - Qiita
