覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
JS NICE: Statistical renaming, Type inference and Deobfuscation
Welcome to JSNice — we make even obfuscated JavaScript code readable. We will rename variables and parameters to names that we learn from thousands of open source projects. Furthermore, often we are also able to guess or infer type annotations. Try JSNice on your JavaScript code to see how it works! Override the names suggested by JSNice (by enabling "interactive renames" in settings). Click to le
フロントエンドへの複雑化について、一つの視点 - mizchi's blog
これらの件 最近のフロントエンドへの違和感 - nobkzのブログ 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。 前提 去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。 僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。 僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記
春からはじめるモダンJavaScript / ES2015 - Qiita
春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点となるバージョンであり、またES5から飛躍的に仕様が増えたバージョンであるからです。 簡単に(雑な)歴史を紹介します。 ブレンダン・アイクによってNetScapeに実装/搭載された古の時代〜IE6 (1996~2005) ES3: 一時はシェア7割を誇ったレ
JavaScript初級者から中級者になろう — uhyohyo.net
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
Prottのテストを支える3つの施策（power-assert導入 & Protected branches & CI高速化） - エンジニアをリングする
この記事はGoodpatchのエンジニアがお送りするGoodpatch Advent Calendar 2015の1日目の記事です！ 1日目は最近Prottチームでおこなったテスト推進施策について書いてみようと思います！ 私はProttというプロトタイピングツールの開発を担当しているのですが、Prottには今までサーバーサイドのコードにしか自動テストがありませんでした。 変化のサイクルが速く長期的な運用になる自社サービスは常にコードの形を変えていく必要がありますが、自動テストがないと気軽なリファクタリングをしていくことが難しくなってしまいます。 今回はテスト推進施策ということで、フロントエンド側のテスト環境構築とテストに関連する取り組みを行ったので、その内容をまとめたいと思います。 ポイントは以下の3点です！ フロントエンドのテスト環境を作る → Karma + mocha + power
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
ReactとCordovaで、Web/モバイルのハイブリットアプリを作った話 - うなの日記
ReactとCordovaを使って、ブラウザ向けのWebUI + Androidで動くスマホアプリ を提供するサービスを、一人で作ってみた話です。 サマリー 作ったもの 最大の課題:作業量 一人で作りきるために意識したこと 取り組み1: Cordovaを使って、Web UI/スマホアプリのコードを共通化する 取り組み2: レイヤードアーキテクチャを採用し、共有できるコードを最大化する 取り組み3: ユニットテストを書く まとめ 作ったもの jiji2.unageanu.net 自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんにFX自動取引を開始できる、システムトレードフレームワークです。 アルゴリズムの作成、バックテスト、リアル口座での自動取引まで、これ一つで可能。 取引アルゴリズムはRubyで記述。メール送信や取引タイミングのPush通知も、APIを呼び出すだけで実現できます。
型付きJavaScriptの将来についての最高のシナリオ - mizchi's blog
typescriptが独自AST捨ててEcma準拠して今のflowと同じTypeCheckerだけの存在になって、Babel が TypeScript の型アノテーション互換になり、ESNextで型アノテーションが仕様化されるのがフロントエンド界最良のシナリオ。そうならんだろうが— Dvorak対応型人類 (@mizchi) 2015, 10月 14 実際はFacebookとGoogleとMSのメンツが掛かっててややこしくなってる— Dvorak対応型人類 (@mizchi) 2015, 10月 14 babelのsebmck(18歳)がfacebookに入ったのは吉と出るかどうか 実際外部に依存しないならflowとtypescriptの両方のサブセットでどっちでも動くコードを書くのは難しくない。castとnullable が使えないが— Dvorak対応型人類 (@mizchi) 201
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section5 ～ES2015文法を覚えよう(前編)～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の5つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 このシリーズを通して、原則として厳密さよりも分かりやすさを優先するためこのようにします。予めご了承ください。 目次 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ Section2 ～CommonJSモジュールと仲良くなろう～ Section3 ～Browserifyをマスターしよう～ Se
ECMAScript6にシンボルができた理由
ECMAScript6 (ES6, ES2015) で導入された新機能の大半は、読めば便利さが想像くらいはできるけど、自分にとってしばらく訳がわからなかった新機能が「シンボル」（MDNのリファレンス）。これまで文字列だけで上手くやってきたJavaScriptに、急になぜこんなものが導入されたの？ イマイチ分からなかったので、調べたことのまとめ。 シンボルの簡単なおさらい 知ってる人は読み飛ばし推奨。詳しく見たい人は、こことかの他のページを参照。 ES6で導入された、 Symbol() で作成できる特殊な値。 Symbol() は、 typeof すると 'number' でも 'string' でも 'object' でもなくて 'symbol' となる、まったく新しいタイプのプリミティブ値を生成する。 一旦作ったシンボルは、それ自身とのみ等しくなる、ユニークなIDとして機能する。 ===
iPhone 6s の 3D Touch を Web ブラウザ上で使ってみよう（iOS 9 のモバイル Safari に対応）
iPhone 6s の 3D Touch を Web ブラウザ上で使ってみよう（iOS 9 のモバイル Safari に対応） 前回に引き続き、今回も 3D Touch ネタをお届けしようかと思います。 いくつかの無視できない新機能を試す為に、わざわざ iPhone 6s（ローズゴールド）を買った訳ですからね。 使い倒さなきゃ、もったいないってぇモンですよ！（貧乏人根性） ところで、iPhone 6s のサイズ感は、やっぱりいいですね。手の平に収まる感じは 4 インチ時代とあまり変わらないのに、ディスプレイは確実に大きくなっている。 対して、Plus はダメです。デカ過ぎます。6 Plus を 1 年使い続けましたが、とうとう大きさに慣れることはありませんでした。すげー邪魔くさかった。 6s に SIM を乗せ換えることができて、本当にホッとしています。 さてさて、そんな雑談はさておき、今
iOS 9 Mobile Safari was enabled force touch event - Qiita
iPhone 6s と force touch event iPhone 6s から ForceTouchEvent が利用可能になりました。 機能を体感できる 簡単なお絵かきデモ を作成しました。 iPhone 6s の Safari でアクセスし、指で画面をなぞってみてください。 Demo Code デモのコードはこのようになります。 <!DOCTYPE html><html><head><title>ForceTouch Event demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> html, body, ul { margin: 0; padding: 0; } canva
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; for (var i=0,len=arr.length; i<len; ++i) { var value = arr[i]; if (value > 5) { break; } console.log(value); } [runstant] Array.prototype.some 5 より大きかったら true を返す. するとそれ以降のループが止まるので forEach っぽく書けてかつ break っぽいことができます. var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.some(function(value) { if (value > 5) { return true; } console.log(value); });
![[JavaScript] ループ途中で抜ける処理は for(in break) ではなく some を使おう♪ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/79e86d9834c3b8962d2b080a44fb69c9522202c0/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFMyU4MyVBQiVFMyU4MyVCQyVFMyU4MyU5NyVFOSU4MCU5NCVFNCVCOCVBRCVFMyU4MSVBNyVFNiU4QSU5QyVFMyU4MSU5MSVFMyU4MiU4QiVFNSU4NyVBNiVFNyU5MCU4NiVFMyU4MSVBRiUyMGZvciUyOGluJTIwYnJlYWslMjklMjAlRTMlODElQTclRTMlODElQUYlRTMlODElQUElRTMlODElOEYlMjBzb21lJTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJThBJUUzJTgxJTg2JUUyJTk5JUFBJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz04YjY4Y2EyZjY4ZmVkNWFmMzE3Njc2ZmM4MTA0NzhjYQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcGhpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hNzMyODE2YjRmOTNiOTE5N2U1YjI1NGNlZGNmMGY1OA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D199f26470375c52d111a087603c8e0f1)
Proxy Hacking Protection - すなばいじり
はてなブログ向けに開発されたコピーサイト(プロキシハッキング、Google Proxy Hacking)対策スクリプトを一般的なサイトで利用できるようにした Proxy Hacking Protection の紹介となります。 Proxy Hacking Protection 機能と特徴 Webサイト上のコンテンツを複製されることによる検索順位低下を防止 優位性 動作条件 導入要件 インストール はてなブログ版 WordPress版の Proxy Hacking Protection サポート・免責事項 ライセンス等 資料・関連リンク ソースコード Proxy Hacking Protection CMS脆弱性を悪用されたbotや低価格ホスティングサービスによるWebプロキシ・スクレイピングによってコンテンツの複製が行われ、検索結果ではオリジナルのコンテンツよりも複製先ページのリンクが上位
Understanding delete — Perfection Kills
Theory Type of code Execution context Activation object / Variable object Property attributes Built-ins and DontDelete Undeclared assignments Firebug confusion Deleting variables via eval Browsers compliance Gecko DontDelete bug IE bugs Misconceptions `delete` and host objects ES5 strict mode Summary A couple of weeks ago, I had a chance to glance through Stoyan Stefanov’s Object-Oriented Javascri
2015年総まとめ、jQueryのプラグインとスクリプト100選
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - YuzuJS/setImmediate: A cross-browser implementation of the new setImmediate API.
