タグ JavaScript
人気順 10 users 50 users 100 users 500 users 1000 usersJavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32%がテストを書かない。JetBrainsによるアンケート調査
JavaScript/TypeScriptプログラマのIDEは半数以上がVSCode、32%がテストを書かない。JetBrainsによるアンケート調査 Kotlin言語やIntelliJ IDEAなどの開発ツールを開発提供しているJetBrainsは、 JavaScriptとTypeScriptに関する調査結果「2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケー... 続きを読む
Go 言語だって minify されたい!「mingo」の紹介
HTML/CSS や JavaScript など、 Web フロントエンドにおいては配信時にファイルを minify することが一般的です。 ファイルを minify する = ファイルサイズを小さくすることでネットワークの通信量を削減し、結果として Web ページの読み込み速度を向上させることができます。 <!-- 例えばこれが --> <!DOCTYPE html> <... 続きを読む
2024 年の JavaScript と TypeScript のトレンド: 開発者エコシステムアンケートのインサイト | The WebStorm Blog
JetBrains は過去 7 年間にわたり、変化し続ける開発者の状況と使用されている主要テクノロジーを関連付けるために開発者エコシステムアンケートを実施してきました。 その結果は生データと分析レポートの両方の形式でコミュニティと共有され、すべての関係者がこのエコシステムの状況を把握できるようになっています。 ... 続きを読む
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR (Client Side Rendering) クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることによ... 続きを読む
1行で発狂するコード - Qiita
人は1行の記述で死ぬこともある 公開からコンスタントに閲覧をいただいている以下の記事。需要がありそうなので、もう1つ記事を書いてみようと思う。 題材は前回同様のJavaScriptのクソコードではあるが、前回は冗長を極めたクソコードであるのに対し、今回はたった1行である。 1行なのに、なんと示唆深い(決してほめて... 続きを読む
Deno、モダンなJavaScript/TypeScriptに最適化したパッケージレジストリ「JSR」パブリックベータ公開。Node.js、Bun、Cloudflareなどにも対応
JavaScript/TypeScriptランタイムの「Deno」を開発提供しているDeno Land Inc.は、モダンなJavaScriptおよびTypeScriptに最適化した新しいパッケージレジストリ「JSR」をパブリックベータとして公開しました。 現在、JavaScriptのパッケージレジストリは、Node.js用に構築され、GitHubが運営するnpm(Node Pacage Manage... 続きを読む
うるう日にしか発生しないバグ
昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalse... 続きを読む
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください! 自分にとってはこの記事には「えっ、ナニコレ!」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちな... 続きを読む
新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく
先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付/時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付/時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsな... 続きを読む
@swc/jestで手間をかけずにテストを早くする - ドワンゴ教育サービス開発者ブログ
こんにちは、ドワンゴ教育事業 Web フロントエンドチームの猪井です。 この記事では babel-jest から @swc/jest に移行することで Jest によるテストが速くなった事例について紹介します。 JavaScript のテストツールは、Vitest のバージョンが 1 を迎えたり Bun が登場したりして、よく使われる Jest 以外にもよさそう... 続きを読む
保守・理解しやすいコードを書きたい! 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode(JavaScript)のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか?... 続きを読む
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.... 続きを読む
ヤフーのユーザー5,400万人から"同意"を得るための技術(HTML/CSS/JavaScript)
こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫に... 続きを読む
Flashエミュレーター誕生のきっかけは別に「フラッシュ愛」じゃなかった 「swf2js」開発者の本音と数奇な運命【フォーカス】
株式会社ソニックムーブ エンジニアグループ ソリューションユニット マネージャー 家永 稔之 2011年にソニックムーブに入社。個人ではJavaScriptとTypeScriptを用いて、「swf2js」や「Next2D」の開発を手がける。業務のリモート化をきっかけに地元の消防団に所属し、防災活動として月に数回、消防車両に乗って地域の巡... 続きを読む
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート1~3章 - Qiita
概要 リーダブルコードを読んでいて、JavaやC++、Pythonの事例も混じっているのと割とレガシーな例題が多いなーと感じました。 React.js、Next.js、TypeScriptをメインにフロントエンドエンジニアとして仕事をしている自分用に、後で見返せるよう2024年JavaScript版リーダブルコードのチートシート的なものを改めて読み... 続きを読む
Detect Caps Lock with JavaScript
Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. ... 続きを読む
私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少... 続きを読む
Electron代替を目指す軽量なフレームワーク「Tauri v2」β版リリース。iOS/Android対応など
JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なRust製のフレームワークとして開発されている「Tauri v2」のβ版がリリースされました。 iOS/Androidモバイル対応 TauriはこれまでWindows、Mac、Linuxに対応したデスクトップ版が2022年6月にバージョン1.0としてリリースさ... 続きを読む
Appleがシステム構成のためのプログラミング言語「Pkl」をオープンソースでリリース
Appleがシステム構成を作成するためのプログラミング言語である「Pkl(ピックル)」をオープンソースとしてリリースしました。Pklで構成を記述することで、必要に応じてJSONやYAMLのほか、Kotlin、Ruby、JavaScriptなどの形式で自由に出力することが可能とのことです。 Pkl :: Pkl Docs https://pkl-lang.org/index.html a... 続きを読む
シェルスクリプトをJavaScript/TypeScriptで記述、どのOSでも実行できる「Bun Shell」、JavaScriptランタイムのBunが発表
JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmaOS、Windowsなどは、OSの一部として「シェル」と呼ばれる機能を備えています。 シェルはコマ... 続きを読む
HTMXの正体が分からないので、オレオレHTMXを作ってみた - Qiita
HTMX とは? の記事を見ればわかるが、Javascript の知識なしで ajax通信や高度なUIの実装ができるライブラリになっています。 賛否両論はあると思いますが、自分はあまり実装がどうなっているか分からず気になったので、ソースコードを少し見てオレオレHTMXを作ってみることにしました(誰にでも分かるように簡易な実装... 続きを読む
【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう!【XPath】 - Qiita
const getNodesByXPath = (xpath) => { const evaluator = new XPathEvaluator(); const expression = evaluator.createExpression(xpath); const result = expression.evaluate( document, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, ); return [...Array(result.snapshotLength)].map((_, i) => result.snapshotItem(i)... 続きを読む
JavaScriptでObjectに空のStringを足すと0になる!?……わけではなかった
ASTをみてみよう この不思議な現象を調査するために、AST(Abstract Syntax Tree: 抽象構文木)の状態を見てみることにしました。ASTはソースコードを構文解析した結果をツリー構造にしたもので、AST Explorerを使うと簡単に見ることができます。 ({}) + "" のAST ({}) + "" のASTをみると、ひとつの ExpressionStateme... 続きを読む
Bun でクロスプラットフォームなシェルスクリプト
Bun でクロスプラットフォームなシェルスクリプト 2024.01.20 Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト(Bun Shell)を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやり... 続きを読む
もうjsなんていらない!世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応してい... 続きを読む