2023-03-08のJS: Jest 29.5.0、Chrome 111、testing-libraryへの移行
JSer.info #634 - Jest 29.5.0がリリースされました。 Release v29.5.0 · facebook/jest Jest 29.5.0では、jest-circusをデフォルトのテストランナーに変更しました。 randomizeオプションでテストをランダムな順番で実行できるようになっています。 またこの順序はseedオプションで固定できるようになっているため、テストの失敗を再現できるようになっています。 そのほかにはworkerThreadsオプションの追加、エラー出力のフォーマッターがError Causeのサポートなども行われています。 Chrome 111がリリースされました。 New in Chrome 111 - Chrome Developers Chrome 111 beta - Chrome Developers CSSでは、CSS Color
Node.js と ECMAScript の Import Specifier は意味が違うらしい
Node.js の import specifier と ECMAScript の ImportSpecifier 先日 Firefox の JavaScript エンジンである SpiderMonkey の公式ブログに Import Maps についての記事が投稿された。 https://spidermonkey.dev/blog/2023/02/23/javascript-import-maps-part-1-introduction.html この記事は、そもそも ECMAScript Modules とは何かというところから入り、Node.js のモジュールシステムの歴史やブラウザの ECMAScript Modules との関係などを説明した後、本題である Import Maps について解説している。短い時間で読める面白い記事なので、まだ読んでいない人はぜひ読んでほしい。 この
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」 - かちびと.net
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
フリーランスITエンジニアの案件数が多い言語、1位Java、2位JavaScript、3位PHPなど。Go言語は人材不足。レバテックフリーランス調べ
フリーランスITエンジニアの案件数が多い言語、1位Java、2位JavaScript、3位PHPなど。Go言語は人材不足。レバテックフリーランス調べ ITエンジニア向けの転職や求人などの支援サービスをに提供するレバテックは、フリーランスのITエンジニア向けに案件紹介などを手がける「レバテックフリーランス」に蓄積された2万件以上のフリーランス案件のデータを元に、プログラミング言語別の案件数や月単価のランキングを発表しました。 集計期間は2021年10月から2022年10月までの1年間です。 発表によると、フリーランスのITエンジニア向けに案件数が多いプログラミング言語の1位はJavaで5564件、次いで2位がJavaScriptで3902件、3位がPHPで2836件となっています。 1位のJavaは、Webアプリケーションやゲームなどの開発に用いられることは比較的少なく、主に業務アプリケーシ
javascriptもモダンなオブジェクト指向で書こうよ(サンプルコード有) 後編 - Qiita
前編(こちらを読まなくても問題ないです) サンプル See the Pen 漢気割り勘ツール by terao takumi (@teraotakumi) on CodePen. 金額と参加者を入力し、計算モードを選んで「計算する」をクリックすると、アラートウィンドウが表示されてそれぞれの参加者がいくら支払うのか表示されるようになっています。これを、バニラjavascriptを使ってオブジェクト指向で書いてみた、というのがこの記事の趣旨になります。 登場オブジェクト まずは全体感を理解するため、ざっくり登場オブジェクトとその役割について見ていきます。 ・漢気計算機(OtokogiCalculator) 入力された内容を元に計算を行うオブジェクト。constructorで支払金額と参加者名簿のインスタンスをもらう。 ・支払金額(PaymentAmmount) 入力された支払金額を司る。 ・参
AppleやNetflixなどの大企業も使用するオープンソースライブラリ「core-js」をたった1人で維持する開発者が「もう限界だ」と支援を求める
オープンソースのJavaScriptライブラリである「core-js」は、古いブラウザでもJavaScriptの最新機能を使えるようにするPolyfill(ポリフィル)として強い人気を誇り、オープンソースのJavaScriptトランスコンパイラであるBabelにも組み込まれています。AppleやNetflix、Spotify、Pornhubといった大企業を含む多くのウェブサイトに利用されている「core-js」のメンテナンスをたった1人で行う開発者のDenis Pushkarev(zloirock)氏が、ついに家族を養えなくなったとして支援を求める記事をGitHubで公開しました。 core-js/2023-02-14-so-whats-next.md at master · zloirock/core-js · GitHub https://github.com/zloirock/cor
Webpack から Vite に段階的に移行しました | PR TIMES 開発者ブログ
こんにちは。PR TIMES フロントエンドエンジニアの岩元 (@yoiwamoto) です。 PR TIMES ではいくつかのページが React で実装されており、Webpack でビルドを行っていました。 今回は、一部のページを除いてこの Webpack を Vite へ置き換えたので、その経緯や結果を共有します。 まとめ ビルド時間が長いことが課題で移行を行い、結果として開発体験・デプロイ時間等が大幅に改善されました。 開発環境のみの移行 → フィーチャートグルでの本番試験 → リリース → Webpack の廃止と、移行は段階的に進めました。 なぜ Webpack をやめたのか 一番はやはり、ビルド時間の遅さです。 今回、当時の環境を再現することが難しく、改めて計測はできなかったのですが、本番用のビルドはおおよそ3~4分、開発環境での watch ビルドで変更が反映 (HMR)
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？
Webの将来はサーバサイドレンダリング（SSR）に回帰していく。Denoが主張するIsomorphic JavaScript（もしくはUniversal JavaScript）とは何か？ 静的なHTMLファイルをWebサーバが配信する仕組みから始まったWebは、サーバ側で動的にHTMLを生成するCGIの仕組みや、Webブラウザ上でJavaScriptを実行してインタラクティブな操作を実現するなどの仕組みを得たことでWebアプリケーション基盤へと発展しています。 現在、Webアプリケーションの仕組みとして代表的なものがSPA（Single Page Application）でしょう。 SPAはWebブラウザ上で多くの処理が行われるためユーザーの操作に対する反応が速く、インタラクティブ性の高い快適なWebアプリケーションを実現できる利点があります。 しかし、これからのWebはサーバサイドレンダ
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f7dc8f9e783316f720174980e93c627438d74/height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
JavaScriptで記述できる物理学ベースのシミュレーションを分かりやすく学べ実際にデモを動かせる「Ten Minute Physics」
物理学に基づくシミュレーションをコンピューターグラフィックスで仕上げる動画をYouTubeチャンネルのTen Minute Physicsが投稿しています。Ten Minute Physicsがこれまで投稿してきた数多くのシミュレーションのコードや、実際にブラウザで動作するデモについて、運営者でNVIDIAの従業員であるというマルチーズ・ミラー氏が紹介しました。 Ten Minute Physics https://matthias-research.github.io/pages/tenMinutePhysics/index.html ミラー氏は記事作成時点で17本の動画を投稿しており、順番に視聴していくことでさまざまな2D・3Dシミュレーションを学んでいくことが可能です。ミラー氏はチュートリアルの動画のほか、シミュレーションのコードや実際にシミュレーションを動かせるデモサイトを公開して
Ubie における ESLint 活用
Ubie では JavaScript や TypeScript で開発されているプロジェクトに対して、静的解析のために ESLint を導入しています。 この記事では Ubie での ESLint を活用事例を紹介します ESLint を活用する目的 まず私が ESLint を活用する目的は、コーディング規約やベストプラクティスを強制することで、コードレビューの手間を省き、結果として本番環境でのエラーやパフォーマンスの悪化を減らすことです。 この記事で紹介するいくつかの設定もその目的を達成するためのものです。 no-restricted-syntax でアンチパターンを禁止する ESLint には no-restricted-syntax というルールがあります。 このルールはセレクタで指定した構文を禁止できます。簡単に言えば、簡易的に独自ルールを作成できます。 たとえば次のように設定する
モジュール解決 | TypeScript 日本語ハンドブック | js STUDIO
このセクションは、基本的なモジュールの知識があることを前提にしています。 詳しい情報については、モジュールのドキュメントを参照してください。 相対(Relative) vs 非相対(Non-relative)モジュールimport モジュール解決の方針 拡張モジュール解決フラグ モジュール解決のトレース --noResolveの使用 よくある質問 モジュール解決は、importが何を参照するのかを把握するために、コンパイラを利用するプロセスになります。 import { a } from "moduleA";のようなimport文について考えてみてください。 aの使用するために、コンパイラは正確に何が提供されているのかを知る必要があり、 またmoduleAの定義を調べる必要もあります。 ここで、コンパイラは"moduleAはどのような形状をしていますか?"と尋ねます。 これは一見単純なよう
three.jsやpixi.js等のライブラリを一切使わずにwebGL実行環境をJavaScriptスクラッチする(したい)
青い長方形が表示されているだけですが、テクスチャ画像に表示を切り替えたり頂点の数を変えたり(四角を三角にしたり)する場所にコメントを入れてコネコネできるようにしています(リサイズ対応済み...のはず) 埋め込みcodepenの下に連ねている引用元の素晴らしい入門サイトから、バラバラとコードを繋ぎ合わせているため、コードの整合性や効率に言及できていません。「動いた〜〜やった〜〜」程度の実験場です。「ちょっとこのfragmentShaderの挙動試したいな〜」という時にすぐ動かせる場所がほしくて書いています。 webGL入門サイト webglfundamentals wgld.org ICSメディア オススメwebGL学習教材(動画) codemafiaさん shin-codeさん
JavaScript Primer - 迷わないための入門書
Promiseを活用する ここまでのセクションで、Fetch APIを使ってAjax通信を行い、サーバーから取得したデータを表示できました。 最後に、Fetch APIの返り値でもあるPromiseを活用してソースコードを整理することで、エラーハンドリングをしっかり行います。 関数の分割 まずは、大きくなりすぎたfetchUserInfo関数を整理しましょう。 この関数では、Fetch APIを使ったデータの取得・HTML文字列の組み立て・組み立てたHTMLの表示をしています。 そこで、HTML文字列を組み立てるcreateView関数とHTMLを表示するdisplayView関数を作り、処理を分割します。 また、後述するエラーハンドリングを行いやすくするため、アプリケーションにエントリーポイントを設けます。 index.jsに新しくmain関数を作り、main関数からfetchUserI
JavaScript における文字コードの初歩 - 30歳からのプログラミング
この記事では、 JavaScript で文字コードを扱う際に知っておくべき概念である Code Point や Code Unit、サロゲートペア、といったものについて説明していく。 また、具体的にそれらの概念を使ってどのようにコードを書いていくのかについても扱う。 この記事に出てくるコードの動作確認は以下の環境で行った。 Deno 1.26.0 TypeScript 4.8.3 Code Point （符号位置） プログラムで文字を表現する方法は複数あるが、 JavaScript では Unicode という方法を採用している。 Unicode ではあらゆる文字に対して一意の値を割り振ることを目的としており、この値のことを Code Point （符号位置）という。 Code Point は 16 進数の非負整数で、文章中で表記するときは接頭辞としてU+をつける。 例えばAという文字の
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開 メタ（旧Facebook）は、JavaScriptアプリケーションのメモリリークを検出するフレームワーク「MemLab」をオープンソースとして公開したと発表しました。 We’ve open-sourced MemLab. #MemLab is a JavaScript memory testing framework that automates leak detection and makes it easier to root-cause memory leaks. 1/2 https://t.co/vo6Gzv56ud — Engineering at Meta (@fb_engineering) September 12, 2022 Metaが展開しているFacebook、Fac
TypeScript/Reactのモダンな環境で開発するフロントエンジニア
TypeScript/Reactのモダンな環境で開発するフロントエンジニア 株式会社カオナビ @kaonavi I want to hear a detailed なにをやっているのか 私たちは、社員の個性・才能を発掘し戦略人事を加速させるタレントマネジメントシステム「カオナビ」を展開しています。 ■「カオナビ」とは？ 今まで紙やExcel、システム、社員の頭の中などに散在していた人材情報を一元管理することで、あらゆる人事課題への対応を可能にするプロダクトです。 現在は、企業規模や業種問わず、2214社（2021年9月時点）の企業に導入いただき、6年連続日本でのタレントマネジメントシステムシェアNo1※を獲得しています。 ※ITR「ITR Market View1：人材管理市場2021」人材管理市場-ベンダー別売上金額シェアで6年連続1位（2015～2020年度予想） 「カオナビ」製品情報
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『リーダブルコード』を実践的に活用するための問題集[Javascript](第1部 表面上の改善) - Qiita - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6527224a8e3731767d80455327aee243e28b34f8/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRmF2YXRhcnMxLmdpdGh1YnVzZXJjb250ZW50LmNvbSUyRnUlMkYyNjk0OTY0MCUzRnYlM0Q0P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWYyODhmMTJmN2Y5NWU5NTFiNGVlZmI2YTZjNzEzNjBi%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D432cac098916cd247e23c5fa2d32710b%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JUUzJTgwJThFJUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJTk2JUUzJTgzJUFCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JUUzJTgwJThGJUUzJTgyJTkyJUU1JUFFJTlGJUU4JUI3JUI1JUU3JTlBJTg0JUUzJTgxJUFCJUU2JUI0JUJCJUU3JTk0JUE4JUUzJTgxJTk5JUUzJTgyJThCJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUU1JTk1JThGJUU5JUExJThDJUU5JTlCJTg2JTVCSmF2YXNjcmlwdCU1RCUyOCVFNyVBQyVBQzElRTklODMlQTglMjAlRTglQTElQTglRTklOUQlQTIlRTQlQjglOEElRTMlODElQUUlRTYlOTQlQjklRTUlOTYlODQlMjkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz00NTZkMWQ0NWVmYmZmZTU3M2QyYTVjMTMyNDAyYzFjYw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBreW9rMDFfamFwYW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz02MzFkZjZkNWFlYjBmZGExYWIzZjk3MTAzMDY4ODhiOA%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6ba36362a6ad001e8a7800c43cd0b9a2)
無償テキストエディター「Mery」もJavaScriptエンジン「V8」に対応／最新ベータ版v3.3.6で
JSからTSへ移行したVue.jsプロダクトの型チェックを漸進的に強化する（川俣 涼） | Vue Fes Japan Online 2022
