If you're here in 2024 (or later), here's an updated blog post!](https://lydiahallie.com/blog/event-loop) Oh boi the event loop. It’s one of those things that every JavaScript developer has to deal with in one way or another, but it can be a bit confusing to understand at first. I’m a visual learner so I thought I’d try to help you by explaining it in a visual way through low-res gifs because it's

Blazor ComponentsをJavaScriptからインスタンス化出来る機能のサンプルコードを追って拡張してみようC#TypeScriptReactWebAssemblyBlazor これは 「祝 .NET 6 GA！.NET 6 での開発 Tips や試してみたことなど、あなたの「いち推し」ポイントを教えてください【PR】日本マイクロソフト Advent Calendar 2021」 の19日目の記事です。 もうすぐ25日ですね、引き続き楽しんでいきましょう。 さて、カレンダーのエントリ時には「Blazor WebAssemblyとNativeについて書くかも」としていましたが、作っているネタの進捗が悪いので、別のアツい.NET 6 + Blazorネタをご紹介します。 PreviewやRCのリリース時にも面白いネタをガンガン投稿してくれる .NET Blog ですが、「ASP.

JSConf JP 2021 でトークしたスライドです。 このスライドの内容を文字にしているブログ記事はこちら https://blog.nnn.dev/entry/2021/12/03/123000 トークのアーカイブはこちら https://www.youtube.com/watch?v=5H3Sswp5qYg&t=1155s https://jsconf.jp/2021/talk/testing-approach-to-support-web-front-end-replacement

Romeとは 現代のJavascript開発には多くのツールチェーンが必要とされます。Babel,webpack,Jest,ESLint,Prettier,Typescriptなどを組み合わせて開発することが多く、さらにこれらの一部代替選としてesbuild,SWC,Viteなどのツールチェーンの選択肢が存在し、選択肢の多さやその組み合わせの複雑さに苦い思いをしたことがある方も少なくないのではないと思います。 こうした中で、新たに開発が進められているツールチェーン、Romeをご存知でしょうか？ Romeは先に挙げたように複数のツールチェーンを役割ごとに組み合わせて使うのではなく、1つのツールチェーンでこれら全ての役割を担ってしまおうという壮大な計画を持つツールチェーンです。 Romeは2020/03にFacebookより発表されました。現在は法人化され、yarnやBabelの生みの親である

「東京Node学園」は、Node.js日本ユーザグループ主催のNode.js勉強会です。36時限目の今回は、オンラインで開催されました。suzuki氏は、Node.js上で動作するコードフォーマッターであるPrettierに従わなくてよいケースについて発表しました。 「従われている」傾向があるPrettier sosukesuzuki氏（以下、suzuki）：「Prettierに従わなくてもいい場合」を話します。 suzukiといいます。筑波大学の情報科学類で学生をしていたり、サイボウズ株式会社というところで働いていたり、OSSだとPrettier Core Teamでメンテナンス全般をやっていたり、Babel TeamというところでBabelのパーサー周りを見ていたりします。 Prettier、Node.jsをよく使う人ならたぶん使ったことがあると思うのですが、Prettierは、Opi

どうも、まさとらん（@0310lan）です！ 今回は、誰でも無料で使える天気予報APIを提供してくれるWebサービスをご紹介します！ 面倒なユーザー登録やAPIキーの設定などが不要で、欲しい天気情報のパラメータを含めたURLを好きなように構成するだけで簡単にJavaScriptから制御できるのが特徴です。 日本はもちろん、世界中の詳細な天気情報を取得できるのでご興味ある方はぜひ参考にしてみてください！ 【 Open-Meteo 】 ■「Open-Meteo」の使い方 それでは、「Open-Meteo」をどのように使えばいいのか詳しく見ていきましょう！ 「Open-Meteo」が提供する天気予報APIを利用するにあたり、何か特別な登録や申請は必要ありません。もっと言えば、ユーザー登録も不要でAPIキーもありません。 非営利プロジェクトであれば誰でも自由に使うことが可能で、以下のエンドポイント

jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発 JavaScriptのUIフレームワークであるjQuery UIと、モバイルアプリケーション向けフレームワークであるjQuery Mobileは今後新規機能の開発が行われず、jQuery UIについてはメンテナンスへ移行、jQuery MobileについてはDeprecated（利用を推奨せず）になることがOpenJS Foundationから正式に発表されました。 jQuery UIは2007年に登場、jQuery Mobileは2011年に登場しました。一時期はWebサイトなどで広く使われ、関連書籍なども数多く出版された主要なライブラリ群の開発が正式に終わることになります。 ただしjQuery本体の開発は引き続き積極的に行われていくとのことです。 Follo

最近開発しているBtoB SaaSサービスの技術スタックを、RailsからNode.jsに移行した。 これにより、フロントエンドもバックエンドも全てをTypeScriptで統一することができた。 特にNode.jsのWebバックエンドの構成について、まだまだ世の中に知見が少ない気がしているので記事にしておく。 Webバックエンド - Node.js(TypeScript) Nexus/Apollo Server (Webサーバー) GraphQLサーバーとして、Apollo ServerのコードファーストなアプローチでのラッパーであるNexusを使っている。 Railsからの移行を決断できたのも、Apollo ServerとPrismaにより、外部との通信が型付きで、かつ開発体験よく書けるようになたから、というのが大きくある。 数年前の段階だと、素のexpressを使ってWebサーバーを立

はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts

GoogleはChromeにおいてユーザーエージェント文字列を段階的に廃止する方針だと明かしていましたが、2021年9月14日新たに、2021年9月23日にリリースされる予定のChrome 95ベータ版から、「情報が削減されたユーザーエージェント文字列」のテストを開始することを発表しました。 User-Agent Reduction origin trial - Chrome Developers https://developer.chrome.com/blog/user-agent-reduction-origin-trial/ ユーザーエージェント文字列は、ブラウザがウェブサイトにアクセスする時にOS・ベンダー・ブラウザの情報などをサーバーが識別できるようにする文字列です。サーバーは時にユーザーの環境に応じたウェブサイトを表示させたり、サービスを提供したりしますが、この判断にユーザー

小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) － 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe

テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種

2021/09/13 Open8 で発表したフロントエンドテストプラクティスの話です。

こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです🎉 さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しましたが、現在サイボウズ社内では kintone で利用するフロントエンドの技術スタックを刷新する取り組みを進めています。 その一環として、 "Closure Tools DevTools" という Google Chrome 向け拡張機能を作成しました。 作成した DevTools は kintone に限らず利用することができるため、Chrome ウェブストアで公開しています。 chrome.google.com ソースコードも次のリポジトリでご確認いただけます。

こちらはDEV Communityに2021年9月2日に投稿され、現在反響を巻き起こしているフロントエンドにおけるクリーンアーキテクチャの実装についてのAlexさんの記事になります（原文はこちら)(twitterにて翻訳掲載許可取得済み）。 かなり大ボリュームな超大作記事となっておりますが、Reactなどを使ったフロントエンドプロジェクトのディレクトリー構成やファイルごとの責務の切り分けのベストプラクティスなどの決定版といえるものがまだまだ出てこない中で、個人的にまさに待ち侘びていたような内容の記事かと思い、是非日本のフロントエンドコミュニティでも知見が共有されればと思いました。 それでは以下、本文です。 *翻訳は大部分をDeepL翻訳によって行っていますが、適宜修正してあります。 少し前に、私はフロントエンドにおけるクリーンアーキテクチャについての講演を行いました。この記事では、その講演

Denoの分散ホスティング「Deno Deploy」ベータ2公開。FiIe System API追加、クラッシュレポートなど Node.jsの作者であるライアン・ダール（Ryan Dahl）氏が新たに立ち上げた企業「Deno Company」は、サーバサイドでJavaScript/TypeScriptを実行するためのオープンソースのフレームワーク「Deno」と、その分散ホスティングである「Deno Deploy」を提供しています。 Denoは、ライアン・ダール氏がNode.jsを開発した経験を活かし、より優れたサーバサイドのJavaScriptランタイムとして新たに開発しているものです。V8 JavaScriptエンジンをベースにしており、JavaScriptだけでなく、TypeScriptとWebAssembly（WASM）にも対応します。 Deno Deployは、その名前の通りDen

Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ

JSer.info #362 - The State of JavaScript 2017: IntroductionにてJavaScriptを使う開発者向けアンケートの結果が公開されています。 JavaScriptのフロントエンドからバックエンド、ツール、言語、ライブラリ、CSSなど幅広く扱った内容になっています。 またそれらの結果と給料や経験年数などを組み合わせた結果を見れます。 たとえば、#StateOfJS 2017 Results: Front-end Frameworksではフロントエンドのフレームワークとして何を使っているかという質問の結果が掲載されています。 結果としてはReact、何も使ってない、Angularとなっていて、それらのフレームワークをまた使いたいかどうかや組み合わせて使っているのかなどの投票結果が書かれています。 去年の結果もhttp://2016.stat