【熱望】javascript の for 文で var i を宣言するのはやめて下さい - Qiita

2024/04/19 110 users for Qiita 書き間違い 以下 i++

この書き方でも for 文は正常に動作します。 しかしながらこの書き方は 以下の書き間違いが生じることがあります。 for(var i = 0; i < array1.length; i++) { //長い処理 for(var i = 0; i < array2.length; i++) { } } 長い処理の中で i を宣言したことを忘れて 再び i を宣言してしまい 期待した動作にならない例にな... 続きを読む

1行で発狂するコード - Qiita

2024/03/06 143 users コンスタント 冗長 題材 Qiita 記述

人は1行の記述で死ぬこともある 公開からコンスタントに閲覧をいただいている以下の記事。需要がありそうなので、もう1つ記事を書いてみようと思う。 題材は前回同様のJavaScriptのクソコードではあるが、前回は冗長を極めたクソコードであるのに対し、今回はたった1行である。 1行なのに、なんと示唆深い(決してほめて... 続きを読む

うるう日にしか発生しないバグ

2024/03/02 179 users パク true false 年月日 関数

昨日うるう日にしか発生しないバグに遭遇した。Javascriptを書く人には有名な話だとは思うので大して面白くはないかもしれないが一応メモ。 詳しくは書けないがバグが発生した関数の仕様としてはざっくりと下記のような感じ。 対象の年月日が基準日の1年前から1年後の間に含まれる場合はtrueを返しそうでない場合はfalse... 続きを読む

「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita

2024/02/26 732 users ナニコレ Qiita 供養 テクニック 休日

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちな... 続きを読む

新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく

2024/02/26 85 users TEMPO Date Moment.js 日付ライブラリ 日付

先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsな... 続きを読む

保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita

2024/02/21 129 users GitHub Qiita node 関数 VSCode拡張機能

参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？... 続きを読む

JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita

2024/02/21 264 users Qiita script src height width

要素をドラッグして移動することは、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）

2024/02/20 102 users CSS ヤフー HTML 同意 技術

こんにちは。SWATチームの今谷と、LY会員サービス統括本部の木所です。 LINEとヤフーの会社合併に伴って、LINEヤフー株式会社が提供するサービスを利用するユーザーに「新プライバシーポリシーへの同意」をいただくためのモジュールを開発しました。本記事では、ヤフーのユーザー5,400万人から”同意”を得るための工夫に... 続きを読む

Flashエミュレーター誕生のきっかけは別に「フラッシュ愛」じゃなかった　「swf2js」開発者の本音と数奇な運命【フォーカス】

2024/02/15 250 users フォーカス 本音 運命 きっかけ 家永

株式会社ソニックムーブ　エンジニアグループ ソリューションユニット マネージャー 家永 稔之 2011年にソニックムーブに入社。個人ではJavaScriptとTypeScriptを用いて、「swf2js」や「Next2D」の開発を手がける。業務のリモート化をきっかけに地元の消防団に所属し、防災活動として月に数回、消防車両に乗って地域の巡... 続きを読む

私のJavaScriptの情報収集法 2024年版

2024/02/08 374 users 情報収集法 2024年版 JSer.info 範囲 情報収集

個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少... 続きを読む

Electron代替を目指す軽量なフレームワーク「Tauri v2」β版リリース。iOS/Android対応など

2024/02/05 70 users Electron代替 フレームワーク Electron 代替

JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なRust製のフレームワークとして開発されている「Tauri v2」のβ版がリリースされました。 iOS/Androidモバイル対応 TauriはこれまでWindows、Mac、Linuxに対応したデスクトップ版が2022年6月にバージョン1.0としてリリースさ... 続きを読む

シェルスクリプトをJavaScript/TypeScriptで記述、どのOSでも実行できる「Bun Shell」、JavaScriptランタイムのBunが発表

2024/01/29 101 users Bun TypeScript シェルスクリプト シェル コマ

JavaScriptランタイムのBunは、新機能としてシェルスクリプトをJavaScriptもしくはTypeScriptで記述し、特定のOSに依存せずに実行できる「Bun Shell」を発表しました。 シェルスクリプトは特定のシェルに依存するもの LinuxやmaOS、Windowsなどは、OSの一部として「シェル」と呼ばれる機能を備えています。 シェルはコマ... 続きを読む

【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】 - Qiita

2024/01/26 94 users XPath Qiita querySelector DOM

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になる！？……わけではなかった

2024/01/23 81 users String Object

ASTをみてみよう この不思議な現象を調査するために、AST（Abstract Syntax Tree: 抽象構文木）の状態を見てみることにしました。ASTはソースコードを構文解析した結果をツリー構造にしたもので、AST Explorerを使うと簡単に見ることができます。 ({}) + "" のAST ({}) + "" のASTをみると、ひとつの　ExpressionStateme... 続きを読む

もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita

2024/01/18 313 users Qiita htmx SSE WebSocket DOM

HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応してい... 続きを読む

保守しやすく変化に強いソフトウェアを支える柱　自動テストとテスト駆動開発、その全体像 ～Software Design 2022年3月号「そろそろはじめるテスト駆動開発」より | gihyo.jp

2024/01/16 230 users テストファースト 挑戦 gihyo.jp テスト駆動開発 変化

保守しやすく変化に強いソフトウェアを支える柱　自動テストとテスト駆動開発⁠⁠、その全体像 ～Software Design 2022年3月号「そろそろはじめるテスト駆動開発」より 今回、Software Design 2022年3月号 第2特集「そろそろはじめるテスト駆動開発 JavaScriptでテストファーストに挑戦」の第1章「保守しやすく変化に強い... 続きを読む

JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。

2024/01/07 145 users intl ECMAscript MdN API 日付

はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、... 続きを読む

JavaScriptの小技集 - Qiita

2023/12/31 268 users Qiita 小技集

はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 バイト数短縮小技やちょっと便利な関数も入れています。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技... 続きを読む

jQueryは1個の要素と複数個の要素を同じように書かせる - fsubal

2023/12/15 115 users jQuery querySelectorAll 複数個 要素

#フロントエンド #設計 #JavaScript 「1個の要素と複数個の要素を同じように書かせる」というのが実は jQuery の特徴の一つだと思っている。 document.querySelector() や querySelectorAll が出現して以降 jQuery の必要性はほとんどなくなったと言われる。 実際にこんなサイトもあるし https://youmightnotneedjquery.... 続きを読む

Web制作者の念願がついに叶った！ height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

2023/12/07 176 users トランジション auto height トリガー スクロール

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今回紹介するのは、height: 0;からheight: auto... 続きを読む

CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました

2023/11/28 147 users スライダー CSS ライブラリ HTML テクニック

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦... 続きを読む

『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA

2023/11/20 196 users ICS MEDIA フロントエンド ウェブメディア 出版 池田

株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難し... 続きを読む

JavaScript なしで動作するモダンなコードの書き方

2023/11/19 209 users コード 書き方 プログレッシブエンハンスメント Remix

Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HT... 続きを読む

ブラウザ上でデバッグするときに使えるテクニック

2023/11/18 358 users テクニック ブラウザ上 デバッグ Netflix パク

ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your ... 続きを読む

WebAssemblyアプリ開発で最も使われている言語は3年連続で「Rust」、Webアプリ開発が最多、欲しい機能はスレッド。The State of WebAssembly 2023

2023/10/26 68 users rust WebAssembly 最多 スレッド 言語

回答者はWebAssembly関連の技術者303人。 最も使われているのはRust、2位のJavaScriptの使われ方とは？ WebAssemblyのアプリケーションのコードを記述するプログラミング言語として何を使っているかを尋ねた質問への回答では、3年連続でRustがトップ。しかも利用率は上昇中です。 2位に入ったのがJavaScriptです。WebAss... 続きを読む