もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
JS イベントまとめ - Qiita
##参照 パーフェクトJavaScript ##イベントドリブンプログラミング あるイベントに対して、どのような処理をするのかを登録する ブラウザがイベントを起こすたびにその登録した処理が実行される 登録する処理のことを「イベントハンドラ」「イベントリスナ」と呼ぶ ##イベント例 ある要素をクリックする ある要素の上にマウスを動かす キーボードで特定のキーを押す ページが読み込まれたり、別のページに遷移する時に起こるイベント ##DOM Level2 モダンブラウザは、DOM Level2に準拠 IE8は'独自のイベントモデル'を実装している。APIとして別物なので注意が必要 ##古い書き方 「イベントハンドラ」 1つの要素/イベントについて1つしか設定できない ####「古い書き方1」HTML要素の属性に指定する (直書き)
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
Javascriptで正規分布の実装まとめ（乱数、累積分布関数など）
Javascriptで正規分布の 乱数発生（rnorm）、確率密度関数（dnorm）、累積分布関数（pnorm）、累積分布の逆関数（qnorm） を実装する（逆関数は参照で）。すべて標準正規分布を想定。 Javascriptに限らず使えるアルゴリズムだが、日本語でまとまっている情報があまりないのと、ブラウザ上でA/Bテストなど有意性をみる検定などできたら面白いということでJSでやってみる。 正規乱数の生成（rnorm） 1行でBox-Muller法で。 Box-Muller法とは？
knockout.jsのclick bindingとcss bindingにおける注意点 - Team Duet公式ブログ
knockout.jsのdata bindingについての注意点を記述します。 以下の様なHTMLコードがあります。 <ul data-bind="foreach:palette_array"> <li data-bind="click:$parent.select_color.bind($parent),css:$parent.palette_selected($data)"></li>//（式１） </ul>対応するJavaScriptのコードは以下の通りです。 dotframe.prototype.select_color=function(color){ var index=this.palette_array.indexOf(color); this.palette_seled_index(index); }; dotframe.prototype.palette_selecte
Vue.jsのmixinを利用して肥大化したViewModelをリファクタリングする - 俺、サービス売って家買うんだ
今回はVue.jsのmixin機能を利用して肥大化したViewModelをリファクタリングするお話です。 肥大化してしまった例 Vue.jsを利用して画面全体をVMとして扱ことはよくあると思います。具体的には画面全体を囲むHTML要素のidををコンストラクタに渡すオブジェクトのelに設定することです。 下記の例では#js-appをelとして設定しています。 <div id="js-app" class="app"> <div>野菜検索</div> <div> <input v-model="vegetableName" placeholder="野菜"> </div> <button type="button" @click="searchVegetable">野菜を探す</button> <hr> <div>果物検索</div> <div> <input v-model="fruitsN
ECMAScript 6 compatibility table
V8 SpiderMonkey JavaScriptCore Chakra Carakan KJS Other ⬤ Minor difference (1 point) ⬤ Small feature (2 points) ⬤ Medium feature (4 points) ⬤ Large feature (8 points) Compilers/polyfills Desktop browsers Servers/runtimes Mobile Feature name Current browser ES6 Trans- piler Traceur Babel 6 + core-js 2 Babel 7 + core-js 2 Babel 7 + core-js 3 Closure 2020.09 Closure 2021.08 Closure 2021.09 Closure 20
ES6構文の ... (Spread operator)と { prop } (shorthand property names)について - yutaponのブログ
昨日twitter見てたらこんなのが流れていまして Concatenating arrays in ES6: arr = [...a, ...b, ...c]; // ES6 arr = a.concat(b, c); // ES5 http://t.co/4scyTyhmIo— Axel Rauschmayer (@rauschma) 2015, 6月 3 何だこの書き方〜と気になったので調べてみた。 ... (Spread operator) この三点リーダーのことですが、よく...argsと書いているコードを見かけます。 あまり深く考えずに、argumentsが取得できるのかなと思ってたのですが、...のふるまいを知るとなるほどと思いました。 ...arr で arr(Array型)の要素をイテレートする 困ったときのMDNを見ると、こんなサンプルがあります。 こちらはES5 syn
Array.prototype.slice.call(arguments)とは - console.lealog();
Array.prototype.slice.call(arguments); っていう、いかにもJavaScriptを使いこなしている風なこの書き方。 もちろん最初はまったく意味がわからんかったです。 そして次に、意味はわかっても、使い道がわからんかったです。 けど最近、使い道がやっと見えてきました。 というわけで、その過程をメモ。 arguments ざっくり引数のこと。 var func1 = function(name, arg1, arg2) { console.log(arguments); // ["Test", 100, 200] }; var func2 = function(name) { console.log(arguments); // ["Test2", true, function] }; func1('Test', 100, 200); func2('Test
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
ES6 だとか ES7 だとか ES2015 だとか ES2016 ってつまり何という自分用記事まとめ - BattleProgrammerShibata
ここらへん斜め読みしてるとかなーーーり混乱してきて時代に置いていかれてたので、自分用にいくつかの記事まとめをしてみました。先日「頃合いの良い」出来事もありましたので。 ES6 とか ES2015 ってなんやねん、同じちゃうの 昨年サイボウズの中の人が書かれた記事が分かりやすいです。 blog.cybozu.io 要約すると、 「ES2015」が正式名称だぞ 仕様策定途中からそうなったもんだから「ES6」という呼び方も浸透しちゃったぞ いわゆる「ES7」にあたるものは「ES2016」と呼ぶぞ 今後「ES7」っていうとマサカリが飛んでくるので気をつけましょう。 ブラウザの対応状況は ここで確認できます。 compatibility table http://kangax.github.io/compat-table/es6/ それぞれ 「ES5」、「ES6」、そして next という区分けがな
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section2 ～CommonJSモジュールと仲良くなろう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の2つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
さようならbind、こんにちはArrow Functions
僕は基本的にChromeアプリやChrome拡張機能を作っていることが多いので、Chromeがサポートしている範囲内でコードを書くことが多い。Chromeは他のブラウザに比べて最新技術の取り込みが迅速に行われている印象が強い。ECMAScript 2015についても、たぶん他のブラウザよりもサポート範囲が広いはず。 というわけで、ECMAScript 2015(ES6とも言う)でコードを書くことが多くなった。特に気に入っているのは、Arrow Functionsとclass。どちらも非常に強力で、ES5までの「なんでこんなコード書かなあかんねん」と思ってたことがいくつかなくなって、コーディングがまた楽しくなった。 Arrow Functions 単純に「関数作りたいだけで”function”って8文字も打つの面倒だよね」ってJavaScriptをDISってた人はかなり多かったはず。これが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://gist.github.com/Phoenixmatrix/c1f552d5ed919def5994.js
Refreshing list after ajax call with Knockout JS
How to use knockout to iterate over an object (not array)
Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg
https://www.kryogenix.org/code/browser/searchhi/searchhi.js