Flowtype導入のための指針・実際の運用について - Qiita
このドキュメントの目的 自分は趣味でFlowをずっと使っていて、またプロダクションでも今まで3プロジェクトほどにFlowを導入した。その知見。 「Flow は便利そうだけど、怖い」「いれてみたら色々ハマったからクソ」「わからん、なにもかも…」という人に対し、自分がいままで出くわしたパターンや、聞かれた疑問について、メジャーな解法を提示する。 なぜFlowを導入するか Babel から段階的に導入することが出来る React の JSX にも推論を入れることができる 部分的に適用できる ASTがES準拠であり、ESLintなどがツールが使える(TSは独自AST) それ自身ランタイムに全く影響はないので落とすのも簡単 実際にはReactと一緒に使うのが、エコシステムもユースケースも揃っていて、一番効果を発揮するだろう。それか、小さい npm モジュールを自分で書くとき。 型のメリット/デメリッ
レンダリングを妨げる JavaScript を削除する | PageSpeed Insights | Google for Developers
レンダリングを妨げる JavaScript を削除する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このルールは、HTML ページのスクロールせずに見える範囲に、レンダリングをブロックする外部 JavaScript ファイルへの参照が含まれていることを PageSpeed Insights が検出した場合にトリガーされます。 概要 ブラウザでは、ページを表示する前に HTML マークアップを解析して DOM ツリーを構築する必要があります。 この処理の途中でスクリプトが出現するたびに、パーサーは HTML の解析を停止してスクリプトを実行してから、解析を続行する必要があります。外部スクリプトの場合はリソースがダウンロードされるのを待つ必要もありますが、その際リソースのダウンロードによってネットワーク ラウンド トリップが発生し、ページが最初に表示される
Promise Cancellation Is Dead — Long Live Promise Cancellation!
Promise Cancellation Is Dead — Long Live Promise Cancellation! Not very long ago Domenic Denicola (worth a follow, a very smart guy) withdrew his proposal for promise cancellation from the TC39. A lot of people might think that means that promise cancellation isn’t coming to JavaScript. Those people would be right, if you couldn’t already cancel a promise via very similar means to what was propose
JavaScript でも型チェックと契約による設計で安定した開発をする - Qiita
チーム開発をやっていると特定の処理を呼び出す際にインターフェイスを明示することがとても重要になってきます。言い換えると使い方がきちんと示されていることが最低ラインということです。ドキュメントは実際の処理と乖離しますし、各人がソースコードの処理を追わなければならないというのはチームでやっている意味がありません。 ところが JavaScript にはそういった仕組みが存在しません。どういった処理をするのかを表すための関数名は指定できますが、 JavaScript では関数を任意の名前の変数に代入できるので実はあまり役に立ちません。 といった状況にあった JavaScript ですが、昨今のツールの登場によって事情が変わってきました。 JavaScript でもインターフェイスを明示しながら開発するにはどうすればいいかを要素技術と一緒に書いていきます。
happypack/README.md at master · amireh/happypack
HappyPack makes initial webpack builds faster by transforming files in parallel. Maintenance mode notice My interest in the project is fading away mainly because I'm not using JavaScript as much as I was in the past. Additionally, Webpack's native performance is improving and (I hope) it will soon make this plugin unnecessary. See the FAQ entry about Webpack 4 and thread-loader. Contributions are
React のソースコードを読んでみよう！ - マルシテイア
こんにちは id:amagitakayosi です。 株式会社はてなで主にフロントエンド開発を担当しています。 この記事では React 本体のコードを読んでみます！！ この記事は Reactアドベントカレンダー 2016 の7日目の記事です。 昨日は yutaszk さんで「react-router v4 でFlux アプリケーションをHot Module Replacement する」でした。 目次 はじめに (Kyoto.js の宣伝) 準備 ディレクトリ構造 monorepo Haste Gulp と Grunt コードリーディング react ReactComponent react-dom ReactMount ReactReconciler ReactCompositeComponent ReactDOMComponent まとめ おわりに はじめに (Kyoto.js の宣
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
この記事は、はてなエンジニアアドベントカレンダー2016の5日目の記事です。 こんにちは、はてなでアプリケーションエンジニアをしている id:shiba_yu36 です。先日、buildersconにおいて、現在所属しているプロジェクトでJavaScriptのユニットテストを導入した知見について、「一から始めるJavaScriptユニットテスト」というタイトルで発表しました。 speakerdeck.com この発表は、実際にJavaScriptのユニットテスト環境を作ってみると非常にハードルが高いと感じたので、そのハードルを少しでも下げられればという思いで、非常にシンプルな例で一から環境を作る例を紹介しました。アジェンダは次のとおりでした。 カクヨムのJS環境 JSのテストツールを整理する 通常の関数のユニットテスト DOM操作する機能のユニットテスト カクヨムのJS環境や、JSのテスト
今年のうちに知っておきたい！ES2017に入る5つの新仕様 - エンジニアをリングする
はいっ Goodpatch Advent Calendar 2016 5日目です！ 2016年もまもなく終わりますね。 あと半年もすればES2017のリリースですね！ というわけで先月Node学園祭でご紹介したES2017の新仕様をブログにおこしておさらいしてみようと思います！ ES2017に入る5つの新仕様 Object.values / Object.entries String padding Object.getOwnPropertyDescriptors Trailing commas in function parameter lists and calls Async Functions https://github.com/tc39/proposals/blob/master/finished-proposals.md 1. Object.values / Object.e
Turbolinks再考 - nisshieeのブログ
この記事はnisshiee.orgに移設しました。 自動でリダイレクトします。 この記事は、「Speee Advent Calendar 2016」の4日目です。 3日目は、@Kosaku_Hidaより、「Google Spread Sheetに記載した複数URLのPage Speed Insightsの点数をGoogle Apps Scriptで取得する方法*1」です。 今日は、Turbolinksを考え直してみます。 みなさん、Turbolinks好きですか？ Rails使ってる人には、結構嫌われてる印象ですが、いかがでしょう？ Railsエンジニアに嫌われるTurbolinksの図 なんで嫌われたかというと理由はいたってシンプルで、既存の資産が動かなくなったからです。 という、なかなか悲しい歴史を持ったTurbolinksですが、改めて考え直してみようということで、まずはTurbol
ReactでTDD（テスト駆動開発）を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD
最小限の設定のTDD手法を使い、「何をテストすべきか？」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出
Capybaraを使って、Rails+JavaScriptの非同期な統合テストを書く | POSTD
上からも分かるように、ページの読み込みが完了する前に、テストでリンク探しを始めたのにも関わらず、Capybaraは優雅にインタラクションを処理しています。 しかし、Capybaraがこれらの非同期の問題を処理してくれるにもかかわらず、成功したり失敗したりする一貫性のないテストにいとも簡単に陥ってしまうのはなぜなのでしょう。 競合状態の数を最小限に抑えて、Capybara APIを正しく使用するには、いくつかのコツがあります。 最初に適合するエレメントを見つける 悪い例 first(".active").click まだページに.active要素がない場合、firstはnilを返し、クリックは失敗します。 良い例 # 完全に一致するものが欲しい場合 find(".active").click # ただ単に最初の要素がほしいだけの場合 find(".active", match: :first
Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita
こんにちは Rails5.1に向けて、DHHのjqueryを依存から外す発言を発端にフロントエンド周りが急激に発展しているので、簡単にですがまとめてみました。 各issue, PRの詳細には踏み込みませんが、知見に溢れているので読んでみるの推奨です。 間違い、足りないものがあったら編集リクエストお願いします。 jQuery依存を無くす話が出る rails(issue): Drop jQuery as a dependency jquery-ujsはjqueryに依存しないようにする jquery-ujs: Drop jQuery as a dependency "jquery"-ujsじゃなくなったので名前変更 rails-ujs誕生 実際にRailsからjquery依存がなくなる rails: Drop jQuery as a dependency jsライブラリを入れる方法がnpmパッ
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
(function(){ var self = this; $("button").click(function(){ // }) })() // 古いコードはglobalに定義された何か SomeLib.prototype.foo = function(){ // } 下記のような特徴があります。 ライブラリ系（jQueryやjQuery.functionなど）は別途読み込み common.jsのようなよくある共通ファイルが存在 1ページ中で、scriptはファイル単位で複数読み込み 原始的なJavaScript配信状態（Sprocketsのようなビルドプロセスとは全く無縁な状態） jQuery以外に、ライブラリ・フレームワークなどは基本入っていない 色々とJavaScript初心者殺しな記法が多い (function(){})()を利用したglobal汚染回避 self = thisの
くだらないAPIなんていらないよ – 2016年のウェブスクレイピング事情 | POSTD
ソーシャルメディアのAPIとそのレート制限は、あまり気分のよいものではありません。特にInstagram。あんな制限つきAPIを欲しがる人がいったいどこにいるんでしょうね？ 最近のサイトは、スクレイピングやデータマイニングの試みを阻止するのがうまくなってきました。AngelListはPhantomJSすら検出してしまいます（今のところ、他のサイトでそこまでの例は見ていません）。でも、ブラウザ経由での正確なアクションを自動化できたとしたら、サイト側はそれをブロックできるでしょうか？ 並行性を考えたり、さんざん苦労して用意した結果として得られるものを考えたりすると、Seleniumなんて最悪です。あれは、私たちが「スクレイピング」と聞いて思い浮かべるようなことをするためには作られていません。しかし、賢く作り込まれた今どきのサイトを相手にして、インターネットからデータを掘り当てるための信頼できる
IE で 「'(‘ がありません。」といわれた時の対応
ほんと IE きらい。 まぁそれは別にして、IE でハマる時って時間の割に内容がへちょい。 エラー文言を google 先生に訪ねても見つからなかったので同じよう 症状になった人の助けになれればとの意味を込めての備忘録。 どちかというと本人が再度しそうな、、、 (ry var hoge = { fuga: 1, foo: 2}; for each (var i in ['fuga', 'foo']) { alert(hoge[i]); } これが IE だと動かなくて「'(‘がありません」となる。 var hoge = { fuga: 1, foo: 2}; alert(hoge.fuga); alert(hoge.foo); } 結局別に書いて対応したけど、いけそうな感じなんだけどなー ちなみに in は凄い便利。書かないと忘れるのでメモ。 こんな感じでキーがあるかの確認もできたり。 i
scrapy-splashを使ってJavaScript利用ページを簡単スクレイピング - amacbee's blog
これは，クローラー／Webスクレイピング Advent Calendar 2016の1日目の記事です． JavaScriptを利用したページをスクレイピングするためには，スクリプトを実行し，ページを適切にレンダリングする必要があります． 本記事では，そのようなケースに便利なPythonライブラリscrapy-splashを紹介します． 前置き ScrapyやSplashを既にご存知の方は読み飛ばして下さい． Scrapyとは？ Scrapyとは，Python製のクローリング・スクレイピングフレームワークです．フレームワークというだけあって，Scrapyにはクローリング・スクレイピングに便利なオプションがあらかじめ用意されています． Scrapyに用意されている便利なオプション例 サイトクローリング間隔を設定 robots.txtを解釈したクローリングを自動的に実行可能 Scrapyを利用す
WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する - Qiita
はじめに フロントエンドへスプラトゥーンを決めるために、Rails プロジェクト内で JavaScript を楽に良い感じに分離する方法を考えてみました。 先人たちが様々な方法を提示してくださっていましたが、設定が大掛かりだったり、何種類かのツールを活用したりと、自分にはどうもハードルが高かったため、より簡単な方法を模索しました。 TL;DR Initial commit で、この記事でこれから行う設定をコミットしています。 necojackarc-sandbox/rails_with_webpack 特徴 Sprockets の良い所はそのまま活用 導入ツールは実質 WebPack のみ 設定項目が少なく簡単 おそらくほぼメンテナンスフリー 概要 以下のような流れで、JavaScript のコーディング、ビルド、配信を行います。 frontendディレクトリ以下で JavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
axiosを乗りこなす機能についての知見集 - Qiita
バンドルされたJSファイルのサイズを分析する - Qiita
Bad Points.md
