Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体…
JavaScript なしで動作するモダンなコードの書き方
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体…
Javascript Playground (Sandbox, Repl)
The #1 JavaScript playground and sandbox to write, run and repl it. JavaScript playground is perfect for learning and prototyping javascript sandboxes. Fast. Easy to use. Start javascript playground project using ready to use templates.
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上で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の任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog
Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹介します。 前提知識: イベントバブリングイベントについては筆者の過去記事でも解説しましたが、あらためてここでも説明します。イベントバブリングを理解することが、イベントデバッグの近道だからです。 DOMにおいて、要素はネストすることによって木構造を形成します。ある要素(ターゲット要素)がクリックされるなどしてイベントが発生したとき、イベントはその要素自体だけではなく、その祖先要素にも送られます。これをイベントバブリングといいます。 イベントバブリングは2つの段階に分けられます。 Cap
【TypeScript/JavaScript】配列操作reduce()を救いたい。 - Qiita
Array.prototypeのreduce()メソッド。 苦手な方や、ややこしいから使わないようにしているという方もいるかな、と。 確かに、他のmap()やfilter()、sort()などと比べるとちょっと難解な感じありますよね。 また、一方では、reduceマジ最強と思ってる方もいると思います。 確かに、集計することも新たな配列を作ることも何でもできますもんね。 そんな避けられたり奉られたりなreduce()について、本当はどんなメソッドなのか自分なりの解釈を書きたいと思います。 （追記：ありがたいことに色々と有益なコメントを頂いているのでそちらも是非ご参照ください。） reduce()とは reduce() メソッドは、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対し
TypeScript/Rollup/Vercelでサクッとブックマークレットを作ってみよう - Adwaysエンジニアブログ
こんにちは。エンジニアブログ運営の梅津です。 普段はエージェンシー事業部でリードアプリケーションエンジニアとして働いています。 エンジニアブログ運営としてブログの質を向上させるために、これまでのブログの情報を集めたりもするのですが、これを逐一手作業で行うのは大変です。 ある程度の作業は自動化したい。そういったときはブックマークレットを作ると便利ですよね。 今回はそんなブックマークレットの作り方をまとめてみました。 「ブックマークレット？よく知らないな」「聞いたことあるけど作り方とか気にしたことなかった」という人がいれば是非一緒に試してみてください！ 筆者の開発環境やこのブログで利用する主な技術のバージョンは次のとおりです。 macOS Node.js 18.12.1 TypeScript 5.0.4 Rollup 3.23.0 Vercel CLI 29.4.0 ブックマークレットとは T
ブックマークレットに関して - notebook
今までブックマークレット？ふーんみたいな感じだったのですが、最近フロント側もやっていて面白くなってきているのと、結構できることあるみたいなのでtipsとして残しておきます 画面での確認 いきなりブックマークレットのコードを書く前にまずは画面でdeveloper consoleを開いて1コマンドづつ操作したりします ここで出来上がった操作の流れをコードに落とし込んでいくと効率よさそうな感じですね そこで使えそうなtipsたちを紹介していきます querySelector API セレクタはCSSセレクタなのでxpathとちょっと違うがまぁ少し調べれば思い出せる範囲だと思います classname というクラスを適用されたdiv要素を集める document.selectorAll('div.classname') document.querySelectorAllで取得したエレメントたちに対
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
メソッドの名付けは決して甘くない——二つの JavaScript プロポーザルが歩んだ道のり - Qiita
はじめて技術記事を書いてみました。ぐらふぃーむと申します。 ECMAScript（いわゆる JavaScript）の先端を操る TC39 に関する情報が（少なくとも日本語コミュニティでは）思うより少なかったため初回は「SmooshGate 事件」と「Array Grouping プロポーザル」を取り上げようと思います。 拙い文章なのでおかしいところがあればご指摘願います。編集リクエスト機能もご活用ください。 SmooshGate 事件 2023 年になって Array.prototype.flat メソッドを知らない JavaScript デベロッパーはほとんどいないでしょう。しかしその裏にはあまり知られていない、メソッドの名前や運命に関わる出来事があります。それが「SmooshGate 事件」です。 メソッド自体を解説する文章ならいくらでもありますのでそれを省きさせていただきます。念のた
必要なのはJavaScriptの基本的な知識だけ 3Dアニメーション制作をお手軽にする「Three.js」の魅力
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
JavaScript で CPU が Intel かどうかを判定する（ついでに JIT を検知する）
先日、次のような Tweet を見かけました TIL I discovered that TensorFlow.js uses an interesting trick to sniff your CPU architecture in WebAssembly. pic.twitter.com/LVyywIM48I — Robert Knight (@robknight_) January 4, 2023 面白かったので、なぜこうなるのかの解説と、ついでにこのテクニックを使った JIT 検知方法などについて紹介します。 JavaScript における低レイヤーの扱い JavaScript においては、挙動が比較的しっかりと仕様に定められているために、環境による振る舞いの違いはあまり発生しません。しかし、低レイヤーに降りるほど振る舞いは実装依存になり、環境差が発生する余地が出てきます。 一番
TypeScript 10年の歩み - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? TypeScriptは、2022/10/01に10周年を迎えました。 ということで、それを記念してMicrosoftの中の人が振り返りのエントリーを書いていました。 以下は該当の記事、Ten Years of TypeScriptの紹介です。 Ten Years of TypeScript 2022年10月1日は、TypeScript10歳の誕生日です。 10年前の今日、2012年10月1日に、TypeScriptは初めて公にされました。 The Early Days 初めてTypeScriptが表に現れたとき、それももっともなことでし
私が感動した Processing 製の作品のソースコードを解析してみた
こんにちは．株式会社ゆめみの Keeth こと桑原です．Twitter には #つぶやきProcessing という魅力的なタグがあり，毎日数々の美しい作品がこのタグを付けて投稿されています．これを眺めるだけでも一日中過ごせるくらいです（個人の感覚です）． 今日はその中でも特に度肝を抜かれ，かつ感動した作品が 2022/11/04 に投稿されておりましたので，個人の拙い能力で解析に挑戦してみました 💁 ※一部解析しきれていない部分がありますが，ご容赦いただけますと幸いです…何分勉強中の者でして… 作品 なにはともあれ今回対象の作品． 初めてみたときは思わず言葉を失いました．いや，これ twitter のツイートですのでかなり文字数も少ないんですよ！なのにこの表現ってどうなってんの！？と… これはかなり学びになると思い解析を試みようと思い立った次第です．それにしても美しい… ソースコード
[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)
setTimeout を完璧に理解する
setTimeout は、指定された時間以降に指定されたコードを実行する JavaScript の API です。ブラウザでも Node.js でも広く使われているのですが、実装はまちまちで、色々と特殊な条件も多く、挙動を完璧に理解している人は少ないと思います。この記事では、そんな setTimeout を可能な限り深堀りしてみようと思います。 先に書いておきますが、ものすごくニッチで細かい話ばかり並びます。突然私が、ただ純粋に setTimeout について調べたくなったので、その結果をまとめただけのものです。普通に開発している人には必要のない情報が多くなるでしょう。この記事は基礎から setTimeout を学ぼう、という方には全然向かないと思います。 また、JavaScript のイベントループについてある程度理解していることを前提とします。その詳しい理解には、@PADAone さん
Chrome の console.log でハマらないために
JavaScript を書いたことがある人ならば一度は使うであろう console.log ですが、この関数は思ったよりも厄介な性質を持っています。その性質を知らずに console.log を使うと、デバッグ時に大ハマリしてしまうことがあります。この記事では console.log の落とし穴についてお話します。 今回は Chrome に特化して解説しますが、Firefox や Safari でも同じ落とし穴があります。 console.log とは まずはさらっと基本をおさらいしましょう。 大前提なのですが、console.log は JavaScript の言語仕様（ECMAScript）で定義されていません。ブラウザ向けには whatwg の仕様がありますが、あくまでもそれはブラウザ向けの仕様であり、Node.js を含むほぼ全ての JavaScript 環境で使えるのは cons
アマチュア向けゲーム開発環境を13年前と比較すると - ABAの日誌
昨今の自作ゲーム向けハンドヘルドゲーム機を調べたついでに、13年前の2009年にアマチュア向けゲーム開発環境について書いていたことを思い出した。 せっかくだからハンドヘルドゲーム機以外についても、ここ13年でどういう変化があったか、知っている範囲で書いておこうかと思う。 PC 王道。最先端のCPU, GPUを使ったゲーム開発が可能。言語、ライブラリもお好みしだい。欠点としては、ゲームが実行される環境があまりにバラバラなので、環境依存の問題がおきやすいことと、統一したゲーム配布プラットフォームがないこと。アマチュア向けSteamみたいのがあるといいんだが。 Unity、Unreal Engine、Godotを代表とするゲームエンジンを使うことが標準となった。DirectXを直接さわってごにょごにょみたいなことはだいぶ減ったと思う。ゲームエンジン本体の豊富な機能と、付属するアセットストアがゲー
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 の命名規則に「
定番のコード規約とライブラリから学ぶJavaScriptの命名テクニック（上級編） - ICS MEDIA
一般にプログラマーはコードを書いている時間より読んでいる時間の方が長いと言われており、わかりやすい命名は可読性や保守性の観点から非常に重要です。 この記事ではGoogleやAirbnbといった企業が採用しているスタイルガイドや、世界中で使われているJavaScriptライブラリであるReactとVue.jsのコードを調査する中で見つけた、わかりやすい命名をするためのテクニックを初級編と上級編の2回に分けて紹介します。 前回の初級編では、わかりにくい命名をした場合の問題点や、JavaScriptで共通認識となっているルール、すぐに使える命名テクニックを紹介しました。 上級編の今回は初級編で紹介したものでは表現しきれない、より複雑な処理を行いたいときに役立つ表現を集めました。 命名テクニック上級編 1. 有効 / 無効 の状態の表現 オブジェクトやステータスが有効か無効かを表現する単語です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Modern JavaScript Tutorial
