JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
【JavaScript】いまどき（2023年1月）の文字数カウント方法 - Zenet Tech Blog
Intl.Segmenter とは 文字数をカウントする 単語や文に分割する まとめ 余談 こんにちは、システム事業部の松永です。 突然ですが、みなさんはJavaScriptで文字数をカウントした経験はありますか？ 私は先日、とあるプロジェクトで文字数のカウントを行う機会があり、何も考えずに .length を使って以下のようにカウントしてました。 "ゼネットテックブログ".length // => 10 ところがこの書き方だとうまくいかない文字というのも存在します。 （詳しくは以下のサイトに分かりやすくまとめられています） JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io 上記サイトを参考にさせていただくと、以下の文字は（人間の感覚から見て）うまくカウントされません。*1 "𩸽".length // => 2 (サロゲートペア) "葛󠄀".l
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
カバレッジ ツールを使用して、使用されていない JavaScript コードと CSS コードを検索する - Microsoft Edge Developer documentation
カバレッジ ツールは、未使用の JavaScript と CSS コードを見つけるのに役立ちます。 未使用のコードを削除すると、ページの読み込みが高速化され、モバイル ユーザーの携帯データネットワーク データが保存される可能性があります。 このガイドでは、カバレッジ ツールを使用して未使用のコードを見つける方法について 説明 します。 コードのリファクタリングはテクノロジ スタックに依存するため、このガイドでは、コードベースをリファクタリングして未使用のコードを回避する方法については説明しません。 概要 未使用の JavaScript または CSS の配布は、Web 開発で一般的な問題です。 たとえば、ページで ブートストラップ ボタン コンポーネント を使用するとします。 ボタン コンポーネントを使用するには、HTML の Bootstrap スタイルシートへのリンクを次のように追加す
k6 応用例その１：ログイン認証型Webサイトへの負荷試験の一括実行
クラウドソリューション開発部の藤井です。 負荷試験ツール k6 の紹介記事の第２弾として、応用例を解説させていただきます。 k6 って何だろうという方は、ぜひこちらの記事をご参照ください。 k6 は公式サイトに「シンプルなテストでも、無いよりはまし」とあるように、最初から複雑な設定やコードがフルセットで必要ではなく、JavaScriptで提供されている小さな独立したモジュールを柔軟に組み合わせて使うことができるようになっています。 今回は試験対象として、Cookieを使ったログイン機能を持つ典型的なWebアプリケーションを想定し、少し複雑な以下の方法について、コードの例を交えて解説致します。 ・HARファイル利用による試験シナリオ定義の簡略化 ・一括実行とGroup別の実行結果の表示 ・VUSごとのログイン情報の事前定義 ・Cookieと動的データの利用（ログイン認証とクロスサイトスクリプ
TypeScript and the dawn of gradual types
The FullScreenMario project burned brightly for a few short weeks in October 2013 after Boing Boing lauded it as “a pretty impressive example of what HTML5, in-browser functionality can do.” A few days later, it went viral on Reddit and by November, attention turned to scrutiny, and Nintendo took the project down with a DMCA request. Josh Goldberg speaks of his former project with a bit of pride—i
JavaScript にイミュータブルな配列操作メソッドを導入するプロポーザルについて
この記事では、現在 Stage 1 のプロポーザル Change Array by copy について解説する。 プロポーザルの詳細については、https://github.com/tc39/proposal-change-array-by-copy を参照してほしい。 また、ここで紹介した仕様に関しては今後更新されていく可能性がある。 概要 Change Array by copy は、簡単にいえばイミュータブルな配列操作メソッドを導入するプロポーザルである。 JavaScript の配列には多くのインスタンスメソッドがあり、それらを使って配列を操作できる。 配列のインスタンスメソッドには、ミュータブルなもの、つまりもとの配列を変更することによって配列を操作するタイプのものがいくつかある。 たとえば、Array.prototype.push や Array.prototype.pop、A
なぜ ES2022 で文字列リテラルを使った import/export ができるようになるのか | サイボウズ フロントエンドエキスパートチーム
11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi
JavaScript疑似プロトコルとは：「javascript:」
JavaScriptプロトコル「javascript:」で始まるプロトコルです。 プロトコルであるため、「http:」や「file:」と同じ位置づけの機能です。 ただし、デファクトスタンダード（事実上の標準）な機能であり、有効なURIスキームではありません。そのため、IANA（インターネット資源のグローバルな管理する組織）は「javascript:」をURIとして管理していません。 そのため、「javascript疑似プロトコル」と言うのが一般的です。 ※Uniform Resource Identifier (URI) Schemes 主な使用用途アドレスバーからJavaScriptを使用するブラウザのアドレスバーにjavascript疑似プロトコルを入力すると、表示中のページでJavaScriptを実行できます。 javascript:alert('Hello World') java
JavaScriptのtoFixedの結果は四捨五入というわけではないよう
JavaScriptの数値型にはtoFixedというメソッドが割り当てられており、これを使う事で指定の小数点以下の表記で整形することができます。 Number.prototype.toFixed() – JavaScript | MDN 例えば、「(1).toFixed(2)」とすると結果は「1.00」となり、「(1.234).toFixed(2)」とすると結果は「1.23」となります。 このtoFixedですが、調べてみると切り捨てられた箇所は四捨五入になるという書かれたサイトをよく見かけるのですが、試してみると四捨五入にならない場合もあるようです。 例えば、Chrome(v108.0.5359.125)やFireFox(v108.0.1)では下記のようになりました。 1.15を小数点第二位で四捨五入したら1.2になりそうですが、実際には1.1となっています。小数点第一位が偶数か奇数かと
console.log()だけのデバッグはやめよう
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります． しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり，それらを使わずに開発を行うのは少しもったいないです． この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです． assert console.assert()は第一引数に論理式をとり，第二引数以降には任意のオブジェクトを取ります． 第一引数がfalseとなった場合，第二引数をコンソールに出力します． サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso
フロントエンドにおいてModel-View-Controllerは死んだのか？ | POSTD
多くのフロントエンド開発者が 一方向のアーキテクチャ を採用し始めている中で、Model-View-Controller（MVC）に未来はあるのでしょうか。 状況を把握するために、まずはフロントエンドのアーキテクチャの進化を振り返ってみたいと思います。 過去4年にわたり、私は多数のWebプロジェクトに取り組み、フロントエンドの構築、そしてフロントエンドとフレームワークの統合に多くの時間を費やしてきました。 2010年以前は、従来のウェブサイトにDOM操作を追加する場合は大抵JavaScript（ jQuery が書かれたプログラミング言語）が使用されていました。当時の開発者はアーキテクチャ自体についてはそれほど気に掛けていなかったと思います。コードベースを構造化する場合、 Revealing module pattern のようなものがあれば十分でした。 現在、多くの議論が交わされているフ
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など | POSTD
<script src="//typekit.com/fj3j1j2.js"></script> <!-- This second script won’t execute until typekit has executed, or timed out --> <script src="//my.site/script.js"></script> ローカルスクリプトとリモートスクリプトを組み合わせても同様に操作することができます。 機能的には、Webページの前の部分で重いスクリプトのロードがあると、サイトの表示が明らかに遅くなることを意味します。さらに、ページの最後の方で表示されるスクリプトは、それまでに存在するされたスクリプトの動作に依存することを意味します。 先行する全てのscriptタグがロードされ実行されるまで、ページ上の要素は表示されません。つまり、パフォーマンスへの悪影響を覚
JavaScript 処理系 V8 とレンダリングエンジン Blink のアーキテクチャ
プログラミングおよびプログラミング言語ワークショップ（PPL）が開催したサマースクール「JavaScript 処理系と Chrome ブラウザの実装技術」にて、JavaScript 処理系 V8 とレンダリングエンジン Blink のアーキテクチャについて話をしてきました。 本発表では、主にブラウザ JavaScript に関する歴史や最新動向に関する概説と、ウェブ特有の実行モデルをどのようにブラウザアーキテクチャへ落とし込んでいるか紹介しました（スライドへのリンク） Chrome ブラウザでは JavaScript 処理系として V8 を、そしてそれを駆動するレンダリングエンジンとして Blink を組み込んでいます。本発表では Chrome がウェブ特有の実行モデルやセキュリティモデルを守りながらどのように V8 と Blink を協調させているのか、そのアーキテクチャを紹介します。
「なんだろう、無駄なuseState使うのやめてもらっていいですか？」
訳：「適切なuseStateの使い方」について 最初に ※タイトルはあまり気にしないで下さい。 useStateを使用する際に気を付けたいポイント 関連する状態はまとめることを検討する 矛盾した状態の宣言を避ける 冗長な使い方をしない 重複した状態の宣言は避ける 1. 関連する状態はまとめることを検討する 例えば下記のようにOnPointerMoveメソッドを使用しXYの座標を保持したいと思います。 const [x, setX] = useState(0); const [y, setY] = useState(0); const handlePointerMove = (e) => { setX(e.clientX); setY(e.clientY); }; return ( <div onPointerMove={handlePointerMove} style={{ width:
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita
SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外ではCSRFを考慮しなくてよい、 という前提で話を進めます。 また、XSSに関しては常に対策は必要なのですが（フレームワーク側が自動的にしてくれる部分もある）、認証周りに関係すること以
JavaScript で queueMicrotask() によるマイクロタスクの使用 - Web API | MDN
マイクロタスクは、それを作成した関数やプログラムが終了した後、 JavaScript 実行スタックが空の場合にのみ実行され、ユーザーエージェントがスクリプトの実行環境を動かすために使用しているイベントループにコントロールを返す前に実行される短い関数です。 このイベントループは、ブラウザーのメインイベントループか、ウェブワーカーを駆動するイベントループのどちらかです。これにより、他のスクリプトの実行を妨げるリスクなしに与えられた関数を実行することができ、同時に、ユーザーエージェントがマイクロタスクによって行われるアクションに反応する機会を得る前に、マイクロタスクが確実に実行されるようにします。 JavaScript のプロミスと変更監視 API は、どちらもコールバック実行にマイクロタスクキューを使用しますが、他にも、現在のイベントループのパスが終了するまで作業を延期する機能が役に立つ時があ
Skypack: search millions of open source JavaScript packages
How to Use Defaulthttps://cdn.skypack.dev/package-name https://cdn.skypack.dev/@scope/package-name Package Versionhttps://cdn.skypack.dev/preact@10 https://cdn.skypack.dev/preact@^10.5.0 https://cdn.skypack.dev/preact@10.5.5 Package Exporthttps://cdn.skypack.dev/preact/hooks https://cdn.skypack.dev/preact@^10.5.0/hooks Minified (?min)https://cdn.skypack.dev/preact?minDeno (?dts)https://cdn.skypack
Getting Started - Learn Next.js
To effectively learn Next.js, it helps to be familiar with JavaScript, React, and related web development concepts. But JavaScript and React are vast topics. How do you know when you're ready to start using Next.js? Welcome to the React Foundations course! This beginner-friendly, example-led course will guide you through the prerequisite knowledge for Next.js. You will build a simple project step-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Use .NET from any JavaScript app in .NET 7 - .NET Blog