【JavaScript】実数から整数への変換に parseInt() を使ってはいけない２つの理由🙅♀️ - Qiita
背景（誰のための記事？） JavaScriptプログラマのみなさまこんにちは。 最近のお仕事の傾向として、マイクロサービス化といいいますか、オブジェクト指向の延長といいますか、MVVM化といいますか、下回りは速度＆効率重視でC++で構築し、中間は保守（メンテ）＆書きやすさ＋ちょっぴり速度も重視で node.js（JavaScript）、上層のUIはなるべく広範囲で使えるように考慮して HTML＋CSS 、という３層構造 ・上層：HTML + CSS ・中層：node.js（JavaScript） ・下層：C++ が流行っていまして、今回の事件は中層の node.js スクリプトの部分で発生した問題でした。しかも、下層で生成された巨大なデータを中層で処理し、上層で表示しようとするとある条件で遅延が発生し、表示がカクつくという問題で、その「ある条件」が長期間に渡って特定できない、、、といった難
ソフトウェア開発の進歩完全に止まったような気がする
(ゲームの話は一切知らん) いつのまにか「Webフロントエンドの動きが速い」とか誰も言わなくなってることにふと気付いた。なんというかソフトウェアをどう作るか、という問題にたいして大枠の部分では完全に固まってしまって、あとは個別の事情をどうやっていくかみたいな話しか残ってないように見える。 端的にいえば、宣言的UIとkubernetesは聖杯だったのではないかな。 k8sにかんしては「Cloud Runみたいのでいいじゃん」みたいな話はあると思うんだけど、Envoyほしいとかなってくると結局事実上k8s必須だし、今新しくアプリ作るときに宣言的UIじゃないフレームワーク使うこととかほぼ考えられんよな。で、こういう構成が定番ですね、みたいになってなんかもう数年は経つ気がする。結果として日本語でソフトウェア開発の話になるとチームビルディングがどうのみたいな話しかなくなってきていて、なんかつまんねー
Webフロントエンド開発(2021)の見取り図をつくりたい
本業はiOS開発なのですが、6月頃から個人開発でWebフロントを触っています。 Webフロントに入門するときに、開発の前提知識・専門用語が多すぎて、脳が処理しきれない状態になりました。 これでも数年前のより混沌としてた時期よりは安定してきているように思うんですが、それでもやはりカオス感は否めませんでした。 Webフロントエンド開発の見取り図があればいいのにと思ったので、自分でちょっとつくってみようと思いました。 個別の技術要素の情報は豊富にある（ありすぎると言ってもいいかもしれません）んですが、全体像がよくわからないので、 たとえば「TypeScriptで開発した方がいいのか？」とか、「Babelとかwebpackってインストールしなきゃいけないの？」とか、 そういう素朴な疑問が学習進めて行っても、なかなか解消できなかったので、いい感じのざっくり感でまとめられたらと思います。 この記事で全
JavaScript クイズ解説: NaN === NaN の結果はどうなる？
先日、このようなツイートを書きました。 久しぶりの JavaScript クイズ。 JavaScript において NaN === NaN の結果は次のうちどれになるでしょうか？ — Takuo Kihira (@tkihira) September 7, 2021 答えは 4 の「状況によって上記以外もありうる」です。でも、2 や 3 を選んだ方も、もはや正解だといって差し支えないと思います。 解説が長くなったので、ブログ記事にまとめました。 そもそも NaN とは NaN は “Not a Number” を意味する数値です。数値なのに「Not a Number」というのは違和感があるかもしれませんが、数値表現することが出来ない状態を保持するために便宜的に用意された数値、というようなものです。 NaN は、浮動小数点演算において数値では表現出来ない計算をしようとすると登場します。例えば
JavaScriptはなぜシングルスレッドでも非同期処理ができるのか/Why Can JavaSctipt Invoke Asynchronous in Single Thread?
JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。
アクセシブルじゃないクリックイベントを発見する
(() => { "use strict"; const elements = Array.from(document.querySelectorAll("*")); const clickEvents = elements .map((element) => { const listeners = getEventListeners(element); const clickListeners = listeners.click || []; clickListeners.forEach((event) => (event.owner = element)); return clickListeners; }) .flat(); for (const event of clickEvents) { if (event.owner.matches("button, a[href]")) {
認証用トークン保存先の第4選択肢としての「Auth0」 | ログミーBusiness
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。サーバーサイドエンジニアの越川氏からはToken認証機能について。 Rails APIモードで開発するときの認証用のトークンはどこに保存すればいいの問題越川佳祐氏：私からは、「Rails APIモードにおけるToken認証機能について」というテーマでLT（ライトニングトーク）をしようと思っていたんですが、スライドを作っていて「あれ、これ別にRailsだけの話じゃなくない？」と思ってしまいました。みなさんの中にも、そう思う方がいるかもしれないんですが、もうこれで作っちゃったのでご了承ください。 私は株式会社iCAREで、サーバーサイドエンジニアをしている、越川と申します。Twitterは@kossy07
JavaScript で print デバッグ時に変数名を出力する - mizdra's blog
数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(nums)); // expected: 55 一見すると何も問題なさそうに見えるプログラムですが、実はバグがあります (皆さん分かりますか?) *1。実際に上記プログラムを実行すると 55 ではなく 10 が出力されます。 こうした場面に遭遇すると、自然と sum
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
JavaScript 長いループ 分割 - hitode909の日記
ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
なぜJavaScriptのDateコンストラクタは例外を投げないのか - Qiita
Q. なぜJavaScriptのDateコンストラクタは例外を投げないのか？ A. NaNがあるから DateはJavaScriptで日時を扱うためのAPIで、JavaScriptの当初から存在します。 Dateオブジェクトは主にDateコンストラクタを用いて作られます。Dateコンストラクタにはいろいろな機能があり、new Date()のように引数なしで呼び出すと現在時刻を取得できるほか、new Date("2020-04-24T00:00+09:00")のように文字列から日時に変換したり、new Date(1587654000000)のように数値（UNIX時間）を日時に変換したりすることができます。 一般に、データの変換作業には失敗が付き物です。しかし、new Dateは決して失敗しません1。例えば、new Date("foobar")のように明らかに日時を表していない文字列からDat
core-jsがメンテされていない理由→プロジェクトは継続する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? core-jsとは core-jsをみなさんご存知だろうか。直接は知らなくてもbabelでpolyfillを当てているなら間接的にお世話になっているはずだ。 メンテされない そのcore-jsは当分メンテされないらしい。というか2020/01/14を最後にパタッと活動が途絶えている。 なんとこの巨大projectはzloirockというたった一人によってメンテされてきた。 ここで彼のコメントをいくつか引っ張っておこう。 https://github.com/zloirock/core-js/issues/548#issuecomment
JavaScriptを読んでいてたまに出てくる唐突な二つの括弧の意味
お世話になります、他人が作ったJavaScriptを見ていると 唐突に謎の書き方が出てきますが言語化が難しく調べるのが難しいものがあります その一つが以下のソースなのですが TextEditor.prototype.createElements = function () { this.TEXTAREA = document.createElement('TEXTAREA'); this.TEXTAREA.tabIndex = -1; (0, _element.addClass)(this.TEXTAREA, 'handsontableInput'); this.textareaStyle = this.TEXTAREA.style; this.textareaStyle.width = 0; this.textareaStyle.height = 0; this.TEXTAREA_PAR
すっきり書きたい JavaScriptの条件分岐 - Qiita
(※追記 2020/2/19 コメントのご指摘をもとに、記事を修正しました) はじめに 未経験からNode.jsの現場に配属された2019年新卒エンジニアが、学習の振り返りとしてJavaScriptの基礎の基礎をまとめます。 過去のJavaScript基礎シリーズ↓ JavaScriptでvarが推奨されない理由を整理してみた 今回は、多くの書き方が存在するJavaScriptの条件分岐に関して、よりすっきりとした書き方を考えていきます。 Goal 思考停止のelseやswitchから離れる 可読性やリファクタリングのしやすさの観点から、JavaScriptの条件分岐を使いこなす まず「すっきり」を定義する 本記事で目指したい「すっきり」を、以下のように定義します。 コードの可読性が高いこと バグが生まれにくいこと 後からリファクタリングがしやすいこと コードの可読性が高いこと プロジェク
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来 - Qiita
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来JavaScriptECMAScript PromiseはES2015からJavaScriptに導入された機能で、非同期処理をいい感じに記述できるたいへんありがたいオブジェクトです。実は、Promiseの強化版ともいえる新機能、その名もHandledPromiseが提案されています。また、このHandledPromiseのための新構文~.も同時に提案されています。 例えば、~.を用いて次のようなプログラムを書くことができます。 この記事では、HandledPromiseと~.について概説します。例によって、これらはStage 1プロポーザルです。つまり、「こういうのがあってもいいんじゃない？」と思われている段階であり、具体的な方向性とかは何一つ決まっていないということです。この記事で
そろそろJavaScriptに採用されそうなOptional Chainingを今さら徹底解説 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? みなさん、Optional Chaining使ってますか？ 私は先日出たTypeScript 3.7 Betaを小さいプロジェクトに導入して使ってみました。これはとても快適ですね。 例によって、Optional ChainingはECMAScriptに対するプロポーザルの一つです。つまり、もうすぐ入りそうなJavaScriptの新機能です。プロポーザルはたくさんの種類がありますが、その中でもOptional Chainingはその高い有用性からこれまで多くの注目を集めてきました。Optional Chainingは2019年6月のTC3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セミコロンをつけ忘れただけなのに...【JavaScript】 - Qiita
4歳娘「パパ、constしか使わないで？」 - Qiita
20 年代のフロントエンド.md
Objectのプロパティ名に変数を設定する方法 - Qiita
