![「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ac8cf547b43cd0261adb00ac4067b7450ce46fc/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJThDSmF2YVNjcmlwdCVFMyU4MSVBNyVFOCVBNiU4MSVFNyVCNCVBMCVFMyU4MiU5MiVFMyU4MyU4OSVFMyU4MyVBOSVFMyU4MyU4MyVFMyU4MiVCMCVFMyU4MSU5NyVFMyU4MSVBNiVFNyVBNyVCQiVFNSU4QiU5NSVFMyU4MSU5OSVFMyU4MiU4QiVFNyVCMCVBMSVFNSU4RCU5OCVFMyU4MSVBQSVFNiU5NiVCOSVFNiVCMyU5NSVFMyU4MCU4RCVFMyU4MSVBOCVFMyU4MSU4NCVFMyU4MSU4NiVFOCVBOCU5OCVFNCVCQSU4QiVFMyU4MSU4QyVFNSU4OCU5RCVFOCU4MCVCMyVFMyU4MSVBMCVFMyU4MiU4OSVFMyU4MSU5MSVFMyU4MSVBMCVFMyU4MSVBMyVFMyU4MSU5RiVFNCVCQiVCNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NTRmMDIyODVlNmY3MGE3MjdjMTAxNTc3NjhlZTk3NTk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwd3d3LXRhY29zJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04M2ZiMzUwNTc4MTg3ZDMyMmQ4ZDE2YWMzMTAyMjI2Mg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D8cde042bac4a67a1663d8984a3babc14)
要素をドラッグして移動することは、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
2月21日にリリースされたNode.jsの最新バージョン「Node.js 19.7.0」で、Node.jsとJavaScriptアプリケーションを単一の実行ファイルにパッケージングする新機能「Single Executable Applications」が実験的機能として搭載されました。 一般にNode.jsのアプリケーションをデプロイするには、Node.jsのインストールや環境設定をするところから始めなければなりません。 今回新しく実験的に搭載されたSingle Executable Applications機能を使うと、そのまま実行可能な単一の実行ファイルを作ることができるため、それを配置するだけで簡単にデプロイができるようになる見通しです。 Single Executable Applicationsでは、postjectと呼ばれる新しいコマンドが用意されます。これを用いてNode.
普段コード書いている中で見通し(可読性)を良くするために意識していることを10個列挙しました JavaScript(TypeScript)のお話です 1.変数宣言はconstを利用する 変数を宣言するときはconstを使います。varは使わない様にします letを使うときは限定的で、実行する関数の中で変数を再代入する必要がある時に使います // 関数の外でのlet宣言はアンチパターン let strValue = ""; const method1 = () => { strValue = "method1"; }; const method2 = () => { // 関数内、再代入する処理で宣言する let setValue = "ほげ"; }; // 以下、変数strValueを利用するかもしれない // どこかで再代入されるかも分からない..
フロントエンドテストにおける知見の宝庫を発見!「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 (補足)本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Test
はじめに フロントエンドのWeb開発においてconsole.log()というのは非常によくお世話になります. しかしconsoleオブジェクトにはには他にもたくさんのインスタンスメソッドがあり,それらを使わずに開発を行うのは少しもったいないです. この記事では様々な機能を紹介していき明日から開発で使用していただければ嬉しいです. assert console.assert()は第一引数に論理式をとり,第二引数以降には任意のオブジェクトを取ります. 第一引数がfalseとなった場合,第二引数をコンソールに出力します. サンプル // assert const wishToSuccess = () => { return Math.random() < 0.5 } console.assert(wishToSuccess(), "失敗しました") 出力 log 一般的にログを出力するconso
Powerful motion design in the browserTheatre.js is a javascript animation library with a professional motion design toolset. It helps you create any animation, from cinematic scenes in THREE.js, to delightful UI interactions. Video showing a 3D scene with a flying butterfly whose position/rotation is being controlled by a set of keyframes in a sequence editor. Iterate with easeBlock out your seque
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開 メタ(旧Facebook)は、JavaScriptアプリケーションのメモリリークを検出するフレームワーク「MemLab」をオープンソースとして公開したと発表しました。 We’ve open-sourced MemLab. #MemLab is a JavaScript memory testing framework that automates leak detection and makes it easier to root-cause memory leaks. 1/2 https://t.co/vo6Gzv56ud — Engineering at Meta (@fb_engineering) September 12, 2022 Metaが展開しているFacebook、Fac
Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの? 複雑なアプリケーションには Apollo を使えばいい? もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか? 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く