『Webフロントエンド ハイパフォーマンス チューニング』をざっと読んだ - ぱすたけ日記
Webフロントエンド ハイパフォーマンス チューニング 作者: 久保田光則出版社/メーカー: 技術評論社発売日: 2017/05/26メディア: 単行本（ソフトカバー）この商品を含むブログを見る が発売されていたので買って読んだ。 この辺のブラウザのパフォーマンスチューニングに関する分野は昨年から今年の春にかけての強い関心事でした*1。 昨年中は主に <canvas>を利用したお絵かきツールの話の作業において非常に知見がたまったので、今年の頭にかけて2つのスライドで知見を共有しました。 1つ目はブラウザをレンダリングエンジンの振る舞いという観点で理解をするというスライド。 知っておきたいブラウザについての基礎入門 // Speaker Deck 2つ目は↑で理解したレンダリングエンジンの振る舞いのフローに対して、どのような検証やアプローチをするとパフォーマンスに影響を与えることが出来るのか
You Don't Know JS 読書メモ [ 読書中、随時更新 ] - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? You Don't Know JS 読書メモ ※ このメモでは JavaScript のことを JS と書く。 YDKJS を読み始めた。 勉強しながら、自分の頭の混乱を整理するための完全な個人メモ。 間違っていること多々ありだから参考にしないように。 ただ、公開しながらメモを書くと自分自身がよりまともに整理が出来る気がするのであえて公開する。 このメモは本で書いて理解したことと、俺の過去の知識をつなげつつ、ごちゃ混ぜにして書いているので、すべてが本に書いてあることと思わないように。 すべて自分理解の為なので、あなたの為になると思って参
![You Don't Know JS 読書メモ [ 読書中、随時更新 ] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/466955f5fbbce8d65dea533cce158e468f8f49b5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzA3NTglMkZwcm9maWxlLWltYWdlcyUyRjE0NzM2ODU1NTA_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MzBkNGE1ODM5YzgwNjBhYzU5NzcwMzEzOTIyNjk4NTY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dde0f249fd8e385c7ecd98be648334150%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9WW91JTIwRG9uJTI3dCUyMEtub3clMjBKUyUyMCVFOCVBQSVBRCVFNiU5QiVCOCVFMyU4MyVBMSVFMyU4MyVBMiUyMCU1QiUyMCVFOCVBQSVBRCVFNiU5QiVCOCVFNCVCOCVBRCVFMyU4MCU4MSVFOSU5QSU4RiVFNiU5OSU4MiVFNiU5QiVCNCVFNiU5NiVCMCUyMCU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTcxZTllZGY0YWRiNTQzODUxZTMzZGE2MWZlMTIwODVl%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB0OW1kJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MTY5ZjIxYzUzOTA1YTY2ZTI5ZTM3NDllZjhmZmUyOGE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D1a410aa85fe1c7c6d4d137e1c549e8e0)
RMP エンジニア・ブートキャンプ 2017 - ようこそ web フロントエンドの世界へ
社内の2017新卒向けブートキャンプ ( 研修 ) にて使用したスライド資料ですが、せっかくなので一般公開します。
2017年度版 細かすぎて伝わらないJavaScriptの速度の話 - Qiita
概要 コードを書いていると誰もが気になってくる「どっちのほうがパフォーマンスに優れているの？」で、眠れない日々を過ごす人達のために、比較結果をまとめてみました。 実行環境 OS: macOS Sierra 10.12.5 Chrome: 58.0.3029.110 (64-bit) Safari: 10.1.1 計測方法 10 回実行した結果の平均値です。 比較 シングルクオート VS ダブルクオート コード start = () => { const retryCount = 1000000; const startTime = new Date(); for (let i = 0; i < retryCount; i = i + 1) { /* ダブルクオート const text = "abcde" + "fghij" + "klmno" + "pqrst" + "uvwxy" +
JSなんてもう怖くない！JavaScript/ES2015速習ガイド - Qiita
はじめに 非フロントエンジニアの方々にとって、JavaScriptは独特でとっつきにくい言語だと思います。最近Reactが流行っていますが、JavaScriptが分からなくて手を出せない人も結構いるのではないでしょうか。 この記事では、普段JavaScriptをあまり触らない人を対象に、モダンなライブラリ等をさわるのに必要なJavaScriptの設計・思想・文法を解説します。関数オブジェクトや関数スコープ、thisに関しては知っておかないとES2015でも確実に躓くので、あえて比重を高くして説明しています。 ※厳密ではない箇所があるかもしれませんが、ご容赦ください。 JavaScriptとは 歴史 1995年にNetscape社により開発され、当時流行していたJavaの商標を使って「JavaScript」と名付けられました。文法は比較的似ていますが、JavaとJavaScriptはインドと
V8 javascript engine for フロントエンドデベロッパー
V8 is Google's open source JavaScript engine that is used in Chrome and Node.js. It uses several optimization techniques like hidden classes, inline caching, and TurboFan to improve JavaScript performance. V8 first parses JavaScript into an AST, then compiles it into bytecode which is executed by the Ignition bytecode interpreter or optimized by TurboFan into machine code using techniques like hid
Webの未来は今。Polymer 2.0とWeb Components。Google I/O 2017 - Qiita
Googleが「Google I/O 2017」でW3C標準のWeb ComponentsベースのフレームワークPolymerの2.0のリリースを発表しました。 Polymer Keynote on Day 1の内容を速報します。 プロダクトマネージャーTaylor Savage 今年、SafariがWebコンポーネントをサポートしました。 これによって、10億以上のモバイルデバイスがWebコンポーネントをサポートすることになります。 PolymerはWebプラットフォームを未来に進めるために、Chromeチームと協働で進めてきました。 そして、PolymerはOSSのWebエコシステムと共に進んできました。 ReactやVueはWebに革新をもたらしました。 フレームワークは素晴らしいですが、プラットフォームだけで開発できないでしょうか。 Polymerは「プラットフォームを使おう」とい
JavaScript のもう一つの「関数名」 —— name プロパティ - Qiita
「関数名」と name プロパティ JavaScript において「関数名」あるいは「メソッド名」というと何を指すでしょうか。 関数オブジェクトを参照している変数名やプロパティ名を指すことが多いと思います。 しかし、もう一つ「関数の名前」と言える物として、関数オブジェクトの name プロパティがあります。 これは関数オブジェクトの生成時に決定される、文字列のプロパティです。 function foo() { // do something } let bar = foo let baz = foo let qux = [foo, foo] console.log( foo.name ) // 出力 -> "foo" console.log( bar.name ) // 出力 -> "foo" console.log( baz.name ) // 出力 -> "foo" console.l
2017年4月版 jsライブラリ環境作成 - Qiita
はじめに jsライブラリを作成するにあたりwebpack周りを調べたメモです。 webpackの記事はググれば山のように見つかるのですが、 webpackは少し前に触って以来で、いつの間にかwebpack2がリリースされ記述方法が若干変わっており、それまで参考にした記事はwebpack1の書き方だったり、入門者にはなかなか戸惑う点がありました。 というわけで、またそういったノイズ記事を増やしてしまうことについてご了承ください。 2017年4月時点の内容ですので、近い将来また変わってくると思います。 ゴール 今回、やりたいことは以下です。 jsはBabelでes2015ベースで書く jsはminifyさせる cssはSassで書いて、jsにバンドルさせる unitテストを書く lintを入れる 環境 OS: macOS v10.12.4 node: v6.10.2 npm: v4.6.1 サ
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome Chrome 59 でリリースされますChrome ブラウザをヘッドレス環境で実行する方法です。 基本的に Chrome なしで Chrome をご利用いただけます。Google が提供する最新のウェブ プラットフォーム機能をすべて使用可能 をコマンドラインに追加することもできます。 なぜこれが有用なのでしょうか ヘッドレス ブラウザは、自動化されたテストやサーバー環境に最適なツールです。 表示する UI シェルは不要です。たとえば、特定の環境に対する PDF を作成することも、ブラウザで URL がどのようにレンダリングされるのかを調べることもできます。 Headless（CLI）の起動 ヘッドレス モードを開始する最も簡単な方法は、Chrome バイナリを開くことです。 使用できます。Chrome 59 以降をインストールしている場合は、--headle
結局VanillaJSである。 - nobkzのブログ
anond.hatelabo.jp nida3001.hatenablog.com 上記のブログに刺激されて私もフロントエンドというかJavaScriptに対する思いを綴ったポエムをば。しかし、なんか書くのダルいので、大分大雑把にかくぞ。 さて、さっそく結論を述べよう。今のフレームワーク論争やらに対する解決策はVanillaJSを使うってことである。 フロントエンドSPAのフレームワークについて まず、今のほとんどのフレームワークが使えないってのはそのとおりである。その話してみよう。その理由は、「フロントエンド」 ってのは一括りにできないからである。「ハッカーと画家」のとある言葉をアレンジして言えば「フロントエンドはユーラシア大陸のようなものである」。フロントエンドが関わる範囲が大きすぎるのである。ヨーロッパもあればアジアもあれば中東もあるという感じである。 範囲が大きすぎて、フレームワー
いかにしてJavaScriptを教えるか - mizchi's blog
経緯 ドワンゴ様から恵贈頂いた。 高校生からはじめる プログラミング 作者: 吉村総一郎出版社/メーカー: KADOKAWA発売日: 2017/04/14メディア: 単行本この商品を含むブログを見る …読んでみたけど、HTML/CSS/JS の初歩的な部分を、初学者にやらせるとこうなる、という素朴な世界観で、CSSフレームワークもJSライブラリも出てこない。いや、出せと言ってるわけじゃない。理解せずにフレームワークを使う習慣がつくと、スクリプトキディ的な振る舞いによっていくし、教える側としても、変数が大きくなってコントロールできないのが問題だろう。 じゃあ基礎を抑えたとして、この先どう教えるといいんだろうな、というのは、たしかに自分も前から考えてはいて、それを書いてみる。 この文章のターゲット JavaScriptを教える人、またはポインタがあれば自学できる中級者以上 追記: すべての初学
Sinon.jsでspy,stub,mockを使う - 30歳からのプログラミング
Sinon.jsというライブラリを利用することで、テストダブルを用いたテストを書くことが出来る。 テストを書く際、そのテストが依存している特定の処理を書き換えることで、テストが書きやすくなるケースがある。 APIを叩いたり、データベースと接続したりする処理などが、それにあたる。 これらは環境を用意するのが面倒であること多く、こういった処理があるとテストが書きにくい。 そこで、そういった面倒な処理を別のオブジェクトで置き換えてしまう。こうすることでテストが書きやすくなる。 この、面倒な処理を置き換えるためのオブジェクトが、テストダブルである。 テストダブルにはいくつか種類があり、代表的なのがspy,stub,mockの3つ。 以下、それぞれの使い方を見ていく。テストフレームワークにはmochaを使っている。 spy いきなりだが、spyは、上記の「テストダブル」の定義からは少し外れている気が
もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識
DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般的なDOM操作をする方法について説明します。具体的には以下のとおりです。 DOMの取得と変更 クラスと属性の変更 イベントのリッスン アニメーション 記事の最後に、どのようなプロジェクトにも使える独自の超軽量DOMライブラリーの作り方を説明します。記事の最後までに、素のJavaScriptによるDOM操作は決して高度な技術ではないこと、多くのjQueryメソッドとまったく同じ機能が実はネイティブAPIにもあることが理解できるはずです。 それでは始めます。 DOM操作：DOMの取得 この記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
async await の使い方 - Qiita
npmから乗り換えてわかったYarnの4つのメリット
Hello, MobX!
簡単！ JavaScriptで自動UIテスト (NodeJS, Selenium Webdriver, WebdriverIO, mocha, gulp) - Qiita
https://qiita.com/Dr_ASA/items/e63c39f78f3743848e38