Node.jsのテストがらみで(ぱっと)目に付いたパッケージ - Qiita
Node.jsのテストがらみで(ぱっと)目に付いたパッケージ TDD/BDDとまではいきませんが、以下の様なテストを出来るようなテスト手法を探りたい。。という思いから、今回はテスト関連のモジュールを調査し、とりあえずのとっかかりとして、利用するテスト環境を探し出すことを目的としています。 Node.jsで動く 書いたコードのテストが出来る テストタイミングは、任意及び定期的など。。 テストコードは簡潔で、扱いやすい奴で。。 一応、トレンドには乗っておきたい。 尚、本ページの情報は、Web知識の浅い、Node.jsの扉を叩いている程度のレベルの私が、半日程度(2015.06.16時点)、ググった情報です。従って、誤りや、ずれてるところも多々あると思います。また、得た情報は基本、googleより検索し、引用したものが主です。(出来る限り引用元を記載しましたが漏れているのもあります) まとめ 理
jsでTDD！MochaとChaiとsinon.js入門 - lxyuma BLOG
※この記事は社内勉強会向けの資料の下書きです。書きなぐりの下書きで見直すと最後の方の文書がヤバいので、いつか書き直します。読み辛い所は申し訳ないです。 概要 TDD テスト自動化とTDDを整理 TDDとBDDの違い Test Framework in javascript QUnit/jasmine/mochaについて、違いやメリデメを知る mocha 基本的な書き方 アサーションライブラリのメリデメを整理する chai 記述形式の違い整理 基本文法 sinonjs spy stubs mock TDD Test Driven Development テスト駆動開発 by ケントベック 特徴 xUnit系/BDD系のテストフレームワーク使う テストするコードも実装 テストファースト 実装の後にテストするのではなく、テストを先に書いて実装する サイクル Red(失敗) => Green(通過
React+Reduxでreducerのテスト - Qiita
概要 reduxでreducerのテストをしたく、以下の様な記事を書いた。 React+ReduxのAction、Reducerを個別にテストする - Qiita モックしたデータをstore.dispatchするという方法をとっていたが、これも、reducer実行終了時まで待つ必要があるため、タイミングを担保するのが難しい。そこで、別の方針でテストすることにした。 方針 reduxのドキュメントを参考にすると、dispatchをせず、直接reducer関数を実行している。同じように実装することにした。 Writing Tests | Redux // createReducerは以下の様なutilメソッドを用意しておく // export function createReducer (initialState, reducerMap) { // return (state = init
React+ReduxのコンポーネントをKarma+Jasmineでユニットテストする - Qiita
function increment() { return { type : COUNTER_INCREMENT }; } export class Counter extends React.Component { static propTypes = { dispatch: React.PropTypes.func.isRequired, counter: React.PropTypes.number, } constructor() { super(); } render() { return ( <div className='container text-center'> <h1>Sample Counter</h1> <h2>{this.props.counter}</h2> <button onClick={this.props.dispatch(increment)}> I
共有設定でらくらく ESLint - Qiita
ESLint はデフォルトでは何も警告してくれず、しかも膨大な設定項目があるために使い始めが大変です。 ところで、ESLint は共有設定という仕組みを持っていて、誰でも "自分の設定" を共有することができます。 そして、使いはじめる人は共有された設定を使って簡単に ESLint を使い始めることができます。 共有設定の一部が気に入らなかった場合には、(設定ファイルを書いて) そこだけ自分好みに上書きできます。 この記事では、有名な共有設定を紹介していきます。 eslint-config-eslint 設定ファイル ES5 Only. ESLint 自身が使っている設定です。 インデント幅が 4 だったり、文字列がダブルクォーテーションだったりとオーナーの趣味が出ています。 私は好きです。
BabelでES2015の自動コンパイル環境を作る（Browserify / gulp / Grunt / webpack）
今年2015年6月にJavaScriptの標準仕様であるECMAScript 2015（ES2015 / ES6）が正式にリリースされ、フロントエンド界隈ではかなり盛り上がってきています。先日のHTML5とか勉強会も『ECMAScript 2015 & 2016特集』というテーマで開催されていました。そうした盛り上がりの中で思うのは、「すでにBabelありきで話が進められている」ということです。Babelも最初のコミットからやっと1年経ったくらいです。まだまだ使い方についてわからない方もいると思うので、ここでまとめておこうと思います。特に使用頻度が高いファイル状態を監視し自動でコンパイルする環境構築方法となります。 はじめに（ES2015とは）今年2015年6月に、これまで長々と仕様の策定が進められてきたECMAScriptの6thエディションがECMAScript2015（ES2015）
サイでもわかる？！ ESLint 導入 - |> Weeeeeeb
Node.js学園祭2015に行ってからESLintを導入したかった やっぱりJavaScriptって柔軟で優秀だから色んな書き方できるじゃないですか。 関数宣言の中に関数宣言やったり(うっ) 上記は関係ないんですけど、 私は自分のJavaScriptのコードに不安を感じることがあって Lintの導入は考えていました。 JavaScriptですから潮流が激しくて色々なツールがありますよね。 JSHint, JSLint, JSCS, そして ESLint。 ありすぎんのよ…どれなんだよと… 環境の構築のこだわりすぎて 本当に作りたいものがおろそかになる気がして Lintは考えることをやめていました（泣） こんな私の火付け役、それが表題のNode.js学園祭2015です。 Node.js学園祭2015「フロントエンドに秩序を取り戻す方法」を聞いて、 駄目だこいつ（私のコード）… 早くなんとか
React.js meetup #3 - 資料一覧 - connpass
「React.js meetup #3」の資料一覧です。
Flux Utilsのドキュメント日本語訳
JavaScriptの世界を反映するかのようにFluxのフレームワークも案の定玉石混合の状態となっています。Reduxが一つ頭抜け出したかなと言った状況ですが、Reduxはすでにロックインしてるので、Facebookのflux/utilsを使うのがいいよという話もあったりします。自分もいまだにどのフレームワークを使ったらいいのか決めあぐねているので、flux/utilsの勉強のためにFlux Utilsのドキュメントを日本語に訳してみることにしました。 はじめに まずはじめにこの記事は以下のFlux Utilsのドキュメントを日本語に翻訳したものとなります。日本語と一緒に原文も載せてありますが、フォントを小さくしていて読みにくいです。なので英文で読みたい方は本家にてどうぞ。 Flux | Application Architecture for Building User Interfac
はてなブックマーク検索を作りながらFlux Utilsについて学ぶ
facebook/flux 2.1.0からFlux UtilsというStoreなどの実装が含まれるようになりました。 今回Flux Utilsを使って、指定したアカウントのはてなブックマークを検索するウェブアプリを書いてみました。 azu/hatebu-mydata-search azu.github.io/hatebu-mydata-search/ mydataのAPIがCORS対応してないのでJSONProxyを挟んでます。(なのでブックマークデータが多いアカウント名は避けたほうが…) これを作ってみてFlux Utilsについて思ったことを書いていきます。 Flux Utilsの紹介ページに、Flux Utilsの解説が書かれています。 簡単にまとめると以下の4つのクラスがFlux Utilsとして提供されています。 Store ベースとなるクラス ReduceStore Store
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
React + TypeScript + Webpackの最小構成 - diary
このエントリは古い情報です。 今は typescript の代わりに flowtype も使えそうです。また、ブートストラップとしては create-react-app が提供されており、ここからカスタマイズしたほうが便利だと思います。 github.com 前回 ishikuro.hateblo.jp の続き。前回のリポジトリを元にTypeScript版を作ってみたい: GitHub - ishikuro/thinking-in-react-webpack-minimum at typescript 最終的なファイルツリー . ├── dist │ ├── bundle.js │ └── index.html ├── package.json ├── README.md ├── src │ ├── app.tsx │ ├── tsd.json │ └── typing
JSX と TypeScript の混合 Flux または悪魔合体
JSX + TypeScript の悪魔合体 ギョーム的に気持ちになったので JSX + TypeScript をはじめました。 導入にあたってチーム内への説明を兼ねたブログ。AltJSに対して ES でいいじゃん派ですが、自分の型需要に対して 現状の Flowtype が辛みしかないのでやむをえず。 動機 紆余曲折あって結局 React を使うことにした React Component には JSX with Babel を使いたい（手書きは無理だ） UI 以外のロジックを持ったモジュールは型の恩恵に預かりたい Flowtype つらい TypeScript かー UI 周りは JSX で、その他の堅いロジックは TypeScript で書けばいいのでは？ 共存だ！！ メリットがあるのかも不明瞭ですが、分からないからこそ試してみようという感じです。JSX と TypeScript の境界
React.js Best Practices for 2016 | @RisingStack
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. 2015 was the year of React with tons of new releases and developer conferences dedicated to the topic all over the world. For a detailed list of the most important milestones of last year, check out our React in 2015 wrap up. The most interesting question for 2016: How should we write an application and
jspmとSystemJSを利用したモジュール管理 - 俺、サービス売って家買うんだ
さて、RequireJS、Browserify、webpackなど様々なクライアントサイドの依存管理ツールが出ていますが今日はjspmについて紹介します。 jspmとは jspmとはSystemJSを利用したクライアントサイドのモジュールローダーのためのパッケージ管理システムです。不明な言葉が連続しますね、そもそものSystemJSとは何なのでしょうか？ jspm SystemJSとは SystemJSとはES6 modules,AMD,CommonJS,global scriptなどこれまでに登場してきた様々なJavaScriptのモジュール管理方法を普遍的な形で利用できるモジュールローダーです。また、Traceur CompilerとBabelなどのtranspilerを利用して使うことが前提とされています。 SystemJSは、Browserifyとは異なりビルドを必要とせず開発中は
WEB+DB PRESS Vol.87のECMAScript 6特集を読んだ(+TypeScript) - dackdive's blog
特集1の「今すぐ活かす！ 最新JavaScript 進化した仕様ECMAScript 6をまるごと解説」を読んでES6（またはES2015）について勉強している。 WEB+DB PRESS Vol.87 作者:佐藤 鉄平,小林 明大,石村 真吾,坂上 卓史,上原 誠,鳥居 英,佐藤 歩,泉水 翔吾,うさみ けんた,伊藤 直也,高橋 侑久,佐藤 太一,hayajo,橋本 翔,西尾 泰和,中島 聡,はまちや2技術評論社Amazon ES6 については既に web 上でたくさんの記事があったりスライドが上がってたりするが、 書籍として出版されているものは要点がコンパクトに分かりやすくまとまっており、これから学ぼうとする人にはこの特集記事が一番いい資料だと思う。 個人的には ES6 で導入される新しい文法が「今の（ES5 の文法での）JavaScript だとどう書くか」と対比されているため それ
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
Spirit - The animation tool for the web
SpiritThe ultimate tool to create high-quality animations directly in the browser. Important Notice: I want to extend my deepest gratitude to everyone who has supported Spirit over the years. After careful consideration, I have made the difficult decision to discontinue Spirit as a service. Read more ...
SCRIPTY#4 〜フロントエンド紳士・淑女のための勉強会〜 #scripty04
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、定期的に開催しているフロントエンド技術に関する勉強会、SCRIPTYをヤフーで開催しました。 http://scripty.connpass.com/event/22663/ 本勉強会で発表されたセッションのスライドを発表者のコメントとともに公開いたします！ 発表セッションまとめ 1.Single-page application Zero to One （React/Redux/ES6/Firebase） 発表者：山中 悠 バックエンド専門だったエンジニアが、最新のフロントエンド技術を使ってシングルページアプリケーション（SPA）を作るまでに四苦八苦した話と、実際に作ったサンプルアプリケーションを発表しました。 SPA開発
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - xtermjs/xterm.js: A terminal for the web
