async/await 入門（JavaScript） - Qiita
はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
JavaScriptの { } を理解する - Qiita
結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
ヘッドレス Chrome スタートガイド | Blog | Chrome for Developers
要約 ヘッドレス Chrome は Chrome 59 でリリースされています。これは、ヘッドレス環境で Chrome ブラウザを実行する方法です。つまり、Chrome なしで Chrome を実行することになります。Chromium と Blink レンダリング エンジンが提供する最新のウェブ プラットフォームのすべての機能をコマンドラインにもたらします。 なぜこれが有用なのでしょうか。 ヘッドレス ブラウザは、可視 UI シェルが必要ない自動テストやサーバー環境に最適なツールです。たとえば、実際のウェブページに対してテストを実行したり、その PDF を作成したり、ブラウザが URL をレンダリングする方法を確認したりできます。 ヘッドレスの開始（CLI） ヘッドレス モードを開始する最も簡単な方法は、コマンドラインから Chrome バイナリを開くことです。Chrome 59 以降がイ
【小ネタ】Chromeのローカルセキュリティポリシーの回避 | DevelopersIO
こんにちは。ともだです。 Chromeではセキュリティの関係でローカルファイルからローカルファイルの読み込みができなくなっています。(Chrome5からの仕様ですね) ひとまずサーバ立てずにhtmlをローカルで動作確認しようとした事がある人なら結構おなじみの現象かと思います。 これを回避するには、Chromeの起動オプションに「–allow-file-access-from-files」を付ければ良いわけですが、winの場合にはアプリのショートカットアイコンのコンテキストメニューからプロパティを開いてショートカットタブのリンク先にchrome.exeに続いて「–allow-file-access-from-files」を入力します。このショートカットを使えばローカルファイルからローカルファイルの読み込みができます。 で、macの場合にどうするか迷う人が結構いるみたいなのでメモ書きしておきま
結婚式二次会用に Node.js x ブラウザでタイピング対決アプリを作ってみた - 凹みTips
はじめに 先月、友人の結婚式の二次会でタイピング対決をしたいとの企画を、幹事の友人から受けました。面白かった要件としては、 二人の顔を 2 台のカメラで映したい タイピングしてる様子をリアルタイムで見たい というものです。これをサーバは Node.js で、クライアントはブラウザで作成しました。エントリ書いてもいいよ、と許可を頂いたので、今後似たような依頼を受けた方のご参考になるように、エッセンス部分をご紹介します。 （追記：2013/11/20） 幹事さんも記事を公開されました： http://tjun.org/blog/2013/11/wedding-typing/ やったこと ホスト PC 側で新郎新婦それぞれの PC からのログインを待ち受けします。イイ感じに○で切り抜いてくれるような PNG をイラレで作っておきました。 それぞれの PC からログインしてもらいます。 ログインし
するするさせたい：サイボウズ採用情報のアニメーション（その1） - fragmentary
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div
JavaScriptでさまざまなソートアルゴリズム | 110chang.com
ソートアルゴリズムの視覚化って面白いですよね。 見るたびに一度書いてみたいと思っていました。 15のソートアルゴリズムを可視化した動画が気持ち(・∀・)ｲｲ!! （自分で書いてから改めて動画を見ると、なるほど感慨深いものがあります） ダンスで覚えるソートアルゴリズム いきなり視覚化は難しそうですし、まずは書くだけ書いてみよう、ということで。主に他言語での実装を参考にして書いてみました。というか可能なものはロジックそのまま移植しています。再帰は苦手です。 実行できるサンプル 入力欄に数値を入れて実行すると、入力値を最大としてかぶりのない整数をランダムに並べた配列を作成し（10000と入力すれば0〜10000をシャッフルした配列を生成）、ソートを行います。それぞれのアルゴリズムで、実行時間の計測（単位はミリ秒[ms]）と確認のためArray#sortの実行結果との照合を行い、「黒い画面」風に表
Qiitaのストックとはてなブックマークの追加を同時に実行するChromeエクステンション - Qiita
Qiitaにストックするか、はてなブックマークに追加するか迷ったあげく、どっちにも保存するという、面倒なことをすることがあったりするので、この作業めいたことを簡略化するため、Chromeのエクステンションを書いてみました。↓ Github:high5/qbta このエクステンションは, Qiitaのストックボタンを押すと、はてなのブックマークレットをたちあげ、Qiitaの対象の投稿記事についたタグをはてぶコメント欄にタグとして挿入して、追加ボタンをクリックするというのを自動的にやってくれます。はてブのほうの追加ボタンが自動でクリックされるかはオプションで選択できるようになってます。Qiitaのタグの他にコメントを残したいような人はこのオプションをオフにしてください。
Chromeのオリジナル拡張機能を開発しよう（ソースコードあり） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Chromeの拡張機能とは？ Chromeの拡張機能は実質的にはただの圧縮したフォルダです。そして、そのフォルダの中身もただのHTMLやCSS、JSファイルです。 つまり、拡張機能の作り方はWebページのそれとは大差ないということですね。 拡張機能にしか提供されていない豊富なChromeのネイティブのAPI群（Chrome.* API）を利用できるところが拡張の魅力です！ 一般公開目的ではなく、普段の業務効率化目的でも十分な利用価値があると思うので、まだの方はぜひ一度触ってみてください。 拡張機能の種類 拡張機能の種類は大きく分けて3つあります。 Browser actions Page actions Override Pages 1つずつ見ていきましょう。 Browser actions ツールバーの右側に小さなアイコンを表示させるタイプの拡張機能です。一番頻繁に見かけるのがこのタイプ
Service Worker で作る 最新モバイル ウェブ エクスペリエンス - Google Developers Summit まとめ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
#javascript: console lesser known features.
We’ve all used the console tools for age (Thank you Firebug) ; but most of us use only use the basic features like console.log() or console.error(). However, the console API is really powerful and offers a lot of very interesting features. Always keep in mind that the console API is not standard and is not going to be standardized. There is absolutely no guarantee that these features will be avail
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
GitHubで最近更新されていないプロジェクトを簡単に見分けるChrome Extentionつくった · さよならインターネット
June 9, 2014 GitHub Chrome Web Store ファイルが半年以上更新されていなければオレンジに、 1年以上更新されていなければ赤に色が変わるようになる。 比較的実利的だと思うのでご利用ください。 土曜日酒飲みながらダラダラとChrome Extention Hackathonみたいなのを @soh335の家で@shiyakeitaと3人でやっていた。JavaScriptとか全然書いたことなくて インターネット調べながら適当な感じで書いて動いたから、@damele0nにレビューしてもらったら すごい雑な感じだったのにめちゃくちゃカチっとレビューしてもらえた。 よくわからないけどカヤックにいる人はもちろんだけど いたことのある人たちもものをつくるみたいな習慣あって面白い。
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mizchi/frontend-boilerplate
GitHub - ragingwind/generator-chrome-extension: Scaffold out a Chrome extension
飲食店向け予約トラブル防止アプリ「トレテル」を提供開始 | 株式会社トレタ
