Sprockets管理のJavaScriptを強引にユニットテスト - Money Forward Developers Blog
フロントエンドの石井と申します。 好きなゲームの種類はハクスラとローグライクです。 最近は Crypt of the NecroDancer に挫折して、Tales of Maj'Eyal へ河岸を変えました。 さて、弊社は Web アプリケーションのフレームワークとして主に Rails を採用しており、そのためブラウザで実行する JavaScript コードは、基本的には Sprokets （実際には sprockets-rails という Rails 用のインターフェース）を介してビルドされています。 この環境で、せめて各画面共通で使うモジュールにはユニットテストを書きたいと思い、Node.js 製ツール群の力を借りてそれを可能にしてみた、という話です。 ゴール Rails 4 デフォルト設定である、Sprockets と CoffeeScript による JS のビルドチェーンは変更
JSerのための ブラウザコードリーディング （テスト編）
Meguro.es x Gotanda.js #1 in Drecom https://meguroes.connpass.com/event/49543/
async await に書き換えて、Promiseと 同期による例外の区別でハマった - Qiita
// async function の中 try { load().then(data => { console.log(data) }).catch(e => { // ... }) } catch (e) { // ... 例外処理 } わかりやすく簡単にしている。実際にはもっと複雑なコードだった。Promise にすれば try と catch を一本化して綺麗にできるやん！と思っていた。最初は。 書き換えた // async function の中 try { const data = await load() console.log(data) } catch (e) { // ... 例外処理 } catch が一個減ってリファクタできたーと思っていた。確かに異なる例外処理のブロックが減ってしまっていたが、どうせ何かしらのデッドコードだろと思って消してしまった。 注: 意味的に
"デバッグしてください", "パフォーマンスチューニングしてもらってもいいですか?" とJavaScriptが難読化された状態のページのURLを渡してくる人に、伝えなきゃならない事がある - latest log
webpackを使ったサイト、極端にデバッグしずらい (外部ライブラリが eval(文字列) の形で埋め込まれる)ので、はっきり言って大キライだったりする— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 見知らぬコードが minifyされ、さらに eval されているのをデバッグしろとか、暴力にも等しい要求なんだよね。そりゃキライになるよ— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 「環境Aの言語Bで書かれたコードを言語Fに変換した、環境C/D/Eで動くと思うのでデバッグしろ」というのも極端にデバッグしづらいという理由から避けるようにしている。 デバッガビリティに問題がある環境は、心がすり減るのでイヤ(時給1万円なら頑張る— コラーゲンたっぷりさん (@uupaa) 2017年4月19日 js minifyあるある A「パフォーマンスに問題があるので
Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG
こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
僕的なRiotプロジェクト構成のお話 - Qiita
Riot.js Advent Calendar 2016 の19日目です。 今まで書いた人と似通ってたりしますが、よろしくお願いします。 <- 前日 @clown0082 さん: karma + mocha + Riot.jsでのテスト はじめの第一歩 -> 翌日 @potato4d さん: Riot.jsを通じて気軽に翻訳とOSSへの貢献を体験してみよう はじめに 今回は、僕的なriotのプロジェクト構成についてディレクトリ構成を晒しながらざっくり説明します。 SPAしつつ、クローラー対策としてSSR(サーバーサイドレンダリング)してます。 ふんわり話す程度なのでリファレンスっていうより読み物と思っていっただけたらと。 今回説明すること ディレクトリ構成 それぞれのディレクトリが何してるかの解説 使ってるライブラリ(ちょっとだけ) 今回説明しないこと ソースコード解説 さっそく さっそく
emscripten で SIMD.js を使う - Qiita
コンパイル時とリンク時に emcc -s SIMD する。 SIMD.js が使われるケースは3種類ある。 clang デフォルトの LLVM autovectorization が働いて自動的に SIMD 化する GCC 拡張の SIMD Vector Extensions で明示的に使う x86 の Streaming SIMD Extensions 命令を使う。詳細は 大本営 を読むべし opencv など sse サポートしているものをを asm.js にする場合は 3 が使えそう SIMD.js が有効なブラウザを用意する -s SIMD で JS 出力すると SIMD.js の polyfill が付いてくる。 これをそのまま使うと遅くなる。 2017年上半期現在標準で SIMD が有効なブラウザはない。 chrome の場合起動フラグでV8の起動フラグを渡せば有効になる。 c
小〜中規模サイトのフロントエンド・コーディング規約 CSS・JavaScript編 - Qiita
2021/3/16 初めて記事を書いてから３年以上経過してしまったので、 内容を見直ししました。 関係者が10名以下の小〜中規模案件の開発・保守が多い弊社のCSS・JavaScript規約（にしたい）です。 長くなってしまったコーディング規約もようやく最後です。 ↓関連 環境構成編 HTML編 CSS、JavaScript は数年で書き方が変わってしまうので、 定期的に規約の見直しができると理想ですね。 小〜中規模サイトのフロントエンド・コーディング規約 CSS編 ディレクトリ構成 CSSに関するファイルの一般的な例を示します。 ルート ├ src ... 作業ディレクトリ │ ├ scss │ │ ├ lib ... 外部ライブラリなど │ │ ├ sprite ... spritesmith などで生成したファイル │ │ ├ foundation (base) ... 変数や mix
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
javascriptプログラマのレベル10 : tech.kayac.com - KAYAC engineers' blog
週末料理をしていて足を切ってしまいました。agoです。 以前Perlは書いていたんですが、その頃以下の記事を読んで非常に感銘を受けました。 Perlプログラマのレベル10 - Perlプログラミング救命病棟より - naoyaのはてなダイアリー 当時あまりコミュニティとのつきあいがなかったので、「自分のスキルの絶対位置」、「次のレベルへ行くために必要なもの」を知ることで非常に安心感を感じた記憶があります。 いま確認したところ、「JavaScriptプログラマのレベル10」はないようなので書いてみました。 Perlプログラマ Schemeプログラマ Rubyプログラマ （本家に直接リンクできるURLが無かったため、参照ページへリンクしています） haskellプログラマ 堕落したCプログラマ HTML知識レベル プログラマレベル 企業法務 JavaScriptの業務スキルレベル 判別表 （５
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
Promise が resolve されてるかチェックする - Humanity
ってこれでいいんじゃないか？ と遅延した電車内でふと気が付いた。 コードは全部スマホで打ったので syntax error 等あるかもしれませんが… 追記（2017/2/15 21:50）：案の定 delay() 関数が間違ってたので修正。あと例を追記。 追記（2017/2/19 21:50）ブクマされてるみたいなのでさらに追記。 チェックするまでの間にタイムラグがあるので、コードの一番下の方でも示したように、 delay(1) (1ms) の Promise はチェックするまでに resolve されてしまうため resolved と判定されることに注意。 なので本当はこういうコードが必要ない書き方にするのが一番いいんだろうと思う。 ただ以前 resolve されてるか判定したいことがあったような？とふと思い出してやってみたという程度なので、参考程度に。 追記（2017/2/19 22:
みんな大好き Airbnb JS スタイルを Jenkins + SonarQube で CI 運用に組み込む - Qiita
概要 React 含む Javascript の開発現場では、Airbnb スタイルは人気が高いですね。 そこで、SonarQube で Airbnb スタイルを適用し、CI に組み込むことを考えます。 難しいポイントは、SonarQube では Javascript はデフォルト(無料) で使えるのですが、以下の理由で Sonar 社が考えるオリジナルスタイル(Sonar way)が適用されてしまうことにあります。 http://stackoverflow.com/questions/32519522/sonarqube-integrate-eslint-for-javascript-in-sonarqube 悩んでいたところ、偶然、二日前(2017/02/02) に sleroy という方が SonarQube の ESLint プラグインをリリースしてくれていました！ Thank y
部分文字列とRegExpの領域の冒険 | POSTD
パート1：小さな部分文字列はでき”ない” 数週間前、Dart SDKに関して、 String.substring のパフォーマンスが非常に悪い というバグが報告されました。以下は、その問題と一緒に提出されたマイクロベンチマークの中心部分です。 // JavaScript version function test(s){ console.time("substring(js)"); while (s.length > 1) { s = s.substring(1); } console.timeEnd("substring(js)"); } // Dart version test(s) { final stopwatch = new Stopwatch()..start(); while (s.length > 1) { s = s.substring(1); } print("subs
Demystifying webpack2 tree shaking - from scratch
webpack2 に最近移行しました。 その時の知見とせっかくなので tree shaking が実際に中でやってることを追ってみたので紹介。 webpack2 移行時の注意 基本的にはほぼここに書いてあるとおり。 Migrating from v1 to v2 かいつまんで説明すると、configファイルの書き方がガラッと変わって、 module.loaders が module.rules になったり、 resolve.root がなくなって resolve.modules に変わったり。この辺の書き換えは割りとすんなりいくはず。 辛いのはpostcss周りのオプションの渡し方辺り。これまではconfigのrootにpostcssプロパティを用意してそこに記述できたが、その記述はできなくなり、 webpack.LoaderOptionsPlugin 経由で渡すか postcss.con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rescript-lang/rescript-compiler: The compiler for ReScript.
GitHub - queckezz/fmt-obj: Stringifies any javascript object in your console for CLI inspection
karmaを使ったSPA向けE2Eテスト技法
GitHub - FancyGrid/FancyTrack: FancyTrack - JavaScript Error Tracking library from @FancyGrid
