🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
2023年度版フロントエンド開発環境構築徹底解説 - Qiita
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上で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の任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
Webブラウザ上で3D/2Dモデルをぬるぬる動かせる「Babylon.js 6」正式版に。レンダリング性能が最大50倍、WASM化した物理演算エンジン搭載、液体のレンダリングも
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The web just got a WHOLE lot more exciting!https://t.co/q0JVsQaTSd#babylonJS6 #gamedev #indiedev #webdev #Metaverse #3D #webgl #gamedevelopment #IndieGameDev #webdeveloper pic.twitter.com/owV6YLp1zc — Babylon.js (@bab
JavaScript / TypeScript の豆知識 10 選 - Qiita
JavaScript / TypeScript の豆知識 10 選 初めに JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。 コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。 少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。 それでは、以下が目次です。 JavaScript / TypeScript の豆知識 10 選 初めに 1.Nullish と Falsy 関連参考資料_1 2. tsconfig の便利な設定 関連参考資料_2 3. 依存関係の綺麗な図示の仕方 関連参考資料_3 4.正しい XSS のやり方 関連参考資料_4 5.removeChildren 関連参考資料_5 6.数値型を関数の引数として使う時の小技 関連参考資料_6 7.hi
Reactを学ぶ上で知っておくべきJavaScriptの基本概念 - Qiita
はじめに 今回はFlyCode氏が紹介していた、Reactを学ぶ上で知っておくべきJavaScriptの基本概念を紹介します。 具体的なJavaScriptでのコード解説と、Reactではそれがどのように使われるのかを紹介します。 この記事の対象者 JavaScriptのよく使う基本文法を学びたい人 Reactの初心者から中級者 この記事の目標 React開発でよく使われるJavaScriptの文法や処理を理解する JavaScriptの基礎文法 本記事では下記の7つをピックアップして紹介します 三項演算子 分割代入 スプレッド構文 配列操作 アロー関数 非同期処理(Async/Await/Promise) APIコール 三項演算子 三項演算子はMDNでは下記のように解説されています。 条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。 三項演
Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3
HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに
あなたが知らないであろう15個の強力なJavaScriptのテクニック🗡🔈🔥
はじめに この記事はこちらの記事の和訳となります。 なお、著者には許可をいただいております。是非原文もご覧ください。 拙訳なので、ご指摘などあればお待ちしております。 Javascriptのバグ修正や答えを求めてGoogleやStackOverflowを探し回るのは楽しくないでしょう🏴☠️。 この記事では、生産性⚡を最大化し、苦痛🩸を最小化する、20個（訳註:正確には15個）の短く、パワフルなJavaScriptのテクニックを紹介します。 それではコードを見ていきましょう🤘 配列の重複を除去 配列から重複した要素を除去します。 const arr = ["a", "b", "c", "d", "d", "c", "e"] const uniqueArray = Array.from(new Set(arr)); console.log(uniqueArray); // ['a',
必要なのはJavaScriptの基本的な知識だけ 3Dアニメーション制作をお手軽にする「Three.js」の魅力
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思
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はサーバサイドレンダ
Draw SVG rope using JavaScript
This is an interactive article. To fully experience it, you'll need to turn JavaScript on. Today, I'll take you through the process I came up with in regard to transforming an SVG path into a vector rope drawing. We'll learn how to turn the path on the left into the rope on the right: The problem popped up on a project my colleagues were working on, and it stuck with me. I thought about it and sta
書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの
大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
HTML要素をグラフィカルにアニメーション化できるJavaScriptライブラリ「Theatre.js」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、HTML要素を簡単にアニメーション化できるJavaScriptライブラリをご紹介します。 初期設定はJavaScriptで書きますが、実際のアニメーション作りに関してはタイムラインエディタを利用した直感的な操作で実現しているのが大きな特徴です。ちょっとしたインタラクションから3Dアニメーションまでカバーできるライブラリなので、ご興味ある方はぜひ参考にしてください！ 【 Theatre.js 】 ■「Theatre.js」の導入について！ それでは、「Theatre.js」をどのように使えばいいのか詳しく見ていきましょう！ 既存のWebサイトへ「Theatre.js」を導入する方法はいくつかあるのですが、今回はもっとも基本的な手段としてCDN経由でライブラリを読み込んでみます。これはHTMLファイルが1つあれば完結するので、ちょっと試して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Learn JavaScript | web.dev
2022年に起きたフロントエンドの変化
