touch, click, pointerの実装 | 前編 タッチイベントとマウスイベント
touch, click, pointerの実装 前編 タッチイベントとマウスイベント このシリーズでは、タッチ／マウスイベント系の実装を考えます。第1回目はタッチイベントとはなにか、また、タッチイベントとマウスイベントの判別について解説します。 はじめに iPhone、Androidが登場したのはもう何年も前ですが、さらにWindows8も登場し、いろいろと状況が変化してきました。Windows8を搭載したPCの多くはタブレットデバイスのように、画面に触れることができるようになっています。 しかしながら、これらのデバイスはマウスを使っても操作できるようにもなっています。今後、どのようにタッチ／マウスのイベントを扱っていけばよいのかは、これからのウェブ開発において、より重要になっていくはずです。 そこでこのシリーズでは、タッチ／マウスイベント系のブラウザへの実装を整理し、それらのブラウザに
ES6のexportについて詳しく調べた - Qiita
webpackのチュートリアルとかがES6なので、読めないとやばい、開発のときは書けないとやばいということで調べてみました。 モジュール化を行うexportには、モジュールごとに複数のexportを行うnamed exportsとモジュールごとに1つのexportを行うdefault exportsがある。 named exports モジュールは前言の先頭にexportとつけることで、複数のモジュールをexportすることができる。
【jQuery】iOS Safariでも、ボタンをサクサク動作＋ついでに長押し検知 - Qiita
ボタンをサクサク動かしたい...! iOS Safariでタップのイベントを取得しようとして、かなりハマりました。 どこで嵌ったかというと、ボタンを連打させたいのに、 onClickやonTapイベントをlistenしていたのでは、あまりに動作が遅い。。。。 タップ後にページ遷移するならいいんですが、 連打なんかで次々処理を進めたい時には、 ちょっと耐えられないレベルです。 原因 コードに無駄があって重いのかと最初は思いましたが、 どうやらそうではなくて、ダブルタップかどうかの判別のために、 あえてタップの認識を遅延させているんですね。 https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEve
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
今すぐJavaScriptデバッグ効率を上げるconsoleテクニック - Qiita
こちらの記事は、2019年9月に公開されたIndrek Lasn氏による『Boost your JavaScript Debugging Skills With These Console Tricks』の和訳になります。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek JavaScriptにはコードをデバッグするためのツールがたくさんあります。 JavaScriptコードをデバッグするお決まりの方法といえば、コンソールから結果を出力するだけのconsole.logメソッドを使うことでしょう。 十分に機能はしますが、デバッグに最適とまでは言えません。これよりもっと良い方法があれば、試してみたいと思いませんか？ consoleオブジェクトを使えば、ブラウザのデバッグコンソールへのアクセスすることができま
はじめてのExpress.js 〜導入編〜 - astamuse Lab
こんにちは。デザイン部でフロントエンドエンジニアをしているkitoです。 今回から数回に渡って、Node.jsのWebフレームワークExpress.jsのご紹介をしていきたいと思います。 はじめに 数多く存在するのWebフレームワークのなかから、Node.jsのフレームワークを導入する理由をあげるとすれば何があるでしょうか？ 有力な理由のひとつは、PayPal社の事例 でもわかるように、共通のプログラミング言語、つまりJavaScriptをブラウザ側とサーバ側両方で活用することで、フロントエンドとバックエンドの垣根を取り払い、ひとつのチームで両方の問題に素早く対応できるようにすることがあげられます。これは「Isomorphic」あるいは最近では「Universal」なアプリケーションと呼ばれています。 もちろん、Universalなアプリケーションが常プラスに働くとは限りません。ひとつのチ
express実践入門
index.md express実践入門 自己紹介 小川充 mitsuruog フロントエンドエンジニア Javascript, HTML, CSS, Node.js, API設計とか認証とか 2015/5月入社(約半年) はじめに あくまで「俺が考える最強のexpress実践入門」です。 初学者がexpressを攻略する上でのつまづくポイントと、中規模開発をターゲットにしたベストプラクティスを経験ベースでお話します。 おそらく、初〜中級者向けの内容です。 本コンテンツの使い方 express初心者 初学者向けチュートリアル(dotinstallとか)のあとに express経験者 ご自身のコードの見直しに 他の言語の経験者 他の言語の「あれ」は、node.jsでは「これ」のマッピングに (※)中で紹介するコードは抜粋したものであり、そのままでは動作しない場合があります。ご注意ください。
ゼロからはじめるExpress + Node.jsを使ったアプリ開発 - Qiita
Expressとは？ Node.jsは言わずとしれたサーバーサイドJavascriptの実行環境。 ExpressはそのNode.jsでの王道的な開発をスピードアップするためのフレームワークです。 Expressを使った開発効率向上の具体例としてREST APIの開発があります。REST APIを提供するWebサービスを開発する場合、URIやBodyを解析してリクエストの内容とデータを識別する必要があります。 例えば写真共有サービスを開発していて、とある写真を返すREST APIを提供する必要があるとします。このAPIが下記のようなフォーマットになるとします。 このAPIを提供するサーバーは上記URIから下記のようにリクエストの内容を解析する必要があります。 このリクエストは1枚の写真を要求している。 リクエストしている写真のIDはYOUR_PHOTO_ID。 これは例えば正規表現などのパ
や...やっと理解できた！(2) JavaScriptのスコープチェーン - maeharinの日記
前回はJavaScriptのプロトタイプチェーンについて、図解を用いることでなんとか理解できました。今回はスコープチェーンに挑戦してみます。前回と同じく「1. 図解を用いる」「2. 用語を明確に定義する」「3. Standard ECMA-262 3rd editionを情報ソースとする」というアプローチで紐解いて行きます。 用語の定義 ・本エントリの文章における表記は、以下の表の「ECMA-262 3rd」に統一する ・本エントリの図における表記は、以下の表の「本エントリの略称」に統一する ・本エントリ内におけるES3とは、Standard ECMA-262 3rd editionを指す ECMA-262 3rd 本エントリの略称 JavaScript（サイ本）第5版（日本語） Execution Contexts EC 実行コンテキスト Variable Object VO 変数定義の
How To Write Fast, Memory-Efficient JavaScript — Smashing Magazine
There are many common pitfalls when it comes to writing memory-efficient and fast code. In this article we’re going to explore some test-proven approaches for writing code that performs better. JavaScript engines such as Google’s V8 (Chrome, Node) are specifically designed for the fast execution of large JavaScript applications. As you develop, if you care about memory usage and performance, you s
Beyond Memory Leaks in JavaScript
Memory leaks are like that pimple you have on your nose with prom night coming. You know that they exist and they’re not going anywhere, but you just pray they don’t flare up or that no one else notices when the time for magic comes. They’re uncomfortable. They’re nasty. They feel like a beacon announcing your nose to the world from a distance. And all you ever wanted was to impress ladies and gen
An interesting kind of JavaScript memory leak
Recently, Avi and David tracked down a surprising JavaScript memory leak in Meteor’s live HTML template rendering system. The fix will be in the 0.6.5 release (in its final stages of QA right now). I searched the web for variations on javascript closure memory leak and came up with nothing relevant, so it seemed like this is a relatively little-known issue in the JavaScript context. (Most of what
関数式 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
Google JavaScript Style Guide 和訳 — Google JavaScript Style Guide 和訳 v0.1 documentation
この和訳について¶ この文章は Google JavaScript Style Guide を非公式に和訳したものです. 内容の正確性は保証しません. ライセンスは原文と同じく CC-By 3.0 とします. フィードバックは Issue への登録 , あるいは Kosei Moriyama (@cou929 または cou929 at gmail.com) へ直接お願いします. この和訳のリポジトリは こちら です.
delete演算子についての覚え書き - Qiita
1. delete演算子の特徴 文ではなく演算子（式中で使える） 削除できるのは"オブジェクトのプロパティ"だけ 変数や関数、組み込みプロパティを削除することはできない 参照先のデータ自体は削除されない 2. delete演算子で削除できるのはオブジェクトのプロパティ オブジェクトのプロパティだけを削除することができる var my_obj = {}; my_obj.a = "test 3"; delete my_obj.a; my_obj.a; // undefined my_obj.b = function() { return "test 4"; }; delete my_obj.b; my_obj.b(); // Error!! var x = "test 1"; delete x; // false, 削除できない x; // "test 1" function y() { re
How JavaScript works: memory management + how to handle 4 common memory leaks
A few weeks ago we started a series aimed at digging deeper into JavaScript and how it actually works: we thought that by knowing the building blocks of JavaScript and how they come to play together you’ll be able to write better code and apps. The first post of the series focused on providing an overview of the engine, the runtime, and the call stack. Thе second post examined closely the internal
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
What is the JVM / heap / stack equivalent in JavaScript? - Stack Overflow
Understanding Scope and Context in JavaScript | Ryan Morr
アロー関数式 - JavaScript | MDN
Javascript delete a function