mouseenterとmouseoverの違いなどDOMイベントの発生状況を可視化して調べてみたよ - 銀の弾丸
HTML5のDOMイベントに、mouseenter と mouseoverという、よく似たマウスイベントがあります。ここには、その違いについて調べたことを書いておきます。 どちらもマウスポインターが要素の上に入ってきた時に発生するイベントで、それぞれに対応する「マウスポインタ―が要素から外れた」時のイベントとして mouseleave と mouseout もありますね（mouseenter には mouseleave 、mouseover には mouseout が対応します）。 この2種類のイベント間には、発生要因や伝播（バブリング/プロパゲーション）に関する違いがあります。 私は最近まで、この違いを意識しておらず「歴史的理由による別名？」かと思っていて、その場で適当に思いついた方を使っていました。 先日ふと疑問に思ってMDNで調べてみたら、どうやら上記のように明確な違いがあると知った
JavaScript Modules: A Beginner’s Guide
by Preethi Kasireddy JavaScript Modules: A Beginner’s GuideSource: https://www.flickr.com/photos/qubodup/16258492451If you’re a newcomer to JavaScript, jargon like “module bundlers vs. module loaders,” “Webpack vs. Browserify” and “AMD vs. CommonJS” can quickly become overwhelming. The JavaScript module system may be intimidating, but understanding it is vital for web developers. In this post, I’l
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
ウェブアプリをソースごとパクる業者に対する対策 - Qiita
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
CoffeeScript 2という新たなる希望 - Qiita
CoffeeScriptは滅びぬ！何度でも蘇るさ！ CoffeeScriptがいかに駄目かを理解している皆さんならご存じの通り、これまでのCoffeeScriptには重大な欠点があった。それは「CoffeeScriptはECMAScript5(ES5)のaltJSである」と言うことだ。ES5以前のJavaScriptが駄目すぎるため、そこがCoffeeScriptの限界になってしまっていた。駄目な奴は何をやっても駄目なのだ。 ECMAScript2015以降(ES2015+)において、JavaScriptは目覚ましい発展を遂げた。ジェネレーター、テンプレートリテラル、class構文、モジュールベース、async/await等多くの機能が追加された。いくつかの機能は既にCoffeeScriptに存在していたものであったが、ジェネレーターのような全く無い物は新たに追加する必要があった。しかし、
javascriptで日本語文字の種類（漢字・ひらがな・カタカナ）を判別するためのメモ - 超自己満足プログラミング
(※) PDFは重いものもあるので注意 漢字 CJK統合漢字：http://www.unicode.org/charts/PDF/U4E00.pdf CJK統合漢字拡張A：http://www.unicode.org/charts/PDF/U3400.pdf CJK統合漢字拡張B：http://www.unicode.org/charts/PDF/U20000.pdf CJK互換漢字：http://www.unicode.org/charts/PDF/UF900.pdf CJK互換漢字補助：http://www.unicode.org/charts/PDF/U2F800.pdf function isKanji(c){ // c:判別したい文字 var unicode = c.charCodeAt(0); if ( (unicode>=0x4e00 && unicode<=0x9fcf)
Comment Types | Flow
Flow supports a comment-based syntax, which makes it possible to use Flow without having to compile your files. 1/*::2type MyAlias = {3 foo: number,4 bar: boolean,5 baz: string,6};7*/8 9function method(value /*: MyAlias */) /*: boolean */ {10 return value.bar;11}12 13method({foo: 1, bar: true, baz: ["oops"]}); 13:33-13:40: Cannot call `method` with object literal bound to `value` because array lit
Z̩̮̜͉̣͎͉̤͇͂̇͊̇̅̚ͅa̠͌̔l̨̢̞̘͉̟̰̱̭̜͍̙̣̬̂̿̌̐̾̾͂̍̽̓̓̇̄g̨̢̡̢̛͍̪̠̠̹̜̪̘̱͌̆̒̅̐ỏ̡̱̞̣̖̦̰̙͊́̋́̃̂̓̍̃ - Qiita
Z̩̮̜͉̣͎͉̤͇͂̇͊̇̅̚ͅa̠͌̔l̨̢̞̘͉̟̰̱̭̜͍̙̣̬̂̿̌̐̾̾͂̍̽̓̓̇̄g̨̢̡̢̛͍̪̠̠̹̜̪̘̱͌̆̒̅̐ỏ̡̱̞̣̖̦̰̙͊́̋́̃̂̓̍̃JavaScriptワンライナーes6Zalgo T̡̨͈͇̟̼̱̤̹̠́͆̂̋̂̀̄̋́̚ö̴̮̬̙͎͈̳̯́̈́̄̿̔̿͌̀̈́̀̊͊͊̌̈̓̕ͅ i̷̢̛̖͈̗̇n̶̝͂̂̂v̸̹͈͍̮̰̺̰̯̬̀̋̎̃̅́̓o̸̢͈̪͍̦̫̬̪̬̞̫̗̅̑͊́̓͋̕̚k͉̣͆̄e̷̶̡̳̤̤͇̠̤̼̭̠̭͈̻͆̃́̒̂̊̇̂ ẗ̵̢̢̛͉̪͈̪̥̞̣̪̙́̈́̓̃̂̆̀h̨̗̻̰̱̳̅͂̎̇̽̃e̷̴̶̛̬̦̮̜̾̂̃͂̐̌̈́̄̾̈́̄̀̚̕ h͍̘̙̠̯̜̫̙̙̜̥͉̝̋͌̌́͋̽͋̉̂̊̄i̶̡̢̧̧̨̛̯̬̤̭͇͂́̏͂̐̋̈́̎̍̋̀̐̕v̸̡̢̛̤̫͇̹̱̗̮̻͈̳̄͆̓̄̾̀̋̀́̕ȩ͍̹͂-m̴̶̳̖̼̟̅̓ĭ̴̠̙
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう - YoheiM .NET
[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう こんにちは、@yoheiMuneです。 JavaScriptを用いてアニメーションを行う際に、setTimeoutやsetIntervalを使ってアニメーションループを実装することが多いと思いますが、 最近使えるようになってきたrequestAnimationFrameを使うと、よりいい感じにアニメーションを行うことが出来ます。 今日は、requestAnimationFrameという機能についてブログを書きたいと思います。 requestAnimationFrameとは requestAnimationFrameとは、setTimeoutと似たような機能で、ブラウザの次の描画の際に実行したい関数を指定することで、 ブラウザが次回描画時に呼び出してくれる機能です。 以下の
![[JS] アニメーションを行うのに、setTimeoutよりもrequestAnimationFrameを使ってみよう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/d323a2b7291473a06ed756db826bc68649a55ebd/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F249.jpg)
Polyfill · Babel
🚨 As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features): If you are compiling generators or async function to ES5, and you are using a version of @babel/core or @babel/plugin-transform-regenerator older than 7.18.0, you must also load the regenerator runtime package. It is automatically loaded when using @babel/preset-e
babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita
2018/03/20追記 この資料はbabel-preset-envにuseBuiltIns: usageなどが入るより前の資料になります。詳しくは最新版のbabel-preset-envをご確認ください https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins 2016/11/30追記: 更に詳細に調べた続編を書きました => babel-polyfill / babel-runtime の代わりにcore-jsを直接使うのはアリかナシか babelの変換において、古いブラウザでもある程度動かすようにしてくれるためのbabel-polyfill。 しかし、調べてみるとbabel-plugin-transform-runtimeというのもあった。 あまりドキュメントも充実しておらず何が違
webpack.config.jsの読み方、書き方 - dackdive's blog
（2017/08/28追記） この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template （追記ここまで） はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れ
xoとavaでお手軽リント・テスト環境構築 - MOL
元旦にStyleStats v7.0をリリースした。めでたいことだ（知らんけど）。バージョンアップ作業は例のごとく依存するnpm modulesをアップデートして終わりというのがt32kの伝家の宝刀だが、せっかくなので今回はES6に書き換えようと思った。 しかし、それもfunctionをアロー関数に変更するぐらいだろうと、タカをくくっていたが、書き出してみると、1000ch君パイセンの煽り意識高いレビューコメントのおかげで、いろいろ勉強させてもらった、多謝( ˘ω˘)！ ESLint ESLint - Pluggable JavaScript linter アロー関数に変更するだけってのもあれだから、ちゃんとESlintもES6用の設定にカスタマイズしようと思い必死こいて.eslintrcとにらめっこしていた。といっても下記の記事を参考にしただけだが。 ESLint 最初の一歩 - Qii
gif.js
Full-featured JavaScript GIF encoder that runs in your browser. Download & Docs on GitHub Usage var gif = new GIF({ workers: 2, quality: 10 }); // add a image element gif.addFrame(imageElement); // or a canvas element gif.addFrame(canvasElement, {delay: 200}); // or copy the pixels from a canvas context gif.addFrame(ctx, {copy: true}); gif.on('finished', function(blob) { window.open(URL.createObje
JavaScriptは如何にしてAsync/Awaitを獲得したのか Qiita版 - Qiita
はじめに JavaScriptは如何にしてAsync/Awaitを獲得したのか - がおさんち 技術部屋 ※事前に↑の記事は読まなくても大丈夫です という記事を、以前に個人ブログの方に書いたのですが、私も今年からはQiita始めたので、この記事をリファインして再度書いてみようと思います。 また、この記事では↑の記事では書ききれなかった話もいくつか増やしています。 例えば、不定回数実行されるPromiseの話だとか、非同期処理における例外処理周りの面倒くさい話だとか。 そういうちょっとだけ高度な話も混ぜつづ、前回書いたものよりもクオリティを上げるのを目標にします。それではいきます。 第一章 ～人類はsetTimeoutを採用しました～ 古代のJavaScriptで、以下のような処理をしたい場合、どうしていたでしょうか。 ブラウザ更新直後に『a』を表示し、その2秒後に『b』を表示し、更にその1
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - documentationjs/documentation: :book: documentation for modern JavaScript
Inspire Tree - Javascript UI Tree Component
公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」
