ESLint2からESLint3に上げて関連プラグインもアップデートした話 - Wondershake 開発者ブログ
こんにちは。フロントエンドエンジニアの佐々木です。 先日、ESLintまわりを最新にアップデートしたのですが、結構修正することが多かったので備忘録も兼ねて残しておきます。 ちょっと古いですが、ESLintの導入に関してはこちらの記事でご紹介しました。 engineering.wondershake.com ESLint3へのアップデート ESLint導入時には下記のバージョンを使っていました。 "eslint": "^2.9.0", "eslint-config-airbnb": "^9.0.1", "eslint-plugin-import": "^1.12.0", "eslint-plugin-jsx-a11y": "^1.2.0", "eslint-plugin-react": "^5.1.1", "babel-eslint": "^6.0.4", それぞれ最新のバージョンを調べてイ
JavaScript sleep Function
The infamous sleep, or delay, function within any language is much debated. Some will say that there should always be a signal or callback to fire a given functionality, others will argue that sometimes an arbitrary moment of delay is useful. I say that to each their own and one rule can never dictate anything in this industry. Writing a sleep function is simple and made even more usable with Ja
Numeral.js
Numeral.js A javascript library for formatting and manipulating numbers. Use it In the Browser <script src="numeral.min.js"></script> or include from cdnjs.com <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> In Node.js npm install numeral var numeral = require('numeral'); Create Create an instance of a numeral. Numeral takes numbers or strings that it trys
Moment.js | Parse, validate, manipulate, and display dates in javascript.
Moment.js 2.30.1 Parse, validate, manipulate, and display dates and times in JavaScript. Install npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (deprecated) Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format
2017/1 ぼくがかんがえるさいこうのフロントエンド - return 1;
異論は認める あとcssとテスト周りが弱いので誰か教えて欲しい 早く作りたい（メンテとかなくて、早く作る人向け） 前提 server sideのassets機構に乗っかる（railsのasset pipelineみたいな） コンポーネント化とか考えない E2Eテストとか考えない 採用技術 Vanilla JS babel babel-presets-es2015 babel-presets-es2016 jQuery cssフレームワークは好きなの使えば良いと思う eslint csslint そこまで凝りたくは無いんだけど、ややこしくしたくない（早く作らなきゃいけないんだけどメンテも発生する人向け） 前提 server sideのview機構に乗っかる（railsのasset pipelineみたいな） コンポーネント化とか考えない 採用技術 Vanilla JS babel babel
フロントエンドのテストに真面目に向き合う - Qiita
最新版=>フロントエンドのテストについて考える 背景 フロントエンドのテストは、テストランナー、フレームワーク、Node.js、ブラウザ、Selenium、WebDriverなど、登場人物が多い。また、UIと密接に絡むのも特徴である。 これまで社内では、テスト種別によって、それぞれ解決したい事柄が明示的に示されていなかった。それぞれのテスト種別にどんな意味があり、何を目的とするかを明確にすることで、機能に対して、どのようなテストを実装すればよいのか共通認識を持っておくために、この記事を作成した。 フロントエンドのテスト4象限 今回この記事で紹介するテストは、Unit Testing、UI Testing、E2E Testing、Integration Testingの4つがあるが、それぞれ、上のグラフのような関係になっている。これらを考えることで、バランスの取れたテスト環境を確立したい。ポ
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
ESLint 最初の一歩
We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201
(Babel 5における)ES6のモジュールを解説してみた - uehaj's blog
警告 以下でのモジュールの説明はトランスパイラであるBabel 5,6で動作を確認した振舞いについての記述です。2015年11月現時点で、ECMAScriptのモジュール仕様策定範囲は、本来の全体範囲のまだ一部であるとのことです。その状況でのBabelの実装は、良く言えば先行的、悪く言えば将来そのままである保証はなく、現時点でも他のES2015をサポートする処理系との間での相互運用の保証はありません。また、現時点でBabelのモジュール機能を使うこと自体にリスクがあるという意見もあります。CommonJS側からBabelが生成したモジュールをCommon JSモジュールとして読み込もうとしたときの互換の問題として、Babel5で可能だったことがBabel6では利用不可になる、といったことも起きているようです。 そこらへんを含めて解説されているこちらの資料が参考になります。 (2015/11
今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
Nightwatch.jsをE2Eテストフレームワークとして実プロジェクトに適用する時のtipsまとめ｜デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
小飼です。 現在開発準備中のプロジェクトのE2EテストフレームワークとしてNightwatch.jsを採用しました。 そこで本稿では、実際のプロジェクトにNightwatch.jsを導入してみるにあたって必要になった知識をまとめます。 Nightwatchとは? Nightwatch.js is an easy to use Node.js based End-to-End (E2E) testing solution for browser based apps and websites. It uses the powerful Selenium WebDriver API to perform commands and assertions on DOM elements. Nightwach.jsはNode.jsベースのE2E(End-to-End)テストフレームワークです。 テス
CircleCI + Nightwatch.js で自動E2Eテストをする - Qiita
プルリクをマージしてもサイトがちゃんと見える・動く事は保証したい, でも逐一手動で確かめるのはイヤだ！ → E2Eテストを書いてさらに自動化させておこう! すること Nightwatch.jsを利用してE2Eテストを行う. 上記をCircleCIで自動実行させる. 1.Nightwatch.jsを利用したE2Eテスト 必要パッケージインストール npm install --save-dev nightwatch babel-register selenium-server-standalone-jar chromedriver { "src_folders" : ["test/e2e/specs"], "output_folder" : "test/reports/", "custom_commands_path" : "", "custom_assertions_path" : "",
Nightwatch.jsのE2Eテストをgulpベースのプロジェクトで行う - Qiita
Nightwatch.jsを使ったテストの作成と、gulpから実行する際に工夫した点を紹介します。 Nightwatch.jsとは Nightwatch.jsは、End-to-Endのブラウザテストを自動化するフレームワークです。 フレームワーク自体はNode.js上で動き、テストの実行はSelenium WebDriver APIと連携することで様々なブラウザでのテストを可能にしています。 Node.js製のE2Eテストフレームワークとしては、ユニットテストも含んだ統合型のIntern、AngularJSとの親和性が高いProtractorと並び、人気のあるフレームワークです。（2015年9月時点） 公式サイト : http://nightwatchjs.org/ GitHub : https://github.com/nightwatchjs/nightwatch gulpベースのプロ
2017-05-03のJS: Headless Chrome/FirefoxとPhantomJS/SlimerJS、ES modules
JSer.info #329 - Chrome 59βがリリースされました。 Chromium Blog: Chrome 59 Beta: Headless Chromium, native notifications on macOS, and service worker navigation preload Service Workerのnavigation preloadsのサポート、MediaError.messageのサポート、Image Capture APIの試験的サポートなどが行われています。 また、Headless Chromiumが追加されています。 詳しくは次の記事で解説されていますが、PhantomJSのようにXvfbなどが不要なChromeを動かすことができるモードです。 Getting Started with Headless Chrome | Web
MozillaのスクレイピングフレームワークFathomを試してみる - たけぞう瀕死ブログ
こちらのOSDNの記事で知ったのですが、MozillaでFathomというJavaScript用のスクレイピングフレームワークを開発しているようです。仕事でクローラーを作ったりしていたこともあり、面白そうだと思ったので軽く調べてみました。 mag.osdn.jp 以下のGitHubリポジトリで開発されています。GitHub Pagesに詳しいドキュメントもあります。 github.com OSDNの記事で触れられている開発者のErik Rose氏のブログエントリはこちら。 hacks.mozilla.org ドキュメントやErikさんのブログエントリなどをざっと眺めてみたところ、それほど複雑なものではなく、ある程度曖昧なルールとスコアリングを定義しておき、最もスコアの高い要素の選択するというのが基本的なコンセプトのようです。 なにはともあれ試してみます。まずは適当なディレクトリを掘り、np
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Object.assign vs lodash _.assign
GitHub - vuejs/eslint-plugin-vue: Official ESLint plugin for Vue.js
GitHub - webpack-contrib/webpack-hot-middleware: Webpack hot reloading you can attach to your own server
GitHub - webpack/webpack-dev-middleware: A development middleware for webpack
'describe' is not defined no-undef error · Issue #56 · tlvince/eslint-plugin-jasmine